yunico's fluffy life

横着主婦の暮らしの詰め合わせ

ただいまデザイン編集中です。
一部デザインの崩れている所があります。

はてなブログのカスタマイズ一覧┃カスタマイズ記事をまとめています(随時更新)

記事内に商品プロモーションを含む場合があります。

ブログのカスタマイズ方法をまとめています𓂃✍︎

カスタマイズするメリット
  • 記事が読みやすくなり、目的の情報に辿り着きやすくなる。
  • 滞在時間や回遊率が上がる。
  • SEO(検索エンジン最適化)対策になり、検索サイトで上位に表示されやすくなる。
 


ブログ全体のカスタマイズ


レスポンシブデザインの設定

check!
  • はてなブログをカスタマイズしたい。
  • デザインを設定したり、カスタマイズをしたはずなのにスマホから見たときのデザインが変わらずに困っている。

yunico-fluffylife.com

はてなブログのカスタマイズを始めるのに、まず第一にやらなければならないレスポンシブデザインの設定方法を詳しく解説しています。

無料ブログで記事を一覧形式にする

check!
  • 無料版はてなブログを使っている。
  • トップページの記事を『一覧形式』のように表示したい。
  • 設定は一度きりで済ませたい。

yunico-fluffylife.com

トップページの一覧形式は有料版(はてなPro)限定の機能ですが、本文などを非表示にすることで「全文形式しか使えない無料版」でも擬似的に一覧形式のように表示することができました。

無料ブログで記事一覧【サムネ付き】

check!
  • 無料版はてなブログを使っている。
  • トップページの記事を『一覧形式』のように表示して、サムネ画像も載せたい。
  • 設定は一度きりで済ませたい。

yunico-fluffylife.com

scriptを使用しますが、記事にトップ画像(サムネイル)を設定している方はこちらがオススメです。

検索窓のデザインと位置を変える

check!
  • 検索窓を好きな場所に移動したい。
  • 検索窓のデザインを変更したい。

yunico-fluffylife.com

スマホではページ下部にある検索窓をページ上部やメニューバーなど任意の場所に配置し、デザインもカスタマイズできます。

独自の404エラーページを作る

check!
  • エラーページをおしゃれにしたい。
  • オリジナル画像を組み込んだ、独自性のあるエラーページを作りたい。
  • 記事にアクセスできなかった時のユーザー離脱率を少しでも抑えたい。

yunico-fluffylife.com

記事URLを変更したり、非公開・削除した場合はユーザーが該当ページにアクセスできなくなります。そんな時に表示されるエラーページをカスタマイズする方法をご紹介しています。

ステマ規制対策

check!
  • ブログ内でアフィリエイト広告を1つでも掲載している。
  • 記事1つ1つにステマ規制対策の文言を書いていくのは手間に感じる。

yunico-fluffylife.com

2023年10月1日からステマ規制が施行され、アフィリエイト広告を利用している人はページの見やすい箇所に、PR/広告だと分かる表記をすることが必須となりました。

一度きりの設定で、ステマ規制対策の文言を掲載する方法をご紹介しています。


記事内の装飾・カスタマイズ


最終更新日の表示とデザインの変更

check!
  • 記事に最終更新日を表示したい。
  • 最終更新日のデザインを変えたい。

yunico-fluffylife.com

2023年8月1日から公式設定で最終更新日が表示できるようになりました!設定方法とカスタマイズ方法をご紹介しています。

HTMLとCSSで作るボックス装飾

check!
  • CSSコードでデザインを設定して、コードをシンプルに管理したい。
  • デザインを変えたくなったとき、全てのデザインをまとめて変更したい。

yunico-fluffylife.com
 

HTMLのみで作るボックス装飾

check!
  • CSSコードを設定するのは難しい。
  • 載せたい場所にコピペするだけで、すぐに使える枠・BOXが良い。

yunico-fluffylife.com
 

はてな記法で簡単な表の作り方

check!
  • はてな記法で記事を書いている。
  • 記事の中に表をなるべく簡単に組み込みたい。

yunico-fluffylife.com
 

外部パーツのカスタマイズ


もしもアフィリエイト『かんたんリンク』

check!
  • もしもアフィリエイトの『かんたんリンク』を利用している。
  • スマホから見た『かんたんリンク』が縦長なのが気になる。

yunico-fluffylife.com

スマホで見た時もパソコンから見たとき同様、横長ですっきりしたデザインにするカスタマイズをご紹介しています。

codoc(コードク)の投げ銭

check!
  • ブログに投げ銭機能を導入したい。
  • 導入したcodocの投げ銭デザインをブログの雰囲気に合わせてカスタマイズしたい。

yunico-fluffylife.com

当ブログでも記事の下方に設置してる投げ銭機能。ブログのデザインに合うように色や文字サイズを変更する方法をご紹介しています。


小ネタ系


見出しに改行を入れる方法

check!
  • 記事の中で書く「見出しタイトル」が長くなりがち。
  • 見出しが長くなる場合、任意の場所に改行を入れてタイトルを読みやすくしたい。

yunico-fluffylife.com
 

旧Twitterアイコンをまとめて変更する

check!
  • 未だに旧Twitterの鳥さんアイコンフォントを使用している。
  • 𝕏に変更したいけど変更箇所が多くて、変更作業が手間に感じる。

yunico-fluffylife.com

現在使用されているTwitterの鳥アイコンフォントを一度の設定で「𝕏」に置き換える方法をご紹介しています。

アドレスバーの色を変更する

check!
  • アドレスバーの色をブログの雰囲気に合わせて変更したい。
  • 大きなカスタマイズは大変だから、超簡単に差別化できるカスタマイズ方法が知りたい。

yunico-fluffylife.com
 

完全趣味で作ってみた系


トップページに雪を降らせる

check!
  • ブログのトップページにさりげなく雪を降らして季節を感じたい。
  • ブログに雪を降らすなんて意味わかんないけど、なんか面白そう。

yunico-fluffylife.com
 

はてなブログのカスタマイズ方法の紹介記事が増えましたら、随時更新していきます𓂃✍︎