はてなブログ無料版をご利用の方、こんな事でお悩みではないでしょうか？
- はてなブログを始めたけど、カスタマイズのやり方がわからない。
- 無料版だと思うようにカスタマイズできない。
- カスタマイズに時間をかけたくない。
そんな方向けに、無料版でもシンプルかつキレイなデザインのカスタマイズ方法をお伝えします。
まず、この記事のカスタマイズで出来る完成物はこちら↓（記事ページも開いてみたりしてください）
https://muryou-sample.hatenablog.com/
（実際には、これにはてなブログの広告が入ります。）
【カスタマイズのセット内容】
- 見出しのデザイン。
- 蛍光ペン風アンダーライン。
- ヘッダー画像の設定。
- ヘッダー画像上下の余白を消す。
- テーマの変更。
- グローバルナビの設置。
- サイドバーの編集。
無料版だとどうしても制限が出てきてしまうので、
グローバルナビはPC画面のみになります(スマホ画面にはHTMLを書く枠がない)。
ただし「レスポンシブデザイン」にすればスマホ画面でもグローバルナビは表示されます。
この辺はお好みで。
これについては記事の最後に詳しく説明します。
このカスタマイズは基本的にコピペで出来るので、簡単にできます。
はてなブログ無料版のカスタマイズ。
順に説明していくので、順番通りにやってみて下さい。
見出しデザイン、蛍光ペン風アンダーライン、ヘッダー画像上下の余白を消す。
ダッシュボードの「設定」→「詳細設定」↓
「headに要素を追加」↓
ここに、以下のコードを書いてください。
(ちなみにこの部分に書いたコードはPC・スマホ両方に反映されます。)
<!-- フォントオーサム -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<style>
/*大見出し*/
h3 {
background: #bfdfff;
box-shadow: 0px 0px 0px 5px #bfdfff;
border: dashed 2px white;
padding: 0.2em 0.5em;
}
/*中見出し*/
h4 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #bfdfff;/*左線*/
}
/*小見出し*/
h5 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}
h5:before {
font-family: "Font Awesome 5 Free";
content: "00c";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #bfdfff; /*アイコン色*/
font-weight: 900;
}
/*蛍光ペン風アンダーライン*/
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"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
</div>
</nav>
このコードはこちらのサイトを参考にさせて頂きました↓
https://hitsuzi.hatenablog.com/entry/minimalism
コードの「カテゴリー」の部分を、自分のブログの各カテゴリー名に変えて、
「URL」の部分を、各カテゴリーのURL(https…)に変えて下さい。
最後に「変更を保存する」を忘れずに。
スマホ画面にヘッダー画像を設定。
次にスマホ画面にヘッダー画像を設定していきます。
先程の「カスタマイズ（工具のマーク）」の横の、
「スマホのマーク」→「ヘッダ」↓
「スマートフォン用に画像を設定する」にして、「ファイルを選択」で画像をアップロードしてください↓
この時の注意点は、ヘッダー画像はブログタイトルの文字を入れた画像にしてください。
後で説明しますが、ヘッダーは画像のみ表示しブログタイトルは表示しないようにします。
なので画像自体にタイトル文字を入れてください。
（画像に文字を入れるには、windowsのパソコンなら、画像を右クリック→「編集」でペイントアプリが起動するので、文字を簡単に入れられます。
スマホで文字を入れるなら「LINE Camera」アプリがおすすめです。）
画像をアップロードしたら、
その下を「画像だけ表示」と「領域に合わせる」にしてください↓
なぜ「画像だけ表示」にするのかというと、
「画像とテキストを表示」にすると下のように丸いアイコンなどが表示されて、いかにも無料版という感じがするので↓
気にならない人は、ヘッダー画像に文字を入れず、「画像とテキストを表示」にしてもいいと思います。
サイドバーの編集。
次にサイドバーを編集していきます。
必要なものを追加し、いらないものを削除します。
「デザイン」→「スパナのアイコン」→「サイドバー」→「モジュールを追加」
から
「カテゴリー」と「注目記事」を追加して下さい。
「リンク」はいらないので削除しましょう。
クリックしたまま上下に動かすと順番が変わります↓
記事編集画面で「続きを読む」を入れる。
今のままでは、パソコン画面のトップページで記事全文がズラーっと表示されてしまいとっても見づらいですよね？
なので記事の序文だけトップページに表示させるようにします。
どうやるかというと、
記事編集画面で、トップページに表示させたいところまでで「続きを読む」アイコンをクリックします。するとそこに線が入ります↓
記事を更新してトップページを確認すると、線が入ったところまでがトップページに表示され、その下は「続きを読む」となっています↓
これでパソコン画面のトップページもスッキリ。
以上でカスタマイズは終わりです。
色など自分好みに変えたい場合。
色など自分好みに変えたい場合は、最初に「headに要素を追加」の部分にコピペしたコードをいじります。
コードのどの部分を変えればいいのかを説明していきます。
コードに日本語のメモでどの部分のコードか書いてあるので、参考にして下さい。
(「なぜコードに日本語がかいてあるの？」「大丈夫なの？」と思うかもしれませんが、
/* */で囲まれた部分はコードに影響せず、メモとして書き込めるんです。)
見出しの色やデザインを変えたい場合。
見出しの色を変えたい場合は、コードの#bfdfffのところをカラーコードを参考に変えて下さい。
見出しデザインは、サルワカさんのサイトを参考にさせて頂きました↓
https://saruwakakun.com/html-css/reference/h-design
デザインを変えたい場合はこちらのサイトを参考にして下さい。
ただし、はてなブログは大見出しがh3、中見出しがh4、小見出しがh5になります。
サルワカさんのコードのh1の所をh3やh4に変えて下さい。
蛍光ペン風アンダーラインの色を変えたい場合。
蛍光ペン風アンダーラインはこちらのサイトを参考にさせて頂きました↓
https://www.manochang.com/entry/under-line
現在は赤ですが、色を変えたい場合は#ffccccの所を、ピンクなら#ffd6ff、オレンジなら#ffddbc、紫なら#ead6ff、青なら#ccffff、緑なら#ccffcc、黄色なら#ffffa8に変えてみて下さい。
レスポンシブデザインとは？
今のままでもいいとは思うのですが、スマホ画面にはグローバルナビは表示されません。
もしスマホ画面にもグローバルナビを表示させたいのであれば、「レスポンシブデザイン」にするという手もあります。
レスポンシブデザインとは、スマホ画面もパソコン画面と（ほぼ）同じデザインになる事をいいます。
ダッシュボードの「デザイン」→「スマホのアイコン」→「詳細設定」→「レスポンシブデザイン」にチェックを入れるとなります。
一度チェックを入れて確認してみるのもいいかと思います。
レスポンシブデザインがいいか、そうじゃない方がいいかはお好みになりますので、好きな方を選んでください。
有料版(Pro)にすると、「設定」→「詳細設定」→「トップページの表示形式」→「一覧形式」にできるので、レスポンシブデザインでも見やすいです。
はてなブログ無料版のカスタマイズまとめ。
いかがでしょうか？
今回ははてなブログ無料版のカスタマイズ方法をお伝えしました。
これさえやっておけば、無料版でもシンプルかつキレイなデザインに出来ます。
是非やってみて下さい。