RSSの話が出たついでに、RSSボタンをスタイルシートで作ってみた・
参考にしたのは、以前書いた記事「スタイルシートで角の丸いリンクボタンを作って見よう」。
RSSのリンクボタンHTML部分
<p class="RSS"><a title="更新情報をRSSで知りたい人はこちら" href="https://freesoft.0hs.org/feed" target="_blank"><span style="color: #ffffff;">Rss</span></a></p>
【title="更新情報をRSSで知りたい人はこちら"】のテキスト部分は、マウスを載せたとき表示される説明文。
【href="https://freesoft.0hs.org/feed】の「https://freesoft.0hs.org/feed」はうちのブログのRSSアドレス。
【target="_blank"】は「リンクを別窓（ウィンドウ）で開く」という意味。
ボタンの文字は<span style="color: カラーコード;"></span>で指定している。
RSSのリンクボタンスタイルシート部分
.RSS {
width:100px;
height:50px;
font-size:40px;
line-height:30px;
text-align:center;
background:#f63;
border:solid 2px #f63;
border-radius:15px;
text-decoration: none;
padding: 10px;margin: 10px 0px;
}
【margin: 10px 0px;】は、上下の外側の隙間は10px、左右は0pxという指定になっている。
margin外側の隙間。
padding:は売り側の隙間を指定する。
paddingやmarginは一括で指定することも別々に指定することもできる。
paddingとmarginの一括指定
paddingでもmarginでも一括しての方法は同じだ。
- 値を1つ指定した場合： 指定した値が[上下左右]。
- 値を2つ指定した場合： 記述した順に[上下][左右]。
- 値を3つ指定した場合： 記述した順に[上][左右][下]。
- 値を4つ指定した場合： 記述した順に[上][右][下][左]。
といったような指定の形になる。
とりあえずウィジェットのサイドバー一番上のRSSボタンを配置してみた。
独自ドメインになったので、サーバーを移転しても今度はRSSアドレスの変更はないので安心して登録してね。
コメント