2013年6月2日日曜日

Blogger シンプルテンプレートの画像枠を狭く

自分で運営している写真のブログで、シンプルテンプレートの本文中の画像の枠を狭くしました。
テンプレートを弄るのは怖い (?) ので、避けて来たのですが ... 。
忘れてしまいそうなので、備忘録的に、書き残しておきましょう。
他にも方法があるとは思いますが、これはこれで、割と簡単です。



先ず、既成のシンプルテンプレートの状態。
画像枠は2種類あるようです。
本文中に挿入された画像用と、プロフィール等右欄の画像等用。
本文用は広く、プロフィール用は狭く、表示されます。
シンプルも幾つか種類があるので、ものに拠って、幅の設定値が違うようです。

表示を見ていて、どうも広過ぎるなぁ と感じていました。
狭くしちゃおう!

直し方は、割と、簡単です。

テンプレート から HTML の編集 を選びます。
これからは、以下の画面イメージを参考にして下さい。
13 行目辺りの <b:skin>--</b:skin> ブロック(▲付行番号)をクリックして展開します。
行を下にスクロールして行くと、400 行目辺りに .post-body img , で始まる宣言文があります。
この中のpadding: $(image.border.large.size) の large を small に 変えて下さい。
後は、保存するだけです。

この変更で、ブログ内の全ての画像枠は small.size に統一され、狭くなります。
なお、本ブログは標準状態のままで、写真のブログ は以下の変更を適応した状態です。
元々、同じテンプレートを採用していますので、比べて見て下さい。
                        写真のブログ がリンクになっています。



当初、large の設定値を弄ろうとしたのですが、内部エディタでは上手く行かず、断念しました。
これが、変更出来ると良いのですが ... 。
テンプレートの変更画面の中に、設定数値の項目はありませんので、止むを得ないですね。
また、テンプレートを必要以上に弄繰り回すのは怖い と思っているので、この辺で手を打ちました。
元に戻すには、語句一箇所の変更で済みますから。
                   直接、数値を設定すれば OK かも です(試してません)。



2 件のコメント:

  1. 早々に、ブログ見ていただきありがとうございます。今後ともよろしくお願いします!!
    戦国武将のルーツを求め、ドライブする予定で始めたブログですが、最近はデジカメ・孫のためのウッドデッキ・BQ/ピザ窯等などに気が行っています。秋頃から本筋の武将のルーツに戻ろうかとなんとなく思っています。

    返信削除
  2. hosinoniwa さま コメントありがとう。
    こちらこそ、よろしく お願いします。

    返信削除