初心者必見！「はてなブログ」カスタマイズ記事のまとめと小ネタ集

どうも、たつとら(@tatsutora6) です。

「はてなブログ」ユーザーの方の中には、自分のブログを使いやすいようにカスタマイズをやられていたり、初心の方の中にはこれから始めようかと思っている方もいるかと思います。

ボクも時間がある時、ちょっとずつやっていて紹介もしていますが、今回はちょっとした小ネタ的なカスタマイズの紹介と以前書いたカスタマイズ記事を紹介しようと思います。

初心者の方はもちろん、これからやってみようと思っている人にも参考になるのでご覧ください。

カスタマイズ記事まとめ

ボクが紹介したカスタマイズ記事は、実際自分でやってみた物を記事にしています。

今回はその中でも特におすすめしたい記事を紹介します。

見出しタグの修正

「はてなブログ」で記事を書く際、「大見出し」のタグが通常であれば、h2になるのですが、h3タグとズレているので注意が必要です。

下記の記事では「見出し」の修正について書いています。

ズレたりしていたらSEOにも影響を受けるのでチェックしておきましょう。

上に戻るボタンの設置

ブログ記事を読んで下までいくと、一旦また上まで戻りたいということもあります。

この記事ではブログのTOPへ戻るボタンを常に右下に表示するボタンを設置する方法を紹介しています。

箇条書きの部分をオシャレにする

ブログを書く上で使用することもある「箇条書き」や「番号付きリスト」部分をデザイン性があるものに変更したかったので、簡単にできるいくつかのデザインを下記に載せています。

見出しデザインと目次デザインを変更

ブログでは、それぞれデザインテーマを選んでブログのデザインを決定していますが、

たまに「見出し」や「目次」のデザインがいけてないテーマもあります。

下記の記事ではブログの「見出し」と「目次」デザインを変更した際のデザインについて書いています。

ボクのブログとテーマが違っても使えるので、参考にしてみてください。

フォント（文字）サイズを変更

こちらの記事では、記事を読む上で最適なフォント（文字）サイズの紹介や変更方法を書いています。

文字の大きさは意外と重要なのでチェックしておきましょう。

スポンサーリンク

ちょっとした「はてなブログ」カスタマイズ

次に、特段やっておく必要はありませんが、こういうのもあるというカスタマイズを紹介したいと思います。

ブログTOPページのみ「はてなスター」、「Bookmark」を消す

「はてなブログ」を運営していたら、「はてなスター」を表示させるか消すかを悩むことは誰しもあるかと思います。

「はてなブログPro」でブログを書いている人は、TOPページにブログをリスト表示している場合、「はてなスター」と「Bookmark」が表示されるデザインテーマがあります。

今回は消したくないけれど、TOPページだけ「はてなスター」と「Bookmark」と消す方法を紹介します。

ボクが設定しているテーマ「薄グレーなテンプレ」もTOPの記事毎に「はてなスター」と「Bookmark」の表示があります。

TOPページに表示されていれば、このまま「はてなスター」や「Bookmark」を押すことができるので、記事を読まなくてもスターやBookmark押せます。

記事を読まず押す人は、まぁいないと信じたいですが記事内の「はてなスター」はまだ残しておきたいので、念のためTOPだけ消すようにしました。

方法は簡単、この下のコードを【ダッシュボード】＞【デザイン】＞【カスタマイズ】＞【デザインCSS】に入れるだけで消すことができます。

.archive-entry-body .social-buttons {display: none;}

やはりブログを書いている以上、記事を読まれてから「はてなスター」や「Bookmark」を押されたいし、TOPページだけ見て離脱されたら記事のアクセス数も減りますからね…

タイトルの文字の太さや大きさを変更

次にタイトルの見た目を変えてみたいなら、タイトルをちょっといじってみましょう。

普通何もしてなければこういう見た目ですが、

ボクは、「ちょっと野暮ったいかな」と思ったので下のように変更しました。

とりあえず、文字の太さと大きさを変更しています。

太さを変更する場合は下記のコード上と同じように【ダッシュボード】＞【デザイン】＞【カスタマイズ】＞【デザインCSS】に入れます。

.entry-title{ font-weight: normal;}

大きさを変更する場合は、

.entry-title{ font-size: 00%;}

上の00%の部分は好きな数字を入れましょう。ちなみに上の画像のタイトルの大きさは170%で、これより大きくしたい場合はこれより大きい数字を、小さくしたい場合は小さい数字をいれましょう。

上２つのコードはまとめることができるので、

.entry-title{
font-weight: normal;
font-size: 00%;
}

このように書く事も可能です。

過去記事を簡単に差し込む方法

そしてこれはカスタマイズとは言えないかもしれませんが、記事を書く際に過去の記事をブログに入れる事もあると思います。

その場合、普通こちらの赤丸のリンクをクリックしてURLを記述して記事を差し込むと思われますが、

いちいちURLをコピーして過去の記事を入れるのは面倒な時もあります。

そういう時は、今から紹介する方法で差し込んだら比較的楽に済むでしょう。

記事を書く際に、右にある赤丸の「＋」のアイコンをクリックします。

すると「編集サイドバー」が出てくるので、ここにある「過去記事貼り付け」の項目をタブに追加しましょう。

先ほどの「＋」の所に「過去記事貼り付け」のアイコンが表示されるので、このアイコンをクリックします。

クリックすれば、アイコンの右側に過去記事の一覧が出てくるので入れたい場所にキーワードで検索した過去記事をクリックします。

すると下に「選択したアイテムを貼り付け」のボタンが表示されるので、そのボタンをクリックすれば記事内に挿入されます。

ただ、下の画像のように「ブログカード」のみでの挿入になるので、

テキストで挿入したい場合はリンクボタンから入れる必要があります。

その他にも「編集サイドバー」には、便利で使えるショートカット機能があるので一度目を通してみるのもいいかもしれません。

以上がちょっとした「はてなブログ」のカスタマイズの小ネタでした。

気になった方は試してみて下さいね。

最後に

今回は簡単にカスタマイズ記事のまとめと、ちょっとしたカスタマイズ方法について紹介しました。

カスタマイズの方法は探せば無数にあるし、色々試してみたくなるかと思います。

ボクのブログ以外にも紹介されている記事はあるので、その中からお気に入りのカスタマイズをやってみるのもいいでしょう。

ただ、カスタマイズばかりに時間をかけて肝心の執筆の方が疎かにならないように注意してくださいね。