BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» FC2ブログで画像に枠をつける方法

このエントリーをはてなブックマークに追加

FC2ブログで画像に枠をつける方法

   投稿日: 2016/02/17    投稿者:webコラム

neko.jpg

こんにちは!ライターのモモタロウです。

今回は、FC2ブログで画像に枠をつける方法をお伝えします。

是非、世界に一つしかないオリジナルブログを作成してみましょう!

FC2ブログで画像に枠をつけるには?

FC2ブログで画像に枠をつけるには、
「新しく記事を書く」で本文の編集をしていきます。

画像をアップロードして、新しく記事を書くとHTMLタグが以下↓のように
表示されます。

20160217-1.png

そこに以下を書き入れます。

style="border:solid 1px #909090; padding:1px;"

<a href="http://sampleflow.blog.fc2.com/img/neko.jpg/" target="_blank">
<img src="http://blog-imgs-86.fc2.com/s/a/m/sampleflow/neko.jpg" alt=
"neko.jpg" border="0" width="640" height="427" style="border:solid 1px #909090; padding:1px;"
/></a>

20160217-2.png


              ○で囲った部分が、入力した部分です。 ↑

20160217-3.png

20160217-4.png

上の画像と微妙に変わっているのが分かりますか?


次に、枠の太さを変えてみましょう!


style="border:solid 1px #909090; padding:1px;" の1px部分を
5px」に変えてみます。

以下↓のように太くなりました。
20160217-5.png

枠線は色を変えることもできます。

style="border:solid 1px #909090; padding:1px;" の#909090部分を
変えてみましょう。



カラーチャートはここであらゆる色が選択できます→ 4096 Color Wheel

以下のように色を変えることができます。

20160217-6.png


枠線と画像の空間を広げる

枠線と画像との間を広げることもできます。

style="border:solid 1px #909090; padding:1px;" の「padding:1px」を変えます。

10pxにしてみましょう。

20160217-7.png

画像が ↑ のように変わりました!

いかがでしたか?

画像を装飾すると、画像そのもののイメージが変わります。
オリジナルブログを人が惹きつくものへと進化させましょう!





カテゴリ:

TOPへ