BLOG CATEGORY

Monthly Archives

長フチコンテンツ

サイバーアクセル？何者や

サイバーアクセル？<br />何者や
サイバーアクセル？
何者や

ホームページ制作？だからどうした①

ホームページ制作？<br />だからどうした①
ホームページ制作？
だからどうした①

ホームページ制作？だからどうした②

ホームページ制作？<br />だからどうした②
ホームページ制作？
だからどうした②

SEO対策？怪しい話しか聞かないぞ

SEO対策？<span>怪しい話<br />しか聞かないぞ</span>
SEO対策？怪しい話
しか聞かないぞ

集客アドバイザー？よう分からん

集客アドバイザー？<br />よう分からん
集客アドバイザー？
よう分からん

俺なりのまとめを伝える！

俺なりのまとめを伝える！
俺なりのまとめを伝える！

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » 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へ