はるとも育児ブログ

新米パパママの愛情たっぷり魔法の育児

【コピペで超簡単!誰でもすぐ真似出来る】ブログに実装したカスタマイズを一挙公開!

 

はるとも育児ブログのカスタマイズを一挙公開!どれもコピペで超簡単です。

これを見れば誰でも同じカスタマイズが真似出来るよ。

ブログのカスタマイズにあたって

カスタマイズをする前に、まずはブログのコンセプトを決めましょう。

 

例えば私のメインブログ「パグぞうの夢」では、可愛らしさもありつつ、でも極力シンプルなブログに仕上げるようにしています。

パグぞうの夢

 

デザインテーマはシンプルの王様、ひつじさんの「Minimalism」を使用しています。

hitsuzi.hatenablog.com

 

なぜならば、ブログカスタマイズはすればする程良いという訳ではないからです。

カスタマイズを増やせば、その分ブログの表示速度が遅くなっていきます。

ページ表示速度が遅くなれば、SEOにも影響し、アクセス数の低下にも繋がります。

 

カスタマイズとページ表示速度はトレードオフの関係であることを頭の片隅に置いて、最適なカスタマイズを必要な分だけブログに実装することを心掛けましょう。

 

はるとも育児ブログのコンセプトは?

はるとも育児ブログは、特に可愛らしい見た目で見ている人が幸せな気持ちになれるをコンセプトにカスタマイズをしています。

 

シンプルさを求めている「パグぞうの夢」よりもトップページのオシャレさやサイドバーの内容に力を入れています。

 

テーマは、トップページの記事配置がカード型レイアウトに出来る「UnderShirt」を使用させて頂き、最終的にこんな感じに仕上がっております。

<完成したトップページ>

20200311042005

この記事を読めば、誰でもこんな色鮮やかなページが作れるよ。

それでは、ブログに実装したカスタマイズを一つ一つ見ていこう!

 

これ大事!テーマ設定とトップページの記事一覧表示

テーマは人気テーマトップ5に入る「UnderShirt」を使用させて頂きました。

カード型レイアウトが実装でき、レスポンシブ対応しているテーマです。

テーマ選びは、人気のものを選ぶのをおすすめします。多く使われているものの方が、カスタマイズを実装している人が多く、それだけコードが探しやすいからです。

blog.rokuzeudon.com

 

テーマの変更は、はてなブログマイページのダッシュボードーデザインのデザインレイアウトから出来ます。

20200310210858

 記事一覧表示への変更は、マイページのダッシュボードー設定の詳細設定を表示。

トップページの表示形式を「一覧形式」、トップページの記事数を8記事などに設定します。

20200310211213

超素敵!トップページにジャンル毎の画像とリンクを設置

 やせっぽち寄稿文さんのこちらの記事を参考にさせて頂きました。

はてなブログで、WordPressに匹敵するぐらいオシャレなトップページが作れます。

このカスタマイズがなかったら、WordPressに移行していたかも知れません。

www.slight-article.work

 

やせっぽち寄稿文さんの記事を参考にしながら、トップページ用の記事を作ります。

20200310211950

 

 記事を作ったらHTML編集タブを押して全文をコピーし、デザインの「フッタ」に貼り付けます。

20200310212053

はてなブログの機能を使って画像を横並びに出来ますが、それぞれの画像に別のリンクを貼るためには、HTML編集画面で画像毎にリンク先の記述を変える必要があります。

 

またこのカスタマイズを行う場合、トップページ用の記事は非表示設定にする必要があります。

こちらについては、せやなさんの記事を参考にさせて頂きました。

www.release-all.com

 

悩み解決!トップページ背景画像の上下余白削除

大好きうしるさんのこちらの記事を参考にさせて頂きました。

www.itjigoku.com

ヘッダの背景画像でトップページの画像を設定すると、どうしても画像の両端に余白が出来てしまっていたのですが、簡単に解決しました!

 

<画像両端の余白削除前>

20200311034812

余白が出来てしまってるわね。

 <画像両端の余白削除後>

20200311041657

左右の余白が消えただけで見栄えが劇的に良くなるね!

 

ぱっと見て分かりやすい!カテゴリ名を画像の左上に表示

ぱぴこさんのこちらの記事を参考にさせて頂きました。

www.papico405.com

デザインCSSにコードをそのまま貼り付けるだけで実装出来ます。

こんな感じになります。

色も自分の好きな色に変えられます。WEB色見本 原色大辞典 - HTMLカラーコード

20200310212902

 

回遊率UP!サイドバーのカテゴリ一覧をオシャレなタグ風に変更

ブログ内の回遊率も上がるので、カテゴリ一覧のカスタマイズはおすすめです。

しゅんかさんのこちらの記事を参考にさせて頂きました。

デザインCSSにコードコピペで簡単に実装出来ます。

www.fromsyunka.com

アクセスアップに繋がる「固定メニューバー」をフッタに設置

Yukihyさんのこちらの記事を参考にさせて頂きました。

固定メニューバーの設置はアクセスアップに繋がるのでとてもおすすめです。

ブログも一気にオシャレになって、ユーザビリティも向上します。

www.yukihy.com

実装するとこんな感じです。

人気記事を押すと人気記事一覧、カテゴリを押すとカテゴリ一覧が出てくるとてもオシャレな作りになってます。

 <カテゴリを選択>

20200311045046

 

