画像に枠線を | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

機械音痴が悩みの種のワンタンです。

おは、こんばんは。←full-time共通?^^

ブログの記事面の画像に枠を付ける方法を調べてみました。
全記事の写真に枠を付ける方法と個別に付けるやり方と二種類あるみたいです。
今回は、個別に付ける方法でやってみました。

※CSS編集用デザインを適用されてる場合です。

$あんなこと そんなこと どうでもいいこと...



oまず最初に、マイページ又は「ブログを書く」の左側「デザインの変更」→[ CSSの編集 ]でCSS(スタイルシート)の最後に以下のタグを貼り付けます。

/*画像に枠*/
.img-waku{
padding: 4px;
background: #CCFF66;
border: #d1d1d1 1px solid;
border-right: #d1d1d1 3px solid;
border-bottom: #d1d1d1 3px solid;
}


o次に個別設定です。「ブログを書く」欄に行きます。
画像を貼り付けるとタグが以下(↓)のように、なってると思います。

<div align="center"><a href="http://stat.ameba.jp/user_images/20130624/06/wantan-52/e1/6b/j/o0500037512586471904.jpg"><img src="http://stat.ameba.jp/user_images/20130624/06/wantan-52/e1/6b/j/o0500037512586471904.jpg" alt="$あんなこと そんなこと どうでもいいこと..." width="500" height="375" border="0" /></a></div>


で、下の行のborder="0"と/の間にclass="img-waku"を挿入します。

<div align="center"><a href="http://stat.ameba.jp/user_images/20130624/06/wantan-52/e1/6b/j/o0500037512586471904.jpg"><img src="http://stat.ameba.jp/user_images/20130624/06/wantan-52/e1/6b/j/o0500037512586471904.jpg" alt="$あんなこと そんなこと どうでもいいこと..." width="500" height="375" border="0"class="img-waku" /></a></div>


こうなります(↓)

$あんなこと そんなこと どうでもいいこと...


自分の場合、記事背景が白なので、今回とりあえず枠の色を薄めの緑にしてみました。

CSSに張り付けたタグのbackground: #CCFF66;←赤字の箇所がカラーコードです。

ご自身のブログに合わせて、色を調整してみて下さい。

あと、こちらのサイトHTML,CSS カラーコード一覧表$あんなこと そんなこと どうでもいいこと...-外部リンクも参考になればと思います。

自分のブラウザはIE10ですけど、OSやブラウザ、端末の機種によって動作が反映されない事が多々あると思いますのでご了承ください。

お役にたてれば、うれしいのですが・・


【追伸】IE10,Opera,自分のスマホau optimus G LGL21では、動作確認とれましたが、以外にもグーグルクロームでは反映されませんでした。トホホ。・゚゚・(≧д≦)・゚゚・。