自由人法帖~自由忍者紀行録~

自由に旅をするのが好きな忍者が書く雑記ブログです。旅・ゲームアニメ書評等のテーマで書いてます。

コピペでできる!はてなブログ 超おすすめカスタマイズまとめ【PC版】

スポンサーリンク

はじめに

こんにちは、抜け忍です。
ブログを初めてまだ1か月目ですが、ブログのデザインをがらっと変更してみました!

いやー、カスタマイズ面白すぎですね!!
今日昼飯時から作業を始めたのですが、気づけば夜になっていました(笑)

これまでは、ブログ初心者もいいとこなんで、まずは「Handwriting」というテーマ(これもかわいくて見やすいテーマでお勧めです!)を使わせていただき、軽くサイドバーのカスタマイズをしたぐらいで使わせてもらっていました。

ブログ初心者やそこまでデザインとか凝るつもりがない人とかは同じように公式で設定できるテーマやサイドバーを少しだけカスタイマイズするくらいでいいと思いますけど、
やっぱ自分だけのブログを作りたい!!って人はデザインCSSとかガツガツいじって言った方がより一層ブログを楽しめるんじゃないかと思います。

今回はこのブログで行った最初のカスタマイズを備忘録的な意味もこめて、オススメ記事を書いていきます。

なお、大体はCSSをコピーペーストしてカスタイマイズを行っているので、詳細方法については参照させていただいた記事を紹介させていただきます!
※記事を参考させていただいたブログ主様にこの場を借りてお礼申し上げます!
本当に感謝の極みです!

カスタマイズを行う前の準備

テーマ「blank」を導入

カスタマイズは主にダッシュボードの「デザイン」-「カスタマイズ(スパナのマーク)」-「デザインCSS」というところにインターネット上で紹介されているカスタマイズ用のCSSを貼り付け、必要に応じて手動でパラメータを変更して設定していくのですが、

なかにはCSSを貼り付けても使用しているテーマの設定が優先されてCSSの設定が反映されなかったり、設定が重複してしまうことがあります。

対策としては、比較的カスタマイズがしやすいテーマ「blank」を使用すれば、大体の場合はCSSの設定が反映されると思います。


テーマ「blank」は下記URLからインストール・適用できます。

Blank - テーマ ストア

注意としてはテーマを設定する前にデザインCSSをいじっていると、テーマ設定時に設定が上書きされてしまいますので、後述の方法で、テキストファイルなどにデザインCSSのバックアップを取りましょう。

※詳しくは勉強しないとわからないですが、CSSのセレクタの優先ポイントでどの設定が優先されるかが決まるらしいです。
CSSの命令記述の末尾に「!Important」と追記すればその命令を最優先で実行できるので、一応覚えておくといいみたいです。

 <参考サイト>

CSSの優先順位〜CSSテクニック〜

デザインCSSのバックアップ作成

まだ一度もデザインCSSを変更してなければ不要ですが、変更を行う前に必ずデザインCSSの内容のバックアップを作成しましょう!
バックアップを取っておけば変更を間違ってしまった場合でも、バックアップの内容をコピーし、デザインCSSに貼り付けなおせば簡単に変更前の状態を復元することができます。
方法は、
まず、ダッシュボードの「デザイン」-「カスタマイズ(スパナのマーク)」-「デザインCSS」へ移動し、

f:id:freedomdream:20170412184645p:plain

赤枠の部分をクリックして、Ctrlキー+Aキーで全選択、Ctrlキー+Cキーでコピーして、
あとはテキストファイルなどに貼り付けて保存するだけです。
復元したいときはテキストファイルで同じように全選択コピーして、デザインCSSのところに貼り付ける形になります。

一部分だけ変更したい場合でも、変更箇所だけコピーしてバックアップをする癖をつければ安心してカスタマイズを行えますよ!

なお、カスタマイズでCSSのパラメータを設定変更するときとかも直接デザインCSSをいじるのではなく、テキストエディタなどに貼り付けてからそちらで編集したほうがやりやすいかもしれないです。
テキストエディタはプログラマーご用達の「さくらエディタ」がおすすめです!

sakura-editor.sourceforge.net

 

おすすめの機能的カスタマイズ

グローバルメニューの導入

