Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】サムネイル画像サイズの説明と変更

【Seesaaブログ新デザインシステム】サムネイル画像サイズの説明と変更

Seesaaブログのサムネイル画像サイズの説明
■「サムネイルサイズ」の説明
■サムネイル画像サイズを変更
■記事ページではないページのサムネイルサイズ「.entry__thumbnail」  

Seesaaブログの「管理画面>設定」の「ブログ設定」では、ブログのトップページに表示させる記事の数や「過去ログページ」「記事カテゴリページ」などの表示記事数を設定することができます。


もしも記事自体に画像を挿入していた場合、トップページや過去ログページには、記事に挿入した画像のうち最初の画像も一緒に表示されます。


現時点のトップページ画面


これはテンプレートがデフォルトの時のトップページです。
「続きを読む」というリンクがあるので記事が全文表示ではないことはわかると思いますが、ちょっと画像が大きいですね。


私はこういう、1ページに何個も記事が表示されるような「記事リスト」のページにデカい画像があると邪魔だと思うので、画像サイズを変更したいと思います。





Seesaaブログの「サムネイルサイズ」とは


Seesaaブログは「管理画面>設定」の「ブログ設定」で「サムネイルサイズ」を設定できますが、これはあくまでも画像をアップロードした時のサイズであって、トップページに表示される画像サイズではありません。
アップロードする時に、サムネイル(縮小画像)のサイズをあらかじめ管理画面で一括設定しておく、という設定です。



「サムネイルサイズ」に入力したサイズでトップページに表示されるわけではありませんので注意してください。トップページに表示されるサムネイルサイズは、CSSで設定しないといけません。(やり方はこの記事の下部で説明しています)
管理画面の「ブログ設定」で設定するのは、記事内で表示させるためのサイズです。



ちなみに、「管理画面>設定」の「ブログ設定」で設定する「サムネイルサイズ」は、「サムネイル」のサイズを設定するのですから、実際の画像サイズは全く変わりません。元の画像サイズが1000pxだったとして、「サムネイルサイズ」に300pxと入力しても、実際のサイズは1000pxのままです。画像の見た目が300pxになるだけです。



もしも掲載したい画像があって、その画像の実際のサイズが横幅1000pxだったとしたら、この画像をサムネイル(縮小画像)として表示させる時のサイズを「一括で」設定するというのが、「ブログ設定」で数値を入力する「サムネイルサイズ」の設定になります。



サムネイル(縮小画像)のサイズを一括で設定する


もう少し具体的に説明します。
例えば、メインコンテンツの幅が700pxだとして、左右の内側に余白を15pxずつ入れているとしたら、「メインの幅700px - 左余白15px - 右余白15px」ということで、実際に記事として使える横幅は670pxになります。
アップロードしたい画像サイズが1000pxだとしたら、横幅670pxの記事(メインコンテンツ)には収まりません。はみ出ます。



画像をメインコンテンツの横幅に収まるように設定しなければいけませんが、元々の画像は1000pxなのだから、これをサムネイル(縮小画像)として表示させて、見た目の横幅を小さくすればいいよね、ってことです。
この「サムネイルとして表示させて」の時の横幅を設定する時に、「一括でやっちゃおうよ!」というのが「ブログ設定」で設定する「サムネイルサイズ」なのです。
ということで、「ブログ設定」で設定する「サムネイルサイズ」を、670pxに設定してみます。


サムネイルサイズ設定画面


この場合、画像をアップロードした時には、すべての画像のサムネイルサイズは670pxになります。
個別記事ページを見た時に表示されるのはこの670pxです。
特別に何も設定しなくても、とにかく画像をアップロードしたら全部670pxのサムネイルを作ってくれるのですから(そのように今、「ブログ設定」の「サムネイルサイズ」で設定しました)、ガンガン画像を挿入してかまいません。ちゃんと記事の横幅内に収まるように画像を表示してくれます。


例えば画像サイズが500pxだったら、横幅500pxで表示されるだけのことです。(設定したサイズよりも小さい画像はそのまま表示される)
何もしなくても勝手に670pxで挿入してくれます。



記事ページではないページのサムネイルサイズ


