はてなブログのコピペで完成する簡単でおしゃれなデザインカスタマイズまとめ

こんにちは、Ichi先輩（@Abstract1Life）です。

今回は、みなさんの参考用・自分の保存用にブログのカスタマイズをどのブログを参考に行っているか記事にまとめておきたいと思います。

私自身にはほとんどプログラミング能力は無いので、このブログのデザインはほぼ参考記事のコピペで作成しています。色とかスペースとか位置とかは多少いじっていますが、数字を変えているだけなので、誰でもできると思います。

カスタマイズの基礎知識

ブログデザインをカスタマイズする前に、とりあえず基礎知識だけ確認しておきましょう。基礎知識が無くてもコピペでカスタマイズ出来てしまいますが、知っておいた方が何か問題があった時に確認出来て便利です。

つまり、基本的にはHTMLがしっかりしていれば文章自体は存在するんですが、CSSも上手く使ってやらないと見やすくならないということですね。

他にもJava Scriptなどを使うと、文章に「動き」をつけることが出来ますが、基本的には上の２つを使ってカスタマイズするのが主流な流れだと思ってください。

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

PC版でカスタマイズしている部分は、以下の通りです。

ブログデザインテーマ＆記事幅

デザインはブログテーマの「Innocent」です。このテーマは、少し設定するだけで簡単にグローバルメニューが設置できるのが魅力です。

記事幅に関しては、初期設定だとAdsenceが記事幅より飛び出してしまっていたので、720pxに変更しています。「Innocent」を作った作者の半月さんがカスタム記事を書いているので、そちらを参考にして変更しています。

記事自体は「Blank」テーマの記事ですが、こちらのテーマも半月さんが作ったテーマなので、今のところ問題なく使えています。

参考
はてなブログテーマ「Blank」の記事幅を変更する方法MoonNote

---

見出し・日付部分の色&スペース

見出しと日付の部分に関しては、オシャレに定評のある「Literally」さんの記事を参考にさせていただきました。プログラミングに詳しかったらこんな感じに細かい部分にこだわりたいなというブログのカスタマイズをされています。

記事自体はスマホ用ですが、PC版でも問題なく使えるソースだったので、下記の記事からコピペで設定しています。

参考
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法LITERALLY

---

シェアボタン設置

シェアボタンは最近変更しました。はてなオリジナルでも良かったのですが、twitterの数が表示されないため、凸凹になってしまって気持ち悪かったので、綺麗なものにした感じです。こちらはゆきひーさんの記事を参考にさせていただきました。

参考
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2Yukihy Life

---

プロフィール欄の新規作成

はてなブログでは、サイドバーに既存のプロフィール欄を置くことが可能ですが変更できる点が少ないので、かなり不便です。具体的にはプロフィール画像が小さかったので、大きくしたいなと思って、新しくHTMLでプロフィール欄を作成しました。

参考にさせていただいたのはこちらの記事です。

参考
【B】 スパイスのように効いてくる！はてなブログのプロフィール欄カスタマイズの巻HSKぐうたらジャーナル

---

サムネ画像の枠作成

サイドバーにある最新記事や人気記事のサムネの画像ですが白い画像などを使ってしまうと、他のサムネ画像とのバランスが悪くなってしまうので枠をつけました。枠をつけることによって端が揃うので整った印象を与えることが出来ます。

ですが、サムネの画像に枠をつける記事が見当たらなかったので、この２記事を参考にCSSコードを作成してみました。

参考
はてなブログで文字のカスタマイズが捗る構成図をつくってみましたYukihy Life

参考
とっても簡単！CSSで画像に外枠をつける方法うぇぶ小屋

---

本文の文字の大きさ＆フォント

文字の大きさとフォントの変更はこちらのサイトを参考にして変更しています。私の場合はフォントを「メイリオ」に指定しています。とりあえず可読性が良くなるように心掛けています。

参考
はてなブログのフォントの種類を変えましたIT系女子ログ

---

サイドバーの文字の大きさ＆フォント

サイドバーに関しては、こちらのYukihyさんの記事を参考に、サイドバーの項目に対して、上記の本文に当てはめた文字の大きさとフォント変更のコードを入力しました。

このYukihyさんの記事は、上手く使えばかなり色々とカスタマイズが捗るのでとってもお気に入りの記事です。

参考
はてなブログで文字のカスタマイズが捗る構成図をつくってみましたYukihy Life

---

画像に枠をつけるコード挿入

画像に枠をつけるコードについては、サイドバーのサムネイル部分に一部使わせていただいた、こちらのサイトを参考にさせていただきました。やっぱり画像に枠がついていると、揃った印象がある気がします。

参考
とっても簡単！CSSで画像に外枠をつける方法とっても簡単！CSSで画像に外枠をつける方法 | うぇぶ小屋

---

Amazonアフィの文字色変更コードの挿入

はてなぶろぐで挿入できるAmazonアフィのリンクはそっけない感じなので、こちらの記事を参考に、Amazon感を強めています。

参考
はてなブログの Amazon 商品紹介をちょっぴり改善するカスタマイズMoonNote

こちらのコードを入れると、文字色の変更とロゴが追加されるので見た目が整いますよ。ただ、基本的に「カエレバ」「ヨメレバ」等のサービスを使うの方がおすすめです。

 

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

スマホ版のデザイン変更は、はてなProではないと出来ないのでご注意ください。デザインテーマの「Innocent」はレスポンシブルデザインに対応しているのですが、あえてレスポンシブルにはしていません。とにかくスマホ版はシンプルにしました。

スマホ版で変更している部分は、以下の通りです。

見出し・日付部分の色＆スペース

こちらはPC版と同じくLiterallyさんの記事を参考にさせていただいています。スマホ版で見てもとってもおしゃれで、ある意味ブログっぽくない感じがします。

参考
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法LITERALLY

---

ヘッダー&グローバルメニュー

ヘッダーのタイトル部分を編集したり、グローバルメニューをつけたりするのには、狭間純平さんのこちらの記事を参考にさせていただきました。スマートなスマホ画面になるのでお気に入りの記事です。

狭間さんのページ自体も色が抑えめで、スマートなページの印象です。

参考
【スマホ版】はてなブログのヘッダー部分のカスタマイズ方法まとめ（グローバルナビ・フォント変更・デフォルト表示削除など）Awesome

---

シェアボタン設置

シェアボタンもPC版と同じく、ゆきひーさんの記事を参考にさせていただいています。Lineのシェアボタンも入るので、色味が増えてPC版よりにぎやかな印象です。

参考
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2Yukihy Life

 

まとめ：はてなブログのカスタマイズ

私自身はこういったブログのカスタマイズをするのは初めてなので、色々な方が参考記事を出していてくださってとても助かりました。コピペで色々おしゃれできるのはいいですよね。

とりあえず、極力シンプルに見やすいブログにしていますがブログ運営という意味ではもう少し工夫が必要なのかもしれません。今後も色々と研究してより良いデザインを目指したいと思っています。

こちらの記事では、グラフィックデザイナーの方にカスタマイズに関してアドバイスしてもらったことをまとめています。はてなブログに関するカスタマイズの参考になるので、ぜひコチラの記事も読んでみてはいかがでしょうか。

グラフィックデザイナーに聞いた、おしゃれなブログデザインのコツまとめ

はてなブログに関する記事のまとめはコチラから！