画像の回りに枠線をつける(テンプレート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="http://blog-imgs-27.fc2.com/○/○/○/XXXXX/2009-06-10_1428-3.jpg" target="_blank"><img src="http://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
このように枠線が表示されなくなります。

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





関連記事

コメントの投稿

こんばんは

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

ニュータイガー8様

おはようございます♪

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

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

**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