画像を中央揃えにする
Bloggerでは…Vaster2だけなんですかね？
記事編集で画像を貼り付け、「中央」を選択しているのにいざ公開してみれば左に配置…となっていますよね？
これを正しく中央に配置する方法です。
「テーマ」→「HTMLの編集」から「Ctrl+Fキー」で検索窓を出し、
「.post-outer img」と検索して下さい。
画像の赤線で囲った箇所が出てきますよね？ここの「{}」で閉じられているところの下（「記事ページのリストタグのデザイン」の上）に以下のコードをコピペします。
.separator img{
margin-left: auto;
margin-right: auto;
}
画像で言うとここです。↓
コードを挿入し「テーマの保存」をすると、今まで左に寄っていた画像が
ちゃんと真ん中に寄ります。
幅が小さめのトップ画像なんかも見た目が良くなりますね。
画像に枠を付ける
さらに、画像に枠を付けることでデザインにメリハリが出せます。
先程追加したコードの「margin-right: auto;」の下に一文付け足します。
border: 1px #e4e4e4 solid; /*枠線*/
入れるのは画像の場所です。
で、「テーマの保存」。そうすると、
画像に枠が付きます。
ちょっと線が細いので見え辛いかもしれませんが、このページの画像にも付いていますのでお分かりになるかと思います。
私なんかは今のところ自分のブログをトリミングして貼ることが多く、そういう場合周りが白なので枠が付くことで見やすくなります。
ちなみに、「border: 1px」の？pxが線の太さ、「#e4e4e4」の部分が色指定のコードです。お好みに合わせて変更してお使いください。
このページのコードはBLOGGER LABOさんから拝借しています。
ありがとうございます。
|
|
|
