はてなブログテーマ Minimalism カスタマイズまとめ
あくまで備忘録ですが、参考になれば。
このブログは書評ブログです
2017.9.17追記
Googleさん、Yahoo!さんで検索をすると、この記事が真っ先に来るようになっています。
しかし、この記事は僕のブログで現在唯一の書評ではない記事です。
そこで、書評ブログを期待してアクセスされた方は、お手数ですが上のメニューの「HOME」から記事一覧をご覧ください。
嬉しかったので備忘録
先日ブログデザインを変更したと報告しましたが、友人や他のはてなブロガーさんからも反響があり、嬉しかったので僕がminimalismにテーマを変更してから行ったカスタマイズと、参考にした記事をまとめます。
あくまで備忘録です。決してカスタマイズがうまくいって調子に乗ってるわけではありません！断じて違います！デザイン褒めて下さった方々ありがとうございました！
- このブログは書評ブログです
- ブログ＆カスタマイズ初心者です
- シンプルで洒落たテーマ Minimalism
- 1.グローバルナビの設置
- 2.ヘッダーのカスタマイズ
- 3.シェアボタンの設置
- 4.「続きを読む」ボタンのカスタマイズ
- 5.太字を蛍光ペン風にする
- 6.プロフィールの変更
- 7.フォローボタンの設置
ブログ＆カスタマイズ初心者です
最初に僕のスペックですが、正直ずぶの初心者です。
- コピペするべき場所に正しくコピペできる。
- Proにする予定なし。
- ＨＴＭＬ、ＣＳＳのそれぞれの役割がなんとなくわかってきた。
- どこに何に関する記述があるかが読める（書けない）。
この程度です。
なので、はてなブログを始めたばかりの人や初めてカスタマイズをするという方も安心して（？）読み進めてください。
ちなみに、以下に紹介する方々の記事を読んで、このくらいのことまではできるようになりました↓
クリックするだけで僕のことをフォローできる優れものです。ぜひ！（笑）
シンプルで洒落たテーマ Minimalism
こどみすさん(id:codomisu)が制作したテーマMinimalismを使用します。
シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
最近公開されたばかりですが、テーマストアでもすごい勢いでインストールされているようなので、今後更によく見かけるようになると思います。
特徴は何といってもそのシンプルさ。デモページがあるのでそちらをご覧ください。
インストールするだけでもブログがかなり見やすく、お洒落になると思います。
今回のカスタマイズでは、テーマの持つシンプルさを殺さず、さりげない調整で見やすさ使いやすさ、デザイン性を高めること、かつ他のMinimalism使用ブロガーさんと差をつけること、を目標に頑張りました。
1.グローバルナビの設置
まずはグローバルナビの設置です。
ひとまずこどみすさんの記事に従って、ナビを設置してみてください。
シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
コピペだけで簡単にできるはず。すごいです。
ただ、Minimalistのグローバルナビはデフォルトのままだと使いにくいはず。
というのも、最初に設定されている項目が TIPS STUDY DESING と癖のあるものばかりで、このカテゴリ分けを元々していたという希少種にしか価値がありません。
そもそも、TIPSってなんだよ！とツッコミを入れたいところですが、こどみすさん自身のブログでもTIPSには何のURLも結びついていないようで、謎は謎のままです。
そこで、表示の変更を行いましょう。
<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
・ＵＲＬには、飛ばしたいカテゴリ先のＵＲＬをコピペしてください。
・青色の箇所は、アイコンの形を指定しています。font awesomeというものを利用していて、青色部分を書き換えるだけで好きなアイコンに変更することができます。
＊尚、本家のfont awesomeはアイコンの検索がしにくいです。下記のサイトが非常に便利なのでご活用ください。
Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた
font awesomeを使いこなせるようになると、好きなところにアイコンを表示できるようになるので、ぜひマスターしてください！
・緑色の部分を書き換えることで、ナビゲーションに表示されるカテゴリ名を変更できます。
2.ヘッダーのカスタマイズ
他のMinimalism使用者さんと差をつける大きなポイントがこのヘッダーです。
ぜひ個性的なヘッダー画像をガツンと貼り付けてください。
そのとき気になるのがヘッダーの上下にできる余白ですよね？
あと、個人的な感覚かもしれませんが、スマホ画面で見たときにヘッダーが細長いとバランス悪いなあとも思っていました。
そこでいろんな記事を参考にしてMinimalismに合うように調整したのが以下のＣＳＳです。
/* ヘッダー画像の比率の調整 */
.header-image-only #blog-title #blog-title-inner {
position: relative;
background-size: cover;
height: auto;
}
.header-image-only #blog-title #blog-title-inner:before {
display: block;
content: "";
width: 100%;
padding-top: 45%;
}
.header-image-only #blog-title #blog-title-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* ヘッダー上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}
このままデザインＣＳＳに貼り付けて、赤字の部分を自身の画像の割合（僕の場合は450×1000のサイズなので縦/横で45％）を調整すれば、好きな比率の画像を余白なしで設定できます。
ちなみにスマホで見るとこんな感じ
良いバランスです。
だがしかし。
ＰＣ画面で見た場合
ほぼヘッダー（笑）
申し訳程度に顔を出すナビ達がかわいそうです。
ここは課題ですね。
3.シェアボタンの設置
シェアボタンに関しては、デフォルトをそのまま使用してもかなり綺麗です！
僕は他の方と被りたくないので変更しました（笑）
だいぱんまんさん(id:donchan922)のシェアボタンが、お洒落かつシンプルでイメージぴったりなので使用させていただきました。
おしゃれなシェアボタンをCSS＆Webフォントで作ってみた【はてなブログのPC＆スマホ用】 - 技術を磨くだいぱんまん
4.「続きを読む」ボタンのカスタマイズ
これはProでない人向け。
Proの人はトップページを一覧形式にできるのですが、無課金ユーザーはそれができないためトップページがごちゃつきます。
それを解消できるのが「続きを読む」ボタン
実は記事を書くところで設定できます。探してください。
僕は、記事の構成を
画像（正方形：無駄なこだわり）
ひとこと
ー続きを読むー
という構成し、トップページのスッキリ化に成功しました。
Minimalismは「続きを読む」ボタンには何の装飾もされていないので、じょーじさんの記事などを参考にカスタマイズすることを勧めます。
【保存版】簡単コピペの"続きを読む"ボタンデザイン集【はてなブログカスタムVol.11】 - 急がば 急いでまわれ！
5.太字を蛍光ペン風にする
これです。
ＣＳＳをコピペするだけで簡単に設定できるので非常におすすめ。
色を変更することもできます。
はてなブログで太字を蛍光マーカーでラインを引いたようにする方法 - ringocat note
6.プロフィールの変更
サイドバーのプロフィールの自由記述欄にＨＴＭＬが使用できます。
<a href="URL">詳しいプロフィールを見る</a>
騙されたと思って上の文字列をコピペして、
赤字部分に飛ばしたい先のＵＲＬ
青字部分にブログ上での表示文字
を記入してみてください。自己紹介記事を書いて、そのＵＲＬ先を入れておくと、
「詳しいプロフィールを見る」→自己紹介記事へ
という黄金ルートが確立します。
他にもプロフィールと関連するリンクがあれば同様に貼り付けることができます。
7.フォローボタンの設置
こちらもじょーじさん。非常にお洒落で気に入っています。
コピペOK！読者になるボタンやSNSフォローボタンのカスタムCSS - 急がば 急いでまわれ！
ちなみに載せる場所は「プロフィール」内にぶち込んでもいいですし、自由記述のモジュールを立てて、「フォロー」などの項目を立てるのもありですね。
まとめ
いかがだったでしょうか。
基本的にはシンプルで白のよく似合うテーマなので、あまりいじりすぎるのはお勧めしませんが、バランスを保ちつつ個性が出せれば最強のデザインが完成するかと思います。
