画像を罫線で飾る / カスタマイズ

ブログが作りたい!FC2ブログのカスタマイズ > 画像を罫線で飾る / カスタマイズ

画像を罫線で飾る / カスタマイズ

画像を罫線で飾む / カスタマイズ

カスタマイズ(4)

今回は、画像を罫線で囲んで、縁取り装飾をしてみようと思います。画像によっては、クッキリして良い感じになる場合があるんだなぁ。

お話は、次の順番で進みます。

▲ページの先頭に戻る

画像を罫線(border)で囲む

1:テンプレート「alice」

(01)

今回は、テンプレート「alice」を使ってみます。「共有テンプレート追加」からダウンロードして、適用してください。

前回使ったテンプレート「air」はもともと画像回りに罫線の指定がされているので、つまらないのよね。

▲ページの先頭に戻る

2:CSSの該当する記述を探す

(02)

画像をアップして、「サムネイルで記事を書く」をクリックすると、次のように表示されます。

もちろん、これで良ければ、このままで構わないわけですが、それでは話が終わってしまうので、「罫線で囲いたい」ものとして話を進めます。

画像(罫線なし)

さて、どうすれば良いか、分かるでしょうか?

えぇ、そうです。記事「罫線を描く【border】:CSS入門」で説明しましたから、指定方法はご存知のはずです。

(03)

それでは、テンプレート「alice」の CSSを、見てみることにしましょう。

検索機能を使いたいので、CSSコードをコピーして、テキストエディタを起ち上げて、貼り付けてください。

CSSコードを、どこからコピーしてくるかと言うと、場所は、「環境設定」の「テンプレートの設定」です。

(04)

そして、CSSコードを検索します。

現状どのような指定がされているか確認する意味でも、「img」というキーワードで検索してみましょう。

テキストエディタで検索

(05)

ひとつだけ、ヒットしました。罫線なし(none)が設定されています。

ちなみに、この「a img」は、<a>タグ付きの<img>タグという意味になります。考え方は、子孫セレクタと一緒です。

▲ページの先頭に戻る

3:罫線(border)を指定する

(06)

それでは、分かり良いように、赤色の太い罫線を指定してみることにしましょう。

(07)

ブラウザで表示してみると、画像が赤色の太い罫線で囲まれています。

画像(罫線あり)

また、記事内だけでなく、左側サイドの画像(By FC2ブログ)も、赤色の太い罫線で囲まれていることが確認できます。

記事エリア外も指定対象になる

つまり、ブログ全体の中で、リンクタグの付いている画像へ、指定が行き渡っているわけです。

ちなみに、すべての画像に指定したいのであれば、次のようにします。

▲ページの先頭に戻る

記事内の画像だけに、罫線(border)を指定する

1:HTMLの記述場所を特定する

(01)

「a img」の「border」に数値を指定してあげたら、ブログ全体のリンク付き画像に、罫線を引くことが出来ました。

しかし、記事内だけの画像に指定したい場合もあると思います。そのような場合は、どうすれば良いのでしょうか?

(02)

まず、記事「カスタマイズの基礎テクニック」で書いたように、「カスタマイズしたい箇所が、HTML文のどこにあるのか?」を、特定する必要があります。

つまり、「記事内」がどこなのかを、HTML文の中で特定するわけです。例えば、次のようなものを目印にして探してみてください。

  • 画像のファイル名(~.jpg、~.gif)
  • 記事タイトル(「テスト01」)
  • 画像にalt属性を付けてあれば、alt属性の内容

などなど。

(03)

どうやら、この辺かな?というところが見付かったかしら?次のコードの<div>タグで囲まれている箇所が「記事」を表示しているようです。

記事内だけに適用したいわけですから、クラス名「entry-body」、あるいは「aabody」を使って指定してあげれば良さそうです。

ちょっと話が見えないかもしれませんが、ひと通り読んでみてください。

▲ページの先頭に戻る

2:CSSの記述場所を探す

(04)

この「entry-body」、あるいは「aabody」をキーワードにして、CSSコードを眺めてみましょう。(検索する)

次のようなコードが見付かりました。

▲ページの先頭に戻る

3:CSSの指定

(05)

どちらでも、特に変わらないと思うので、直近の「aabody」を使って、記事内だけに適用する指定を記述してみます。

次のような指定で、いかがでしょうか。

分かるかしら?

ブログ全体としては、罫線を付けない(none)けれど、記事内(aabody)の<a>タグ付きの<img>タグにだけは、罫線を設定するわけです。

(06)

ブラウザで表示してみましょう。記事内の画像には、罫線が付いています。

しかし、左サイドの画像(By FC2ブログ)は、先程まであった罫線がなくなっているはずです。指定が、記事内にだけ適用できたわけです。

罫線がなくなる

子孫セレクタ」と「classセレクタ」の応用です。難しく感じるかもしれませんが、単に「a img」の先頭に、「.aabody」を付けただけのことです。

