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

自営業者の徒然

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




 

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

 

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

デザインって着せ替えゲームみたいで、反映させながら試行錯誤するのが止まらないっ!

  

情報を探そうと色々なサイト物色してると、よさげなものがたくさんありました。見つけた中で、役に立ったり、面白かった、導入している人が少ないものをいくつかご紹介していきます。

 

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

 

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

 

 

では、いってみよう! 

 

はてなスターのデザイン

 


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

 

はてなスター

 

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

 

 

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

 


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

 

公式パンくずリスト

 

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

 

変更パンくずリスト

 

 

404 Not Found 画面カスタマイズ

 

 

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

 

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

 

 

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

 


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

 

 

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

 

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

 

 

リンクの色を変える

 

 

 

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

 

 

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

 

 

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

 

 

画像をタッチ(クリック)したとき拡大させない

 

 

<script src="//niyari.github.io/hatenablog-modules/disable-cbox.js" charset="utf-8" defer>/*画像拡大しない*/</script>

 

フッタに貼り付ける。 

 

 

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

 

 

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

  

コメント欄デザイン

 

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

 

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

 

 

ふい字にカスタマイズ

 

 

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

 

ふい字

 

かわいい◝(⁰▿⁰)◜ 

 

 

Proの表示を消す 

 

 

はてなのPro契約をしていると、idの横に下のようなPro表示が出てしまいます。 

 

 

Pro表示

 

いかにもプロです!と誇張してるようにも見えかねません。

一行で簡単に消すことができます。

 

他にも“Pro”の部分を他の文字に変えることもできますのでご参照ください。

 

はてなブログの[PRO]の表示に対抗してCSSで[AMATEUR]と表示させる方法 - それでもわたしはおうちにいたい

 

 

翻訳リストの設置

 


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

 

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

 

 

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

 

スマホのページャ下に一気に突っ込みます

 

<style type="text/css">
/* はてなのグローバルメニューを消す */
#globalheader-container {
display: none;
}
#container{
padding-top: 0px;

}

/*ブログタイトルの概要を消す  */
#blog-description {
display: none;
}
/*フッター(下)の部分を消す*/
.footer {
display: none;
}
</style>

 

邪魔な要素を削除!

 

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

 

 

要素削除

 

 

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>

 

 

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

 

多くの人がおすすめしてる htmlとcssの教材はこちら

 

 

自分の手でデザイン出来るようになると楽しいと思います。

 

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

 

それでは

 

合わせて読みたい