No.26

生活とか写真とか音楽とか?あと美味しいもの?

はてなブログにおける縦写真のサイズを調整する。

最近、縦写真を撮ることが増えました。


そこで課題となっていたのが、ブログで横写真と縦写真を複数用いた場合の、縦写真の存在感。

そんな中、id:RyoAnnaさんがこんな記事を書かれており、自分のブログでも少しレイアウトを考えてみました。 

www.ryoanna.com

はてなブログにおける縦写真のサイズを調整する。

※PCのみ調整しました

サイズと位置を考える

調整したのは2点。

1.縦写真の幅を70%に設定

適当に指定してみたら良い塩梅でした。

これで読者のディスプレイ環境に関わらず、記事の横幅に対して70%の横幅で表示されます。

ちなみにブログの横幅よりwidthが大きいため、横写真は設定触らず。

これで横幅の比は縦写真:横写真=7:10となりました。 

2.中央揃え

幅80%の設定をすると、基本的に左づめのブログ記事では写真が左に寄ってしまう。

ちょっとかっこ悪いので、縦写真だけは中央配置としました。

CSSで縦写真用の指定をする

1と2は縦写真に関してのみ設定したい。

imgタグに情報を加えていってもいいが、今後気が変わって戻すことを考えると面倒。

imgタグに適当なクラスを付け、そのクラスに情報を加えることにしてみました。

 

こちらの記事を参考に。

gakublog.com

 

まず、ブログ管理画面から、デザイン>カスタマイズ>{}デザイン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が優先されます。

こんな感じになります。

変更前

DSCF9056.jpg

変更後

DSCF9056.jpg

おわりに

縦写真を貼るのが億劫になっていたのですが、本設定でスッキリしました。

前回記事からこの設定にしています。縦写真貼りまくってます。

www.takchaso.com

ご参考になれば幸いです。では! 

 

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本