ひびわれたまご

読者です 読者をやめる 読者になる 読者になる

ひびわれたまご

大人の発達障害(ADHD)当事者のイラストレーター・志乃が、生きづらさや”楽”について考えるブログ。

はてなブログ・3つの手間で印象がガラリと変わるデザイン簡単カスタマイズ方法 

感想・レビュー お役立ち系 はてなブログ・カスタマイズ
広告

ご来訪ありがとうございます。志乃です。

この度、ブログを簡単にリニューアル致しました。元々用意してあった公式のデザインを、改造して印象を変えてみました。色々と調べて得た知識や、コツなどをご紹介していきたいと思います。

元のデザイン

f:id:shinoegg:20150711135449j:plain

レトロポップ - テーマ ストア - はてなブログ

私はこのデザインを元にしましたが、お好みで決めてください。

「デザイン」→「カスタマイズ(スパナのマーク)」から、公式であらかじめ用意してある背景画像を色々と選択してみて、その公式テーマと背景の変化の関係をチェックしてみると、カスタマイズのイメージがつきやすいです。

やったこと

  1. 背景画像変更
  2. メニューバー追加(→CSSで角を丸くする)
  3. タイトル画像挿入
  4. おまけ。記事下「あわせて読みたい」の追加 ほか

 

はてなブログ・公式テーマのデザインカスタマイズ方法

ある程度HTMLとCSSの知識があるとラクですが、コピペするだけで改造できるよう解説してくださっているブログが沢山ありますので、知識がなくても何とかなります。

まずは、編集メニューの「デザイン」→「カスタマイズ(スパナの絵)」をクリック。

1.背景画像変更方法

背景を変えると、雰囲気がガラリと変わります。「デザイン」→「カスタマイズ」→「背景画像」から変更可能

プロが作ったオシャレな背景画像を借りてくる

私は、著作権フリー&無料&商用利用可の、フリー素材をお借りしています。「背景 フリー 素材」や「商用利用可 著作権フリー 背景 素材」などで検索をかけると、色々と出てきますので、好みの1枚を見つけてみてください。

フリー素材サイトは沢山あります。そのうちの一部をご紹介。

bg-patterns.com

liginc.co.jp

2.メニューバー追加

メインのコンテンツ(カテゴリ)をわかりやすく、誘導しやすいように、ヘッダにメニューバーを追加しました。

私が参考にさせて頂いたのは、こちらのサイト。

maroom.hateblo.jp

こちらの記事にある通りに、指示にしたがってコピペ。

さらにそこから、コピペした後で、自分好みにカスタマイズ。

f:id:shinoegg:20150712020537g:plain

www.colordic.org

慣れない方は、色見本を見ながらやるといいです。

ボタンを5つにしたくて、ボタンの横幅を20%へ変更した場合は?

ダッシュボード>デザイン>カスタマイズ(道具アイコン)>ヘッダの「タイトル下」へ追加するHTMLのコピペの後で、<li>の項目をもう一行増やすとボタンが1つ増えます。

<div id="menubar">
<ul>
<li><a href="http://(リンクしたいカテゴリのURL)" title="ボタン1">ボタン1のラベル名</a></li>
<li><a href="http://(リンクしたいカテゴリのURL)" title="ボタン2">ボタン2のラベル名</a></li>
<li><a href="http://(リンクしたいカテゴリのURL)" title="ボタン3">ボタン3のラベル名</a></li>
<li><a href="http://(リンクしたいカテゴリのURL)" title="ボタン4">ボタン4のラベル名</a></li>
<li><a href="http://(リンクしたいカテゴリのURL)" title="ボタン5">ボタン5のラベル名</a></li>
</ul>
</div>

メニューバーをデザインの雰囲気に合わせて角丸にしてみた

デザイン→カスタマイズ→デザインCSSで、#menubar li の項目に追加。

#menubar li{
display: table-cell;
width:20%;
padding:0;
background-color:#E8C768;
border-radius: 8px; /* CSS3草案 */
-webkit-border-radius: 8px; /* Safari,Google Chrome用 */
-moz-border-radius: 8px; /* Firefox用 */ }

※最善ではないかもしれません。いい方法があったら教えてください。

メニューバーに関しては、こんな便利なサイトもあります

madhatter87.hatenablog.com

design.webclips.jp

3.タイトル画像変更

フォトショやイラレなど、画像編集ソフトの心得がある方、イラストが描ける方は、タイトル画像を用意すると、オリジナリティが出て素敵!

タイトル画像を作った後で、

「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル画像」→「画像をアップロード」で変更。

デザインをキレイにまとめるコツ(?)
  1. プリントスクリーンでまず全体を撮影
  2. その上から画像編集ソフトで上塗り編集
  3. スポイトを使って、色数を増やさないのがコツ

私はまず、背景を変更した後で、プリントスクリーンを撮影(Ctrl+PrtScr)し、その画像の上からデザインをいじることで、周りの色をスポイトで取って使ってみるなど、調和を持たせるようにしました。デザインをキレイにまとめるポイントは、色数を増やさないことだと思います。

※メニューバーの色も、この方法でスポイトで取って参考にしました。

f:id:shinoegg:20150712014111g:plain

タイトル画像を挿入する前の画面を撮影してから…

f:id:shinoegg:20150712045057g:plain

余分なものを消して…

f:id:shinoegg:20150712044908g:plain

画像編集ソフトで、周りとのバランスを見ながら、自分好みにタイトル画像の完成イメージ図を作る。

f:id:shinoegg:20150711140036g:plain

使う部分だけを切り出して保存。「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル画像」→「画像をアップロード」→表示設定「画像だけ表示」。

※スマホ版のタイトルも一緒に変更になってしまい、用意した画像によっては表示がおかしくなるので「デザイン」→「スマートフォン」→「ヘッダ」→「タイトル画像」で設定を確認してください。

4.記事下「あわせて読みたい」の追加

wepli-dot2.hatenablog.com

こちらのサイトを参考にさせていただきました。

サイト管理人の皆様、どうもありがとうございました!

 

スラスラわかるCSSデザインのきほん

スラスラわかるCSSデザインのきほん

 
アメブロをカスタマイズ 魅せるブログデザインを作ろう!改訂版

アメブロをカスタマイズ 魅せるブログデザインを作ろう!改訂版

 
初めてでもできる! ブログカスタマイズリファレンス

初めてでもできる! ブログカスタマイズリファレンス