パグぞうの夢 -雑記-

激務から逃げ出した負け犬ブロガーです。ブログ運営術や気になる情報を発信します。

負け犬ブロガーのパグぞうです。
日々感じた僕の思いを綴っています。

【カスタマイズ】トップページのデザイン一新でPV倍増⁉️アイコンも変えたよ❣️

こんにちは、パグぞうです。

お気付きの方も多いと思いますが、この度、トップページのデザインとアイコンを新しくしました!

 

皆さんは、ブログにマンネリを感じていませんか?デザインを変えると、心機一転、ブログ欲がぐんぐん湧き出てきて、更新意欲が溢れてきますよ!

 

よし、更新するぞー!

「カスタマイズをいじると時間かかるし面倒だな〜」と感じる方も、もしマンネリを少しでも感じていたら、思い切ってデザインを変えてみましょう!

やり始めると中途半端では終わらないから、気付けば夢中になってるんだよね。

ともちゃんご飯作って!

 

また、「デザインを変えて失敗したらどうしよう、、」という方もいるかと思います。

 

でも、大丈夫。

 

現在のHTMLコードとデザインCSSコードをワードなどにコピーして残しておけば、もし失敗しても簡単に戻せます。

 

なんといっても、今の自分は過去の自分より経験値を積んでいますので、デザインを変えて悪くなるということはまず、ないと思います。

 

実際私自身も、今回デザインを一新してトップページの見栄えや機能が劇的に充実したと実感しています⭐️

 

前置きが少し長くなりましたが、今回は、トップページのデザインがどう変わったのか?どんなカスタマイズをしたのかを書いていきます。

従来のトップページ

20200107080629

半年ぐらいこんなかんじのトップページでした。背景の絵はお気に入りですが、タイトルをもう少し工夫出来ないかな〜とずっと思っていました。

変なところで改行されてるしね、、

MENUはトグルメニューになっていて、押すとカテゴリ一覧が開くようになっています。

20200107081141

作りはお洒落ですが、カテゴリは最初から表示されている方が、閲覧する側からしたら良いのではないかな〜と思うようになりました。

またデザインは当ブログのイメージカラーである緑とピンクを使用していました。

 

新しいトップページがこちら

20200107080637

20200107080642

いかがでしょうか?劇的に見栄えが良くなったと思いませんか?

桜背景のタイトル、ぱっと見で分かるカテゴリ、そしてタイトル下に人気記事を固定表示しました。

 

併せてアイコンもただのパグぞうから電気工事士パグぞうにレベルアーップ⭐️

20200104225802 →→→20200104225757

出た!電気工事士パグぞう!ウケる!

個人的には、想像以上のトップページに仕上がりました!背景の桜のおかげで、かなり映えますよね!

ヘッダも見栄え重視で消しちゃった!

ちなみにテーマは大人気「ミニマリズム」を採用しています。今回、記事一覧がカード型のトップページに憧れてテーマを変更したりもしましたが、最終的には、カスタマイズしやすいのが圧倒的に「ミニマリズム」だったのでテーマを戻しています。

 

それでは、どんなカスタマイズをしたのかを一つ一つ見ていきましょう。

 

タイトル画像の作成

20200107110243

これがタイトル用に作成した画像です。レスポンシブ対応にしているので、設定時に範囲選択することで、スマホとPCのタイトル画像どちらもこの画像だけでいけます!

 

画像作成に使用したのは「ibisPaint」というアプリです。

ダウンロードしたらibisPaintを開きます。

20200107110258

左にあるマイギャラリーを押します。

20200107110252

こんな感じでマイギャラリーにはこれまで作った画像を保存しておけます。私はブログ用に画像を加工するとき、いつもこのアプリを使ってます。

 

ちなみに電気工事士パグぞうのLINEスタンプも、紙と鉛筆とこのアプリだけで全部作ったんですよ‼️

 

画像の加工から可愛いLINEスタンプまで作れてしまう、すっごく便利なアプリなんです!

慣れちゃうと一つの画像が数分で出来上がっちゃうよ

 

そして実は今回初めて気が付いたのですが、画像作成画面右上のアイコンを押すと大量の素材が選択出来ます。

20200107111232

種類を選択すると素材が表示されます。

20200107111237

今回使用した桜背景も素材から入手した物です。無料で使える素材がたくさんありますので活用してみて下さい。

あんだけスタンプ作ったのに気付かなかったの?!ねえ?!

 

グローバルナビゲーションの設置

20200107110238

クリアメモリさんの下記記事を参考にさせて頂いてます。

MENUを押すとカテゴリ一覧が表示されるのも良いですが、今回はこっちを採用してみました。

見やすさ•分かりやすさではピカイチですね。

 

タイトル下に人気記事を固定表示

20200107110248

こちらは私が尊敬してやまない元CAバンビさんのコードを使わせて頂きました。ほんとにコピペ一発でお洒落な人気記事一覧が出来てしまうので驚きです。

私も自分の力でコードが書けるようになりたいなという気持ちがちょっとだけ芽生えました✨

 

ブログを訪問すると、まずどの記事を読めば良いのか悩みますよね。そんな時、オススメ記事がトップページに表示されているとすぐアクセスしやすいですね。

 

サイドバーのプロフィールを充実

20200107105450

プロフィールってこれまでさらっとしか書いていませんでしたが、読者を増やす為にはまずどんな人が記事を書いているのかを知ってもらうことが大切だそうです。なので、少しだけ書き加えてみました。今はもっと自分のことをみなさんに知って欲しい。そんな気持ちです。

クロネさんの記事はやっぱり凄いです。説得力の塊ですので、参考にさせてもらってます。

 

サイドバーにLINEスタンプの記述追加

20200107105456

サイドバーが少し寂しいなと思い、追加してみました。やはり絵心の全くない素人の私がLINEスタンプを配信したことは何よりの自慢であり、これから一生誇れるものですので、ぜひ沢山の人に知って頂き、使って頂きたいです。

バカにしてたけど、だんだん愛着湧いてきたかも

え!バカにしてたの?!

皆さんにスタンプを買って頂いても、私の元には1円も入ってきませんが、とにかく電気工事士パグぞうを広く知って頂きたいという気持ちです。

あ、パグぞうスタンプをアイキャッチに使ったりしないでくださいね!

デザイン一新でPV倍増⁉️

20200107122313

元々PV数が底辺ではありましたが、デザインを一新した1月3日から急激にPVが増えている気がします。もしかしたらタイトル下に人気記事を固定表示したことでブログ内の回遊率が上がったのかも知れません。いずれにしても良い傾向が見えているので、これからがとても楽しみです。

 

まとめ

今回はトップページのデザインを一新したことについて書かせて頂きました。デザインを変えることは自分にとっても良い事ばかりです。カスタマイズのノウハウ習得やマンネリ解消、モチベーションの維持、気分転換。

 

そして最大のメリットはなんといっても、自分のブログがもっと好きになることです。

 

人に自慢出来て、自分にとって宝物。

そんな大好きなブログだからこそ、さらに愛情を注ぐことで、更新意欲が湧き出てくるのだと思います。これからも自分のブログをもっともっと好きになれるよう、日々創意工夫をしながらブログを続けていきたいと思います。

 

以上、トップページデザイン一新のご報告でした。

 

今後とも、生まれ変わった「電気工事士パグぞうの人生バズ理論!」をどうぞよろしくお願いします。

www.pagzo.com

電気工事士パグぞうの人生バズ理論の原点です。

www.pagzo.com


人気ブログランキング

 

ブログランキング・にほんブログ村へにほんブログ村