うまいこと理解できなかった人は、過去の記事を読み返してみてください。

(07)

また、リンク(<a>タグ)がついていない画像にも適用したければ、次のようにします。

▲ページの先頭に戻る

罫線のサンプル

分かり良いように、赤色の太い罫線にしていましたが、色や太さによっては、また雰囲気が変わります。

オサレーな縁取りになるよういろいろ試してみてはいかがでしょうか。

1:きっちり罫線

太さ 1px、実線、黒色(#000)です。シンプルですね。

罫線:太さ 1px、実線、黒色

▲ページの先頭に戻る

2:かわいい感じ

太さ 8px、実線、ピンク(#ffc0cb)です。背景が白色であれば、もっと映(は)えそうです。

罫線:太さ 8px、実線、ピンク(#ffc0cb)

▲ページの先頭に戻る

3:昔の写真風

太さ 1px、実線、黒色(#000)、さらにpaddingと背景色を付けてみました。

罫線:太さ 1px、実線、黒色(#000)、さらにpaddingと背景色

▲ページの先頭に戻る

4:点線

太さ 2px、点線、赤色(#f00)、さらにpaddingと背景色。

罫線:太さ 2px、点線、赤色(#f00)、さらにpaddingと背景色。

▲ページの先頭に戻る

次回予告

次回は、リンクの色を変更するカスタマイズなどを予定しています。(追記:失礼しました、既にリンクの色は書いていましたね。次回は、文字サイズの変更について書きます)

おまけで、無料写真素材をアップしていたりもします。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/05/25 更新日:2008/05/25

« 「文字色の変更 / カスタマイズ」|「文字サイズの変更 / カスタマイズ」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

こんにちは

こんにちは!
さっきもお邪魔してたんですが、すごい雷でパソコンの電源切ってガクブルしてました。
パソコン壊れたらシャレにならねえ


画像に罫線つけると、お洒落になりますよねー
自分は1pxの黒い線のが好きかな・・・
画像にもよるけども。


子孫セレクタと継承セレクタ、よくわかっとらんのですが、
なんか毎回使ってる気がします。
あれは便利ですよね。コードすっきりする。


あわー
ちゃんと中身理解せんとなあ。


写真みました。木の写真、光きれいですね^^
ああいう光は、とれたりとれなかったりですよね。いいな。

雷おやじ

ひろこさん、こんにちは!
コメントありがとうございます。

こちらは、雷はありませんでしたが、
一時的にすごい大雨になりました。

こわいよね、雷。
パソコンが行ってもうたら、ボクの涙で、湖ができちゃうな。

そして、やがて川ができて海になるんだ。(・∀・)

うん。罫線入れると、締まるよね。
わざと背景に溶け込ませるのもいいけど、
たいがいは、罫線を入れると良くなるような気が致します。

継承・子孫は、IEによって混乱したなぁ。
IEのバグによって継承されないとかあるわけで、
理解を妨げてくれるんだよね、ほんと。

あ、そだ。
class=""の中に複数のクラス名を書いて良いっての
いつ頃知りました?

私、けっこう長いこと知らなくて、
無駄なコード書きまくっていましたよ。(´Д`;)

そのうち本編で書かなきゃ。

拙い写真をご覧いただいてありがとうございます。
ちょっと、露出補正の数値が高かったみたいで、
光が多かったですね。

もうちょっと、緑をグリグリ出したかったッス。

ピントもあっていなかったりするんだろうなぁ。
なかなか成長しないですなぁ。(´・ェ・)

複数指定

こんにちは!
クラスに複数の指定、自分も実は最近知りました。
ここをちょっとこうしたいだけなのに、また指定書かなくちゃいけない
こんな世の中じゃポイズンってなって、
調べてみたら方法を見つけました。
かなり便利なので、知らなかったのはショックでした。


子孫セレクタも、最近使い始めて便利さを実感してるのですが、
前は知らなかったから、当時のコードは無駄が多そう。


露出補正とか、すごいですねー!
自分はまったくわからんorz
そういうのを使って、意図した写真を撮ってみたいなあ。


そっちも大雨でしたか。
雷怖いですよね!

そういえば、前、降っている雨粒を写真に撮りたくて
大雨の中カメラもって外に飛び出した事があるんですが
今思えばかなりリスキーな事してたなー。


>パソコンが行ってもうたら、ボクの涙で、湖ができちゃうな。
後のkuma湖である。

うっそーん

ひろこさん、こんばんは。
コメントありがとうございます。

ポイズンて・・・あーた。((*´∀`))ケラケラ

もう昔は本当にひどかったよ。
idとclassの違いもまったく分かっていなかったし、
複数書けないから(そう思っていたから)、
代わりにid使うとか、divでさらに包むとか、
訳の分からないことしていました。(〃▽〃)はずかち

雷が怖いというより、
パソコンが残念なことになるのが怖いッス。

雨とか、雪とか、やっぱしリスキーなんでしょうね。
たまにメンテナンスもしなきゃいけないんだろうなぁ。

くまこって・・・あーた。(´Д`;)ひー

画像の枠について・・・

いつもブログ作成の為に拝見させて頂き、勉強になっています。今回は、記事の画像に枠(昔の写真風)をつける事が出来ました。

FC2ブログの作成です。
しかし、トップの新記事の欄だけなのですが、広告後、一番左下あたり、何もない所に5ミリ程の正方形□が表示されちゃうのです!?(何だろう~?)

そこにマウスをあてるとクリックは出来ないのですが【FC2Management】て表示されます。そんなに気にはならないのですが・・・でも、気になります。。

消す事って出来るのでしょうか?

まだブログ作成して一カ月程度の初心者です。

テンプレート名

メイリンさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

うーん、何でしょうねー。(´Д`;)

言葉からすると管理者ページへのリンクっぽいですけれども、
リンクされていないという不思議。

おそらくテンプレートにそういう記述があるんだと思いますが、
どうでしょうね。(;´Д`)

テンプレート名を教えていただけると、
チェックすることで何か分かるかもしれません。

良かったら、お手数ですが、テンプレート名を記入の上で、
改めてコメントしてくださいませ。よろしくお願いします。

画像の枠・・・

対応ありがとうございます。

テンプレート名: pneko_puchi3c_usa です。

画像に枠を付けると、必ず、左下の何もない所に□が付きます。テンプレートによって、付くものと付かないものがありました。

大変にお手数をおかけ致します。。。

原因はGoogleさんの広告でした

メイリンさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

pneko_puchi3c_usa拝見いたしました。

試してみたところ、原因はGoogleさんの広告でした。
お手間をおかけしてしまい、ごめんなさい。(´・(ェ)・`)

なぜ、□が表示されるかと申しますと、
Googleさんの広告の最後で画像を使っているためです。

どうやら、その画像にも枠がついちゃったんですね。

それで、どうしたら良いかと考えたんですが、
おそらく打ち消すCSSの指定をいれるしかないのかなと。

CSSにて「記事の画像に枠(昔の写真風)」を指定した
その後に、次のような、記述を追加してみてください。


#googleAdContainerNoActive img,
#googleAdContainer img {
border: 0;
}


これによって、□を打ち消すことができるはずです。
お試しください。

うまくいかない場合は、お手数ですが、
改めてコメントしてくださいませ。よろしくお願いします。

画像の枠について・・・

アドバイスありがとうございます。

CSSにて↓このように張り付けたのですが、、
□は以前のままで消えませんでした!

/* 画像の装飾 */
.EntryBlock

img {
border: 1px solid #a9a9a9; /* 画像の枠 */
padding: 5px;
background-color: #fff;
}

#googleAdContainerNoActive img,
#googleAdContainer img {
border: 0;
}

やはり・・・困難なのでしょうか。
それとも自分の張り付け方が間違っている?のかもしれません・・・。

ブログのデザインに差し支えはほとんどないので、、
大丈夫だと思います・・・。

なぜ、なぜ、なーぜ、どうしてなの?

メイリンさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

えー!なぜだろう???(´Д`;)

試しに、テンプレートpneko_puchi3c_usaに、
メイリンさんのお書きになったコードを、

そのままコピー&貼り付けで試してみましたが、
□、消えました。

もちろん他の記事内の画像には、枠線が表示されます。
OK牧場のはずなんですけどねー、なぜかしらん。


テンプレートは、すでにけっこういじったのでしょうか。
何か違いがあるのかなー。

どうにも気になるようでしたら、
テンプレート(CSS)をメールで送っていただけると、

こちらでも試せるので、何か分かるかもしれません。
お手間さまですが、良かったら。

感謝いたします!

CumaCrowさん、大変に初心者でも分かりやすい丁寧なアドバイスをありがとうございます。とても親切な対応に感謝いたします。□の表示に関しては、少し様子をみてみる事にしますね。

ブログを立ち上げて、まだまだ約一カ月半の超初心者ですが、ブログを立ち上げる前から、こちらのサイトを拝見させて頂いておりました。
こちらのサイトでたくさん勉強になり学べる事が出来ました。FC2ブログのマニュアルよりも分かりやすく、とても助かりました。

お陰さまで、Myグログは只今カテゴリーランキング上位の位置になりました。これからも頑張って作成していきたいと思っています(=^・^=)

迷宮と書いてラビリンス

メイリンさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

むむぅ、迷宮入りですなぁ。

しかし、同じテンプレートを使って違う表示がされるなんて、
ほんと不思議ですよねー。


カテゴリーランキング上位とは、すごいですね。
それもはじめてまだ約一カ月半だなんて!

天才じゃなかろうかね。


何か気付いたことがあれば、メールいたします。
無念でござる。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/306-3c33c76b
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて