kamabokoこんにちは。かまぼこです最近、カスタマイズばかりしてて記事が進みません......。デザインって着せ替えゲームみたいで、反映させながら試行錯誤するのが止まらないっ!情報を探そうと色々なサイト物色してると、よさげなものがたくさんありました。見つけた中で、役に立ったり、面白かった、導入している人が少ないものをいくつかご紹介していきます。細かいデザインを変えると少しでも見栄えがよくなります。こだわるとキリがないけど、来てくれた人も楽しめるはず。画面カスタマイズあとで読むボタンの追加トップページからはてなスターを削除するパンくずリストを記事下に移すリンクの色を変えるプロフアイコンの大きさと形を変えるトップページの記事を一覧形式にするコメントボタンのデザインを変えるふい字にカスタマイズProの表示を消す翻訳リストの設置スマホ版の余計な表示を削るAmazonほしい物リストのボタンを作るはてな公式の関連記事の並びを変える文字の色・フォントその他役に立ったリンク一覧さいごにはてなスターのデザインデフォルトのはてなスターは小さいから、デザインを変えることによって大きくなる。表示を変えることで見にきてくれた人も、楽しんで押してもらえるようなデザインになります。パンくずリストのデザイン公式のパンくずリストだとちょっと味気ない......。変えることでスタイリッシュに。画面カスタマイズわざわざ来てもらったのに、消えてエラーになっていると印象が悪い。コメントとブログのおすすめ記事を入れることで他の記事も見てもらえます。記事上にあとで読むボタンを設置すれば、はてブ数が増える?この記事もおすすめ。トップページからはてなスターを削除するトップページの記事についているはてなスターを消せます。読んでもいない記事に押されてもなぁって人や、トップページの表示速度を変えたい人は一瞥の価値あり。パンくずリストを記事下に移す公式のパンくずリストはタイトル下に出ますが、それを消して記事下に移したり、記事上のカテゴリの部分に置くことができます。リンクの色を変えるデフォルトの色もいいけど、目立つ色にすることで、リンクが分かりやすくなる。有名サイトの比較を書れてるのもありがたい。プロフアイコンの大きさと形を変えるデフォルトのアイコンは小さくて見えにくい。丸くすることでポップな印象に。ソースコードからいじるので自由度が高くなります。トップページの記事を一覧形式にするPro限定で実装されたばかりだけど、意外とトップページを一覧形式にしてない人がいる。最新記事を見せたいとかでなければ、見栄えが大きく変わるのでおすすめできる。いう手順さらにスッキリさせるならカード型もおすすめです。Greenコメントボタンのデザインを変えるデフォルトは目立ちにくく、気づかれないことも多い。大きくしたほうが、コメントしてもらいやすくなる。FOXISMふい字にカスタマイズ当ブログのタイトルも、ほんわかしたふい字のフォントになってますかわいい◝(0▿0)◜Proの表示を消すはてなのPro契約をしていると、idの横に下のようなPro表示が出てしまいます。プロです!と誇張してるようにも見えかねません。一行で簡単に消すことができます。他にも“Pro”の部分を他の文字に変えることもできますのでご参照ください。それでもわたしはおうちにいたい翻訳リストの設置100ヵ国語に翻訳できる。none;}</style>邪魔な要素を削除!デフォルトだと無駄が多いのでカットしましょう。Amazonほしい物リストのボタンを作る目立つ。↓かまぼこのほしいものはてな公式の関連記事の並びを変える公式の関連記事だと、“記事下”の上にきてしまう。順番を入れ替えることでソーシャルボタンなどの妨げにならない。外部プラグインだと速度が落ちたり、関連性が弱かったりするので公式はおすすめできる。サイドバーに関連記事を入れ、非表示にしてから記事下に持ってくる方法もあります。ボクココ文字の色・フォント細かい部分になるが、微妙な違いがでる。Pゴシック”,sans-serif;}当ブログは上記のデザイン。真似してもらってOKです。デザインcssに突っ込めば反映されます。文字の色は濃いめの灰色で、大きさはデフォよりやや大きめ。基本的な形なのでサイトの特色に合わせて変えていただければ。気になったフォントは開発者ツールで調べれば、何を使っているのか分かるので試してみると良。Nextとか似合うと思います。沖縄移住web人アフィリエイト雑記テーマのデフォルトの見出しを消すときに分からなかったので、ここに書いてあってよかったです。どのテーマでも応用できるでしょう。@tarVolcano記事の幅を変えるときに、図で書いてくれてたので分かりやすかった。記事とサイドバーの間に背景を入れる方法。親切にコメントから記事まで書き起こしてくださいました。さいごにカスタマイズの情報は、検索しても載ってないことが多いです。固定ページは実装されたばかりで、まだまだ情報が少ない。以上の中で、気になるものがあれば試してみてください。書いてくださった方々はありがとうございました。感謝しつくせないです。それと、注意点を挙げておくとカスタマイズのしすぎは厳禁!重くなる原因です。速度を確認しながらやること。Insightscssは順番によって反映されないことがあるので、そういう時は入れ替えてみる。importantを挿入する手もあるが、多用するとごちゃごちゃします。あとで見たときに何のコードか分かるように/*間に文*/を入れて記述しておく。レスポンシブでない限り、PC版とスマホ版はデザインが別なので、それぞれに設定すること。ユーザーの多い方が大事。type=”text/css”>間に入れる</style>コードは適宜保存しておきましょう。面白いものがあればまた随時更新していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Automattic.。