はてなブログ初心者のためのコピペで簡単なカスタマイズの方法【ProでなくてもOK!】

f:id:nunkoro01:20170624115134j:image

どうせブログやるなら、おしゃれなブログを目指そう

【完成図】

f:id:nunkoro01:20170624221134j:image

 

 

こんにちわん!ぬんです!

 

今回は、ブログ初心者のために、超簡単におしゃれなブログデザインをつくる方法を紹介します。

 

テーマの選択から、そこからどのようにスマホデザインまでカスタマイズをするかまでをひとつひとつ丁寧に説明していきますね。

 

5000字を超える超大作です。

 

これなら誰でもできるはず!

 

テーマの選択は、Minimalism一択。

 

まずは、テーマの選択です。

 

これは完全に僕の主観ではありますが、2017年6月現在で最もシンプルで使いやすく、さらにレスポンシブ対応のテーマはひつじの雑記帳作成の「Minimalism」です。

もちろん無料テーマです。

 

このブログでも、「Minimalism」のテーマとして使用しています。 

現在はてなブログの中で人気ナンバーワンのテーマです!

 

このテーマの魅力は、また別の記事にしなければならないほど多くあるのですが、一押しポイントはレスポンシブ対応に見えないような、素敵なスマホデザインになっているということです。

(多くのレスポンシブ対応テーマは、スマホデザインが僕的にはなんだか気に入りません。)

 

※レスポンシブ対応とは、パソコンだけでなくスマホやタブレットから閲覧したときに、それぞれの横幅に合わせてうまいことデザインを変えて表示してくれるということです。 

 

現在、多くの読者はスマホからブログを閲覧するといわれてます。

このブログでは7割くらいがスマホからの読者様です!

 

もちろん、そのデザインがおしゃれでわかりやすいほど、直帰率は下がります。

 

その点において、「Minimalism」は、とても魅力的なテーマです。

 

詳細は、こちらのページをご覧ください。

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

 

 

1.さっそくMinimalismをダウンロード

 

では、さっそくMinimalismをダウンロードしましょう。

 

Minimalism - テーマ ストア

 

 

まっさらなブログに「Minimalism」をダウンロードするとこんなかんじになります。

f:id:nunkoro01:20170624065732p:plain

 

2.レスポンシブ対応にする

 

次に、デザイン>詳細設定>スマートフォン>レスポンシブデザインに✔

 

これだけでOK!

 

そして、ついでにオシャレな見た目にするためにブログを一覧表示にしましょう。

 

設定>詳細設定>トップページの表示形式

で一覧表示にチェック。

 

これは、Proじゃないとできないので、Proでない人は以下のやり方で代用可能です。

 

✔️はてなブログのトップページを記事一覧ページに変更できた!コピペするだけ!なのに途中つまづいたけどね^^; - 言いたいことは山のごとし(^^)

 

3.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

 

これは、グローバルメニューなどで使用するフォントを、利用可能にするためのコードです。

 

上の出典の引用ページを読んで、その他のやり方でもよいでしょう。

 

 

4.グローバルメニューを設置しよう

 

お次は、グローバルメニューの設定です。これもコピペでできます。

 

以下のコードを、デザイン>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>

 

出典:

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

 

f:id:nunkoro01:20170624071030p:plain

 

 すると、ブログタイトルの下にこのようなグローバルメニューが現れます。

 

少し解説しておくと、先ほどのコードの、

<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

 

5.ためしにサンプル記事の投稿と見出しをカスタマイズしよう

 

見出しのカスタマイズをしたいので、とりあえずサンプルのエントリーを投稿してみます。

 

※ 見出しのカスタマイズの見え方を確認したいので、「大見出し」「中見出し」「小見出し」をエントリー内に入れておこう。

 

こんなかんじになっていればOK!

(これは、スマホ版での見え方です。)

f:id:nunkoro01:20170624112931j:image 

 

サンプル記事なので、この時点で公開したくないって人は、公開設定を「自分のみ」にしておきましょう。

 

設定>公開設定>自分のみ

 

見出しのカスタマイズは、とりあえずはこちらのコードをコピペしてみましょう。

 

デザイン>カスタマイズ>デザイン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;
}

 

出典:【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

 

すると、こんなかんじになります。

 f:id:nunkoro01:20170624153218j:image

 

色のパターンの変更は、上記コードのcolorやbackgroundのカラーコードを変えることで可能になります。 

 

もっとこだわったのがいい!って人は、こちらから探してみましょう。

 

✔️CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

 

6.全体のテーマカラーとシェアボタン設置

ここまでくれば、あともう少し。

 

全体のテーマカラーを決めていきます。

 

✔️シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

 

上のURLの、「ヘッダーを好きな色に設定する」という項目で変更できます。

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

 

このカラーコードを参考に。

すると、こんなかんじになります。ここでは、水色のテーマ(#87cefa)にしてみました。

 f:id:nunkoro01:20170624154946j:image

 

また、上記URLの「シェアボタンを設置」の項目で、コピペで簡単にオシャレなシェアボタンを設置できます。

f:id:nunkoro01:20170624155013j:image

 

これでおしゃれブログの完成です!

 

7.まとめ

 

どうですか?

こんなに簡単に超おしゃれブログが完成しました。

 

Pro契約していなくてもここまでのカスタマイズができれば、ほぼ不自由なくブログ運営ができるはずです。

 

ぜひ、参考にしてみてください。

 

そして、これを基本として色々なカスタマイズを行っていくのも楽しいのではないでしょうか。

  

この記事作成のために作ったサンプルページです。気になる方は見てみてください。

これがMinimalism

 

 

この記事はこれでおわりです!

この記事に共感してくれた方は、記事下のシェアするボタンをポチッと。

このブログの更新情報を受け取りたい方は、TwitterFeedlyのフォローボタンを。

はてなアカウントをお持ちの方は読者登録をぜひお願い致します。