『Seesaa』ブログで記事の中の画像に枠を付ける方法について: パソコン・FXなどに関する日記

« Prev 『ランチャー 5LED 花柄ボディ』を単４形電池１本で点灯できるように改造してみた | TOP | 『ダイソー』で買った『ツールボックスレッド』と『救急箱グリーン』 Next »

Friday 2013/09/06 02:30

『Seesaa』ブログで記事の中の画像に枠を付ける方法について

『Seesaa』ブログの記事の中の画像に枠を付ける方法です。

枠を付けることで例えば写真のフレームのように表示させる事ができます

以下に例として実際に枠をつけてサンプル画像を表示させてみました。

この４種類の表示例について、具体的なコードを以下に書いて簡単に説明します。

まず、画像ファイルをアップロードして記事の編集画面で貼り付けると、以下のようなコードになっています。

<a href="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01.JPG" target="_blank"><img src="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01-thumbnail2.JPG" alt="2018_09-06_Sample_Image_01.JPG" border="0" height="135" width="180"></a>

以下、４つの表示例のコードそれぞれにおいて赤色の箇所が追加しているコードの部分です。

【例１】太さ５ピクセルの白い枠を表示（左上の画像）

<a href="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01.JPG" target="_blank"><img src="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01-thumbnail2.JPG" alt="2018_09-06_Sample_Image_01.JPG" border="0" height="135" width="180" style="border:5px solid white"></a>

　 style="border:5px solid white"

【例２】太さ１ピクセルの黒い枠と、その内側に４ピクセルの余白を表示（右上の画像）

<a href="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01.JPG" target="_blank"><img src="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01-thumbnail2.JPG" alt="2018_09-06_Sample_Image_01.JPG" border="0" height="135" width="180" style="border:1px solid black; padding:4px"></a>

　 style="border:1px solid black; padding:4px"

【例３】太さ５ピクセルの黒い枠を表示（左下の画像）

<a href="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01.JPG" target="_blank"><img src="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01-thumbnail2.JPG" alt="2018_09-06_Sample_Image_01.JPG" border="0" height="135" width="180" style="border:5px solid black"></a>

　 style="border:5px solid black"

【例４】太さ１ピクセルの赤い破線の枠と、その内側に４ピクセルの余白を表示（右下の画像）

<a href="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01.JPG" target="_blank"><img src="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01-thumbnail2.JPG" alt="2018_09-06_Sample_Image_01.JPG" border="0" height="135" width="180" style="border:1px dashed red; padding:4px"></a>

　 style="border:1px dashed red; padding:4px"

以上、ボーダーのスタイルを指定しているだけなのですが、簡単に説明すると"5px"や"1px"が線の太さ（ピクセル）で、"solid" は１本線／"dashed"は破線、"black"／"white"／"red"は色です。

"padding:4px" というのは４ピクセル分の余白です。

ボーダースタイルに指定できる値は、以下のページなどが参考になると思います。

border-style－スタイルシートリファレンス:
http://www.htmq.com/style/border-style.shtml

．．．

前記の例では、（インラインで）いちいちスタイルを指定していましたが、デフォルトで記事の中の画像に例えば太さ５ピクセルの白い枠を表示させるようにすることもできます。

その場合は、例としてスタイルシートの一番下に以下のような記述を追加します。

.text img{
    border:5px solid white;
}

ちなみに『Seesaa』ブログでのスタイルシートの編集手順については、以下の記事の中で書いています。

※ 参考記事：2013年09月03日
『Seesaa』ブログでCSS（スタイルシート）やHTMLを編集する際の手順
１．CSS（スタイルシート）の編集

参考までに、以下のようにすれば影をつけることもできます。

.text img{
    border:5px solid white;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.10);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.10);
}

ここで、box-shadow, -moz-box-shadow, -webkit-box-shadow のように３種類指定しているのは、IE（インターネットエクスプローラー）やFirefoxなどのブラウザ毎に指定する名前が異なるからです。

影の濃さなどは、指定しているパラメータを変更すれば自由に変更できます。

ただし、古いバージョンのブラウザ（IE 8.0 など）ではこの指定に対応していないため、影を表示することはできません。

この box-shadow で指定している値については、以下のページなどが参考になると思います。

box-shadow－CSS3リファレンス:
http://www.htmq.com/css3/box-shadow.shtml

．．．

デフォルトで影が表示されるようにスタイルシートを設定した場合に、もしも特定の画像だけ影を表示したくないというようなときには、記事の中に貼り付けるコードを以下のようにすれば、（インラインで指定したスタイルの方が優先されるため）その画像に影は表示されなくなります。

<a href="https://kingpctest.up.seesaa.net/image/2018_09-06_Sample_Image_01.JPG" target="_blank"><img src="https://kingpctest.up.seesaa.net/image/2018_09-06_Sample_Image_01-thumbnail2.JPG" alt="2018_09-06_Sample_Image_01.JPG" border="0" height="135" width="180" style="box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none"></a>

　 style="box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none"

以上です。

【追記】2013-09-07 00:10

「スタイルシートで定義したクラス」を使う方法についても（書こうと思っていたのに）書くのを忘れていたので追記です。

例えばスタイルシートの最後に以下を追加します。

.text .image-photo img{
    border:5px solid white;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.10);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.10);
}

そして、試しに記事の編集画面では以下のように同じ画像を２つ貼り付け、２つ目の先頭に『<div class="image-photo">』，最後に『</div>』を付加します。

<a href="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01.JPG" target="_blank"><img src="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01-thumbnail2.JPG" alt="2018_09-06_Sample_Image_01.JPG" border="0" height="135" width="180"></a>

<div class="image-photo"><a href="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01.JPG" target="_blank"><img src="https://kingpcfx.up.seesaa.net/image/2018_09-06_Sample_Image_01-thumbnail2.JPG" alt="2018_09-06_Sample_Image_01.JPG" border="0" height="135" width="180"></a></div>

こうすると、以下のように表示されます。（PCでこのページを見ると、２つ目の画像には白い枠が表示されていると思います。）

もしかしたら見ている端末によっては自分のイメージどおりに表示されていないかもしれないので、以下は上に表示されている状態をキャプチャした画像です。

ちなみに、複数の画像をまとめて『<div class="image-photo">』と『</div>』で囲む事もできます。そうすれば、囲んだ中の画像には全て白い枠が表示されます。

更に追記です。『Seesaa』ブログにはスマホ用のスタイルシートがあるので、スマホでも同様に枠を表示させたい場合、スマホ用のスタイルシートの方にも追加する必要があります。