はるとも育児ブログのカスタマイズを一挙公開！どれもコピペで超簡単です。
これを見れば誰でも同じカスタマイズが真似出来るよ。
ブログのカスタマイズにあたって
カスタマイズをする前に、まずはブログのコンセプトを決めましょう。
例えば私のメインブログ「パグぞうの夢」では、可愛らしさもありつつ、でも極力シンプルなブログに仕上げるようにしています。
デザインテーマはシンプルの王様、ひつじさんの「Minimalism」を使用しています。
なぜならば、ブログカスタマイズはすればする程良いという訳ではないからです。
カスタマイズを増やせば、その分ブログの表示速度が遅くなっていきます。
ページ表示速度が遅くなれば、SEOにも影響し、アクセス数の低下にも繋がります。
カスタマイズとページ表示速度はトレードオフの関係であることを頭の片隅に置いて、最適なカスタマイズを必要な分だけブログに実装することを心掛けましょう。
はるとも育児ブログのコンセプトは？
はるとも育児ブログは、特に可愛らしい見た目で見ている人が幸せな気持ちになれるをコンセプトにカスタマイズをしています。
シンプルさを求めている「パグぞうの夢」よりもトップページのオシャレさやサイドバーの内容に力を入れています。
テーマは、トップページの記事配置がカード型レイアウトに出来る「UnderShirt」を使用させて頂き、最終的にこんな感じに仕上がっております。
＜完成したトップページ＞
この記事を読めば、誰でもこんな色鮮やかなページが作れるよ。
それでは、ブログに実装したカスタマイズを一つ一つ見ていこう！
これ大事！テーマ設定とトップページの記事一覧表示
テーマは人気テーマトップ5に入る「UnderShirt」を使用させて頂きました。
カード型レイアウトが実装でき、レスポンシブ対応しているテーマです。
テーマ選びは、人気のものを選ぶのをおすすめします。多く使われているものの方が、カスタマイズを実装している人が多く、それだけコードが探しやすいからです。
テーマの変更は、はてなブログマイページのダッシュボードーデザインのデザインレイアウトから出来ます。
記事一覧表示への変更は、マイページのダッシュボードー設定の詳細設定を表示。
トップページの表示形式を「一覧形式」、トップページの記事数を8記事などに設定します。
超素敵！トップページにジャンル毎の画像とリンクを設置
やせっぽち寄稿文さんのこちらの記事を参考にさせて頂きました。
はてなブログで、WordPressに匹敵するぐらいオシャレなトップページが作れます。
このカスタマイズがなかったら、WordPressに移行していたかも知れません。
やせっぽち寄稿文さんの記事を参考にしながら、トップページ用の記事を作ります。
記事を作ったらHTML編集タブを押して全文をコピーし、デザインの「フッタ」に貼り付けます。
はてなブログの機能を使って画像を横並びに出来ますが、それぞれの画像に別のリンクを貼るためには、HTML編集画面で画像毎にリンク先の記述を変える必要があります。
またこのカスタマイズを行う場合、トップページ用の記事は非表示設定にする必要があります。
こちらについては、せやなさんの記事を参考にさせて頂きました。
悩み解決！トップページ背景画像の上下余白削除
大好きうしるさんのこちらの記事を参考にさせて頂きました。
ヘッダの背景画像でトップページの画像を設定すると、どうしても画像の両端に余白が出来てしまっていたのですが、簡単に解決しました！
＜画像両端の余白削除前＞
余白が出来てしまってるわね。
＜画像両端の余白削除後＞
左右の余白が消えただけで見栄えが劇的に良くなるね！
ぱっと見て分かりやすい！カテゴリ名を画像の左上に表示
ぱぴこさんのこちらの記事を参考にさせて頂きました。
デザインCSSにコードをそのまま貼り付けるだけで実装出来ます。
こんな感じになります。
色も自分の好きな色に変えられます。WEB色見本 原色大辞典 - HTMLカラーコード
回遊率UP！サイドバーのカテゴリ一覧をオシャレなタグ風に変更
ブログ内の回遊率も上がるので、カテゴリ一覧のカスタマイズはおすすめです。
しゅんかさんのこちらの記事を参考にさせて頂きました。
デザインCSSにコードコピペで簡単に実装出来ます。
アクセスアップに繋がる「固定メニューバー」をフッタに設置
Yukihyさんのこちらの記事を参考にさせて頂きました。
固定メニューバーの設置はアクセスアップに繋がるのでとてもおすすめです。
ブログも一気にオシャレになって、ユーザビリティも向上します。
実装するとこんな感じです。
人気記事を押すと人気記事一覧、カテゴリを押すとカテゴリ一覧が出てくるとてもオシャレな作りになってます。
＜カテゴリを選択＞
オシャレなSNSシェアボタンを設置
はてなブログ規定のSNSシェアボタンも設置出来ますが、デザインにこだわりたいならカスタマイズでSNSシェアボタンを実装するのがおすすめです。
Minimal Greenさんのこちらの記事を参考にさせて頂きました。
はてなブログ規定のSNSシェアボタンでも良いですが、デザインにこだわりたいならカスタマイズでSNSシェアボタンを実装するのがおすすめです。
実装するとこんな感じです。可愛い上にシェアされた回数も一目で分かります。
見栄え！目次のカスタマイズ
Minimal Greenさんの記事を参考にさせて頂きました。
コピペで簡単に実装できる超可愛い目次デザインが沢山あります。
あると便利！目次表示•非表示ボタンの追加
りょうさんの記事を参考にさせて頂きました。コードコピペで簡単です。
特に目次の項目が多い記事では重宝されます。
選び放題！見出しカスタマイズ
見出しのデザインでサルワカさんの右にでるものはいません。
どれも可愛いので、お好きな見出しデザインを選びましょう♪
超オシャレ！太字部分に蛍光マーカーのアニメーション実装
かるみにさんの記事を参考にさせて頂きました。
個人的にめちゃめちゃお気に入りのカスタマイズです。
アニメーションを加える事で、一気にオシャレな記事に見えます。
カスタマイズ実装後のページ表示速度は？
ページ表示速度は「PageSpeed Insights」というサイトで簡単に計測出来ます。
本ブログはデザイン重視でカスタマイズをふんだんに実装していますので、スコアは少し低めです。そもそもはてなブログなのでスコアはそこまで上がりませんが泣
〈モバイルページのスコア：38〉
〈パソコンページのスコア：69 〉
こちらは参考程度に貼っておきます。
ページ表示速度をより改善するには？
ページ速度を改善する方法は沢山ありますが、すぐに出来るのはこちら。
- 画像を圧縮して容量を抑える
- はてなスターを削除する
- はてな規定のSNSシェアボタンを削除する
- 重複しているコードや不要なコードを削除する
画像の圧縮は、はてなフォトライフに画像をアップロードする際に圧縮するのがおすすめです。
はてなフォトライフ - 無料・大容量、写真を共有できるウェブアルバム
「設定」タブの"画質"のパーセンテージでどのぐらい圧縮するかを変えられます。
このパーセンテージは画像アップロード時に適用されます。
既にアップロードされている画像サイズには影響ありません。
＜画質を100％に設定＞
この状態で画像をアップすると、 画像の容量は大きくなります。
画像の容量はアップロードした画像の編集画面を開くと見ることが出来ます。
＜画質100％でアップロードした画像＞
画像の容量は90KBです。
"画質"のパーセンテージを70％に変更し、同じ画像をアップロードします。
＜画質を70％に設定＞
＜画質70％でアップロードした画像＞
画像の容量は20KBです。
このように画質のパーセンテージを変えると容量を小さく出来ます。
ただ同時に画質も荒くなりますので、用途や使い所によって都度適切な画質でアップロードしましょう。
私の場合はトップページの背景画像を100％、それ以外の画像は細かい文字がある画像は70％、細かい文字がない画像は30％に設定してアップロードしています。
画像の拡張子が「.png」だと圧縮が適用されないので、画像を保存する際に「.jpeg」にして保存するようにしましょう。
他にもページ速度を改善する方法は沢山ありそうです。
個人的に、カエレバ・ヨメレバを実装するコードはかなり重くなるので、ページ速度を考えるともしもアフィリエイトの簡単リンクがおすすめです。
まとめ
はるとも育児ブログに実装したカスタマイズをご紹介させて頂きました。
私はHTMLやデザインCSSに疎いので、コピペコードを公開されている沢山の方の記事をリンクさせて頂きました。カスタマイズコードを引用させて頂きありがとうございます。
これからカスタマイズを実装したいと思っている方の参考になればと思います。
皆さんも、オシャレなブログカスタマイズをしてみませんか？
