Bloggerで写真の枠線を消す
ひょっとしたら誰かの役に立つかもしれないので、メモ。
Bloggerの記事の写真は、ポラロイドみたいな枠がつくが、これいらなかったので、
「デザイン＞HTMｌ編集」で変更した。
「シンプル」テンプレートの場合、こういう箇所の、
こんな感じ♪
#CSSが分かる人はもっと改変＆「シンプル」以外の場合は、Chromeの「要素検証」か何かで画像に適用されているCSSを調べて変更すればOK
Bloggerの記事の写真は、ポラロイドみたいな枠がつくが、これいらなかったので、
「デザイン＞HTMｌ編集」で変更した。
「シンプル」テンプレートの場合、こういう箇所の、
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,一番上の行の「.post-body 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);
}
こんな感じ♪
#CSSが分かる人はもっと改変＆「シンプル」以外の場合は、Chromeの「要素検証」か何かで画像に適用されているCSSを調べて変更すればOK
このコメントは投稿者によって削除されました。
返信削除悩んでいた事がやっと解決できました。ありがとうございます。もし良かったらなんですがBloggerのHTML編集で文章とサイドの広告に縦線を入れて区切る方法を掲載して頂ければ有り難いんですが。勝手な質問ばかりですみません。本当に助かりました。
返信削除コメントありがとうございます。少しお役に立ててよかったです。
返信削除「文章とサイドの広告に縦線を入れて……」とのことですが、右側の細いカラムの左側に線を引きたい……ということでしょうか……。
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はどこか他のページで勉強されてくださいね）
実際に試したわけではないので、上手くいくか分かりませんが。やりたいことと違っていましたらごめんなさい。
試してみましたが上手くいきませんでした。また、ググって調べてみようと思います。ありがとうございました(^o^)では....
返信削除おお、そうでしたかー。お役に立てずすみません。ご健闘をおいのりします！
返信削除突然失礼致します。Bloggerで写真の枠を消したくて、”Blogger 写真の枠”でググったらこちらにたどり着きました。まさにドンピシャの記事でした。ありがとうございました。
返信削除