Bloggerテンプレートの変更は苦戦しています。
一通り調べてみましたがテンプレート「Planer」に関する情報がすごく少なそうです。
配布先のコメント欄にはスライダーに関する情報くらいしかありませんでした。
トップページの修正は自力で何とかしなければならなそうです。
写真のサイズは関係なさそうですし、一体どこが原因なんでしょうね(_　_|||)

息抜きがてらラベル（カテゴリー）を修正してみました。
最初の画像左側が当初のラベルです。
ずれていてカッコ悪いですね。
ラベルは「Planer」テンプレートの象徴的な凝った部分なのでぜひ修正したいと思いました。
投稿数の表示を無くせば綺麗に表示されるのですが、今度は私が不便なので直しました。


画像の「Custom Labels」 がラベルを構成している部分です。
思ったよりも複雑な構成で尻込みしましたが、１つ１つ動かしながら修正しました。
まず真っ先に手を付けたのが、投稿数が下にずれ込むところです。
何回も見ているうちにおかしな部分に気付きました。

background: rgba(255,255,255,0.3);
margin: 0 -10px 0 5px;

-10という数字が明らかに怪しいのでここを0に変更すると数字が横に移動してくれました。
スタイルシート「マージンプロパティ」 は領域を指定するものです。
値が4つ指定されている場合には、[上][右][下][左]のマージンが指定されています。
今回は右に-10、左に5と指定されていたのでズレが発生したようです。


次に投稿数の右側がはみ出していたのが気になったので修正しました。
変更したのは「パッティングプロパティ」です。
これは内側の余白を指定するものです。
変更前は

.cloud-label-widget-content .label-size {
background: #00c8d7;
padding: 7px 10px;
 
と上下、左右を一気に余白指定していたので右側だけ余白を0にするように調整しました。

.cloud-label-widget-content .label-size {
background: #00c8d7;
padding: 7px 0px 7px 10px; 

マージンと同じように[上][右][下][左]の順に指定されるので右側の余白を0に指定すればはみ出しが解消します。
ラベルを触った時の影を「:hover」で制御しているのでこちらの「パッティングプロパティ」も一緒に修正しましょう。

.cloud-label-widget-content:hover .label-size:hover {box-shadow: 0 30px 0 0 rgba(0,0,0,0.25) inset;margin: 0 5px 5px 0;
padding: 7px 10px;}

.cloud-label-widget-content:hover .label-size:hover {box-shadow: 0 30px 0 0 rgba(0,0,0,0.25) inset;margin: 0 5px 5px 0;
padding: 7px 0px 7px 10px;}


最後に投稿数の（48）などとなっている部分が無駄に離れているので調整しました。
最初にいじった所がこの投稿数を構成する部分だったのでここをいじります。
指定されている左右の余白が大きいようなので「padding:」を10から5に変更しました。

background: rgba(255,255,255,0.3);
margin: 0 0px 0 5px;
padding: 12px 10px;

background: rgba(255,255,255,0.3);
margin: 0 0px 0 5px;
padding: 12px 5px;

これで無事にラベルの投稿数を綺麗に表示することが出来るようになりました。
最初の画像右側ですね。
あまり詳しくないので1つずつ動かして修正しましたが、なかなかいい感じになったのでほっとしています。
ラベルを変更したら「Planer」テンプレートに変えた意味がないですからね。
まだまだ修正個所がたくさんあって嫌になりますが1つずつ手を入れて行きます。
テンプレートの交換は細かい修正が大変ですね。