はてなブログ無料版からPro(プロ)にした方向けです。
- Proにしたけど、設定をどうすればいいだろう？
- デザインをどうすればいいんだろう？
そんな方向けに、はてなブログProのカスタマイズ方法を書いていきたいと思います。
まず、この記事のカスタマイズでできる完成物はこちら↓（記事画面も開いてみてください）
https://pro-sample.hatenablog.com/
テーマは、人気の「Haruni」を使っています。
Haruniは見やすいしキレイなのでオススメです。
色を変える方法も解説するので、是非参考にして下さい。
- はてなブログPro「Hruni」を使ったカスタマイズ。まず詳細設定を変える。
- テーマをHaruniへ。
- グローバルナビの設置。
- 蛍光ペン風アンダーライン。
- レスポンシブデザイン」にする。
- Haruniのグラデーション色を変える方法。
- 「Haruni」を使ったはてなブログPro(プロ)カスタマイズまとめ。
はてなブログPro「Hruni」を使ったカスタマイズ。まず詳細設定を変える。
はてなブログProにしてまずやることは、「詳細設定」を変える事です。
「設定」→「詳細設定」
このページで以下の設定を変えていきます。
トップページの表示形式。
トップページの表示形式(PC版)を「一覧形式」にします。
これにすることで、今までトップページに記事全文がズラーっと表示されていたのが、タイトル一覧になり読みやすくなります。
PC版だけでいいの？と思うかもしれませんが、後でレスポンシブデザイン(PC画面とスマホ画面が同じデザイン)にするので大丈夫です。
キーワードリンク。
「記事にキーワードリンクを付与しない」にチェックを入れます。
キーワードリンクとは、無料版だと記事中の様々なワードにはてな側で強制的にアンダーラインが引かれ、リンクになってしまうというものです。
それを無くします。
広告を非表示。
「はてなによる広告を表示しない」にチェックを入れます。
これで、はてな側から勝手に広告を入れられてしまうことが無くなります。
ヘッダとフッタ(PC版)。
「ブログにヘッダを表示しない」と「ブログにフッタを表示しない」にチェックを入れます。
これでヘッダとフッタの余計な要素を非表示にし、見た目スッキリできます。
フィードの配信方法。
フィードとは、分かりやすく言うとブログの更新案内です。
あまり関係無いかもしれませんが、一応「フィードでは概要のみ配信する」にチェックを入れておきましょう。
詳細設定は以上です。
最後に一番下の「変更する」を押すのを忘れずに↓
テーマをHaruniへ。
次にテーマを「Haruni」に変えます。
(テーマを変える前に、前回の記事から来た方は「headに要素を追加」に書いたコードは消しといて下さい。必要ないので。)
「デザイン」
→パレットのアイコン→一番下の「テーマストアでテーマを探す」
Haruniを選択し、「プレビューしてインストール」↓
これでテーマが変わったはずです。
変わっていなかったら、上の「公式テーマ」を「インストールしたテーマ」にして、Haruniを選択して下さい↓
最後に上の「変更を保存する」を押すのを忘れずに。
グローバルナビの設置。
グローバルナビの設置はこちらのサイトを参考にして下さい↓
ここに書いてあるコードを
「デザイン」→「スパナのアイコン」→「ヘッダ」→「タイトル下」に貼り付けます↓
コード内の「Top」「About」「Profile」…の所を自分のカテゴリー名に変えて、
「URLを入力」の所を各カテゴリーのURL(https…)に変えて下さい。
→「変更を保存する」。
蛍光ペン風アンダーライン。
重要な所をこのように蛍光ペンでアンダーラインを引いたようにします。
「デザイン」→「スパナのアイコン」→「デザインCSS」に、以下のコードをコピペして下さい。
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%, #ccffff 60%) !important;
}
article i{
font-style:oblique !important;
}
→「変更を保存する」。
これで、記事を書く画面で斜体（i）にすると蛍光ペン風アンダーラインが引かれます。
現在は青ですが、色を変えたい場合は#ccffffの所を、ピンクなら#ffd6ff、黄色なら#ffffa8、オレンジなら#ffddbc、紫なら#ead6ff、緑なら#ccffccに変えてみて下さい。
レスポンシブデザイン」にする。
最後にレスポンシブデザイン(スマホ画面もPC画面と同じデザイン)にします。
「デザイン」→「スマホのアイコン」→「詳細設定」→「レスポンシブデザイン」にチェックを入れます↓
→「変更を保存する」。
Haruniのグラデーション色を変える方法。
Haruniの色は薄いグラデーションになっています。
グラデーションの色を変えたい場合は、こちらのサイトを参考にして下さい↓
コードを貼り付ける場所は、「デザイン」→「スパナのアイコン」→「デザインCSS」です。
自分好みのグラデーション色にしたい場合は、とりあえず水色グラデーションのコードを貼り付けて下さい。そこからいじっていきます。
コードのこの赤枠と青枠の部分を書き換えます↓
グラデーション色参考↓
例えばこの色にしたいなら↓
この２つのカラーコードに書き換えます。
その他グラデーションではない部分は、カラーコードを参考に赤枠の所を変えましょう↓
以上となります。
「Haruni」を使ったはてなブログPro(プロ)カスタマイズまとめ。
いかがでしょうか？
今回は人気のテーマ「Haruni」を使った、はてなブログProカスタマイズ方法をご紹介しました。
これでカスタマイズに時間をかけずにキレイなデザインにできます。
是非試してみて下さい。