きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(小技編)画像の枠線を消しちゃおう♪

<<   作成日時 : 2008/03/11 18:57   >>

ナイス ブログ気持玉 3 / トラックバック 0 / コメント 14

トップページの記事一覧の画像や記事の画像の枠線って邪魔な感じがして…
CSS編集で枠線を消したりデザインを変えたりすることが出来るので、
今回は画像の枠線について書いてみます。



 画像の枠線を消す♪ 


まずはトップページの画像の枠線から。
『 新着記事 』部分へ新規で次のように文字列を追加します。


 B 『 トップ、月別、テーマ別ページ 』  CSS 全体Map 

/*------------------ 新着記事 ------------------*/
#contents{
}

/*追加 新着記事画像イメージ枠線 */
#contents #postlist a img{
border: none;
}


/* 見出し */
#contents #postlist h2{
}






続いて記事ページの画像の枠線です。
『 記事本体 』部分へ新規で次のように文字列を追加します。

 C 『 記事ページ 』  CSS 全体Map 

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

/*追加 記事画像イメージ枠線 */
#blog #blog-body img{ border: none;}
#blog #blog-body a img{ border: none;}


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




※ 2010/04/25 スタイル指定ポイントの文字列を変更しました。
【変更前】
#blog-body a img.up-image{ border: none;}
【変更後】
#blog #blog-body img{ border: none;}
#blog #blog-body a img{ border: none;}







 枠線のデザインを変える♪ 

上では枠線を表示させないようにしました。
『border: none;』の部分を下のように指定をしてやれば、枠線のデザイン変わります。

(例) 『線の太さ=2px、色=青、種類=実線』 
※下はトップページの新着記事の画像の枠線。


#contents #postlist a img{
border:2px #0000FF solid;
}



記事ページも『border: none;』の部分を置き換えることでデザインの指定が出来ます。




それでは、今回はこのくらいで(わら)


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
ナイス ナイス
なるほど(納得、参考になった、ヘー)

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


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

タイトル
本 文

コメント(14件)

内 容 ニックネーム/日時
mairisさん教えて下さい(@ぺこ)
mairisさんの画像の枠線を取る方法をしてみたのですが、
新着記事は出来ましたが記事ページが出来ません・・・
どうしてでしょうか
ウェブリのよくある質問の方法もしてみたのですが
どうしても枠線が取れません
どうすればよいでしょうか
教えて下さい。よろしくお願いいたします
たむたむ
2010/04/25 00:51
たむたむさん、いらっしゃいませ(ん)

こちらの記事に不手際があったので修正してみました。
テンプレートによってはスタイル指定をする「#blog-body」の親要素(#blogの部分)まで記述されているものがありました。
親要素も含めてスタイル指定することで枠線のデザインを変更できます。
スタイル指定に関しましては記事を参考にしてみてください。

お手数をおかけしてスイマセンでした(*_ _)人ゴメンナサイ
mairis
2010/04/25 01:49
追記です。
タイトル画像をブログ管理画面から設定しておられるようですが、ブログ管理からのタイトルの指定はコンテナ領域の画像や背景色が抜け落ちたりおかしく原因です。
タイトル画像の指定はCSS編集で行うようにしてください。
こちらに原因についての考察が書いてありますので参考に。

→CSS(トラブル編) 管理ページのタイトル画像設定で表示が変になる理由
URL:http://mairis.at.webry.info/200904/article_11.html


タイトル画像を変更は下記の記事を参考に頑張ってみてください。

→CSS(スタイル編)第1回 タイトル画像を変更する♪
URL:http://mairis.at.webry.info/200802/article_4.html
mairis
2010/04/25 17:47
ありがとうございました(@ぺこ)
記事ページの画像枠線とれました
まさかブログ管理ページでの設定で、あんな風になっていたとは・・・
手直しをしましたございます。
また質問など、伺うかもしれません・・・・
その時は「どうぞ宜しくお願いいたします」
たむたむ
2010/04/25 20:32
>>たむたむさん
おつかれさまでした〜(にや)
タイトル画像の件については参考記事を見ていただいたらわかると思いますが、
一年前からこの状態なんですねぇ(気まずい)
ウェブリに問い合わせてみたんですが、ず〜っと放置されたままの不具合です。
困ったものです(しょぼ)

また何かありましたらお気軽にお寄りくださいませ(ん)
ではでは〜♪
mairis
2010/04/26 01:18
他の方の方法を見ながら試しても消えなかったんですが、
や〜っと消すことができました!
パソコン苦手なのでわかりやすい説明で助かります(@ぐっど)(@ぐっど)(@ぐっど)
ありがとうございました(@にや)
しろ
2011/12/09 16:00
しろさん、いらっしゃいませ(にこ)
思い通りに出来たようでなによりです♪
ウェブリの枠線はうちも悩まされましたし(ひょえ))
mairis
2011/12/10 08:47
mairisさん早速ありがとうございます。
ご指示を頂いたようにCSSを変更したのですが記事ページの枠線は消す事ができないでいます。
ウェブリにも問い合わせをしたのですが何も回答が無いです。
やはり気になっていますがどうしようもないのですね。
hanasaku
2012/01/10 15:56
hanasakuさん、いらっしゃいませ(にこ)
わざわざこちらまでご足労いただきまして┌◯ ペコッ
先ほどhanasakuさんのブログを確認させてもらいましたら、
枠線は消えているようで大丈夫っぽいです(*・ω・)b

ウェブリは不具合等であれば最低限対応してくれますけど、この手の問い合わせには回答していただけません〜(気まずい)
mairis
2012/01/10 18:58
mairisさんこんばんは
ありがとうございました。
先ほど確認しましたら枠線が消えていました。
タイムラグがあるのでしょうか。
ほっとしました。
ありがとうございます。
hanasaku
2012/01/10 20:40
hanasakuさん、おつかれさまでしたヾ(@⌒ー⌒@)ノ
>タイムラグ
おそらくブラウザにキャッシュが残っていてCSS編集を設定する前の画面が表示されていたのかもしれませんね。
CSS設定後にデザインが変わらない時は、F5キーやブラウザの更新ボタンでページの更新をしてみてください。
とにもかくにも思い通りになったようで何よりでした♪
mairis
2012/01/11 01:06
mairis さん
(ღ◕ܫ◕)こんばんは^^

色々調べて、CSS設定しましたが
どうしても画像の枠線が消せません。
この前までは、出なかったのにまた出るようになってしまい
困っています。
お暇があるときにでも、見ていただけたらありがたいです。
ひろひろ(#^.^#)
2012/05/25 20:52
mairisさん、
☆ヽ(▽⌒*)こんにちわ☆・:*:・♪・〜

今日見てみたら、ブログの枠線消えていました。
ホッとしました。
ありがとうございます。
ひろひろ(#^.^#)
2012/05/26 15:30
ひろひろ(#^.^#) さん、いらっしゃいませ(ん)
コメント遅くなりごめんなさいでした(o*。_。)oペコッ
枠線がおかしくなってたのも解決されたみたいで何よりでした。
mairis
2012/06/03 13:37

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(小技編)画像の枠線を消しちゃおう♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる