切っても切ってもかまぼこ

ゆとり世代の無職。主に雑記

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

 

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

 

 

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

 

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

 

 

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

 

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

 

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

 

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

 

 

では、いってみよう! 

 

 

 

  

はてなスターのデザイン

 


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

 

f:id:kamaboko55:20170701074529p:plain

 

 

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

 

 

 

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

 


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

 

f:id:kamaboko55:20170701080510p:plain

 

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

 

f:id:kamaboko55:20170701080519p:plain

 

 

 

404 Not Found 画面カスタマイズ

 

 

 

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

 

コメントとブログのおすすめ記事を入れることで他の記事も見てもらえます。

 

 

あとで読むボタンの追加

 


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

 

この記事もおすすめ。

 

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

 

  

 

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

 


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

 

 

パンくずリストを記事下に移す

 


公式のパンくずリストはタイトル下に出ますが、それを消して記事下に移したり、記事上のカテゴリの部分に置くことができます。便利です。

 

リンクの色を変える

 

 

デフォルトの色もいいけど、目立つ色にすることで、リンクが分かりやすくなる。有名サイトの比較を書れてるのもありがたい。

 

 

 

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

 

 

デフォルトのアイコンは小さくて見えにくい。大きくしたり 、丸くすることでポップな印象に。ソースコードからいじるので自由度が高くなります。

 

 

 

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

 

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

 

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

 

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

 

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

 

はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに - Minimal Green

 

 

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

 

 

 

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

 

f:id:kamaboko55:20170701081341p:plain

 

併せて、コメント欄にブログ主の名前を入れる方法

 

はてなブログのコメント欄で自分の名前に「ブログ主」と付けて目立たせるカスタマイズ - FOXISM

 

 

ふい字にカスタマイズ

 

 

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

 

f:id:kamaboko55:20170701081505p:plain

 

かわいい◝(⁰▿⁰)◜ 

 

 

 

翻訳リストの設置

 

 


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

 

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

 

 

 

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

 

 

邪魔な要素を削除!

 

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

 

 

f:id:kamaboko55:20170701095346p:plain

 

 

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

 


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

 

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ 

かまぼこのほしいもの

 

 

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

 

 

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

 

サイドバーに関連記事を入れ、非表示にしてから記事下に持ってくる方法もあります。

はてなブログで記事下に関連記事を出すカンタンな方法 - ボクココ

 

 

文字の色・フォント

 

細かい部分になるが、微妙な違いがでる。

 

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

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

 

当ブログは上記のデザイン。真似してもらってOKです。デザインcssに突っ込めば反映されます。

 

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

 

気になったフォントは開発者ツールで調べれば、何を使っているのか分かるので試してみると良。シンプルなサイトはAvenir Nextとか似合うと思います。

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

さいごに

 

 

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

 

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

 

 

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

 

  • カスタマイズのしすぎは厳禁!重くなる原因です。速度を確認しながらやること。速度測定サイト→ PageSpeed Insights
  • cssは順番によって反映されないことがあるので、そういう時は入れ替えてみる。importantを挿入する手もあるが、多用するとごちゃごちゃします。
  • あとで見たときに何のコードか分かるように/*間に文*/を入れて記述しておく。
  • レスポンシブでない限り、PC版とスマホ版はデザインが別なので、それぞれに設定すること。ユーザーの多い方が大事。スマホ版は前後にタグを忘れないように ↓
<style type="text/css">
間に入れる
</style>

 

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

 

 

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

 

それでは