1more!

+1 Lifestyle Blog. Apple、ガジェット、旅 etc. 趣味を多方面に愉しむブログ。

【Ï】ブログ改造記7:CSSとの格闘の末にようやく・・・

スポンサーリンク

Code
photo credit: Riebart via photopin cc

どうも!Hayabusa(@hayabusa_823z)です。
気がついたら、ブログのカスタマイズを綴った「ブログ改造記」も7回目に。 今回はPC版のサイトにおいて変更を多めに行いました。

今回の変更内容

CSSとの格闘の末、かなり苦戦しましたが、カスタマイズも手慣れてきたような気がします。 苦手と思わずに果敢に挑戦するのが良いなと感じましたね(笑) 今回は、Chrome拡張機能Web Diveloperにかなり助けられました。 オンにするとCSSのID・Classをオーバーレイ表示してくれるので、どこの要素を編集すれば良いのかが一目で分かって便利です。

ヘッダメニューのサイズ・デザインの再調整

2回ほど前の記事で、テンプレートのカスタマイズに苦戦してヘッダメニューを暫定的に黒く細いデザインに設定していましたが、次第に編集に慣れてきたので、再び太めでフラットデザインに近いものに戻しました。  

 記事タイトル・日付のデザイン変更

日付のサイズを調整し、記事タイトルにシャドウを設定してみました。 メリハリがついて多少見やすくなったと思います。

サイドバーの項目見出しのデザイン変更

シンプルなものから、CSSの吹き出しを使用したデザインに変更しました。
デザインは、以下のサイトのサンプルを参考にさせて頂きました。

コピペで出来るCSS3で見出しスタイリング | 3streamer blog

サイドバーの見出しのデザインを変更したことで、印象がポップになったように感じます。

追記

  • 2014/3/1
    スマートフォン版ページのヘッダ色、背景色を変更
  • 同ページ記事一覧の文字色、装飾をPC版と統一
  • PC版ページの箇条書きのスタイルを▷の形に変更