RSSボタンをスタイルシートで作ってみたよ

 RSSの話が出たついでに、RSSボタンをスタイルシートで作ってみた・

 参考にしたのは、以前書いた記事「スタイルシートで角の丸いリンクボタンを作って見よう」。

RSSのリンクボタンHTML部分

<p class="RSS"><a title="更新情報をRSSで知りたい人はこちら" href="http://freesoft.0hs.org/feed" target="_blank"><span style="color: #ffffff;">Rss</span></a></p>

 【title="更新情報をRSSで知りたい人はこちら"】のテキスト部分は、マウスを載せたとき表示される説明文。

 【href="http://freesoft.0hs.org/feed】の「http://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アドレスの変更はないので安心して登録してね。

おすすめ記事

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

Bloggerのテンプレートの文字の色やフォントを変えてみよう
WordPressのTOPとアーカイブページで記事と記事の間に広告を入れる方法
FC2ブログの記事をワードプレスにインポート
FTPクライアントソフト「WinSCP」インストールとサーバー接続設定
似た文章やHTML、スタイルシートなどの違いを比較するソフト
FC2ブログのdescriptionカスタマイズ・記事内容の要約を検索結果に表示して検索ユーザーに記事内容をアピールする
URLの形式は?ディレクトリ形式?サブドメイン形式
一番初めにWordPressの自動整形機能を止めるプラグインを入れよう
WordPressにFC2ブログの画像を取り込む
webセーフカラー216・短縮コード一覧
独自ドメイン収得・ムームードメイン
WordPressの投稿の編集のテキストモード「code」は何?
テキストモードにクイックタグを追加-WordPress投稿の編集のカスタマイズ
FC2ブログのタイトルの下に文字を入れてみよう
Googleカスタム検索で自分のサイトへ戻るためのリンク設定をする

Menu

HOME

 TOP