クレジットカードの読みもの

クレジットカードに関する様々な知識や使い方を「読みもの」として紹介していくサイトです。

はてなブログのCSS構造をやっと理解した…という話。どのブログテーマを利用していても、オリジナルデザインに変更は可能なんですね。

http://www.flickr.com/photos/47257185@N03/10874001974

photo by ZERGE_VIOLATOR

最近になってはてなブログのCSS構造をやっと理解した私。

いやね、このサイトであればFresh Greenというブログテーマを選んでしまっている以上、それを改編するにはそのテーマのCSSを読み込んだ上じゃないとデザイン調整できないとずっと思い込んでいました(汗)。

だから、大幅にサイトデザインをいじる場合には下記3つのCSS*1を読み込む必要性があるために、CSSがグチャグチャになってしまうんだろうと思っていたんです。

従来の私の中のイメージ:

  1. はてなブログの公式CSSを読み込む
  2. はてなブログテーマのCSSを読み込む
  3. 管理画面で追加した部分のCSSを読み込む

仮にこのままガシガシとデザインを調整してしまうと、とんでもなく出来の悪いCSSになります(指定した記述を上書きして、更にまた上書きすることに)。

実際にはシンプルな話だった:

しかし実際にはもっとシンプルな構造をしていました。

ろくにCSSを読まずに、下記の赤枠で囲まれている部分を著作者表示かなにかだと思い、@importでテーマ用のCSSを読み込んでいるのを見落としていたんです。

f:id:cardmics:20140806194312g:plain

赤枠を削除すると表示が壊れる:

ここで単純にブログテーマ用のCSSを読み込んでいるだけなので、この部分を削除すればオリジナルテーマを作成することが出来るように。試しに赤枠の部分だけ削除すると、下記画像のようにブログテーマのCSSが無くなって表示が壊れます。

f:id:cardmics:20140806194707g:plain

だから単純な話、2重に表記してしまっている部分があるのなら、@importをやめてCSSをまるごと『デザインCSS』の中に突っ込み、2重表記部分を削除してしまえば良いのです。これに気づくのにほんと苦労しました(苦笑)

外部CSSも読み込める:

ちなみに。

はてなブログの管理画面にある『デザインCSS』欄はお世辞にも編集しやすい大きさをしていないので、編集作業が面倒であれば外部CSSにしてしまうのも手(@importで外部CSSを読み込む)。

ただ残念ながらはてなブログはcssファイルのアップロードに対応していないはずなので、自分でレンタルサーバーを借りるなどの作業が必要になります。まぁ、ガチでブログ運営している方であれば苦もなく対応できると思いますが、急なアクセス過多でもサーバーが落ちないようにしないといけないので、ちょっとしたテクニック&知識は必要ですね。

いらない部分の削除も可能:

更にCSSをスリムにしたい!という方は、いらない部分の削除も可能。

例えば『クレジットカードの読みもの』ははてなブログProを使っているので、無料ブログ用の記述を削除したり、コメント欄用のclass属性などを削除することも出来ます

サイトの表示速度に敏感な方であれば、このあたりの調整もしておきたいところですね。

ブログデザインを改編します:

…ということで、これでサイトデザインを大幅改編してもCSSがグチャグチャになる心配はなくなったので、来週くらいにかけてガシガシとCSSをいじってしまおうかと思います。どんなふうに変わるかは、是非、お楽しみに!

以上、はてなブログのCSS構造をやっと理解した…という話でした。

参考リンク:

ブログのデザイン最適化や、アクセスアップの手法については下記記事も参考に。過去に当サイト『クレジットカードの読みもの』がまとめたブログ知識をまとめています。

news.cardmics.com

*1:実際には2つ目のCSSの最後に追記する形を取っていますね

PAGE TOP