ブログのデザインに役に立つ細かいカスタマイズまとめ

こんにちは。かまぼこです

最近、カスタマイズばかりしてて記事が進まない……。

デザインって着せ替えゲームみたいで、反映させながら試行錯誤するのが楽しいんだよね。

色々なサイトを見てまわると、よさげなものがたくさんありました。

見つけた中で、役に立ったり、面白かった、導入している人が少ないものをいくつかご紹介していきます。

細かいデザインを変えると見栄えがよくなります。こだわるとキリがないけど、来てくれた人も楽しめるはず。

主要なカスタマイズはシロマティさんが網羅しているので参考になれば　↓　↓　↓　

では、いってみよう！ 

はてなスターのデザイン

デフォルトのはてなスターは小さいから、デザインを変えることによって大きくなる。

表示を変えることで見にきてくれた人も、楽しんで押してもらえるようなデザインになります。

パンくずリストのデザイン

公式のパンくずリストだとちょっと味気ない……。

変えることでスタイリッシュに。

404 Not Found 画面カスタマイズ

わざわざ検索などから来てもらったのに、消えてエラーになっていると印象が悪い。

コメントとブログのおすすめ記事を入れることで改善できます。

あとで読むボタンの追加

記事上にあとで読むボタンを設置すれば、はてブ数が増える？

この記事もおすすめ。

はてなブログのSNS共有ボタンをオリジナル画像に変更する方法 - 色々虎威 ゆるり

トップページからはてなスターを削除する

トップページの記事についているはてなスターを消せます。読んでもいない記事に押されてもなぁって人や、トップページの表示速度を変えたい人は一瞥の価値あり。

リンクの色を変える

デフォルトの色もいいけど、目立つ色にすることで、リンクが分かりやすくなる。

プロフアイコンの大きさと形を変える 

デフォルトのアイコンは小さくて見えにくい。大きくしたり 、丸くすることでポップな印象に。

トップページの記事を一覧形式にする

Pro限定で実装されたばかりだけど、意外とトップページを一覧形式にしてない人がいる。

最新記事を見せたいとかでなければ、見栄えが大きく変わるのでおすすめできる。続きを読むをいちいち記入しなくて済むメリットもあります。

設定→詳細設定→トップページの表示形式→一覧形式 という手順

さらにスッキリさせるならカード型もおすすめです。

はてなブログProでトップページを一覧表示にして更にカード型にするカスタマイズ - FOXISM

コメントボタンのデザインを変える

デフォルトは目立ちにくく、気づかれないことも多い。大きくしたほうが、コメントしてもらいやすくなる。

ふい字にカスタマイズ

当ブログのタイトルも、ほんわかしたフォントになってます

かわいい◝(⁰▿⁰)◜ 

翻訳リストの設置

１００ヵ国語に翻訳できる。グローバルなサイト(笑)を目指したい方はどうぞ

海外の人に見られることが多いサイトなら、導入する価値もある？

スマホ版の余計な表示を削る 

邪魔な要素を削除！

デフォルトだと無駄が多いのでカットしましょう。

Amazonほしい物リストのボタンを作る

目立つ。買ってもらえるかも

　↓　↓　↓　↓　↓　↓　↓ 

かまぼこのほしいもの

はてな公式の関連記事の並びを変える

公式の関連記事だと、“記事下”の上にきてしまう。順番を入れ替えることでソーシャルボタンなどの妨げにならない。外部プラグインだと速度が落ちたり、関連性が弱かったりするので公式はおすすめできる。

文字の色・フォント

細かいところなるが、微妙な違いがでる。

.entry-content {
color: #333333;
font-size:16px;
}

body{
font-family:"メイリオ,Osaka,Arial,Verdana
,"ＭＳ Ｐゴシック",sans-serif;
}

当ブログは上記のデザイン。真似してもらってOK

文字の色は濃いめの灰色で、大きさはデフォよりやや大きめ。基本的な形なのでサイトの特色に合わせて変えるといいと思う。

フォントは気になったサイトを開発者ツールで調べれば、何を使っているのか分かるので試してみると良。

その他役に立ったリンク一覧

はてなブログカスタマイズ 人気テーマBrooklynの吹き出しを削除 - 沖縄移住web人アフィリエイト雑記

テーマのデフォルトの見出しの消しかたが分からなかったのですが、ここに書いてあったのでよかったです。どのテーマでも応用できるでしょう。 

はてなブログの幅をCSSでカスタマイズするコツ - tarのブログるっ by @tarVolcano

記事の幅を変えるときに、図で書いてくれてたので分かりやすかった。

【MinimalGreen】記事とサイドバーの間に背景 - Hatenaカスタマイズ実験室

記事とサイドバーの間に背景を入れる方法。親切にコメントから記事まで書き起こしてくださいました。

さいごに

カスタマイズの情報は、検索しても載ってないことが多いです。固定ページは実装されたばかりで、まだまだ情報が少ない。ある意味穴場かも。

以上の中で、気になるものがあれば試してみてください。書いてくださった方々はありがとうございました。感謝しつくせないです。

それと、注意点を挙げておくと

• カスタマイズのしすぎは厳禁！重くなる原因です。速度を確認しながらやること。速度測定サイト→ PageSpeed Insights
• cssは順番によって反映されないことがあるので、そういう時は入れ替えてみる。importantを挿入する手もあるが、多用するとごちゃごちゃします。
• レスポンシブでない限り、PC版とスマホ版はデザインが別なので、それぞれに設定すること。ユーザーの多い方が大事。スマホ版は前後にタグを忘れないように ↓

<style type="text/css">

間に入れる

</style>

コードは適宜保存しておきましょう。

面白いものがあればまた随時更新していきます。

それでは