Blogger の画像に勝手につく枠と影を消す

ミネソタに引越してきてこのブログを書き始めてから、約３年が経過しました！
日本の友人たちや同僚たちにすすめられ、ついその気になって書き始めたブログ。

三日坊主になってしまうかも・・・と思いながらのスタートでしたのに、

　　　なぜか、まだ続いています！ +｡:.ﾟヽ(*´∀`)ﾉﾟ.:｡+

日記代わりのつもりでしたが、何だかいろんな方向に向かい始めてしまいました。
自分自身でも、どこに行こうとしているのかよくわかりません・・・


私が使っている無料ブログサービスは、日本ではマイナーらしい Blogger です。
多くの芸能人や有名人も使っているアメブロなど、日本のメジャーなブログサービスに背を向けたのは、へそ曲がりなところがあるから。 うふふ・・・

Blogger は泣く子も黙る （？） Google が提供しているサービスなのに、人気がいまいちなのはなぜかしら。
ポータルサイトもないし、トラックバック Ping を送受信する機能もないからかな？

邪魔な広告などが一切入らず、結構使いやすくて私は気に入っているのにな～

Blogger 万歳！！

実は１週間ほど前に、ブログの大工事に着手してしまいました。
一番最初の記事から全部目を通し、歩んできた日々をふり返って感慨に浸りながら、色々と手直し。

まずは、投稿したほとんどの画像のサイズを、中から 大 に変更しました。
写真の腕は大したことないと自覚していますので控え目に載せていましたが、ちょっと遠慮しずぎていたかも？

撮影上手な他のブロガーさんたちのように、画面いっぱいに載せられるようになるとよいのですが。。。
カメラも憧れの一眼レフではありませんし、まだちょっぴり弱気です。


投稿画像のサイズを今までより大きくしたら、気になり始めたことがひとつ。
Blogger ではおせっかいにも初期設定になっているらしい、画像に勝手につく枠と影です。

たとえば、前回のブログ記事の画像は、このように・・・

この枠 （ボーダー） と影 （シャドウ） 、おしゃれと言えばおしゃれ？
でも、ビミョーに邪魔かも・・・消す方法があるのなら、消してしまいたくなりました。

ググってみつけた方法は、テンプレートの HTML をいじるものなので、試すのが少し不安でした。
失敗した時のために、一応ソースコードをコピペして保存した上で、いよいよ作業開始。

やってみたら意外と簡単でしたので、ご紹介しますね。
えっ？皆さんとっくに知ってた？？ もしかしたら今頃気付いた私が、すごく時代遅れなのかもしれません。。。

Blogger  を使っていらっしゃる方にしか関係ない記事ですが、私のブログの舞台裏もお見せしちゃいます♪
HTML や CSS については全くの素人ですので、トンチンカンな表記をしている箇所があればお許しください。


参考にさせていただいたのは、 LIFE GOES TO A PARTY というサイトの、以下のページです。
  ありがとうございました！

　⇒　Bloggerブログ投稿画像のボーダーとシャドウを消すスタイルシート変更方法


１．ブログ管理画面から 「テンプレート」 を選び、画面が変わったら、 「HTML の編集」 をクリック。

２．「書式テンプレート」 をクリック。
　　行番号が途中すっ飛ばされていますが、気にしなくて大丈夫。

３．表示されたコードの中から、画像のボーダーとシャドーに関するスタイルシート CSS のコマンドを探します。
　　Windows ユーザーは、 「CTRL」 ＋ 「F」 キー、 Mac ユーザーは、 「command」 ＋ 「F」 キーで検索。
　　　
　　　　＊ググる時にお目当ての語を素早くみつけるためにも、超便利なショートカットキーです。
　　　　　　ご存知なかった方はぜひ試してみて！

　　画面右上に検索窓が出てくるので、ここに ".post-body img" と入力。

４．私が現在使用しているテンプレートの場合、317行目と326行目にそれがあるのがわかります。
　　ご使用のテンプレートによって場所が違うと思います。
　　赤枠の部分に注目！

.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, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

５．赤枠の部分のコードを削除し、以下のように変更します。
　　（２番目のオレンジ色の枠内のコードに変更。 このままコピペできます。）

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: ffffff;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: 0px;
}

　　そして 「テンプレートを保存」 をクリックしてから、ブログを表示してみましょう。
　　画像の枠と影は消えているはずです。

　　（スマホで読んでくださっている方にとっては、変化なしだと思いますが・・・）

やったね～！ 写真の枠と影が消えた！！ 贅肉が落ちてすっきりしたような感じ・・・
また後で気が変わって、元に戻したくなる日が来るかもしれませんが。


その他、ブログの 「タグ」 の部分も大幅に変更し、カテゴリー別に分けました。
それについては、また後日アップしますね♪


ランキングに参加中です。
更新の励みになりますので、クリックで応援よろしくね♪

にほんブログ村