画像の回りに枠線をつける(テンプレートCSS編)

前記事では画像自体に個別に白縁や枠線をつけましたが、CSSで設定しておくと、加工していない画像をアップロードするだけで全ての記事の画像に枠線をつけることができます。

また、過去記事の画像にも枠線がつきます。

管理ページの「テンプレートの設定」を開きます。
09062851.gifテンプレートを編集する場合は、失敗しても元に戻せるように必ず「複製」を作っておいてから編集する方がよいと思います。
おかしくなった場合、元のテンプレートにすぐに戻すことができますから。


09062852.gif
「スタイルシート編集」の一番下に下記(画像の赤枠内)のように記入します。

.entry_text a img {
background: #fff;
border: 1px solid #808080;
padding: 7px;
}

.entry_more_text a img {
background: #fff;
border: 1px solid #808080;
padding: 7px;
}

「background: #fff;」は縁の色。
「#fff」が色のコードになります。
色を変えたい時はこの「#○○○の部分を変えるとOKです。

「border: 1px solid #808080;」は枠線の幅と色。
「1px」の数字の部分を変えると枠線の幅が変わります。
「#808080」の部分を変えると枠線の色が変わります。

「padding: 7px;」の部分はこの場合は白縁の太さ。
数字を変えると縁取りの幅が変わります。

ここで注意しなければならないことは、テンプレートの作者さんによって上記画像赤枠内の黄色い線の部分の表記が違います。
この部分の表記を統一しておかないと枠線が出ません。
09062853.gif

このテンプレートではスタイルシート編集の画面をスクロールして戻ってみるとこのように書かれています。
黄色の下線部分(青色文字部分)はここの部分と同じにしないといけません。

09062854.gif

ところが…別のテンプレートでは「.entry_text」「.entry_more_text」ではなく「.EntryBody」「.EntryMore」になっているので黄色下線部分(青色文字部分)をそれぞれ「.EntryBody」「.EntryMore」としなければなりません。

スタイルシートの設定が終わったら「更新」ボタンを押しておいて下さい。
これで設定は完了です。
09062855.jpg
普通の画像をアップロードするとこのように違和感なく表示されます。

09062856.jpg
ところが、画像に影をつけたり、このようにページカールなどの加工をした場合は、枠線がつくとおかしく見えます。
この場合は、記事を書く時に一手間かけてやらなければなりません。

通常通り記事編集欄で画像を挿入してやると次のような表示になっています。

<a href="https://blog-imgs-27.fc2.com/○/○/○/XXXXX/2009-06-10_1428-3.jpg" target="_blank"><img src="https://blog-imgs-27.fc2.com/○/○/○/XXXXX/2009-06-10_1428-3s.jpg" alt="2009-06-10_1428-3.jpg" border="0" width="400" height="265" />


枠線を表示したくない画像の場合は、この「border="0"」の部分を「style="border:none"」に変えてやると……
09062857.jpg
このように枠線が表示されなくなります。

うまく説明できなくて、わかりにくい文章で申し訳ありません…





関連記事

2 Comments

ニュータイガー8  

こんばんは

早速、試みました成功でした以前からブログ内の写真に枠を
つけたかったのですが方法が分かりませんでした、
れんさんの今回の記事のおかげで全ての写真に枠をつける事によって
記事そのものが締まって見える様になりました・・・だんだん自分好みの
テンプレートになっていく喜びを感じています・・・有り難う御座います

2009/06/28 (Sun) 19:36 | REPLY |   

れん  

ニュータイガー8様

おはようございます♪

うまくいったようで私もうれしいです♪
これは四方の枠線の太さが同じ幅のやり方ですが、4方向ともそれぞれ設定することもでき、例えば右と下を少し太くするとちょっぴり立体感が出るかもです。
また、下部分の白縁の部分を広く取るとポラロイド風の枠線になったりとか、同じやり方でも少し変えるだけで、見た目が変わってきたりします。

オリジナルテンプレート、頑張ってみて下さい!

2009/06/29 (Mon) 06:20 | EDIT | REPLY |   

Post a comment