ココログ カスタムCSS編集で、ブログ写真の表示幅を一括調整する方法

ココログのリニューアルがひととおり終わり、使いやすくなった。特に、スマホからの記事投稿・編集がとても便利にできるようになった。ある意味、やっと他社ブログ並に使えるブログになってきた。

ただし、スマホ画面にえげつなく広告が入るようになっている。そこで、ちょっともったいないが、ブログのプランを「ベーシック」から「プロ」に変更した。これにより、スマホ表示でも自動広告が入らないようになり、すっきりする。

「プロ」のメリットは他にもあって、ブログデザインのカスタマイズがベーシックよりも簡単にできるようになっている。

ブログの表示幅を以前よりも狭くしたので、写真が表示しきれず切れている投稿が多くある。これをひとつひとつ直すのは膨大な作業量となり、なかな大変なので、CSSの設定により、写真幅を調整するようにした。

その方法は、ココログ管理画面から、「デザイン」⇒ 「カスタムCSSを編集」のところに、

img {
max-width: 100%;
height: auto;
}

と入れて保存するだけ。

この4行だけで、写真がはみ出さず表示できるようになる。パソコンでもスマホ表示でも同様にちゃんと写真が表示できるようになった。