(20161204まで更新されていた)

記録として、しばらくは残しておきます。

「Innocent」のブログデザインを大幅に変更しました

f:id:jtaro_arisawa:20161002153533p:plain

まとまった時間が確保できる休日。さまざまなブログを拝見して、僕好みのブログデザインに近づけることができました。この記事では、カスタマイズした項目をまとめていきます。

大元のテーマは「Innocent」

「アリサワログ」の大元となっているテーマは「Innocent」。9000以上のダウンロード数を誇るこのテーマは、「シンプルでカスタマイズ性の高いレスポンシブデザイン」が特徴です。そのままでも十分に見やすいのですが、自分好みにカスタマイズすることで、なでたくなるほどに愛着のあるブログが完成しますよ。

カスタマイズ項目

1. グローバルメニューの設置

まずは「グローバルメニューの設置」です。「Innocent」の作成者・半月さんのブログでも、ナビゲーションバーの設置について解説されています。しかし、少し細めのメニューを設置したかった僕は、まつだりさこ (id:matsuda_risako)さんの記事を参考に、設置をすることにしました。

そして、文字の大きさや色を自分好みに変更すれば、おしゃれなメニューの完成です。

2. ブログタイトルと説明文の位置を変更

「Innocent」は、初期設定のままだと「ブログタイトル」と「ブログ説明文」の間隔が狭く感じます。そこで、位置を中央寄せにすることに加えて、二つの間隔を少し空けることにしました。以下の記事を参考にさせていただきます。

これでヘッダー部分がすっきりとしました。

3. 記事タイトル部分をおしゃれにする

次に、記事タイトルをおしゃれにするカスタマイズです。こちらは2つのブログを参考にさせていただきました。

  1. ブログデザインをInnocentにテーマ変更して、少しだけカスタマイズしてみたよ - IT女子、がんばる。
  2. 読むだけで簡単に「はてなブログ」のデザインをおしゃれにカスタマイズする記事まとめ - North-Geek

f:id:jtaro_arisawa:20161002161648p:plain

こんなにもおしゃれな装飾があるのですね!僕は、一応「むらさき色」をメインカラーに考えているので、「mediumorchid(#ba55d3)」を選択。カラーコードについては、以下のサイトが参考になります。

WEB色見本 原色大辞典 - HTMLカラーコード

4. 見出しをおしゃれにする

続いて、「大見出し」に装飾を加えていきます。こちらについても、前述のブログを参考にしました。

読むだけで簡単に「はてなブログ」のデザインをおしゃれにカスタマイズする記事まとめ - North-Geek

f:id:jtaro_arisawa:20161002162815p:plain

シンプルでいて、おしゃれですね。ちなみに、「紫色」というメインカラーに「青」をアクセントにする配色は、僕が大好きなKanye Westのアルバム「Graduetion」から影響を受けています。

Graduation

Graduation

 

5. ブログのフォントを変更

前述のサイトを参考に、ブログ全体のフォントを変更しました。ちなみに当ブログでは、「游ゴシック」をメインに使用しております。

/* ブログ全体のフォント*/
body {
color: #000;
font-family: Linotte, YuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Roboto, メイリオ, Meiryo, "MS Pゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;

随時更新していきます

今のところは、以上のようなカスタマイズを施しています。今後のカスタマイズについては、こちらの記事に追記するか、あるいは新しい記事で紹介していきたいと思います。カスタマイズを共有してくださっている多くのブロガー様、ありがとうございます。 

広告を非表示にする