た け の こ 生 活

アクセスカウンタ

zoom RSS 【占4/10】 CSS編集・画像枠の消し方

<<   作成日時 : 2005/04/10 13:55   >>

驚いた ブログ気持玉 1 / トラックバック 5 / コメント 8

今回から基本的なCSS編集の注意点は記述せず(例えば「編集した後“更新”ボタンを押す」など)、CSSの内容だけを説明していきます。

画像枠というのは、画像を挿入したときにテンプレートによっては表示される、画像の周りの線のことと思ってください。私のトップテンプレートは“Don't Disturb”なのですが、これは枠線が赤で、アルバムのサムネイルに赤枠の線が表示されてしまうのです。サムネイルの写真によっては色調とあわなくて見苦しいので、この線を消すことにしました。

画像枠は記事ページの画像にも入ることがあります。タロットテンプレートにはかなり太い白枠が入るようです。こちらはトップページとは編集の場所が違います。そして設定すれば、どのテンプレートを使っても枠は表示されなくなります。

今回は、
1. トップページのアルバムのサムネイル
2. 記事ページのアップロード画像
3. 記事ページのリンク画像(imgタグを使ってURLでリンク表示させているもの)
を、それぞれ見ていきましょう。




トップページのアルバムのサムネイル

CSS編集画面の上1/3くらいのところで、次のような箇所を探してください。

/*-------------- コンポーネント群 --------------*/
#utilities{
}

(途中数行中略)

/* ●アルバム */

/* サムネイル画像 */
#utilities #albums a img{
}

この「サムネイル画像」設定の箇所に次のように追加をします。

/* サムネイル画像 */
#utilities #albums a img{
border: 0px;
}


border(枠線)は0ピクセル(つまりナシ)であると、あえて指定しておくのです。(borderの後ろはコロン、行の終わりはセミコロンです)
後は同じ設定を必要な画像のところに、追加すればいいわけです。




記事ページのアップロード画像
 
今度はCSS編集画面の下1/3くらいのところにある、記事ページ設定箇所を探します。

/*------------------ 記事本体 ------------------*/
#blog-body{
}

/* アップロード画像 */
#blog-body a img#upload-image{
}

この部分に先程と同じように、0ピクセルの枠線の指定を追加します。

/* アップロード画像 */
#blog-body a img#upload-image{
border: 0px;
}

これで記事を投稿するときに、投稿画面でアップロードして、記事の右上に表示される画像の枠線を消すことができます。ただしこの指定では、リンクして表示する画像(自分のウェブスペースからURLでリンク表示させている画像や、Biddersの商品画像など)の枠線は、消すことができません。



2005/12/1追記:
ウェブリブログの機能強化に伴い、アップロード画像の指定が変更になっています。新しい設定は、こちら の記事をご覧ください。新しい設定をしても、リンクして表示させる画像には以下↓の設定が必要になります。





記事ページのリンク画像

記事ページに表示されるすべての画像の枠線を消したいなら、「アップロードの画像」と指定してしまっている箇所、CSSの「#upload-image」の部分を削除します。中カッコ「{」を消さないように注意。

/* アップロード画像 */
#blog-body a img{
border: 0px;
}

このように変更すると、アップロード画像だけではなく、記事ページのすべての画像枠を消すことができます。ついでに「/* アップロード画像 */」は「/* 画像 */」などに変更しておいた方がいいかも。

前にもお話したように、CSSを少しずつ変更していくと、ひとつ前のものに戻すのが大変です。今回も変更を始める前に、まず変更前のものをコピーして、テキストエディタに貼り付けた後保存しておかれることをおすすめします。

* トップページ・新着記事画像の枠線の消し方は こちら です。




今日の占いは「隠者」の逆でした。「考えすぎ」
最近同じカードしか出なくなったみたい?
(追記:タロットテンプレートは読みにくので変更しています)

銀出てますしぃ〜!  \(^o^)/






↑ 今回のコラボ記事は、ブログ人の画像ポップアップウィンドウについて投稿しました。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 1
驚いた

トラックバック(5件)

タイトル (本文) ブログ名/日時
早速初歩のCSS編集を
CSS編集でカスタマイズするのに、まずは今利用しているBiglobeのウェブリブログの中で情報発信してくれているブログを探す事にしました。 ...続きを見る
「こたろう」の”耳毛”
2005/06/30 09:49
背景に画像を表示してみました
CSS編集とやらをいじって、背景に画像を表示してみました。 苦節2日。何とかうまくいったわ。( ̄Д ̄;; ...続きを見る
cafe とちおとめ
2005/09/09 13:20
画像枠の消し方・色の変え方
アクセスレポートを見たら、「背景画像」で検索してくるお客さんが多いんです。 以前、背景画像を設定してCSS編集とやらをいじったときに記事にしたのね。 ...続きを見る
cafe とちおとめ
2005/10/19 15:10
新・トップページ、記事内の画像枠の消し方
ウェブリブログの画像機能強化によって、トップページ新着記事画像や記事内の画像のCLASS(HTMLで定義されている名前)に変更があったようです。今までの設定では、画像枠が再び表示される場合がありますので、新しい設定をご紹介します。 ...続きを見る
た け の こ 生 活
2005/12/01 23:45
画像の緑の枠
さっきweb拍手のボタンをページ内につけてみたら、 サイドに設置したのは大丈夫なのに、 ページ内だと緑の枠が出てカッコワルイことに・・・。{%がっかり(orZ)webry%} ...続きを見る
姫の休日
2008/08/17 14:46

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(8件)

内 容 ニックネーム/日時
アッ! とっても役に立つ情報有難うごさいます。
私は今のところ全ての記事に画像を添付しているので、時々画像の外側の縁の
白枠が気になっていました。
早速、今回の情報を利用させて頂きます。
クロ〜画像工房
2005/04/11 08:38
喜んでいただけてうれしいです〜。(^o^)/
私はリンク画像まではいいかと思っていたのですが、タロットテンプレートにしたときにあまりに太い枠が入るので、こちらも消すことにしました。
たけのこ
2005/04/11 12:24
borderのカラーを、これから変えてみます。
参考に成りました。
tomityann
2005/04/21 21:00
お、反対に枠を入れて見られたんですね。
私的には、こんな風に簡単なところのカスタマイズが楽しいと思います。
たけのこ
2005/04/21 22:05
はじめまして。こんにちは。
ウェブリブログ事務局にも載ってない小技、どうもありがとうございます。参考になりました。

でも、何回やってもうまくいかないんです。
CSS素人なので、たぶんどっか間違ってるんでしょうね。またチャレンジしてみます。
三冬
2005/09/09 13:05
コメント&TBありがとうございます。(^o^)/
もしかして新着記事部分のことでしょうか?
トップページの記述は別の部分になります〜。また投稿させていただきます。m(_ _)m
たけのこ
2005/09/11 00:31
gifの画像も枠線消せますか?
なおたん
2006/12/26 18:05
コメントありがとうございます。

お尋ねの件ですが、画像形式に限らず、消せると思います。
たけのこ
2006/12/26 21:17

コメントする help

ニックネーム
本 文
【占4/10】 CSS編集・画像枠の消し方 た け の こ 生 活/BIGLOBEウェブリブログ
文字サイズ:       閉じる