2019年【CSSコピペだけ】はてなブログ歴3年の僕が重宝しているデザインカスタマイズまとめ 

f:id:ryocuu:20191104012953j:plain

 

ブログをユーザーにとって見やすくするために必要不可欠なカスタマイズ。

2017年からブログを運営している僕が、主に使用しているデザインをピックアップしてみましたのでご覧ください。

 

コードを公開してくれているブロガーさんいつもありがとうございます。

 

 

テーマは「マテリアルぽっぷ」

f:id:ryocuu:20191104011533p:plain

 

ワードプレスの有料テーマSANGOに似ているテーマ

ポップな文字でマテリアルな丸みのあるデザイン。配色もセンスも良い

フォントがはっきりしていて読みやすいのと、見出しなども実装されているのでデザイン設定が面倒に感じる方などはおすすめです。

 

難点は少し重いこと。

読み込みスピードが遅いことはSEO的にも良くないですが、可愛いテーマなので使用させていただいております

 

マテリアルぽっぷ - テーマ ストア 

 

ヨメレバ・カエレバデザイン 

 

僕は漫画ブログを運営しているのでヨメレバのデザインは結構大事にしています。

maipyon」さんの記事のコードからサルワカさんの配色パターンの組み合わせという記事を参考に、ボタンの色をイジっています。

 

 

可愛い吹き出しデザイン 

 

初心者は憧れる吹き出し

 

吹き出しの会話がずーっと続くような感じだと疲れちゃうけど、時々入れると文章が何倍も読みやすくなる。吹き出しを効率的に使うと記事がより良くなるよ 

 

流し読みする人が多いので、そのニーズに合わせた作りが必要。

 

綺麗で使いやすいボックスデザイン

 

ここで紹介している【Purple Life】さんのデザインは種類も豊富で、色々な用途で使用できるので重宝しています。

 

ボックスデザインは強調したい部分の文章などに使うととても便利ですよね。

 

黒板はレビューなどを書くときに便利、漫画であれば(作者・巻数)などを書くのに使用しています。

 

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

サルワカさんのデザインもシンプルで文章にアクセントを加えたい時など、とても便利です。 

 

画像の中央寄せ

 

画像のセンタリング、これは好みの問題だと思います。

僕は、「文章が生きるのは左詰め、画像が生きるのは中央寄せ」という独自の理論でやっています(大げさ)

 

リンクボタン 

 

ああああああああああ 

 

ああああああ

 

普段使う機会の少ないリンクボタンですが、たまに気分転換で使うと面白いです。

工夫1つで、リンクボタンを押させるパワーがすごく増えるはず。

 

ページのトップへ戻るボタン

 

こういうの▼

f:id:ryocuu:20191103230546p:plain

 

色んなブログで見るページのトップへ戻るボタン。

画面の右端の「トップへ戻る」ボタン、「ダッシュボード」→「デザイン」→「フッタ」にコードを貼り付けるだけで、記事が見やすくなるので設置すると良いと思います 

 

パンくずリスト

 

パンくずリストはあんまり話題にならないけど、ユーザビリティだけでなく、SEO的にも重要で、Googleも「パンくずリスト」の使用を推奨してます。

 

サーチコンソールの「拡張」に“パンくずリスト”が追加されており、カテゴリーページのSEOを考えればめちゃくちゃ重要なので済んでない方は設定してみて下さい。


以下の記事から設定する事が出来ますので、ぜひ参考にしてみてください

 

フォントサイズと字体

 

.entry-content p {font-size: 15px;} 

 

 Googleでは「16px」以上の大きさを推奨しているようですが、僕は大きいと感じたので「15px;」です。

(僕と同じサイズでよければ上のコートをそのままデザインCSSに張り付けて下さい。

 

フォントは、「メイリオ」か「游ゴシック」に関しては好みだと思います。

僕は気分によって変えたりしますが基本的には「メイリオ」に落ち着いています。

 

特定の場所に飛ぶリンク 

 

30000字を超えるような長い記事を書くと目次が異様に長くなるので、そういった時に便利なのが「指定した場所に飛べるリンク」

 

とても便利なカスタマイズだと思います。

 

見出しとトップページをおしゃれに

 

ブログのトップページ記事一覧のデザインと、見出しのカスタマイズ

この辺を変えるだけでもかなりオシャレになりますね。

 

関連記事 

 

関連記事の表示はシンプルなのが良いと思うので、こちらのデザインはかなりお気に入り、設定すれば、多くの記事が目につくので、回遊率も上がります。

 

AdSenseを文中に自動で入れる


これは永久保存版

こちらのコードをお借りして、各見出し前にアドセンス配置したら収益がアップした

 

アドセンスの効果的な広告配置に関しては、はたさんの記事を見てみて下さい。

アドセンスにの広告配置に関しては共通の答えはありませんが、種類や配置について言及しているので、一度目を通しておくことをお勧めします。

 

 

 

まとめ 

ブログを運営しているとカスタマイズに興味を持つことが増えると思います。

ただカスタマイズは脇を固めるもので、主役をはあくまでも記事です

しかしカスタマイズはブログ運営においてモチベーションにもなるし楽しいですよね。

今後もカスタマイズの巨匠たちに期待したいです(他力本願)

 

最後までご覧いただきありがとうございました。