最近、縦写真を撮ることが増えました。
そこで課題となっていたのが、ブログで横写真と縦写真を複数用いた場合の、縦写真の存在感。
そんな中、id:RyoAnnaさんがこんな記事を書かれており、自分のブログでも少しレイアウトを考えてみました。
はてなブログにおける縦写真のサイズを調整する。
※PCのみ調整しました
サイズと位置を考える
調整したのは2点。
１．縦写真の幅を70%に設定
適当に指定してみたら良い塩梅でした。
これで読者のディスプレイ環境に関わらず、記事の横幅に対して70%の横幅で表示されます。
ちなみにブログの横幅よりwidthが大きいため、横写真は設定触らず。
これで横幅の比は縦写真：横写真＝７：１０となりました。
２．中央揃え
幅80%の設定をすると、基本的に左づめのブログ記事では写真が左に寄ってしまう。
ちょっとかっこ悪いので、縦写真だけは中央配置としました。
CSSで縦写真用の指定をする
１と２は縦写真に関してのみ設定したい。
imgタグに情報を加えていってもいいが、今後気が変わって戻すことを考えると面倒。
imgタグに適当なクラスを付け、そのクラスに情報を加えることにしてみました。
こちらの記事を参考に。
まず、ブログ管理画面から、デザイン＞カスタマイズ＞{}デザインCSSを開き、次のコードを記載。
.photo-center {
display: block;
margin: 0 auto;
width: 70%;
}
そしてサイズ変更と中央揃えを適用したい画像のimgタグにclass指定を追加します。
<img class="photo-center" src="〜.jpg" alt="〜.jpg" width="683" />
既にimgタグにwidthが指定されていますが、こっちよりもCSSが優先されます。
こんな感じになります。
変更前
変更後
おわりに
縦写真を貼るのが億劫になっていたのですが、本設定でスッキリしました。
前回記事からこの設定にしています。縦写真貼りまくってます。
ご参考になれば幸いです。では！
