写真関連の話じゃないのですが、当ブログのスマホ版の記事一覧を久々に見てみたらデザインが崩れていたので、それを修正したというお話になります。
ネット上で検索してもスマホ版についてはほとんどヒットしなかったので一応記録として上げておきます。
なお、ブログのCSSについて少しいじる程度ですが知識については初心者なのであくまで参考程度に読んでください。
1. スマホ版はてなブログのタグによるデザイン崩壊
はてなブログのタグについては2020年10月に実装されてから使用されていましたが、その間にPCから自分のブログのタグをチェックすることはありましたが、スマホについては確認していませんでした。
久しぶりにスマホ版で自分のブログ記事一覧を見たときに下記の写真のようにブログ記事の一部にタグが縦に並んでしまい一つの記事あたりのスペースがとんでもないデザインになってしまっていました。最初はタブを一つぐらいにしてこのスペースを消そうかと思ったのですが、CSSを弄ったら変えられるのではないかと思い今回手を加えてみました。
ただ、このデザインが崩れる現象は、スマホ版ブログのデザインを色々弄っていると発生するのでデフォルトの状態だとおそらく影響はないのではないかと思います。
2. スマホ版はてなブログのタグを消す方法
スマホ版はてなブログのタグを消す方法はそんなに難しくはありません。
写真の「タイトル下」のCSSに下記コードを入れるだけで消すことができます。
※はてなブログのPROでしかデザイン変更ができないので注意が必要です。
<style type="text/css">
/*トップページのタグ非表示*/
.archive-entry-tags{
display:none;
}
</style>
スマホ版デザインの場合濃い緑の部分がスマホでのCSSを使用できるようにするコードになります。
薄緑色の部分はただ単にメモみたいなもの
そして、メインは赤色の部分でこれがタグを消すコードになります。
タグのコードの説明については下記ブログがわかりやすいです。
ただ、タグの色とかもカスタマイズできそうなのでPC版の方もちょっと弄ってみたいと思います。
ちなみに変更後がこんな感じになりました。タグが消えてデザインの体裁が整いました。
ただ、CSSを弄ればタイトル下にタグを組み込んだりすることができると思うのですがめんどくさくてとりあえずこれでいきます。
3. あとがき
自分のCSSを弄って出来ただけなので他のはてなブログに対しても同じように適用してできる保証は正直ありません。
なので、あくまでも参考程度にしてください。
と、ブログのデザインについてはちょくちょく変更することがありますが、正直今のデザインが一番読みやすく見やすいかなと思っているので今後大きく変更することは多分ないと思います。
