Top

usa*log 晴れ。ときどき、うさぎ王国

WordPressで投稿する。(2)写真がセンター来ないんですけど

昨日のつづきです。WordPressで投稿する。

私のいつものパターン、テキストは左寄せ、画像はセンター合わせでやってみます。何も指定しなければ左になりますから、テキストは問題ありません。余白はCSSで指定しています。

そして写真のアップ。
投稿→新規追加→メディアを追加→ドラッグ&ドロップ→投稿に挿入→メディアを編集

メディアの編集は投稿画面のビジュアルモードでもできるので、こちらでやってみます。
a0026762_13594297.png
まず写真をぎゅぎゅっと縮めてサムネイル表示にします。

a0026762_1463167.png
画像をセンターに指定します。また、特に指定がなくても元画像にリンクして大きな画像を見ることができます。別の場所に飛ばしたい時は指定できるようです。細かくできていますね。
a0026762_14102923.png


さらに詳細画像設定で、周囲の余白などなども決められます。ホントに細かいですね。
でもこれはCSSで一括設定することにして、
img{
padding : 8px ;
}
これで余白OK。

さ、公開ボタンをクリックですよ!
a0026762_14184786.jpg


・・・(゚∇゚ ;)エッ!? これってセンターじゃないよね?

なにがいけないんでしょう?
テキストを開いてみます。
a0026762_14284930.png

img にいきなり class="aligncenter"ってアリでしたっけ?←急に己のCSSスキルに激しい不安をおぼえる

みなさん、どうしてらっしゃるのでしょう?
探してみます。
タグにCSSのclass設定可能?
小粋空間:CSS でブログ本文の画像だけをセンタリングする
.post img {
display:block;
margin: 0 auto;
text-align: center;
}
とやってみますが...。
a0026762_14583465.png

写真がひとつだけならこの方法がベストだと思う。CSSの設定だけでできてしまうもの。そもそも3つも並べて中央寄せて...とか言ってる私が悪いのか?
どーしても真ん中という必然性もビミョ〜。ただ、個人的に「この並びが落ち着くなー」っていう程度の問題です。それに...できそうでできないってなんかやだ。。

手っ取り早く済ますには写真をdiv align="center"で囲ってしまえばいいんですけど。
a0026762_1511078.jpg
おーっ、センターきたよ!
...もうちょっとスマートな方法があればねぇ。

とさらに探す、探す。
不特定の数の横に並ぶブロック要素をセンタリングさせる
これ?
画像(サムネイル)サイズさえ揃えればできるのかなぁ。。
できれば、「装飾」の要素は外部のCSSだけ直せば変えられる...ようにしたい。

しかし。
今日のところは記事をアップしよう。そちらが優先。
[PR]
by usa-log | 2013-02-24 14:25 | デザインやなんかのこと | Comments(0)
<< VirusBarrier X6... WordPressで投稿する(1) >>