0329_hatena

名古屋勤務のアラサーがガジェット、健康についてつづります

トップ > はてなブログカスタマイズ > 脱CSS初心者のために行った3つのステップ

脱CSS初心者のために行った3つのステップ

はてなブログカスタマイズ

ここ3日間ほど英語の勉強をしつつ休憩がてら、はてなブログを装飾するべくCSSをいじっていました。計約10時間〜15時間

（この時間内で行った脱CSS初心者のための3つのステップを記載します。）

 

一応、HTML,CSSは市販の本やwebサービス（ドットインストール、CODEPREP）で学び、分かったつもりでいました。

が、案の定自身のブログのCSSを変更しようとした矢先、

そもそも

  • 何から始めて
  • どうやって変更するのか

知りませんでした。

例えるならば、

まだ免許証を持っていない少年が、車の運転方法を座学で学んだけれども、実際に車を運転しようとした際に「何を」、「どうやって」やれば良いのか戸惑うような感じ。

 

そんな私が、

3日前は「どうやったらブログのデザインが変更できるんだろう」とほぼ右も左も分からない状態だったにもかかわらず、

（ブログテーマに頼りつつ）デフォルトのデザインから脱出できた3つのステップを書いていきます。

（以下、CSSを「いじる」という表記が以下に何度か出てきますが、「変更する」、「追記する」の意味で使用しています。） 

 

前提：どこではてなブログのデザイン（CSS）を変更するのか？

はてなブログの場合に限りますが、

下図の赤枠「デザイン」をクリック

 

 「デザインCSS」をクリック

です。

 

そ！し！て！

CSSの変更・追記のため以下をやっていくわけです。

【知る！】

（はてなブログの）どの部分を変更・追加したいのか？

e.g. 見出しのテキストカラー・背景色を変更 / タイトル画像・本文の横幅を拡大・縮小

と、簡単にざっと書きましたが、まずはブログのどの部分をどうしたいのか、が重要です。

 

「したいこと」を「どうしたらいいのか」知るために…

検索をひたすら行う

検索キーワード「はてなブログ（h1）  カスタマイズ（変更）」で検索！

 

この方法がCSS初心者にとっては手っ取り早いかと思います。

（この方法でものすごくお世話になりました。）

※他のキーワードで検索しても問題ありません。

※はてなブックマークの検索窓で同様に検索してみてもいいかもですね

 

なぜかと言うと、この検索でヒットするのはほぼはてなブログで、かつ、どのように変更すれば良いのか書かれているからです。

良記事


はてなブログのデザインをカスタマイズしたいときに役立つサイトとかいろいろ - はなこのブログ。

 

良記事


はてなブログ カスタマイズ お役立ちツール まとめ（2014春) - マトリョーシカ的日常

 

 

この方法だけでも良いですが、Plus oneで必ず自分がやっていたことが以下です。

【読む！！】

ブログカスタマイズに関連するカテゴリーの記事を読む！

例えば、

h3をかっこよくするためのCSSが記載されている記事があったとしましょう。

その時、単にそのCSSをそのままコピペするだけじゃなく、その記事以外にブログカスタマイズに関連する記事がないか必ず探しました。

そうすると、こんな面白い見せ方があるんだ！こんなことがはてなブログでも出来るんだ！という発見があります。

参考


ブログカスタマイズ - マトリョーシカ的日常

  

 【いじる！！！】

実際にCSSをいじる！

次は実際にコピーしたCSSをペースト入力します。

思った通りにブログに反映されれば基本的にそのまま放置。

でも、上手く反映されない場合は、

  • 反映されるまで画面とにらめっこしてエラーの修正
  • 何度も修正したけど、反映されない。この方法は諦めて違う見せ方にしよう

の順序で出来る限りデフォルトのデザインにテコ入れをしていきました。

 

CSSをいじるのに便利なツール3つ！

そして

ここまで来る途中で、CSSをいじるために色々な便利なツールがあることを知りました。


MeasureITより優秀なサイト内のサイズを測れるChrome拡張機能・Page Ruler | 4th Life - Coevolution of WEB -

 

これらを基に、特にChromeのデベロッパーツールを使うことでHTML・CSSを見ることに嫌気をあまり感じなくなるようになりました。

 

パクりたい参考にするブログ（サイト）を見つける

デザインを参考にしたいブログを検索とまとめサイト等で探しました！

この時に注意したいのが、あまりにもデザインレベルが高そうなサイト（デザイン）は候補に挙げないようにしました。（なぜなら、CSSだけでは実装出来ない可能性があるためです。）

 

【結果】実装・変更した部分

  • タイトル画像の高さ、幅
  • タイトル画像の背景色
  • コンテンツの幅、右罫線
  • h1の位置
  • h3,h4の見せ方、序数を先頭に付ける
  • サイドバナーの横幅、背景色
  • 文字に装飾（黄色マーカー、ポイント的な）
  • 「続きを読む」のボタン
  • （無理矢理）はてなブログ無料プランのキーワード自動リンク装飾を無効化

CSSとは関係ない部分ですが、

  • ロゴの作成
  • タイトル画像の作成・追加

タイトル画像

※画像作成も時間に含めています 

これらに関しては、機会（ご要望）があれば記事を書いていけたら、と思います。

 

【まとめ】

右も左も分からない状況なら、せめて右だけでも分かりたい！

って気持ちを1日だけじゃなく数日間持てれたこと

つまり、

知る・読む・いじる

を継続出来たことがCSS脱初心者を出来た秘訣だったのではと思います。