AN(tcd014)でウィジェットなどのタイトルの背景をデザインする

ANで使われている見出しの背景は、とてもシンプルなものです。

デフォルトの見出し

もうちょっとオシャレにしたいよ～という場合は、CSSを変更しましょう。

ちなみに、h2やh3といった「見出しタグ」のカスタマイズについては、AN(tcd014)で見出しタグをデザインするをご覧ください。

私は、背景色を変更してワンポイントにハート画像をいれています。

変更後の見出し

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

変更したい箇所の「headline」に注目

変更するCSSファイルは、style_pc.cssです。スマホも変更する場合は、style_sp.cssを変更する必要があります。

見出し部分のほとんどは、「headline」というclassが指定されています。

最近の記事の見出し #index_post_list を変更する

TOPページの「最近の記事」という見出し部分は、/* — index — */　の中にある /* recent post */ の部分、#index_post_list .headline1です。

変更前

/* recent post */
#index_post_list { border:1px solid #ccc; background:#f9f9f9; margin:0 0 15px 0; }
#index_post_list .headline1 { background:#b9b9b9; color:#fff; font-size:14px; padding:0 18px; height:36px; line-height:36px; margin:0; }

background:#b9b9b9 と書かれているのが、デフォルトの見出しの背景色グレーです。私は、それをピンクに変更して、さらに background:url(○○.png) でハートの画像を挿入しています。

ただ画像を挿入しただけでは、画像と見出しのテキストが重なってしまうので、左のpaddingを18pxから32pxに変更しました。

変更後

/* recent post */
#index_post_list { border:1px solid #ccc; background:#ffffff; margin:0 0 15px 0; }
#index_post_list .headline1 { background:#eebbcb url(img/side/headline-heart1.png) no-repeat 4px 7px; color:#fff; font-size:14px; padding:0 18px 0 32px; height:36px; line-height:36px; margin:0; }

url(○○.png) の部分は、画像をアップロードした場所のURLを書いて下さいね。今回は、ワンポイント画像なので、繰り返し表示されないように no-repeat を指定しています。

画像をメディアで追加した場合、メディアの編集画面でURLが確認できます。

同じ要領で、他の見出し部分も変更します。

サイドウィジェットの見出し .side_widget .side_headline を変更する

サイドウィジェットの見出しは、/* — side content — */ の中の .side_widget .side_headline の部分です。フッター以外のウィジェット(詳細記事ページの左側、トップページ左側、トップページ中央下部、アーカイブページ左側)は、全部これで変わります。

/* ----------------------------------------------------------------------
 side content
---------------------------------------------------------------------- */
.side_widget { margin:0 0 15px 0; padding:15px; font-size:11px; background:#f9f9f9; border:1px solid #ddd; }
.side_widget .side_headline { background:#b9b9b9; color:#fff; font-size:14px; padding:0 18px; height:36px; line-height:36px; margin:-15px -15px 15px; }

注意
side contentの部分には、.side_headline というCSSも書かれています。が、どこの部分のCSSを書いているのか分からない謎の1行です(汗)間違えてこの1行を変更しないようにしてくださいね。
headine1.gifという、アップロードされていない画像が使われていたり、line-heightが2つ書かれていたりと謎だらけなので、今のところスルーしていても大丈夫だと思われます(笑)

フッターウィジェットの見出し .footer_widget .footer_headline を変更する

フッターウィジェットの見出しは、/* — footer — */ の中の /* widget */ の .footer_widget .footer_headline の部分です。

/* widget */
#footer_widget { width:580px; float:right; font-size:12px;  }
.footer_widget { width:250px; float:left; margin:0 0 0 40px;  }
.footer_widget .footer_headline { color:#fff; background:#eebbcb url(img/side/headline-heart1.png) no-repeat 4px 7px; margin:0; font-size:13px; padding:0 32px; height:36px; line-height:36px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }

TOPページの右サイドバーの見出し .index_side_headline を変更する

TOPページのみに表示される右サイドバーのカテゴリ・アーカイブの部分は、ウィジェットと違って角丸の画像(headline.gif)が使われています。

変更するところは、/* right side content */ の .index_side_headline という部分です。

/* right side content */
.index_side_headline { background:url(img/side/headline.gif) no-repeat left top; color:#fff; font-size:14px; padding:0 18px; height:36px; line-height:36px; margin:0; }

私は、画像を画像編集ソフトで色を変更し、さらにハート画像を追加したものを作りました。

headlineの画像を変更

そして、作った画像をアップロードして、画像ファイルのURLを書き変えます。

/* right side content */
.index_side_headline { background:url(img/side/headline-archive.gif) no-repeat left top; color:#fff; font-size:14px; padding:0 30px; height:36px; line-height:36px; margin:0; }

私は、デフォルトの画像を修正しましたが、一からご自身で作られてもいいですね♪その際は、デフォルトの画像と同じサイズで作るといいと思います。

スマホでの表示も変更する場合は、style_sp.cssで同様の箇所を変更してくださいね。