今回はPCレイアウトの変更に関する記事です。スマホではデザインは反映されていませんので、PCでご覧いただけますと幸いです。
ブログのデザインを変えました。
前回の記事から間が空いてしまったのですが、その間カスタマイズをやってました。おおむね満足のいくデザインになったので記事にします。
同時にこだわった点や参考にさせていただいたカスタマイズ例などを紹介します。ブログのデザイン変更をお考えの方の参考になりましたら幸いです。
- ブログのデザインを変えました。
- デザインする上でこだわった点
- テーマカラーを決定する
- これは大見出しです（h3）白抜き文字にして目立つデザインにしています。
- 目次はグラデーションに
- 引用のデザインも変更
- シェアボタンも一手間加える
- リンクを目立たせるパーツ
- 記事下の読者登録ボタン
- webデザイン素人でもここまでできました
デザインする上でこだわった点
はてなブログでは、公式に配布されているテーマのほか、有志の方たちが作成したテーマも自由に使うことができます。
今回採用させていただいたのがこどみす(id:codomisu)さんの「Codomisu Flat」というテーマです。
採用した理由はコンテンツの表示領域が非常に広く、画像をたくさん使う当ブログでは、より強い視覚的訴求ができると考えたからです。
逆にテキスト中心のブログですと、少し広すぎるかもしれません。このあたりは自身のブログのスタイルによって変わってくるかと思います。
左が変更前、ほぼデフォルトのまま使っていました。デザイン的な要素はあまり見られません。シンプルで使いやすかったのですが、上記のような理由から全面的にカスタマイズすることを決めました。
テーマカラーを決定する
デザインをしていくにあたって重要になってくるのが見た目の統一感です。
ポイントとしては「とにかく色数を抑えること」です。
派手なデザインが好きだからといって過剰にカラフルにしてしまうと、チカチカして見づらいくなってしまう、デザインばかりに目が行き内容が頭に入ってこないなんていうことにもなりかねません。
使う色は最小限に抑えると統一感が出て失敗しにくいと思います。
で、採用したテーマカラーは3色です。
- 黒／#393A3A
- ゴールド／#B59658
- グリーン／#55E5C3
この3色をベースにしてあとはそれらの濃淡ですべてデザインしています。
「黒×ゴールド」はシックで高級感のあるイメージ。落ち着いた印象を与えます。
そしてミントグリーンのような明るい色を差し色に採用しました。
テーマカラーを決めた後は見出しをデザインしました。
これは大見出しです（h3）白抜き文字にして目立つデザインにしています。
これは中見出し（h4）ツートンカラーで目を引きます。
最後に小見出し（h5）細いラインで「」カギ括弧状のデザイン。
メリハリのきいたデザインを意識しました。
見出しデザインで参考にさせていただいたのはサルワカさんのこちらの記事。
68個も紹介されてて、目当てのデザインがきっと見つかります！
スポンサーリンク
目次はグラデーションに
目次のデザインは背景色にこだわりました。
- ブログのデザインを変えました。
- デザインする上でこだわった点
- テーマカラーを決定する
- これは大見出しです（h3）白抜き文字にして目立つデザインにしています。
- 目次はグラデーションに
- 引用のデザインも変更
- シェアボタンも一手間加える
- リンクを目立たせるパーツ
- 記事下の読者登録ボタン
- webデザイン素人でもここまでできました
よく見ると薄いベージュから白色のグラデーションになっていることが分かるかと思います。
というのも、既存の目次デザインでは見出しの文字数が短いと右側に大きな空間ができてしまいます。コンテンツ幅が狭いこれまでのテーマだとあまり気にならなかったのですが、今回のテーマはかなり広いのでこの空間がとても気になりました。
じゃあ背景になじませてしまおう
ということで、backgroundにグラデーションカラーを採用。ベージュの色はテーマカラーのゴールドのトーンを落としたものになります。
引用のデザインも変更
引用のデザインはこのような感じになっています。左肩がカットされたデザインです。
視覚的なアクセントにもなりますね。
こちらのデザインも見出し同様、サルワカさんのデザインを使わせていただき、カラーを変更しています。
素晴らしいサイトですね！
シェアボタンも一手間加える
SNSのシェアボタンも有志のみなさんがコピペで使えるコードを配布してくださっています。ですがコピペそのままのデザインにするよりも、自分のサイトデザインに合ったものに加工することで統一感が増していい感じになります。
おなじみのこちらのボタンをベースに加工しました↓
- 横幅とフォントを変更
- カラーを黒に統一
- ホバーエフェクトを編集
この3つを変更しただけですがブログデザインにマッチした感があります。
使用しているGoogleFont
Yellowtail
https://fonts.google.com/specimen/Yellowtail
Oswald
https://fonts.google.com/specimen/Oswald
フォントは見た目を手軽に変更することができる要素のひとつ。
お好みでデザインにマッチしたフォントを選んで採用するといいです。
こちらもカラー同様、数を増やし過ぎないことが鉄則です。
スポンサーリンク
リンクを目立たせるパーツ
特に目立たせたいリンクに対してはシロマティ(id:shiromatakumi)さんのコレが最高ですね。
この記事内のサンプルを加工しています。アイコンは絵文字フォントを変更しました。はてなブログで標準的に使える絵文字フォントは下記から。
記事下の読者登録ボタン
記事の最後にフォローボタンをまとめて設置。これはorefolder (id:c-miya)さんのこちらのモノをお借りしました。
はてな、twitter、feedlyの各フォローボタンがまとめられており、アイキャッチも読み込まれているのでデザインも申し分なしです。これも目次の時と同様、背景はグラデーションに変更しています。
オシャレになりました！
webデザイン素人でもここまでできました
自分はグラフィックデザインはできますがwebに関しては全くの素人です。ここまでできたのは間違いなくテーマやデザインサンプルを配布してくださっている皆さんのおかげ。ほんとに感謝です！
カスタマイズをやる上で分からない部分は逐一調べながらやったので、すごく時間がかかりましたが、今回の経験で少し理解が深まった気がしますし、デザインの楽しさも再認識できました。
しかし、基本的なhtmlやCSSの知識は必要かと思います。思いどうりにデザインできたらもっと楽しいでしょうし！
過去に数冊参考書を購入して初歩的なことが少し分かる程度の知識でしたが、もっと深めて行きたいなと思いました。
そしてスマホ用デザインもこちらをベースにして変更していく予定です。
こだわって作ったブログデザインはやはり愛着も湧きますので、みなさんもぜひチャレンジしてみてください！