【はてなブログ】4年ぶりにaboutページを見直してみる

aboutページの見直し　
- 定期的な見直しが必要です汗　
- 画像の遅延読み込み

aboutページの見直し　

ブログ開設当初、いろいろとブログカスタマイズについて調べていくなかで、「ごあいさつ」や「自己紹介」ページというのがブログには大抵存在するな、と気づき、はてなブログでは
「aboutページ」
がそれにあたるということが分かりました。

せっかくなのでaboutページもカスタマイズしたものを載せよう、ということで当時探し回った結果、おーくにさんのページにたどりつき、実践してみました。

oretopi.hatenablog.jp

※ざんねんながら以前、参考とさせていただいたページのリンクは現在切れてしまっているようでした。

苦労の末、それらしいアウトプットにたどりついたのですが、aboutページって、そもそも作ってからあまり見る機会もなく…(^^;)、とくに見直すこともなかったのです。
最近、ものすごく久々にスマホからページを開いたところ、表示がおかしい部分に気づきました。

それで原因をつきとめ、修正しようと思い立ったのですが、以外とあっさり解決しました(=^_^;=)。以下は私のaboutページをカスタマイズしたコードです。

ここをクリックしてコードを開閉。

このコードをはてなブログのダッシュボードから設定→aboutページ編集と進んで、ブログの説明欄に入れると（モードはHTML）aboutページに反映され、こちらのページのような画面表示になります↷

rubirubi.hateblo.jp

※わたしが開発したコードではないので恐縮ですが、もし利用したい方がいましたら改変してお使いください。ちなみにコードの表記は’かもとしゃけ’さんのページを参考とさせていただきました。おーくにさん、かもとしゃけさん、ありがとうございます。⸜(*ˊᵕˋ*)⸝‬ｱﾘｶﾞﾄｳ♡

itchingears-kamokamo.blogspot.com

定期的な見直しが必要です汗　

それで、問題の表示がおかしい点というのは、カテゴリ別のボタンのレイアウトがスマホだとズレていたのです(=^_^;=)。

<h3>主なカテゴリー</h3><br>
<div style="margin-bottom: 20px;"><!--bottom余白用囲い-->	
<ul class="widget-menu">	
<li> <a href="https://rubirubi.hateblo.jp/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA"><i class="fa fa-wrench" style="color: #ff9191"></i>ブログカスタム</a></li>	
<li> <a href="https://rubirubi.hateblo.jp/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0"><i class="fa fa-graduation-cap" style="color: #ffb776"></i>プログラミング</a></li>	
<li> <a href="https://rubirubi.hateblo.jp/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E7%94%A8"><i class="fa fa-chart-line" style="color: #92ceff"></i>ブログ運用</a></li>	
<li> <a href="https://rubirubi.hateblo.jp/archive/category/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1"><i class="fa fa-thumbs-up" style="color: #77d477"></i>初心者オススメ</a></li>

</ul></div><br/>

上はだいたいその辺り、のコードなのですが、、HTMLの知識などほぼない私、なかなかの壁です。最初は’margin-bottom: 20px’のサイズを変えればなんとかなるかな？と思いつきで、10pxにしてみたり、30にしてみたりといじったところ何の変化もなく…(´ω｀)。

ただよくよく画面を見てみると、「ブログカスタマイズ」の文字だけ、改行されて2行になっています。
「これだ！」と思い、下記の様に文字数を減らしたところ、無事解決しました(^^;)。

これが正しい修正方法だったかは定かではありませんが、もしさきほどご紹介した上のコードでブログのaboutページを変えてみよう、と思った方がいらしたら、参考になれば幸いです⸜(*ˊᵕˋ*)⸝‬。

そのほか、せっかくなのでおかしなところがないか、チェックしてみることにしました。するとすぐ下の、よっぴの写真のリンクが、なぜか切れてしまっていました。いつからだろう…？よっぴゴメンよ～

はてなブログの画像は基本、はてなフォトライフからのリンクが貼られているのですが、、しばらくのあいだに、アドレスが変わってしまっていたのでしょうか？再度探し出して貼り直したところ、無事元通り表示されました！

何やってんの～（・θ・）？

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>

<p style="text-align: center;">
<img class="lazyload" width="300" height="300" data-src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fobitows/20190817/20190817210346.jpg" alt="ハテブカスタムについて" />
</p>

<script>
    lazyload();
</script>