1more!

+1 Lifestyle Blog. 趣味を多方面に愉しむブログ。

【Ï】ブログ改造記5「CSSのカスタマイズって難しい」-幅調整と見出しとデザインと-

スポンサーリンク

Grid 960: Zapisi 5
photo credit: Aleksandar Urošević via photopin cc

どうも!Hayabusa(@hayabusa_823z)です。毎回不定期でお送りしている当ブログの改造備忘録です。第5回目は前回に引き続き、ブログの見た目にかかわるカスタマイズについて。

今回の変更内容

記事の表示幅の変更

今回はCSSの練習も兼ねて、テンプレートのカスタマイズに再び挑戦しています。
以前からブログ自体の幅と記事の表示幅が狭いなぁと感じていたので、デザインはそのままで、以下のサイトを参考に調整してみました。
はてなブログに実施した、4つのデザインカスタマイズ - Banguardサイト

記事幅は以下の項目をCSSに追加。

#container { width: 960px; } #main { width: 710px; }

ところが・・・。
公式テーマEpicを使用した状態で全体幅を1000-1200px程度に調整してみたのですが、サイドバーの表示が崩れてしまいました。
様々なテーマを試してみましたが、シンプルな白紙テーマで再び試して、ようやく上手くいくも、今度はヘッダ画像とヘッダメニューの間が大きくあいてしまったので、デザインのCSSの設定で

#top-editarea{ margin:(間隔の数値)px auto;

を追加して再び調整すること30分。ようやくできました。 最終的に全体幅960px、記事幅は710pxで、iPad、PCともに崩れずに表示できる設定に落ち着きました。

ヘッダメニュー、おすすめ記事のデザイン変更

テーマを変更したことに伴い、ヘッダメニューとおすすめ記事のデザイン・配色を変更し、モノトーンな色合いにしました。  ヘッダメニューのサイズが小さくなったため、項目が少し置けるようになりました。今後カテゴリーページに一部移動した内容をヘッダメニューに持ってこようと思います。

見出しタグのレイアウト変更

h2タグの見出しに、画像を追加してみました。見出しに多少メリハリがついて読みやすくなったかもしれません。特に作成に関して特別なソフトは持っていないのでWordで図形を書いて作ったものをペイントにコピーし、PNG形式で保存しました。
保存した画像ははてなフォトライフにアップロードし、画像のURLを控えておきます。
その後、デザインの設定のCSS欄に、

h2 { background: url(画像URL) no-repeat left center; padding-left: 30px;

を追加します。終わったら表示の確認です。見出しタグを入力して確認します。Markdown記法モードに設定している場合半角で「##+半角スペース+見出し文字」を入力して確認します。はじめはうまく反映されませんでしたが、時間を置いたら反映されていました。

あとがき

CSSをあまり大々的に弄ったことがなかったので、作業が終わるまで数時間かかってしまいました^^;
テーマをリセットしたりの悪戦苦闘で、導入したJQueryのトップに戻るリンクが行方不明になったので、元に戻さないといけないですね。。。まだまだ改善の余地はありそうです。