※この記事を書いた後に再度カスタマイズをしてしまったので、後で書き換える予定です。
カスタマイズ記事をお探しの方はこちらへどうぞ↓↓
ブログのデザインを一新してみました
当ブログのデザインをリニューアルしました。今回は、ブログのデザインをカスタマイズする方法を紹介します。
テーマをインストールすると簡単にデザインを変えることはできますが、他のブログとかぶってしまいます。自分でカスタマイズして、他のブログと差別化してみましょう。
簡単にカスタマイズができるデザインテーマも作ったので、こちらを使うのもオススメです。カスタマイズ用のCSSはすでに記述されているので、コピペだけで簡単にカスタマイズできる便利なデザインテーマです。
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG
見出しのカスタマイズはこちらの記事がおすすめです。コピペで簡単にカスタマイズできます。
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ | SHIROMAG
今回は、テーマを使わずに自分でCSSを書きたい人向けと、テーマはそのままで少しだけカスタマイズしたい人向けに分けて書いてみました。
テーマを使わずに自分でCSSを書きたい人
まずは準備
一からCSSを書いていくとなるととっても面倒くさいので、下記のリンクにあるCSSを手直しして、カスタマイズしていきます。はてなが参考のために公開しているCSSです。
hatena/Hatena-Blog-Theme-Boilerplate
こちらにある boilerplate.css を使っていきましょう。あと、いきなり自分のブログにデザインを適用すると失敗した時大変なので、未公開のサブブログを別で作って、そこで試しにカスタマイズするのがオススメです。一つのアカウントで3つまでブログを作ることができます（Proは10個）。
カスタマイズ用のブログには、サンプルエントリー – はてなブログ ヘルプこのサンプルの記事を使うのがオススメです。念のために、メインブログの記事をコピペした記事も作っておくといいでしょう。
先にテーマカラーを決めておきしょう。当ブログはオレンジをテーマカラーに、ホワイトとグレーをベースカラーにしています。カラーコードを調べるには、このサイトがオススメです。
CSSの記述場所
ダッシュボード → デザイン → カスタマイズ → デザインCSS
デザインCSSの中身を全て削除。もし自分で書いたコードが記述されている場合はテキストエディタにでもコピーして保存しておきましょう。
削除したら、先ほどのboilerplate.cssの中身を全てペーストして下さい。そうすると、boilerplate.cssのデザインが記事に反映すると思います。これをベースにカスタマイズします。
実際には、テキストエディタにコピーして、そこでコーディングしてこの場所にペーストする方がやりやすいと思います。
タイトルのカスタマイズ
私のブログはタイトルの背景を横幅いっぱいにしています。タイトルを横幅いっぱいに広げる方法を紹介します。
タイトルは #blog-title をスタイリングしますが、#container のwidthをそのままにしているとうまくいきません。
※もしここにコードが表示されてない場合は、ページを再度読み込んでください。
#container のwidthは100%に変更して、#container #content のwidthでメインコンテンツの横幅を設定します。ヘッダーの高さ分、padding-topが設定されています。
#blog-titleは#contentの上にあるので、メインコンテンツの幅よりも広くできます。
※もしここにコードが表示されてない場合は、ページを再度読み込んでください。
margin や padding を調整して下さい。
ここからはテーマはそのままでもできるCSS
一から書くのは面倒くさいという人向けに、テーマはそのままでもできるカスタマイズを紹介します。
ヘッダーのカスタマイズ
はてなブログの一番上にあるヘッダーは#globalheader-container で記述されています。
※もしここにコードが表示されてない場合は、ページを再度読み込んでください。
background-color の色を変更して、box-shadowで影を入れました。
追記：はてなのヘッダー消しちゃいました。すまそ！
見出しをカスタマイズする
もし使っているテーマに見出しのデザインがない場合、記事を見やすくするために必ずスタイリングしましょう。
※もしここにコードが表示されてない場合は、ページを再度読み込んでください。
background-color や border のカラーコードは自分の好きな色にしてみて下さい。カラーコードの調べ方は上に貼ったサイトから調べることができます。
私はこんな感じにしました。
大見出しのh3
中見出しのh4
小見出しのh5
すべてborderを使って見やすくしています。left と bottom に border を入れて見出しをL字型にするのはよく見かけますね。
見出しのカスタマイズはこちらを参考にしてください。
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ | SHIROMAG
画像を浮かせるテクニック
CSS3になってから、CSSだけでも動きをつけられるようになりました。今回私は画像にマウスが乗ったときに、画像が浮き上がるようにしてみました。
※もしここにコードが表示されてない場合は、ページを再度読み込んでください。<
transform: scale で大きさが変わります。transition で徐々に変化させることができます。これにbox-shadowを加えれば、画像が浮かび上がるようにすることができます。
試しに下の画像にマウスを載せてみて下さい。
いい感じになりました。
レスポンシブに対応させる
スマホでもCSSを適用させるために、以下のような記述が必要です。
/* Responsive: yes */
これを入れないといくらCSSでレスポンシブにしてもうまくいきません。私はこれに気づかず時間を無駄にしたので気をつけて下さい。これをCSSの一番上に記述しましょう。
スマホで見ると文字が大きすぎたり、余白が大きすぎたりすることがあります。レスポンシブにするには、スマホの表示を見ながらカスタマイズしていきましょう。
ブログカスタマイズにおすすめの本
ブログのカスタマイズをするなら、この本でCSSやHTMLを勉強するのがおススメです。
他にもHTML・CSS・JavaScriptを学習するのにおすすめの書籍を紹介した記事も書きましたので、良かったら読んでみて下さい。
HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ
超初心者のためのHTML・CSS入門講座もあります。
CSSの勉強にはおすすめ
ブログのCSSをカスタマイズすると、はてなブログのHTMLやCSSの構造を知ることができるので、とても勉強になります。もしWEBデザインを勉強されているのならオススメです。
今回は細かい部分は省いて、ポイントだけを紹介しました。細かい部分もご自身で色々いじってみて下さい。
はてなブログでHTML・CSSを使ってみよう HTML編 | SHIROMAG
全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG
はてなブログのカスタマイズについてはこちらでたくさん紹介しています。
必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG
他にもこんな記事も
最近のコメント