どうもぐっさん（@goodsun_30）です。
最近ずっとブログのデザインをあれこれをいじってました。一度いじりはじめるとあれもこれもといろいろ気になってかなり消耗しました。
いじった内容を具体的に上げると
- 見出し（h3）のデザインを微妙に修正（角を丸くした）
- スマホ画面で見た時に発生する左右のズレを修正
- スマホ記事上に表示されるアドセンス広告のサイズ変更
- 日付の表示変更（‐から/へ）と最終更新表示
- スマホ画面で表示されるプロフィールの書き換え
- AMP対応とアドセンス貼り付け（手動）
こんな感じです。
最初の3つくらいは「はてなブログ （変更したいこと）」で検索するとすぐ出てくるのでなんてことなかったんですが、最終更新を表示しようとしたあたりからだんだん時間がかかるようになりました。
最終更新の表示方法もググればすぐ出てきます。しかし、僕がやりたい形にすると表示が崩れてしまうので、サンプルのコードをあーでもないこーでもないと修正し何とか今の形に落ち着きました。
HTMLとCSSの知識はすこーーーしだけあるので、Chromeのデベロッパーツールを見ながら作業を進めたんですが、これが非常に便利でした。デベロッパーツールがなかったら途中であきらめていたと思います。
要素を見れる機能があることは知っていて今までも何度か試したことはあったんですが、恥ずかしながらCSSとかまで見れるとは知らず、まったく使いこなせていませんでした。今回の件で少しは使えるようになったと思います。
そんなこんなで最終更新の表示でだいぶ時間を費やしたんですが、この時に「AMP」という知らない単語を知り、いっちょ対応してみるかとブログをAMP化しているうちにさらに沼にハマってしまいました。
まずは広告の表示。手動で貼り付けないといけないこと（現在アクセスを見ながらちまちま作業中）もそうですが、スポンサードリンクの表示位置、広告下の空白など、細かいところをいじるのに時間がかかりました。どうでもいいっちゃどうでもいいところなんですが、なんか気になってしまうんです。
ちなみにこんなに時間をかけたのにスポンサードリンクの表示位置はいまだに思ったようにできていません。疑似要素の使い方がおかしいのかなと思いながらいつか調整しようと思っています。
そして、もう一つ時間を要したのがカエレバの表示。
AMPに対応するとカエレバの表示がすごくみすぼらしい表示になってしまいます。しかもスマホのCSSをそのままAMP用のCSSに貼り付けてもうまくいきません。ということで、またデベロッパーツールでいろいろと試しながらなんとか今の形に落ち着きました。納得できない部分もありますが、まあ今のところはいいかなと思っています。
できる人からしてみれば簡単なことなのかもしれませんが、ド素人の僕にはかなり根気のいる作業でした。でもおかげで要素の意味がいろいろとわかるようになって、どこをどういじればいいのかが何となくわかってきたのでよかったかなと。まだまだ気になる部分は沢山ありますが、すこしずつ見やすく変えていければと思います。
今一番気になるのが、AMPでのアプリーチの表示です。現状かなりめちゃくちゃな表示になっていますが放置しています。ぼちぼちやっていきます。
というわけで、ブログのデザインをいじったというお話でした。
実際にいじったコードとか載せてみたいけど、正しいのかわからんのでやめておきました。はてなブログのカスタム記事書いてくれる方々にはほんとに感謝です。今回もお世話になりました。
そして奇跡的に数年前購入していたこちらの本も参考になりました。デザインブックってやつもいいみたいです。参考までに。ではでは。
コメント