BLUE_SKY_BLOG(更新停止中)

更新停止中。今までのご愛顧ありがとうございます。今後は『碧き流星』をよろしくおねがいします。

広告

※このエリアは、60日間投稿が無い場合に表示されます。記事を投稿すると、表示されなくなります。

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

2005-03-03 13:45:39 | ★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='http://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='http://blogimg.goo.ne.jp/user_image/22/f4/8f1e99234c51da419e2fc813a26cfd28.jpg'></a></center>


おぉぉっ!

素晴らしい!!

ばっちりですよぉ!!!

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




コチラもご覧下さい。
【CSS編集】小変更しました。
コメント (5)   この記事についてブログを書く
この記事をはてなブックマークに追加
« 綺麗な駅だったのに…。 | トップ | 【GT4】面白い企画だなぁ »
最近の画像もっと見る

5 コメント

コメント日が  古い順  |   新しい順
みやすいですね。 (ichiken)
2005-03-03 14:15:33
私はgooブロガじゃないので、試した結果をアドバイスできないのですが、

多分、oneEntry ってのがgooブログでの1つのエントリのクラスのようですので、



.oneEntry img {

border: 1px solid #57ACD5;



(変な影響がでないように、括弧とかドットを全角にしてます。ドットとoneの間にスペースは無いです。oneEntryとimgの間にスペースあります。)



こんな感じのやつをCSSに足すと、

エントリー中のイメージに枠をつけたりできるんじゃないでしょうか。

(これがうまく利くと、毎回imgタグにクラスを指定しなくてすみます)



うまくいかなかったら、ごめんなさい。
うまくいきました。 (blue_rex)
2005-03-03 14:27:44
おかげでさらにCSSの知識が進みました。



見出しタグに関してもこの方法が使えますね。



感動!!!
Unknown (ことり)
2005-03-07 15:51:18
画像に枠があると見やすくていいですよね。



私の使ってるテンプレ『カメラ』は

枠がつくところが気に入って選びました。

本当は全部の画像に枠をつけたいんですけど

カスタマイズ音痴なので出来そうもないです(^^ゞ







はじめま略さんの (blue_rex)
2005-03-07 16:00:27
テンカスエディタを使うと比較的簡単にデザインができますよ。

http://blog.goo.ne.jp/rd-xs40user/e/ea69447fdf78df8673b3d2cc1f1e3a7e



それに加えて上記の設定を行えば、画像に枠をつけることが出来ます。



クリア系テンプレを使えば、メニュー位置も自在ですからさらに調整しやすいと思います。



私に出来るかげりのお手伝いはさせていただきますので是非CSSカスタマイズチャレンジされてはいかがでしょうか?
こんにちは。 (ことり)
2005-03-18 16:51:45
あれから何回もBlue_rexさんの記事を読み返して

ようやくやる気になりました(笑)

今日はそのままコピーさせて戴きました。



これからもよろしくお願いします。



コメントを投稿


コメント利用規約に同意の上コメント投稿を行ってください。

数字4桁を入力し、投稿ボタンを押してください。

あわせて読む

トラックバック

この記事のトラックバック  Ping-URL
ブログ作成者から承認されるまでトラックバックは反映されません。
  • 送信元の記事内容が半角英数のみのトラックバックは受け取らないよう設定されております。
  • このブログへのリンクがない記事からのトラックバックは受け取らないよう設定されております。
  • ※ブログ管理者のみ、編集画面で設定の変更が可能です。
CSSでブログカスタマイズ!改! (続・だりの海外逃亡。)
ブログカスタマイズ第二弾! 前回に引き続き、CSSをチョコチョコいじりながらデザインを変えてみました。  今回変えたのは、前回タイトルの背景をオリジナルのものに交換した時に放置しっぱなしだった左右のメニューの部分と真ん中のコンテンツの背景や間にあるバーをいじ