【Seesaa設定】サムネイル画像の全体を表示する方法

Seesaaブログを使用して皆さま、アップロードした画像の一部分しか表示されず、困っていませんか？

ブログ記事の画面ではうまく全体が表示されるのに、「最近の記事」などのサムネイル画像では端っこしか表示されず、せっかくアイキャッチ用に画像を入れたつもりが、全く意味不明な画面になっていませんか？

無料ブログだから仕方ない。。

と半年近く諦めていましたが、Seesaaの新システムFAQに修正する方法が掲載されていたので、チャレンジしてみました。

1. 当ブログの最近の記事のサムネイル画像

赤枠部分がサムネイル画像となっています。数字だったり、グラフ？かなという雰囲気は分かるかもしれませんが、画像の一部が拡大されて表示されているため、意味不明な感じとなっています。

今回の修正をした後の、最近の記事のサムネイル画像です。画像全体が表示されるようになり、これは表、これはグラフ、これは砂時計と、記事に貼り付けられているものが何かを識別することができるようになりました！

なお、SeesaaブログのFAQによると、今回は、以下のデザインテンプレート向けのみのご案内となっているようです。

シンプルA～D
Agent (Map)
Time Line Green

パソコン画面だけではなく、スマホでも同様の問題が起きていたため、修正しようと「basic_blue」のテンプレートに同じ修正を加えたのですが、うまくいきませんでした。

スタイルシート編集画面にて、CSSを修正することになりますが、CSSを全く知らない私でも修正できたので、初心者の方でも大丈夫だと思います。

デザイン＞PC＞デザイン設定を選択する

使用しているデザインタイトルをクリックし、「スタイルシート編集」タブを選択します。

修正する前に、CSSが初期値から変更されているかどうかを確認します。

「初期値との差分」がある場合、うまくいかないケースがありますが、まずこの段階では差分があるかどうかを確認するにとどめ、次のステップに進みます。

スタイル編集タブの、一番下に下記コードを貼り付けて保存します。（貼り付ける場所はどこでもいいようですが、一番下が分かりやすいと思います。）

.recent-entry__thumbnail img {
    max-width:100%;
    height:auto;
}
.recent-entry__thumnail img {
    max-width:100%;
    height:auto;
}

↓貼り付けた画面が下記です。

修正したブログをを見てみます。うまく修正できましたか？

できなかった方は⑥に進んで下さい。私は一度目はうまく修正できなくて、⑥を試したところうまく修正されました。

先ほど、CSSに初期値からの予め差分があるか見ていただいたと思いますが、差分があった方は一度初期値に戻します。

（もしCSSを自分でカスタマイズしている方は、カスタマイズ部分も初期値に戻ってしまうのでご注意下さい。）

初期値に戻した後、再度④のコードを貼り付けてみてください。初期値に戻すには、下記スタイル編集画面の「初期値に戻す」欄にチェックマークをして保存します。私は怖いのでバックアップして保存にしました。

必ず、初期値に戻した後、再度④のコードを貼り付けてくださいね。

はい、下記のようにブログ画面で見た画像と、「最近の記事」に表示されている画像のイメージが同じであれば、修正成功です！

また、これでもうまくいかない場合は、表示したブログ画面で「F5」を押してみて下さい。

キャッシュに残っている情報が表示されていると、せっかく更新しても、ブログ画面に反映されないので、F5で画面を更新すると正しく修正されて見えることがあります。