ブログのトップ画像の下に記事へのリンクを表示できるメニューですね!
記事が増えてきたらこの機能を搭載したほうが読者様にとっては読みたい記事を
断然探しやすくなると思います。

↓これです。

f:id:freedomdream:20170412185553p:plain

僕はゆきひーさん作成のこちらの記事を参考(ほぼ丸々コピペですが(笑))にさせていただきました。ゆきひーさんには他のカスタマイズもかなりお世話になっているので、もう頭あがんないです(笑)

www.yukihy.com

 

パンくずリストの階層化

グローバルメニューを実装した人は合わせてブログのカテゴリの階層化と、パンくずリストの階層表示も行った方がSEO対策的にも効果的みたいです。

パンくずリストってのは、自分が見ているページはどうたどってきたかを表示する地図みたいなものですね。
↓これです↓

f:id:freedomdream:20170412190649p:plain

パンくずリストはダッシュボードの「デザイン」-「カスタマイズ(スパナのマーク)」-記事のカテゴリから、「記事ページにパンくずリストを表示する」にチェックをつければ利用できますが、
公式の設定だと1階層までしか表示できないようです。上の例だと

トップ>価値観>失恋して10年引きずった僕が失恋から立ち直る方法を教える。

こんな感じですね。
ちゃんと設定したカテゴリの階層を表示するために下記記事を参考にデザインCSSの設定をしました。

blog.wackwack.net


記事のカテゴリー設定を適当に行っていた場合はカテゴリーの大幅な見直しが必要となるので、これはブログ開設したらなるべく早く行った方が絶対に楽だと思います。

リンク色の色変更

テーマ「blank」を設定するとリンクの色が黒になってしまい、リンクが貼られていることに気づきにくくなってしまうので、この設定を行い、リンクの色を青に変えると被クリック率が上がります。

記事のリンク色変更方法は安定のゆきひーさんの記事(記事のフォント変更方法なども載っています。トップ記事のフッターを消す設定・続きボタンを大きくする設定もおすすめです。)を、

www.yukihy.com

サイドバーのリンク色変更方法はバークシーさんの記事を参考にするといいかも。

brcxy.hatenablog.jp

おすすめの見た目カスタマイズ

見出しの見た目変更

ブログはつらつらと本文を書き連ねていくだけでなく、適度に文章の塊の内容に沿った見出しをはさむと記事を読みやすくできます。
↓これですね。↓

f:id:freedomdream:20170412192429p:plain

その見出しもデフォルトだと太文字になったりするだけですが、この見出しの見た目も変更することができます。

シロマティさんが見出しの見た目サンプルとそのCSSをわかりやすくまとめてくれているので、下記記事を参考に好きな見出しを設定してみましょう。

shiromatakumi.hatenablog.com


ちなみに、見出しだけでなく記事タイトルも似たような方法で見た目の変更ができます。northgeekさんの記事がわかりやすいので、参考に設定してみましょう。

www.north-geek.com

ブログタイトルの見た目変更

デフォルトだとブログタイトルの文字の大きさが小さいので、大きくしましょう。
大きさだけでなく色や表示位置、文の折り返し位置の調整なんかも可能です。

ameblo.jp

記述を追記すれば大きさだけでなくフォントも変更が可能です。

(僕はまだ設定してませんが、次回カスタマイズの際に変更予定です。)

www.takurin.com

ブログタイトルの文字を変更するとトップ画像がはみ出して見た目が悪くなったりするので、トップ画像の大きさを変更して調整しましょう。
合わせて、トップ画像から記事までの余白も調整すると余計なスクロールの手間が省けていい感じです!

www.underpowermotors.com

 

まとめ

とりあえず、取り急ぎ行ったカスタマイズについて紹介させていただきました。
まだ必要最小限のカスタマイズしかやっていないので、これからどんどんカスタマイズして読者様にとって見やすいブログにしていきたいですね!

いずれは自分でCSSをいじって独自のカスタマイズとして紹介もできたらいいなと思ってます。

ただ、カスタマイズ面白すぎてこればっかいじってたら時間がドンドンすぎていってしまうので気をつけなきゃいかんなと思いました(笑)

まだブログ始めたてでアクセス数も少ないので、ひとまずは記事執筆に力いれていかんとだめですね!がんばります!


ってことで今回はこんな感じで・・・
ではでは!