Seesaaブログを使用して皆さま、アップロードした画像の一部分しか表示されず、困っていませんか?
ブログ記事の画面ではうまく全体が表示されるのに、「最近の記事」などのサムネイル画像では端っこしか表示されず、せっかくアイキャッチ用に画像を入れたつもりが、全く意味不明な画面になっていませんか?
無料ブログだから仕方ない。。
1. 当ブログの最近の記事のサムネイル画像
【修正前】
.png)
【修正後】
.png)
2. 修正が可能なデザインテンプレート
Agent (Map)
Time Line Green
3. 修正方法
①デザイナー設定を選択
.png)
②スタイルシート編集
.png)
③CSSの変更有無を確認
「初期値との差分」がある場合、うまくいかないケースがありますが、まずこの段階では差分があるかどうかを確認するにとどめ、次のステップに進みます。
④スタイルシートに追加
スタイル編集タブの、一番下に下記コードを貼り付けて保存します。(貼り付ける場所はどこでもいいようですが、一番下が分かりやすいと思います。)
.recent-entry__thumbnail img {
max-width
:
100%
;
height
:
auto
;
}
.recent-entry__thumnail img {
max-width
:
100%
;
height
:
auto
;
}
↓貼り付けた画面が下記です。
.png)
⑤修正を確認
修正したブログをを見てみます。うまく修正できましたか?
できなかった方は⑥に進んで下さい。私は一度目はうまく修正できなくて、⑥を試したところうまく修正されました。
⑥CSSを初期値にもどしてもう一度
先ほど、CSSに初期値からの予め差分があるか見ていただいたと思いますが、差分があった方は一度初期値に戻します。
(もしCSSを自分でカスタマイズしている方は、カスタマイズ部分も初期値に戻ってしまうのでご注意下さい。)
初期値に戻した後、再度④のコードを貼り付けてみてください。初期値に戻すには、下記スタイル編集画面の「初期値に戻す」欄にチェックマークをして保存します。私は怖いのでバックアップして保存にしました。
必ず、初期値に戻した後、再度④のコードを貼り付けてくださいね。
はい、下記のようにブログ画面で見た画像と、「最近の記事」に表示されている画像のイメージが同じであれば、修正成功です!
.png)
また、これでもうまくいかない場合は、表示したブログ画面で「F5」を押してみて下さい。
キャッシュに残っている情報が表示されていると、せっかく更新しても、ブログ画面に反映されないので、F5で画面を更新すると正しく修正されて見えることがあります。