月収が12万しかないので、お金稼いでみた

月収が12万しかないので、お金稼いでみた

超初心者のアフィリエイト実践記

ブログのトップ画面のアーカイブ表示件数を50件→7件にしたら読み込みが速くなりました!

f:id:sibalove:20170923142331j:plain

 

こんにちは!しばらぶです。

 

今日も引き続き、ブログの読み込み速度を速くする方法を試みていきましょう!

 

前回の記事では

・画像のサイズを減らす

・記事の数を減らす

アーカイブ形式にする

という3つの方法を行ないました。

sibalove.hatenablog.com

 

この方法で、読み込みのスピードははじめに比べるとかなり速くなりましたが、まだまだ改善の余地のある結果となりました。

 

それから自分のブログを改めて確認したのですが、

 

アーカイブの表示件数、多いな

 

と感じました。

 

トップを開いてみて、一番下までスクロールしてみると、20件以上もズラズラ―っと記事が並んでおります。(最大50件まで表示されるみたいです。)

読み込みのスピードも1記事まるっと表示されている状態とほぼ変わりがなかったので、今回はトップの記事数を7件のみ表示させるようにしたいと思います!

 

 

設定方法

まず、皆様ご存じのとおり、筆者は自分でコードを書く技術を持ち合わせていないので、こちらのサイト様を参考にさせていただきました。

※設定方法は基本的には変わりませんが、追記にて参考サイト様を加えさせていただきましたので、そちらのスクリプトも確認していただくことをお勧めいたします。

www.a-s-blog.com

 

手順としては、

前回の記事の手順でトップ画面をアーカイブ形式にする

アーカイブ形式にした記事を7件ずづ読み込むように設定する

これだけでいいようです。

 

②については「デザイン」→「カスタマイズ」→「フッタ」のHTML欄に先ほどのサイト様のコードを貼りつけるだけです。

 

さっそくやってみましょう!

「デザイン」

f:id:sibalove:20170923151247p:plain

 

「カスタマイズ」→「フッタ」のHTML

f:id:sibalove:20170923151347p:plain

そこにサイト様からコピーさせていただいたコード(スクリプト)を貼りつける!

 

そして忘れずに「変更を保存する」をクリック!

f:id:sibalove:20170923153038p:plain

 

設定した結果

f:id:sibalove:20170923161713p:plain

こんな感じになりました。

 

デフォルトだと枠が赤色なので、これは直しておこうと思います。

しかし、参考にしたサイト様でも書かれていましたが、ボタンをクリックしたときに枠が残ってしまうとのことです。

 

のこってしまうと見た目があまり良くないのでとりあえずの解決法として、枠は白くして背景と同化させてしまいましょう

 

※追記にあるサイト様を参考にした場合、デフォルトのままでも問題ないので以下の手順は省略できます。

 

枠の修正

前回ドロップダウンメニューの色を変更したときにも使ったカラーピッカーというツールを使用して、背景色を取ってきます。

www.vector.co.jp

 

詳しくはこちらの記事で↓

sibalove.hatenablog.com

 

確認してみたところ、このブログの背景色は真っ白なので「FFFFFF」でした。

ソースの「 #B92A2C」を「#FFFFFF」に書き換えてみます。

f:id:sibalove:20170923164044p:plain

こんな感じになりました!

 

このままでも問題なさそうですが、個人的に

ちょっと地味過ぎ?

とおもったので、文字の大きさをいじってみることに。

「font-size:80%」の「80」を「100」に変えてみました。

f:id:sibalove:20170923164943p:plain

f:id:sibalove:20170923164954p:plain

ちょっと大きくなったかな?

 

でもいまいちな気がしたので、もう少し大きくして、文言も「もっと見る」に変更。

ついでにフォントも太文字にしてみました。

 

一応載せておくと

f:id:sibalove:20170923172038p:plain

こんな感じです。

 

太文字の書き方はこちらを参考にしました。

www.htmq.com

 

修正結果

最終的にはこんな感じになりました。

f:id:sibalove:20170923172528p:plain

 

まだ若干地味な感じはしますが、とりあえずこれで十分かなと思います。

 

ためしに再度PageSpeed Insightsで表示速度を調べてみると…

f:id:sibalove:20170923172914p:plain

速くなってる!!

 

f:id:sibalove:20170923173701j:plain

「御主人!ついにここまで来ましたね!」

 

