- どうせブログやるなら、おしゃれなブログを目指そう
- テーマの選択は、Minimalism一択。
- １．さっそくMinimalismをダウンロード
- ２．レスポンシブ対応にする
- ３．FontAwesomeを使用できるようにしよう
- ４．グローバルメニューを設置しよう
- ５．ためしにサンプル記事の投稿と見出しをカスタマイズしよう
- ６．全体のテーマカラーとシェアボタン設置
- ７．まとめ
どうせブログやるなら、おしゃれなブログを目指そう
ぬんころ派ブログアドバイザー、ぬんです。
ぬんころ派：「ものくろ」のブログ運営者、ぬんが独自に生み出したブログ派閥。専門的な知識、プログラミング能力がなくても、より手軽でシンプルにブログ運営を進めることができるようにブログ初心者へ向けて、アドバイザーとしての立場でブログ論を展開している。
今回は、ブログ初心者のために、超簡単におしゃれなブログデザインをつくる方法を紹介します。
テーマの選択から、そこからどのようにスマホデザインまでカスタマイズをするかまでをひとつひとつ丁寧に説明していきますね。
5000字を超える超大作です。これなら誰でもできるはず！
テーマの選択は、Minimalism一択。
まずは、テーマの選択です。
これは完全に僕の主観ではありますが、2017年6月現在で最もシンプルで使いやすく、さらにレスポンシブ対応のテーマはひつじの雑記帳作成の「Minimalism」です。
もちろん無料テーマです。
このブログは、このテーマが発表される前に開設したため、その段階で最も使いやすいと僕が思ったCONTENSというテーマを使用しています。
✔はてなブログ初心者へのおすすめテーマはこれで決まり【CONTENTS】
このテーマの魅力は、また別の記事にしなければならないほど多くあるのですが、一押しポイントはレスポンシブ対応に見えないような、素敵なスマホデザインになっているということです。
（多くのレスポンシブ対応テーマは、スマホデザインが僕的にはなんだか気に入りません。）
現在、多くの読者はスマホからブログを閲覧するといわれてます。
もちろん、そのデザインがおしゃれでわかりやすいほど、直帰率は下がります。
その点において、「Minimalism」は、とても魅力的なテーマです。
詳細は、こちらのページをご覧ください。
✔シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
１．さっそくMinimalismをダウンロード
では、さっそくMinimalismをダウンロードしましょう。
まっさらなブログに「Minimalism」をダウンロードするとこんなかんじになります。
２．レスポンシブ対応にする
次に、デザイン＞詳細設定＞スマートフォン＞レスポンシブデザインに✔
これだけでOK！
そして、ついでにオシャレな見た目にするためにブログを一覧表示にしましょう。
設定＞詳細設定＞トップページの表示形式
で一覧表示にチェック。
これは、Proじゃないとできないので、Proでない人は以下のやり方で代用可能です。
✔️はてなブログのトップページを記事一覧ページに変更できた！コピペするだけ！なのに途中つまづいたけどね^^; - 言いたいことは山のごとし(^^)
３．FontAwesomeを使用できるようにしよう
次は、設定＞詳細設定＞headに要素を追加に、以下のコードをコピペします。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
出典：楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO
これは、グローバルメニューなどで使用するフォントを、利用可能にするためのコードです。
上の出典の引用ページを読んで、その他のやり方でもよいでしょう。
４．グローバルメニューを設置しよう
お次は、グローバルメニューの設定です。これもコピペでできます。
以下のコードを、デザイン＞PC＞ヘッダー
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>
<div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
</div>
</nav>
出典：
すると、ブログタイトルの下にこのようなグローバルメニューが現れます。
少し解説しておくと、先ほどのコードの、
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>
<div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
</div>
</nav>
赤の蛍光ペンでひいた部分を左から順に、
URL：クリックすると進むリンク先
fa fa-home：アイコンの種類
HOME：アイコンの横の文字
となります。
アイコンの選択方法は、こちらを参考にしてください。
✔楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO
５．ためしにサンプル記事の投稿と見出しをカスタマイズしよう
見出しのカスタマイズをしたいので、とりあえずサンプルのエントリーを投稿してみます。
※ 見出しのカスタマイズの見え方を確認したいので、「大見出し」「中見出し」「小見出し」をエントリー内に入れておこう。
こんなかんじになっていればOK！
（これは、スマホ版での見え方です。）
サンプル記事なので、この時点で公開したくないって人は、公開設定を「自分のみ」にしておきましょう。
設定＞公開設定＞自分のみ
見出しのカスタマイズは、とりあえずはこちらのコードをコピペしてみましょう。
デザイン＞カスタマイズ＞デザインCSSへ
.entry-content h3 {
padding: 4px 10px;
color: #3D3F44;
background: #f3f3f3;
border-left: 8px solid #3f3f3f;
margin:60px 0 15px 0;
}
.entry-content h4 {
position: relative;
color: #3D3F44;
border-bottom: 4px solid #f3f3f3;
padding: 3px 10px;
margin:30px 0 10px 0;
}
.entry-content h4::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background:#3f3f3f;
z-index: 2;
content: '';
}
.entry-content h5 {
color:#3D3F44;
position: relative;
padding-left: 1.2em;
line-height: 1.4;
margin:20px 0 8px 0;
}
.entry-content h5:before{
font-family: FontAwesome;
/*アイコンユニコード*/
content: "00c";
/*アイコン色*/
color: #3f3f3f;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
}
すると、こんなかんじになります。
色のパターンの変更は、上記コードのcolorやbackgroundのカラーコードを変えることで可能になります。
もっとこだわったのがいい！って人は、こちらから探してみましょう。
✔️CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
６．全体のテーマカラーとシェアボタン設置
ここまでくれば、あともう少し。
全体のテーマカラーを決めていきます。
✔️シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
上のURLの、「ヘッダーを好きな色に設定する」という項目で変更できます。
このカラーコードを参考に。
すると、こんなかんじになります。ここでは、水色のテーマ（#87cefa）にしてみました。
また、上記URLの「シェアボタンを設置」の項目で、コピペで簡単にオシャレなシェアボタンを設置できます。
これでおしゃれブログの完成です！
７．まとめ
どうですか？
こんなに簡単に超おしゃれブログが完成しました。
Pro契約していなくてもここまでのカスタマイズができれば、ほぼ不自由なくブログ運営ができるはずです。
ぜひ、参考にしてみてください。
そして、これを基本として色々なカスタマイズを行っていくのも楽しいのではないでしょうか。
以上、ぬんころ派ブログアドバイザー、ぬんでした。
この記事作成のために作ったサンプルページです。気になる方は見てみてください。