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が確認できます。
同じ要領で、他の見出し部分も変更します。
関連記事の見出し #related_post .headline を変更する
関連記事の見出しは、/* related post*/ の #related_post .headline の部分です。
/* related post*/ #related_post { margin:20px; border:1px solid #ccc; background:#ffffff; } #related_post .headline { background:#eebbcb url(img/side/headline-heart1.png) no-repeat 4px 7px; color:#fff; font-size:14px; padding:0 32px; height:36px; line-height:36px; margin:0; }
サイドウィジェットの見出し .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; }
私は、画像を画像編集ソフトで色を変更し、さらにハート画像を追加したものを作りました。
そして、作った画像をアップロードして、画像ファイルの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で同様の箇所を変更してくださいね。
コメント
- トラックバックは利用できません。
- コメント (2)
コメント失礼します。
スマートフォンの場合でも同様に変更すれば可能でしょうか?
マンバさん、こんばんは。
コメントありがとうございます。
そうですね。スマートフォンの場合は、
style_sp.cssを同じように変更または書き足してくださいね。