2014/10/19

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

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

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

   なぜか、まだ続いています! +。:.゚ヽ(*´∀`)ノ゚.:。+

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


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

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

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

Blogger 万歳!!

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

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

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


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

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


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

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

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

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


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

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


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



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



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

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



4.私が現在使用しているテンプレートの場合、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);
}

5.赤枠の部分のコードを削除し、以下のように変更します。
  (2番目のオレンジ色の枠内のコードに変更。 このままコピペできます。)

.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;
}

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

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


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


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


ランキングに参加中です。
更新の励みになりますので、クリックで応援よろしくね♪
にほんブログ村 海外生活ブログ アメリカ中西部情報へ
にほんブログ村

4 件のコメント :

  1. 3周年、おめでとうございます!
    自分でその…「続くんだろうか…」と思った気持ち。同感です。それも音楽に沿って話しは続くんだろうか…でも、何か続けちゃえたのは自分でも以外でした。(笑

    Sakuraさんを通してミネソタの自然、そして音楽ライフを楽しく購読させていただいております❤ これからも、楽しい記事待っておりま~す(*˘︶˘*)

    返信削除
    返信
    1. chopiana さん、

      私もブログを始めたばかりの頃は、
      そんなに話題があるのだろうか・・・と不安でした。
      都会のようにキラキラした刺激があるわけではないのでね。
      ブログに載せるために、何かしなくちゃ♪
      という気持ちになった時もあったかもしれません。

      chopiana さんのような方々にもブログを通じて出会え、
      うれしく思っています (◕ฺ‿◕ฺ✿ฺ)

      削除
  2. こんにちは。

    ブログ3周年ですね。。おめでとうございます。
    私は2011年だから3周年、すっかり忘れてました。
    ブログの大工事。。。私は自信がないわ〜〜現在エキサイト使用中、これを他のブログは切り替えると今までのをトランスファーできないって(?)聞いた事があるので先に進みません、笑 他にはもっといろんな機能が満載してるんでしょうね!

    返信削除
    返信
    1. ねこちゃんさん、

      あら!ねこちゃんさんも2011年からブログを始められたのですか!?
      同じく3周年ですね。 おめでとうございます♪
      エキサイトブログは使いやすいですか?

      多分色々ある Blogger の機能を、全然使い切れていないと思うので、
      もう少し何とかしたいなと思っています。
      でもあまりブログにばかり時間をかけすぎると、
      他のことができないので、ほどほどにしないといけないかな?

      削除