よく検索されるキーワード FC2ポイント パスワード 有料会員

  1. FC2ヘルプ
  2. FC2ブログ
  3. マニュアル
  4. 画像に枠をつける（基本・応用）

FC2ブログ マニュアル

画像に枠をつける（基本・応用）

現在パソコン版のマニュアルを表示中

投稿した記事中に使用する画像に枠をつけてみましょう。
本文中の画像に対してスタイルを適用するだけで枠線をつけることができます。

このマニュアルは公式テンプレートの「sample」をベースにしております。
 

画像に枠をつける - 基本

基本編として、画像を囲うような装飾の線をつけてみましょう。

5

1. スタイルシート（CSS）の編集にて「entry-body」を探しましょう。

本文を展開する独自タグを囲っている親要素は<div class="entry-body">です。
テンプレートの設定ページ内スタイルシート（CSS）編集にて「entry-body」を
指定している箇所を探してみましょう。
（Windowsの場合はCtrl+F、Macの場合はcommand+Fでページ検索が行えます）

2. 画像赤枠内の該当の箇所にスタイルを入力してください。

8

▼該当の箇所に入力するスタイル

div.entry-body img {
border : 2px solid #000; /* 枠線を黒色で太さ2pxの直線を設定 */
}

※本文中にある画像すべてに枠がつくので、必要に応じてクラス追加、セレクタ指定してください。

画像に枠をつける - 応用

応用編として、画像にポラロイド写真のような装飾の線をつけてみましょう。

6

1. スタイルシート（CSS）の編集にて「entry-body」を探しましょう。

まず、基本編と同様に、テンプレートの設定ページ内スタイルシート（CSS）編集にて
「entry-body」を指定している箇所を探してみましょう。
（Windowsの場合はCtrl+F、Macの場合はcommand+Fでページ検索が行えます）

2. 画像赤枠内の該当の箇所にスタイルを入力してください。

7

▼該当の箇所に入力するスタイル

p span img {
padding : 5px; /* 写真の余白を5pxに設定 */
background-color : #fff; /* 写真余白部分の色を白色に設定 */
border : 1px solid #000; /* 写真枠部分の色を黒色に設定 */
}

3. スタイルを適用後、記事の編集ページへアクセスしてください。

記事へ画像挿入を行うと、下記のような画像タグが自動挿入されます。
（※アルバムページへリンクしている場合は異なったアドレスとなります）

挿入される画像タグの一例：
<a href="画像のリンク先" target="_blank"><img src="画像のパス" alt="画像が表示されない場合の代替テキスト" border="0"></a>

4. 画像タグを<p><span></p></span>タグで囲ってください。

<p><span><a href="画像のリンク先" target="_blank"><img src="画像のパス" alt="画像が表示されない場合の代替テキスト" border="0"></a></p></span>

<p><span></p></span>タグで囲った画像タグのみ、
テンプレートの編集で指定した枠線を適用できます。

 

マニュアル一覧を見る »

お問い合わせ

ヘルプをご覧になっても問題が解決されない場合は、サポートへお問い合わせください。

FC2ブログに関するお問い合わせはこちら

Q&A

Q&A一覧を見る »

マニュアル

マニュアル一覧を見る »