Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】タグをボタン風に表示する

【Seesaaブログ新デザインシステム】タグをボタン風に表示する

Seesaaブログのタグをボタン風に表示する
■Seesaaブログのトップページや記事ページのタグを編集
■タグをボタンのように表示させる
■CSS「.meta .tag a」を編集  

少し細かいカスタマイズですが、気になったので編集します。
Seesaaブログでは記事にタグを設定すると、記事ページやトップページの日付の横にタグが表示されます。トップページだけではなく、いわゆる「記事ページではないページ」(カテゴリページやタグ一覧ページなど)も全部、「タグ」は文字にリンクが貼ってあるだけです。



現時点のテンプレート
タグのスタイル


この画像の赤い枠で囲んでいる部分が、タグです。
現時点ではただのリンク文字です。



例えば、トップページで記事を複数表示させる場合に「続きを読む」というリンク案内が表示されますが、私はこの「続きを読む」についてはデフォルトのまま何も編集していないので、ただのリンク文字です。
トップページでは上部にタグ、下部に「続きを読む」が表示されるので、リンクを貼られた文字が少し目立ちすぎな気がします。リンクに対するスタイルが濃いめの青色文字だし、下線を引くように設定しているのもあるんですが、ちょっとウザイ感じなんです。なので、タグをボタンにしてしまえばいいか、という判断です。



編集後のイメージ
編集後のタグのスタイル


こんな感じのボタンにしてしまいます。


ちなみに、トップページのタグと記事ページのタグには同じclassが使われているため、どちらか一方だけを編集するのは面倒です。タグをボタンにするだけなので深く考える必要はないし、同時に編集したいと思います。





記事ページやトップページのタグをボタンにする


今回はHTMLの編集はしません。CSSだけです。
タグ部分の設定はCSSに既に記述されていますので、そこに色々と追加していきます。



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「.meta .tag a」というclassを探します。


コピペするだけでいいので、「元コード」は紹介しません。(元コードでは「margin-right: 5px;」しか記述されていませんので紹介する必要すらないですね)
CSSの該当部分に下記「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。


<編集後>
/*** タグのスタイル ***/
.meta .tag a {
margin-right: 5px;
padding: 2px 4px 1px 4px;
text-decoration: none;
display: inline-block;
line-height: 1.2em;
border: 1px solid #BDCDCD;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
font-size: 94%;
background: #E2E2E2;
color: #5F5F5F;
}

.meta .tag a:hover{
color: #C0C0C0;
}


●「.meta .tag a」でボタンのように表示させる指示を出しています。マウスを乗せた時に変化があるように、「.meta .tag a:hover」を追加しました。

●ボタンのスタイルは好きなように変更してください。私は、ボタンを線で囲み、角丸にしました。背景色などはご自分のブログに合うように調整してください。



コード編集後のCSSと実際のページ


編集後のタグ部分のスタイルシート

編集後のタグのスタイル




次の記事の紹介

次の記事では、画像詳細ページのタイトル表記を「画像のタイトル」に変更する方法を説明します。
これは、以前カスタマイズしていた作業の続きというか、再編集みたいな内容の記事です。


【Seesaaブログ新デザインシステム】画像詳細ページのタイトル表記を変更する(2)
Seesaaブログでは、記事に掲載した画像をクリックすると、画像を紹介するページが開きます。このページのことを私は「画像詳細ページ」と呼んでいます。デフォルトのテンプレート「シンプルA. ホワイト 右カラム」では‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。