はてなブログ無料版をご利用の方、こんな事でお悩みではないでしょうか？
- はてなブログを始めたけど、カスタマイズのやり方がわからない。
- 無料版だと思うようにカスタマイズできない。
- カスタマイズに時間をかけたくない。
そんな方向けに、無料版でもシンプルかつキレイなデザインのカスタマイズ方法をお伝えします。
まず、この記事のカスタマイズで出来る完成物はこちら↓
パソコン画面
スマホ画面
記事画面
（実際には、これにはてなブログの広告が入ります。）
【カスタマイズのセット内容】
- 見出しのデザイン。
- 蛍光ペン風アンダーライン。
- ヘッダー画像の設定。
- ヘッダー画像上下の余白を消す。
- テーマの変更。
- グローバルナビの設置。
- サイドバーの編集。
無料版だとどうしても制限が出てきてしまうので、
グローバルナビはPC画面のみになります(スマホ画面にはHTMLを書く枠がない)。
ただし「レスポンシブデザイン」にすればスマホ画面でもグローバルナビは表示されます。
この辺はお好みで。
これについては記事の最後に詳しく説明します。
このカスタマイズは基本的にコピペで出来るので、簡単にできます。
はてなブログ無料版のカスタマイズ。
順に説明していくので、順番通りにやってみて下さい。
見出しデザイン、蛍光ペン風アンダーライン、ヘッダー画像上下の余白を消す。
ダッシュボードの「設定」→「詳細設定」↓
「headに要素を追加」↓
※現在は「<head>要素にメタデータを追加」に変わっています。
ここに、以下のコードを書いてください。
(ちなみにこの部分に書いたコードはPC・スマホ両方に反映されます。)
<style>
/*大見出し*/
h3 {
background: #f5deb3;/*大見出しの色*/
box-shadow: 0px 0px 0px 5px #f5deb3;/*大見出しの色*/
border: dashed 2px white;
padding: 0.2em 0.5em;
}
/*中見出し*/
h4 {
padding: 0.25em 0.5em;
color: #494949;/*文字色*/
background: transparent;
border-left: solid 5px #f5deb3;/*中見出しの色*/
}
/*小見出し*/
h5 {
position: relative;
padding-left: 1.2em;
line-height: 1.4;
}
h5:before {
content: "\f029";
font-family: blogicon;
font-weight: 900;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: #f5deb3; /*小見出しの色*/
font-weight: 900;
}
/*サイドバー見出し*/
.hatena-module-title{
background: #f5deb3;/*サイドバー見出しの色*/
box-shadow: 0px 0px 0px 5px #f5deb3;/*サイドバー見出しの色*/
border: dashed 2px white !important;
padding: 0.2em 0.5em;
}
/*蛍光ペン風アンダーライン*/
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, #ffcccc 60%) !important;/*蛍光ペンの色*/
}
article i{
font-style:oblique !important;
}
/* ヘッダー画像上下の余白を消す */
#blog-title{
padding:0;
}
</style>
ちょっと長いですが、問題ありません。
最後に一番下の「変更する」ボタンを押すのを忘れずに。
蛍光ペン風アンダーラインは、記事を書く画面で斜体(i)にするとなります。
色など変えたい場合は、後ほどやり方を説明します。
テーマの変更。
次にテーマを変更します。
テーマはMinimalism(ミニマリズム)を使います。
「デザイン」
→「パレットのアイコン」→一番下の「テーマストアでテーマを探す」
Minimalismを選択し、「プレビューしてインストール」
これでテーマが変わったはずです。
(ちなみにテーマはPCにしか反映されません)
変わっていなかったら、上の「公式テーマ」を「インストールしたテーマ」にして、Minimalismを選択して下さい。
最後に上の「変更を保存する」を押すのを忘れずに。
なぜMinimalismなのかというと、
他のテーマだと元々見出しなどにデザインが入っていて、デザイン同士がぶつかってしまうからです。
PC画面のヘッダー画像を設定。
次はPC画面のヘッダー画像を設定します。
「デザイン」→「カスタマイズ(工具のマーク)」→「ヘッダ」→「ファイルを選択」で画像をアップロードします↓
画像サイズは1000×200が望ましいですが、良くわからないという方はそのままアップして下さい。縦は調整できます↓
ただ横幅があまりない画像だと、ヘッダー画像が短くなってしまいますのでご注意下さい。
画像をアップロードしたら、その下の表示設定は「画像とテキストを表示」にしてください（たぶん最初からなっていると思います）↓
※はてなブログの仕様がかわりました。「画像だけ表示」にしてください。なので、画像はタイトル文字が入ったものがいいです。
これでPC画面のヘッダー画像はOKです。
グローバルナビを設置。
次にグローバルナビを設置します。
先程のヘッダー画像を設定したところの下に「ブログタイトル下」という所があります↓
そこの枠にこのコードをコピペして下さい↓
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"> メニュー1</a></div>
<div class="menu"><a href="URL"> メニュー2</a></div>
<div class="menu"><a href="URL"> メニュー3</a></div>
<div class="menu"><a href="URL"> メニュー4</a></div>
<div class="menu"><a href="URL"> メニュー5</a></div>
<div class="menu"><a href="URL"> メニュー6</a></div>
</div>
</nav>
このコードはこちらのサイトを参考にさせて頂きました↓
https://hitsuzi.hatenablog.com/entry/minimalism
コードの「カテゴリー」の部分を、自分のブログの各カテゴリー名に変えて、
「URL」の部分を、各カテゴリーのURL(https…)に変えて下さい。
最後に「変更を保存する」を忘れずに。
スマホ画面にヘッダー画像を設定。
次にスマホ画面にヘッダー画像を設定していきます。
先程の「カスタマイズ（工具のマーク）」の横の、
「スマホのマーク」→「ヘッダ」→「PCと同じ画像を表示する」にしてください↓
サイドバーの編集。
次にサイドバーを編集していきます。
必要なものを追加し、いらないものを削除します。
「デザイン」→「スパナのアイコン」→「サイドバー」→「モジュールを追加」
から
「カテゴリー」と「注目記事」を追加して下さい。
「リンク」はいらないので削除しましょう。
クリックしたまま上下に動かすと順番が変わります↓
記事編集画面で「続きを読む」を入れる。
今のままでは、パソコン画面のトップページで記事全文がズラーっと表示されてしまいとっても見づらいですよね？
なので記事の序文だけトップページに表示させるようにします。
どうやるかというと、
記事編集画面で、トップページに表示させたいところまでで「続きを読む」アイコンをクリックします。するとそこに線が入ります↓
記事を更新してトップページを確認すると、線が入ったところまでがトップページに表示され、その下は「続きを読む」となっています↓
これでパソコン画面のトップページもスッキリ。
以上でカスタマイズは終わりです。
見出しの色を変えたい場合。
見出しの色を自分好みに変えたい場合は、最初に「headに要素を追加」の部分にコピペしたコードをいじります。
コードの#f5deb3のところをカラーコードを参考に変えて下さい。
コードに日本語のメモでどの部分のコードか書いてあるので、参考にして下さい。
(「なぜコードに日本語がかいてあるの？」「大丈夫なの？」と思うかもしれませんが、
/* */で囲まれた部分はコードに影響せず、メモとして書き込めるんです。)
蛍光ペン風アンダーラインの色を変えたい場合。
蛍光ペン風アンダーラインはこちらのサイトを参考にさせて頂きました↓
https://www.manochang.com/entry/under-line
現在は赤ですが、色を変えたい場合は#ffccccの所を、ピンクなら#ffd6ff、オレンジなら#ffddbc、紫なら#ead6ff、青なら#ccffff、緑なら#ccffcc、黄色なら#ffffa8に変えてみて下さい。
レスポンシブデザインとは？
今のままでもいいとは思うのですが、スマホ画面にはグローバルナビは表示されません。
もしスマホ画面にもグローバルナビを表示させたいのであれば、「レスポンシブデザイン」にするという手もあります。
レスポンシブデザインとは、スマホ画面もパソコン画面と（ほぼ）同じデザインになる事をいいます。
ダッシュボードの「デザイン」→「スマホのアイコン」→「詳細設定」→「レスポンシブデザイン」にチェックを入れるとなります。
一度チェックを入れて確認してみるのもいいかと思います。
レスポンシブデザインがいいか、そうじゃない方がいいかはお好みになりますので、好きな方を選んでください。
有料版(Pro)にすると、「設定」→「詳細設定」→「トップページの表示形式」→「一覧形式」にできるので、レスポンシブデザインでも見やすいです。
はてなブログ無料版のカスタマイズまとめ。
いかがでしょうか？
今回ははてなブログ無料版のカスタマイズ方法をお伝えしました。
これさえやっておけば、無料版でもシンプルかつキレイなデザインに出来ます。
是非やってみて下さい。
ココナラで「はてなブログのカスタマイズ」やってます↓（妻と共同でやっているので妻アカウントです）
はてなブログのデザインを丸ごとカスタマイズ致します 無料版も有料版もOK!デザインを丸ごとお任せ下さい。
ココナラはこちらから簡単に登録できます↓
