ブログ改造計画（もう何度目かのCSS修正）
(*'▽') おそらく、改造計画第６弾。
先日初めて知りました
画像の横並び貼り付け
画像を横並びにして貼り付けられると言う機能を先日初めて知りました。
ツールバーの「写真を投稿」メニューで画像を複数選択して、下部の「記事での並べ方」の選択で 通常｜横並び とあるので、ここで 横並び を選択すると横並びになります。
やってみれば解る通り、DOMとしては div.image-row という要素で括られているだけで、どうやらはてなブログ共通のCSSが効いているようです。
ぼくはフロントサイドエンジニアではないのでCSS周りは詳しくないんですが、ちらっとF12で覗いて見た感じだと blog.css の display:flex 指定が効いてるのかな？
で、問題
画像を横並びに出来て、写真やスクショを沢山投稿する時はいい感じになったんですが、もともとぼくは「画像の最大幅を80％にする指定」をカスタムCSSで付けており、横並びになった画像ひとつひとつが八掛けのサイズになってしまい、スカスカで見栄えが悪かったと言う問題ががが。
(*'▽') うおー、CSS修正だおー！！
カスタムCSS修正
と言う事で、カスタムCSSを修正。
変更前：
変更前はこんな感じの指定でした。
.entry-content img.hatena-fotolife { border: thin solid gray; max-width: 80%; display: block; margin: 10px auto; }
変更後：
横並び指定した場合の最終的なHTMLを調べて、こう変更。
.entry-content img.hatena-fotolife { border: thin solid gray; max-width: 80%; display: block; margin: 10px auto; } .entry-content div.images-row img.hatena-fotolife { border: thin solid gray; max-width: 100%; display: block; margin: 5px auto; }
重複がウザかったので整理：
一応、表示としては意図した通りになったんですが、重複がウザかったのでCSSをリファクタリングしました。
.entry-content img.hatena-fotolife { border: thin solid gray; display: block; } .entry-content img.hatena-fotolife { max-width: 80%; margin: 10px auto; } .entry-content div.images-row img.hatena-fotolife { max-width: 100%; margin: 5px auto; }
ちなみに、うざったい .hatena-fotolife のクラス指定ですが、これを入れておかないとプロフィールページかどこかの「読者一覧」のアイコンも中央揃えの指定に巻き込まれちゃうんですよね。
逆に、そっちのアイコン画像の方に何かclassを持たせておいてくれてれば、それの not 指定で綺麗に出来たのに、、、。
まぁ、そんな所そうそう見ないから、アイコンが縦並びになってようとぶっちゃけ大した問題じゃないんで良いんですけどね。
でも、気付いたバグは修正しないとね。
(*'▽') そうです、我々はエンジニアなので。
しかしはてなブログの生成するHTMLはCSSが使い難いですね
クラス指定が少ないせいで、CSSでセレクタを上手い事書けないので、どうしてもDOMの階層パス指定になってしまってイケてないです。
デザインの指定がドキュメント構造（つまりHTML）に依存しまくってて、CSSが全く疎結合になっていない、キモチワルイ、、、。
まぁ、考えてみるとこの仕様は仕方ないんですけどね。
何せ、システムが生成した横並びと手入力した横並びは最終的に区別が付かなくなるので、img要素自体に「通常｜横並び」を区別するclassを持たせると言うのは結構めんどくさい話ですし。
となると、この div.images-row で括るというのは割と現実的に妥当な仕様ですもんね。
(*'▽') でもワガママ言うと要素毎に適切なclass指定してほしーい。
ばっくなんばぁ
ブログ改造計画シリーズ