オシャレなSNSシェアボタンを設置

はてなブログ規定のSNSシェアボタンも設置出来ますが、デザインにこだわりたいならカスタマイズでSNSシェアボタンを実装するのがおすすめです。

Minimal Greenさんのこちらの記事を参考にさせて頂きました。

blog.minimal-green.com

はてなブログ規定のSNSシェアボタンでも良いですが、デザインにこだわりたいならカスタマイズでSNSシェアボタンを実装するのがおすすめです。

実装するとこんな感じです。可愛い上にシェアされた回数も一目で分かります。

20200311045500

見栄え!目次のカスタマイズ

Minimal Greenさんの記事を参考にさせて頂きました。

コピペで簡単に実装できる超可愛い目次デザインが沢山あります。

blog.minimal-green.com

あると便利!目次表示•非表示ボタンの追加

りょうさんの記事を参考にさせて頂きました。コードコピペで簡単です。

特に目次の項目が多い記事では重宝されます。

www.crypto-ksw.com

選び放題!見出しカスタマイズ

見出しのデザインでサルワカさんの右にでるものはいません。

どれも可愛いので、お好きな見出しデザインを選びましょう♪

saruwakakun.com

超オシャレ!太字部分に蛍光マーカーのアニメーション実装

かるみにさんの記事を参考にさせて頂きました。

個人的にめちゃめちゃお気に入りのカスタマイズです。

アニメーションを加える事で、一気にオシャレな記事に見えます。

www.colmin.xyz

 

カスタマイズ実装後のページ表示速度は?

ページ表示速度は「PageSpeed Insights」というサイトで簡単に計測出来ます。

PageSpeed Insights

本ブログはデザイン重視でカスタマイズをふんだんに実装していますので、スコアは少し低めです。そもそもはてなブログなのでスコアはそこまで上がりませんが泣

〈モバイルページのスコア:38〉

20200310210228

 

〈パソコンページのスコア:69 〉

20200310210252

 

こちらは参考程度に貼っておきます。

 

ページ表示速度をより改善するには?

ページ速度を改善する方法は沢山ありますが、すぐに出来るのはこちら。

  • 画像を圧縮して容量を抑える
  • はてなスターを削除する
  • はてな規定のSNSシェアボタンを削除する
  • 重複しているコードや不要なコードを削除する

画像の圧縮は、はてなフォトライフに画像をアップロードする際に圧縮するのがおすすめです。

はてなフォトライフ - 無料・大容量、写真を共有できるウェブアルバム

 

「設定」タブの"画質"のパーセンテージでどのぐらい圧縮するかを変えられます。

このパーセンテージは画像アップロード時に適用されます。

既にアップロードされている画像サイズには影響ありません。

 

<画質を100%に設定>

20200311042318

この状態で画像をアップすると、 画像の容量は大きくなります。

画像の容量はアップロードした画像の編集画面を開くと見ることが出来ます。

 

<画質100%でアップロードした画像>

20200311042707

画像の容量は90KBです。

 

"画質"のパーセンテージを70%に変更し、同じ画像をアップロードします。

<画質を70%に設定>

20200311042511

 <画質70%でアップロードした画像>

20200311042740

 画像の容量は20KBです。

 

このように画質のパーセンテージを変えると容量を小さく出来ます。

ただ同時に画質も荒くなりますので、用途や使い所によって都度適切な画質でアップロードしましょう。

 

私の場合はトップページの背景画像を100%、それ以外の画像は細かい文字がある画像は70%、細かい文字がない画像は30%に設定してアップロードしています。

 

画像の拡張子が「.png」だと圧縮が適用されないので、画像を保存する際に「.jpeg」にして保存するようにしましょう。

 

 

他にもページ速度を改善する方法は沢山ありそうです。

www.gipsyjazznyumon.com

 

pea-nut.hatenablog.com

 

個人的に、カエレバ・ヨメレバを実装するコードはかなり重くなるので、ページ速度を考えるともしもアフィリエイトの簡単リンクがおすすめです。

まとめ

はるとも育児ブログに実装したカスタマイズをご紹介させて頂きました。

 

私はHTMLやデザインCSSに疎いので、コピペコードを公開されている沢山の方の記事をリンクさせて頂きました。カスタマイズコードを引用させて頂きありがとうございます。

 

これからカスタマイズを実装したいと思っている方の参考になればと思います。

 

皆さんも、オシャレなブログカスタマイズをしてみませんか?

20200310190051

"育児が幸せ"なんて綺麗事。

本当はその何十倍も辛くて思い通りにいかない
イライラとやるせなさに襲われて笑顔も忘れ
孤独で時に泣いてしまうほど大変なもの。

でも子供が大きくなったら、手を離れてしまった
ことに寂しさが込み上げ、育児をしていた頃が
幸せだったと感じるものです。

そして子供は無償の愛を注いでくれた
パパママに無数の幸せを与えてくれます。

大切に育てて良かったと思える日が必ず来ます。

はるとも育児ブログは、育児に悩めるパパママの
心と笑顔を支える魔法の育児をお伝えしています。
f:id:harutomo0615:20200227231820j:plain
f:id:harutomo0615:20200227231830j:plain
f:id:harutomo0615:20200227231838j:plain
f:id:harutomo0615:20200227231825j:plain
f:id:harutomo0615:20200302223804j:plain
f:id:harutomo0615:20200302223811j:plain
新着記事はこちら☆