前回の記事で57までしかいかなかったのが76になりました!

文字の色もからオレンジになって、なんだか良くなりました感があっていいですね。

 

 

スマートフォンの画面にも対応させる

PCの方は良くなりましたが、モバイルの方は赤いままだったので、PCと同じデザインにして速度アップを図ります。

 

実はこんなこともあろうかと、レスポンシブデザイン対応のを選んでおいたんですよね!!

(というか、今まではトップ画面が重すぎて、設定したくてもできなかったというのは内緒のお話)

 

設定方法(レスポンシブデザイン)

設定は簡単です。

「デザイン」→「スマホ」→「レスポンシブデザイン」のチェックを入れるだけ。

f:id:sibalove:20170923174714p:plain

あとは「変更を保存する」を押したら完了です。

 

スマホにデザインを対応させた結果

f:id:sibalove:20170923175736p:plain

 

元が52だったのが61になったので、だいぶ良くなったと言えるのではないでしょうか?

ただ、まだまだ改善の余地はありそうですね…。

 

縦書きになってしまう問題発生

やっとできたと思ったのもつかの間、

スマホからブログを確認してみると、表示させた「もっと見る」のボタンが画面に収まりきらずに縦書きになってしまっていました(爆笑)

f:id:sibalove:20170923180458p:plain

 

筆者には原因が何かはわかりませんが、これはさすがに直さないといけないですね。

 

HTMLタグ/テキスト・フォントタグ/改行させない - TAG index

こちらのサイト様を参考に、改行をさせないタグを追加させました。

HTMLの「もっと見る」という文字に<nobr></nobr>を付け足します。

<nobr>もっと見る</nobr>

 

これで縦書き問題は解消されました。

 

右にずれる問題発生

そうすると、縦書きではなくなったのですが、今度はなぜか文字が中央ではなく若干右にずれる問題が発生。

 

HTMLタグ/ページ全般タグ/センタリングを指定する - TAG index

こちらのサイト様を参考に、中央に表示させるタグ<center></center>を追加させました。

<center><nobr>もっと見る</nobr></center>

 

f:id:sibalove:20170923195249p:plain

こんな状態です。(タグをくっつけただけのごり押しです)

 

確認してみると、

f:id:sibalove:20170923200342p:plain

真ん中に来てくれました!

 

HTMLなんて全然触ったことがない人間が手探りでやっているので、もっと正しい修正方法があるのかもしれませんが、調べてもわからなかったので、とりあえずはこれでいいかな、と思っております。

 

もし詳しい方がいらっしゃいましたら、コメントなどで指摘していただければ幸いです。

 

 追記(※重要)

その後、カテゴリからアーカイブを呼んだときに、記事の件数が少ないと一件も表示されないことを確認しました。(参考にさせていただいたサイト様にもコメントに記述がありました。)

 

解決方法がまだ記されておらず、筆者にはソースの修正ができなかったので、こちらのサイト様を参考に、スクリプトを書き換えました。

blog.wackwack.net

HTMLのソースを貼りつけ、5~7行目と、10行目の「 && device == 'sp'」を削除することで、PCでも表示件数を任意の件数にして「もっと表示する」ボタンを表示できるそうです。

 

f:id:sibalove:20170923230201p:plain

このようになりました!

 

見た目もわかりやすいのでフォントなども変えず、そのまま使わせていただきました。

 

一応念のために読み込みの速度も再確認してみましたが、

モバイル61

パソコン76

のままだったので、速度的にもこちらの方法で大丈夫そうです。

 

まとめ

今回はブログのトップ画面の表示件数を7件にして、見やすく&読み込みを速くしていきました。

ついでにスマホの画面デザインもパソコンに合わせてきれいにすることができました。

 

HTMLのソースとにらめっこしながらの作業でしたが、やっぱり思った通りにいくと嬉しいものですね。

 

今回の記事を書くにあたって、アーカイブ表示件数ははてなブログProに入っていれば詳細設定から指定できるという記事をみかけました。

筆者はしばらくはProには入らないので無理やり頑張りましたが、Proを使っていれば簡単に設定できるみたいです(笑)

 

なにはともあれ、ひとまずは読み込みの速さも大分改善されたので、良かったかなと思います。

 

それでは!また、別の記事でお会いしましょう!

 

はてなブログPerfect GuideBook/JOEAOTO :BK-4800711320:BOOKFANプレミアム - 通販 - Yahoo!ショッピング