【CSS編集】画像に枠をつけてみました。

アレンジの仕方がわかってきて楽しくなってきましたよ。

さて、今回の変更ですが、ちょっとした小変更を加えてみました。というのも、私のテンプレートだと、背景が固定されているので画像が見づらいなぁと感じていたんです。んで、CSSを覗いていると画像に関する部分があったのでチョコチョコっといじってみました。

.thumbnail は、ブログをトップページの記事表示タイプ を「書き出しのみ表示す」を選んだ時に表示される画像の設定項目ですね。

囲み枠はborderで指定。周囲との境目をはっきりさせる為に、paddingを指定して枠との隙間を設けました。marginを右側だけに指定しているのは、文字が画像に接触しない為の処理です。背景色には左側のメニューやコメント欄やトラックバック欄の背景カラーと同じ色を使ってます。白を使わないのは、目に優しい画面にしたいからです。若干青みがかかっている感じになっています。

/* エントリー内の画像位置（一覧） */ .thumbnail { margin-right: 5px ; padding: 2px; float:left; border: 1px solid #57ACD5; background-color:#F4F7FF;; }

で、この設定をすると気になるのが、全文表示した時の画像。こちらにも枠線を追加したいと思ったわけです。しかしながら、CSSを見渡してもこの部分を制御する項目が見当たりません。

そこで、画像がある記事をブラウザでソース表示させてみると

＜div align="center"＞＜img src="http://blogimg.goo.ne.jp/user_image/37/da/47d04685025a9f615ad2dcf99cd231c2.jpg" class="etImage"＞＜/div＞

「class="etImage"」にピーンと来ましたよ。このetImageというのが、画像部分を制御している項目だな！っと。

ということで早速、下記をCSSに記述してみたところ…

/* エントリー内の画像位置 */ .etImage { margin: 5px ; padding: 2px; float:; border: 1px solid #57ACD5; background-color:#F4F7FF;; }

バッチリOKでした!!
全文画像の場合はmarginは全周囲に設定しています。floatは画像の位置を制御しているようです。何も書かなければ、配置はHTMLに制御されますが、ここに「left」って入れると左寄せになります。当然「right」って入れると右寄せになります。

ちょっと欲を出して、imgタグに枠線をつけてやろうかと考えたんですが、これは表示が著しく崩れてしまうので却下。記事内のimgタグだけに枠線をつけられる方法を考えねばなりませんね。

---

いきなり追記（笑）
上の文章を書きながらさらに気付いたことが。imgタグの中に「class="etImage"」を書いてしまえばいいんじゃない？と思ったんです。

で試してみました↓



バッチリじゃないですか!!!

これはこのように記述しています。

＜center＞＜img src='https://blogimg.goo.ne.jp/user_image/22/f4/8f1e99234c51da419e2fc813a26cfd28.jpg' class="etImage"＞＜/a＞＜/center＞

これが出来たということは、自分専用のスタイルを登録することも可能でしょうね。

なんだか楽しいですねぇ。

---

早速、ichikenさんの書き込みを試してみましょう。

CSSに下記を追記してみました。

/* エントリー内画像レイアウト用 */ .oneEntry img { margin: 5px ; padding: 2px; float:; border: 1px solid #57ACD5; background-color:#F4F7FF; }

これはこのように書いてます。

＜center＞＜img src='https://blogimg.goo.ne.jp/user_image/22/f4/8f1e99234c51da419e2fc813a26cfd28.jpg'＞＜/a＞＜/center＞

おぉぉっ!

素晴らしい!!

ばっちりですよぉ!!!

ありがとうございます!!!!

---

コチラもご覧下さい。
【CSS編集】小変更しました。