「管理画面>設定」の「ブログ設定」で設定する「サムネイルサイズ」は、画像をアップロードした時に作られるサムネイル(縮小画像)のサイズだということは説明しました。
ここで設定したサイズで、記事内に画像(サムネイル)が表示されます。



では、「記事ページではないページ」の場合はどうなのか?
「記事ページではないページ」と書くと混乱するかもしれませんが、実は言葉の通りで、記事ページ以外のページのことです。


Seesaaブログには「記事ページ」以外にも、例えば「カテゴリページ」や「過去ログ(アーカイブ)ページ」「タグ一覧ページ」「ブログ内検索結果ページ」などがあります。「トップページ」も「記事ページではないページ」です。
これらのページでは、記事全体を表示させることはありません。



デフォルトのテンプレートでは「続きを読む」というリンク案内が設定されていて、記事後半を省略して表示させる設定になっています。
「管理画面>設定」の「ブログ設定」でトップページや過去ログページの記事の表示件数を設定できますが、ここでたくさんの件数を表示させるように設定していたとして、もしも記事全文を表示させる設定になっていたら大変なことになります。スクロールしまくらなければいけませんねw
なのでデフォルトでは各記事を折りたたむように(「続きを読む」で後半を省略)設定されているのです。



そしてSeesaaブログでは、デフォルトの状態では記事の一番最初の画像を「記事ページではないページ」に表示させるという設定になっています。
文章の後半を省略するように設定されていますが、最初の画像がデカいと無意味、というか邪魔です(笑)
まあ、私は邪魔だと思うんですが、そのまま(デフォルトだと620px)でもかまわない場合は、以下の編集はしなくても大丈夫ですので。



記事ページではないページのサムネイルサイズを変更する


「トップページ」や「カテゴリページ」「過去ログページ(アーカイブページ)」など、1ページ内に記事を数個表示するページを私は「記事ページではないページ」と呼んでいます。
つまり「記事ページ以外のページ」ということになりますが、これらのページで表示されるサムネイル画像のサイズは、一括で設定できます。
これがclass名「entry__thumbnail」です。
テンプレート「シンプルA. ホワイト 右カラム」では、デフォルトだと「620px」に設定されています。‥‥ちょっとデカくない?(笑)



「entry__thumbnail」はCSSでは「entry」の下に記述されています。
私はこの「entry」を「トップページ」として扱っていますが、要するに「記事ページ以外のページ」に対する共通設定になりますので、こういうテキトーな部分は無視してください。



では、CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「entry__thumbnail」というclassを探します。
テンプレートがデフォルトのままだと468行目ぐらいにあります。



CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


<元コード>
サムネイルサイズのスタイルシート編集画面


<編集後>
.entry__thumbnail { /* サムネイルのサイズ */
margin-bottom: 10px;
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}


●デフォルトのテンプレート(元コード)では「width: 620px;」「height: 349px;」に設定されていましたが、これは画像比率が「16:9」です。
●サムネイルサイズを小さくしたいと思いましたので、私は「width: 300px;」「height: 200px;」に変更しました。これは画像比率が「3:2」です。
●お好きなようにサイズを変更してください。



コード編集後のCSS(entry__thumbnail)と実際のページ


編集後のサムネイルサイズ部分のスタイルシート編集画面

実際のページ画像

コードを入れ替えた後のトップページは、こんな感じになります。
サムネイル画像が小さく表示されています。



ちなみに、現時点でサムネイル画像の下に表示されている文章を、サムネイル画像の右横の空白部分に表示させて見た目をスッキリさせたい場合は、こちらの記事をご確認ください。


【Seesaaブログ新デザインシステム】記事ページではないページのサムネイル画像横に文章を配置する
サムネイル画像の下に記事の文章が表示されているため、サムネイル画像の横が空いています。この空間が非常にもったいないと思うわけです。どうせなら、サムネイル画像の右横に文章を表示させることで‥‥




次の記事の紹介

次の記事では、Seesaaブログのトップページの記事タイトルを調整します。


【Seesaaブログ新デザインシステム】トップページの記事タイトルを調整する
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」では、トップページの記事タイトルには下線が入るようになっています。薄くてわかりにくいかもしれませんが、灰色の点線が付けられています。‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。