クライアント様向け｜画像周りにオシャレな枠線をつける方法

今回はクライアント様向けの記事となります。以下のように、画像の周りに余白と枠線をつける場合、すでにCSSの編集は設定してありますので、後は該当のHTMLタグをイメージ（画像）タグの中にコピペするだけです。※新スキン／標準エディタ対象

CSSの設定

.skinArticleBody img.border {
padding: 5px;　/* 余白 */
border: 1px solid #EEEEEE;　/* 線の太さ・種類・色 */
}

ポイントはタブの切り替え

記事に画像を追加後、編集画面左下にある「タグの非表示」タブをクリックして、「HTMLタグを表示」タブに切り替えてください。HTMLソースが表示されます。

以下のような追加した画像（img）タグを探し出し、グリーンの部分を追加してください。何でしたら、下記からマウスの右クリックでコピーしてもらっても構いません。

追加するHTML

<img src="画像のパス"  alt="" border="0" class="border" />

その後、再び「タグの非表示」画面に切り替えます。この時点では枠線は追加されていませんが、プレビュー画面では正常に表示されているはずです。逆に不表示の場合、コピペが上手くいっていない可能性があります。

慣れないうちは多少難しいと感じるかもしれませんが、慣れれば結構簡単ですので、まずは実際にご自身でお試しください。不都合がある場合、別途、ご連絡くだされば対応いたしますのでご安心ください。※クライアント様限定

以上、アメブロカスタマイズ＆ホームページ制作*Mydesignの*Copyselfでした。
アメブロカスタマイズ料金プラン＆過去の制作実績はコチラからご覧いただけます。