2011年2月23日水曜日

Bloggerで写真の枠線を消す

ひょっとしたら誰かの役に立つかもしれないので、メモ。

Bloggerの記事の写真は、ポラロイドみたいな枠がつくが、これいらなかったので、
「デザイン>HTMl編集」で変更した。

「シンプル」テンプレートの場合、こういう箇所の、
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
一番上の行の「.post-body img,」を取ってしまえば、とりあえず記事内の写真に枠がつかない。

こんな感じ♪

#CSSが分かる人はもっと改変&「シンプル」以外の場合は、Chromeの「要素検証」か何かで画像に適用されているCSSを調べて変更すればOK

6 件のコメント:

  1. このコメントは投稿者によって削除されました。

    返信削除
  2. 悩んでいた事がやっと解決できました。ありがとうございます。もし良かったらなんですがBloggerのHTML編集で文章とサイドの広告に縦線を入れて区切る方法を掲載して頂ければ有り難いんですが。勝手な質問ばかりですみません。本当に助かりました。

    返信削除
  3. コメントありがとうございます。少しお役に立ててよかったです。

    「文章とサイドの広告に縦線を入れて……」とのことですが、右側の細いカラムの左側に線を引きたい……ということでしょうか……。

    Google Chrome(ブラウザ)を入れて、画面上で右クリックすると、「要素検証…」でHTMLの何がどこに対応しているか簡単に見ることができます。で、右カラムは、


    <div class "column-right-outer">
    <div class "column-right-inner">
    <aside>
    <div class="sidebar section" id=" ...

    ここらへんみたいです。
    なので、「column-right-outer」が指定されているdivボックスの、左側に線をつけたければ、

    .column-right-outer {
    border-left: solid 1px #DDD;

    ※{と}が全角になっています。そのままコピー不可。

    などというCSSを追加で指定すればいいのではないでしょうか?(CSSはどこか他のページで勉強されてくださいね)

    実際に試したわけではないので、上手くいくか分かりませんが。やりたいことと違っていましたらごめんなさい。

    返信削除
  4. 試してみましたが上手くいきませんでした。また、ググって調べてみようと思います。ありがとうございました(^o^)では....

    返信削除
  5. おお、そうでしたかー。お役に立てずすみません。ご健闘をおいのりします!

    返信削除
  6. 突然失礼致します。Bloggerで写真の枠を消したくて、”Blogger 写真の枠”でググったらこちらにたどり着きました。まさにドンピシャの記事でした。ありがとうございました。

    返信削除

コメントは管理者が確認した後に公開されます。
(このブログや投稿にそぐわないと思った場合は公開しておりません)