上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

※検索でいらっしゃった方へ
この記事は、私が配布しているFC2ブログテンプレート専用の記事です。ご了承ください。


画像に枠をつけるためには、二つの方法があります。

■ 方法1
一つ目の方法は、「携帯の管理画面から記事を投稿する際に絵文字を使用していない」という条件を満たしていれば、スタイルシートに次の記述を追加するだけで可能です。おそらく、殆どの方はこちらの方法で大丈夫だと思います。なお、この方法では記事中の絵文字以外のすべての画像に自動的に枠がつけられます。
.entry img{
border : 1px solid #555;
margin : 1px;
}
img.emoji {
border : none;
margin : 0;
}

携帯の管理画面から投稿する際に絵文字を使用すると、一つ目のやり方だと絵文字にも枠がついてしまうようです。(一般の管理画面からだと、img要素に「emoji」というクラスがつけられるのですが、携帯の管理画面からの投稿の場合、クラス名がついていないimg要素が生成される仕様のようです。)
携帯の管理画面からの投稿が少ない+絵文字を使う頻度が少ないのであれば、エントリーの編集から、絵文字部分のタグに「class="emoji"」というのを追加することで枠を消すことができますが、絵文字を多く使っている場合は、二つ目のやり方を試してみてください。


■ 方法2
一つ目の方法では記事中のすべての画像に枠がつけられるのに対し、二つ目のやり方では、枠をつけたい画像を選んでスタイルを適用させます。枠をつけたい画像が決まっている場合などは、こちらの方法が良いかもしれません。
この方法を使うには、次の手順を踏むことになります。
1.スタイルシートに枠をつけるための記述を追加する
2.枠をつけたい画像に対し、1で設定したスタイルを適用させる

それぞれのやり方は以下の通りです。

1.スタイルシートに枠をつけるための記述を追加する
スタイルシートに、次の記述を追加してください。
img.img-b {
border : 1px solid #555;
margin : 1px;
}

2.枠をつけたい画像に対し、1で設定したスタイルを適用させる
次に、枠をつけたい画像に対して、次のように修正を施します。
<img src="(画像のURL)" alt="(画像のタイトル)" border="0" />
↓(class="img-b"を追加)
<img src="(画像のURL)" alt="(画像のタイトル)" border="0" class="img-b" />

なお、ここでは適当なクラス名:「img-b」を設定しましたが、このクラス名は変更することも可能です。
クラス名を変更するには、1・2の編集の際に「img-b」という箇所を別のクラス名で置き換えてください。
(クラス名に日本語は使えません。良くわからない人は触らない方がいいかと。)

方法2の利点は、画像の種類に合わせて枠のデザインを選べることです。方法1と組み合わせることで、より自由度の高いデザインが可能になります。
例として、私がflickrの写真をブログに貼る際に適用させているスタイルを紹介しますね(*^-')ノ
クラス名は「flickr」としています。
.flickr {
background-color:#f5f5f5;
padding:1px;
border:1px solid #333;
margin:1px;
}
関連記事


コメント

  1. うた | mQop/nM.

    ありがとうざいました

    早いお返事ありがとうございました!
    無事うまくいきました。
    早速これからテンプレート使わせていただきます。

    ( 10:32 [Edit] )

  2. nui | B3QBS6k.

    すいません

    方法1と方法2どちらもスタイルシートに追加してた試したのですが
    どうしても画像に枠がつきません(><)助言のほどもらえたら嬉しいです。

    ( 08:25 [Edit] )

  3. rimse | 4HNZ8mMg

    Re: すいません

    ごめんなさい、返信したと思ったのですがされていなかったようです・・・!

    自分の環境では問題無くできているので、もしかするとコピー・ペーストのミス、もしくは追加する場所に問題があったのかもしれません。
    どのように編集したのかを見ることが出来れば何かしら助言ができるかと思います。非公開コメントやメールなどでもかまいませんので、お使いのブログのアドレスを、教えていただけませんでしょうか。

    ( 04:09 [Edit] )

  4. まめぞう | r882NP3M

    画像枠の色について

    使わしていただいているテンプレートがとても気に入っています。 ありがとうございます。

    ど素人の私でもほんの少し自分だけのカスタマイズを楽しませて頂いています。

    画像枠の追加を施してみましたが、枠の色を変更してみたいと思っています。solid #555;が色番号ではないかと思いますが(間違ってたらすみません)その他の色番号を教えて頂けないでしょうか?
    よろしくお願い致します。

    ( 18:37 [Edit] )

  5. rimse | 4HNZ8mMg

    Re: 画像枠の色について

    まめぞうさん、初めまして。コメントありがとうございます。

    > 画像枠の追加を施してみましたが、枠の色を変更してみたいと思っています。solid #555;が色番号ではないかと思いますが(間違ってたらすみません)その他の色番号を教えて頂けないでしょうか?

    色の指定は、「#555」の部分になっています。(「solid」の方は線の種類です)
    カラーコード(色番号)は、こちらのページで生成してみると楽だとおもいます。
    http://pega.littlestar.jp/tagunooheya/color-3.html

    検索に引っかかったやつを適当にチョイスしてみました。
    どうぞお試しくださいe-68

    ( 02:33 [Edit] )

  6. まめぞう | r882NP3M

    ありがとうございます

    回答を頂きまして誠にありがとうございます。

    早速変更して見ました。

    今後もよろしくお願い致します。

    ( 07:52 [Edit] )

コメントの投稿

(コメントの編集・削除時に必要)
(管理者にだけ表示を許可する)

質問の際のお願い

テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


トラックバック

Trackback URL
Trackbacks


Recent Entries

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。