今日は、ずっとやりたかった、ブログのスマホ版カスタマイズに挑戦しました。
現在、私は「Haruni」というテーマを使用しており、Proではなく無料版を使っております。それをカスタマイズしました。
テーマ「Haruni」について
「Haruni」は見た時に、かわいいと思ったで、妊婦生活のブログにちょうどいいかなと思ったのと、スマホやタブレットでも互換性があったので、このテーマをブログ開始当初から使用しています。このテーマを見てみたい方は下のリンクから。
私のプログラミング知識
プログラミングは専門外で、全くド素人なのですが、昔会社のホームページの編集を担当したり、統計を学んでいるときに、結構プログラミングの知識を使わないければいけないこともあり、今の世の中、小学生でもプログラミングを習い始めているし、大人になっていろいろこなしていくには、お金を払って誰かにやってもらうか、自分でプログラミング(というより、検索してコピペが)できないといけないんだなと思ってきています。(お金がないので、完全に後者になります。)
はてなブログ無料版
Pro版を使ったことがないので、比較はできないのですが、無料版のはてなブログを始めて、バグもなく毎日更新を続けてこれて満足しています。
無料版でもだいたいのベースは整っていて、問題なく使用でき、PCがない時でも、スマホからで編集ができるため、体調が悪いときや移動時間にも、簡単にブログが更新できるので助かっています。
その代わり無料版なので、いろいろカスタマイズに関しては、自由度は低いと思っていました。
しかし、今は便利なもので、いろいろなプログラマーの方々が無料版でもできるカスタマイズ方法をブログに書いてくださっているため、「はてなブログ カスタマイズ 無料版」などで検索したら、私でも出来そうなカスタマイズが、ちらほら見つかりました。
まずはバックアップ
カスタマイズされる方は、まずはバックアップを行うことがおすすめです。
「Haruni」のカスタマイズ
レスポンシブデザイン設定
無料版ではPC版と同じようにしなければ、カスタマイズができないので、PC版と同じような見た目になるようにしました。
そのおかげで、下の方にスクロールすると、検索画面も入れることができました。
更新(2021/01/16):スクロールしなくてもいいように、トップバーに入れることにしました。
例えば、「両親学級」などと入れてもらえば、その用語が入ったブログが並びます。
グローバルメニューの導入
昨日までのスマホ版はこんな感じで、
下図のようにリストがパーッと並んでいるだけで、そのリスト以外のブログが見つけられなかった。そのため、グローバルメニューというものをつけてみました。
今日からは、右上の「三」みたいな、グローバルメニュー/ハンバーガーボタンをつけてみました。「三」のところをクリックすると下の図のように左側から、カテゴリーが出てきます。
このグローバルメニューの設置方法は下のリンクを参照にしました。
ほとんど、上記のリンクにあるコードをコピペして
"URLを入力">Top
この部分を自分のホームページの各URLと名前に1つづつ変更していけばOKでした。
その他
他にも文字の大きさやトップの背景など無料版であっても、変更できる点がたくさんあります。
せっかく書いているブログなので、もう少し時間があるときさらに見やすく変更して少しでも多くの人に見てもらいやすくなればいいなーと思っております。
もっとおそらく初心者に優しいテーマ「Minimalism」
もう少し変えたいこともあったのですが、HTMLとCSSの違いもはっきりよくわかっていない私にとっては、基本コピペでしか、変更ができないので、これ以上は、うまくいきませんでした。
原因としては、初心者なのにこの「Haruni」こだわっているから応用しにくいのだと思います。でも、このデザインかわいいので気に入っています。
カスタマイズに向いているっぽい「Minimalism」にすればもっとカスタマイズ情報ブログがとても多いので、いろいろな変更ができそうなのですが、私は今のところ、「Haruni」でいいかなと思っています。(あとは、みんなと同じじゃつまんないじゃない。って天の邪鬼な考え。。)
おわりに
今日は久しぶりに、イギリス生活とも妊婦生活とも関係ないブログ内容でした。今回のカスタマイズで、少しでも多くの人が読みやすくなったと感じてもらえればいいかなと思います。
これからもポンの「イギリス妊婦生活」をよろしくお願いいたします。
本日もここまで読んで下さりありがとうございました。