Home > FC2ブログ > basic_white > basic_whiteテンプレート サムネイル画像の大きさを固定・位置調整する方法

basic_whiteテンプレート サムネイル画像の大きさを固定・位置調整する方法

 basic_whiteテンプレートのサムネイル画像の横幅と高さを固定にする方法です。

 縦横比を無視して大きさを調整する方法と縦横比を維持したまま大きさを調整する方法のどちらかを利用します。

 以下は縦横比を無視した方法です。縦横比を維持する場合は画像の縦横比を維持したまま大きさを固定のカスタマイズをご覧ください。

1. スタイルシート…グリッド表示

 場所はCtrl+Fキーで『.entry_image img』を検索。次の強調部分のコードを追加します。

#main_contents .grid_content .entry_body .entry_image img {
  max-width: 150px; /* グリッド表示の時のサムネイルの幅の上限 */
  max-height: 210px;
  /* グリッド画像大きさ固定 */
  max-width: none; max-height: none;
  width: 150px; /* 横幅 */
  height: 130px; /* 高さ */

}
#main #main_contents .grid_content .entry_body .entry_image{
  margin: 0px 0 0 0px; /* グリッド画像位置 */
}

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
  margin-left: 178px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
}

テンプレートの利用時期によっては「~entry_description,」の行がない場合もありますが、追加するコードは同じです。

 以上でグリッド表示の全てのサムネイル画像が、横幅と高さで指定した数値の大きさで固定されます。画像の縦横比を無視したサイズになります。

 画像位置はmarginの1番目の数値で上からの距離を指定し、4番目の数値で左からの距離を指定します。

margin: 0px 0 0 10px; /* グリッド画像位置 */

 上記のようにすると上から0px、左から10pxの位置に画像が表示されます。

 記事冒頭分の左側の余白は画像の横幅に合わせて調整しくてください。画像の横幅+20~30px程度の数値を指定するといいでしょう(横幅が150なら170~180など)。

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
  margin-left: 180px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
}

2. スタイルシート…グリッド表示の最初の記事

 場所はCtrl+Fキーで『.entry_image img』を検索。次の強調部分のコードを追加します。ただし、グリッド表示の最初の記事を狭めるなどして最初の記事を他の記事と同じ幅で並べている場合は追加しないでください。

#main_contents .grid_content:first-child .entry_image img, #main_contents .p_area .entry_image img {
  max-width: 200px; /* グリッド表示の時の最初の記事のサムネイルの幅の上限 */
  max-height: 220px;
  /* グリッド最初の記事の画像大きさ固定 */
  max-width: none; max-height: none;
  width: 200px; /* 横幅 */
  height: 150px; /* 高さ */

}
#main #main_contents .grid_content .entry_body .entry_image{
  margin: 0px 0 0 0px; /* グリッド最初の記事画像位置 */
}

#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {
  margin-left: 238px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
  min-height: 228px;
}

テンプレートの利用時期によっては「~entry_description,」の行がない場合もありますが、追加するコードは同じです。

 横幅の指定方法などは先の[1]スタイルシートと同じです。記事冒頭文の左側の余白は.entry_discriptionのmargin-leftの値で調整します。

3. スタイルシート…リスト表示

 場所はCtrl+Fキーで『.entry_image img』を検索。次の強調部分のコードを追加します。ただし、リスト表示で画像の大きさを固定しない場合は追加の必要はありません。

#main_contents .entry_body .entry_image img {
  max-width: 200px; /* リスト表示の時のサムネイルの幅の上限 */
  max-height: 250px;
  border: 4px solid #FFFFFF;
  -webkit-box-shadow: 0px 1px 1px 0px #999999;
  -moz-box-shadow: 0px 1px 1px 0px #999999;
  box-shadow: 0px 1px 1px 0px #999999;
  /* リスト画像大きさ固定 */
  max-width: none; max-height: none;
  width: 200px; /* 横幅 */
  height: 150px; /* 高さ */

}
#main #main_contents .list_content .entry_body .entry_image{
  margin: 0px 0 0 0px; /* リスト画像位置 */
}

#main_contents .entry_body .entry_discription,
#main_contents .entry_body .entry_description {
  margin-left: 238px; /* サムネイル幅を変更した場合はこちらも調整して下さい */
  min-height: 228px;
}

テンプレートの利用時期によっては「,~entry_description」がない場合もありますが、追加するコードは同じです。

 横幅の指定方法などは先の[1]スタイルシートと同じです。記事冒頭文の左側の余白は.entry_discriptionのmargin-leftの値で調整します。

正常に反映されない場合

 他のカスタマイズで画像の横幅や高さが指定されていないかを確認し、あればそちらも同様に変更を加えてみてください。どうしても反映されない時は追加したコードの各値の「;」の前に「!important」をつけてください。

max-width: none !important; max-height: none !important;
width: 150px !important; /* 横幅 */
height: 130px !important; /* 高さ */

画像の縦横比を維持したまま大きさを固定

 指定した画像の横幅と高さ以上の部分は切り取られて表示されます。画像基本サイズが大きすぎると表示される部分が少なくなります。

1. スタイルシート…グリッド表示

 場所はCtrl+Fキーで『.entry_image img』を検索。次の強調部分のコードを追加します。

#main_contents .grid_content .entry_body .entry_image img {
  max-width: 150px; /* グリッド表示の時のサムネイルの幅の上限 */
  max-height: 210px;
  /* グリッド画像基本サイズ */
  min-width: 1px; max-width: 400px; max-height: 400px;

}
#main #main_contents .grid_content .entry_body .entry_image {
  width: 150px; /* 横幅 */
  height: 130px; /* 高さ */
  margin: 0px 0 0 0px; /* 画像位置 */
  overflow: hidden;
  border: 4px solid #FFFFFF;
  -webkit-box-shadow: 0px 1px 1px 0px #999999;
  -moz-box-shadow: 0px 1px 1px 0px #999999;
  box-shadow: 0px 1px 1px 0px #999999;
}
#main #main_contents .grid_content .entry_body .entry_image img {
  /* 画像表示基点 */
  border: 0; display: block; margin-top: -0%; margin-left: -0%;
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.grid_content .entry_body .entry_image a {display: block;}

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
  margin-left: 178px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
}

テンプレートの利用時期によっては「~entry_description,」の行がない場合もありますが、追加するコードは同じです。

 以上でグリッド表示の全てのサムネイル画像が、横幅と高さで指定した数値の大きさで固定されます。

 元になるサムネイル画像が大きすぎる時は画像基本サイズの400pxを適当に減らしてください。画像が全て横長ならwidthの値を増減させるだけでOKです。減らしすぎると横幅や高さが足りなくなるのである程度の大きさが必要です。

min-width: 1px; max-width: 300px; max-height: 300px;

 元になるサムネイル画像が小さすぎる時は画像基本サイズの1pxを適当に増やしてください。ただし、拡大表示になるので画像は少し荒くなります。

min-width: 150px; max-width: 400px; max-height: 400px;

 それでもまだ画像が小さい時は「min-height: 130px;」を追加して数値を増やしたり、max-width・max-heightの数値を増やしてください。

min-width: 150px; min-height: 130px; max-width: 400px; max-height: 400px;

 画像は左上を基点として表示され、指定した横幅・高さからはみ出た部分は非表示になります。基点をずらす時は画像表示基点のマイナスの値を増やしてください。

border: 0; display: block; margin-top: -10%; margin-left: -10%;

 上記のように-0を-10にすると上にマイナス10%、左にマイナス10%画像がずれて表示されます(大きい画像の場合は画像の中央部分寄りに表示される)。全ての画像に適用されるため、サムネイルの画像にはある程度の大きさが必要です。


 画像位置はmarginの1番目の数値で上からの距離を指定し、4番目の数値で左からの距離を指定します。

margin: 0px 0 0 10px; /* グリッド表示画像位置 */

 上記のようにすると上から0px、左から10pxの位置に画像が表示されます。

 記事冒頭分の左側の余白は画像の横幅に合わせて調整しくてください。画像の横幅+20~30px程度の数値を指定するといいでしょう(横幅が150なら170~180など)。

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
  margin-left: 180px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
}

2. スタイルシート…グリッド表示の最初の記事

 場所はCtrl+Fキーで『.entry_image img』を検索。次の強調部分のコードを追加します。ただし、グリッド表示の最初の記事を狭めるなどして最初の記事を他の記事と同じ幅で並べている場合は追加しないでください。

#main_contents .grid_content:first-child .entry_image img, #main_contents .p_area .entry_image img {
  max-width: 200px; /* グリッド表示の時の最初の記事のサムネイルの幅の上限 */
  max-height: 220px;
  /* グリッド最初の記事の画像基本サイズ */
  min-width: 1px; max-width: 400px; max-height: 400px;

}
body #main #main_contents .grid_content:first-child .entry_body .entry_image {
  width: 200px; /* 横幅 */
  height: 140px; /* 高さ */
  margin: 0px 0 0 0px; /* 画像位置 */
  overflow: hidden;
  border: 4px solid #FFFFFF;
  -webkit-box-shadow: 0px 1px 1px 0px #999999;
  -moz-box-shadow: 0px 1px 1px 0px #999999;
  box-shadow: 0px 1px 1px 0px #999999;
}
body #main #main_contents .grid_content:first-child .entry_body .entry_image img {
  /* 画像表示基点 */
  border: 0; display: block; margin-top: -0%; margin-left: -0%;
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}

#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {
  margin-left: 238px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
  min-height: 228px;
}

 以上でグリッド表示の最初の記事サムネイル画像が、横幅と高さで指定した数値の大きさで固定されます。横幅の指定方法などは先の[1]スタイルシートと同じです。記事冒頭文の左側の余白は.entry_discriptionのmargin-leftの値で調整します。

3. スタイルシート…リスト表示

 場所はCtrl+Fキーで『.entry_image img』を検索。次の強調部分のコードを追加します。ただし、リスト表示で画像の大きさを固定しない場合は追加の必要はありません。

#main_contents .entry_body .entry_image img {
  max-width: 200px; /* リスト表示の時のサムネイルの幅の上限 */
  max-height: 250px;
  border: 4px solid #FFFFFF;
  -webkit-box-shadow: 0px 1px 1px 0px #999999;
  -moz-box-shadow: 0px 1px 1px 0px #999999;
  box-shadow: 0px 1px 1px 0px #999999;
  /* リスト画像基本サイズ */
  min-width: 1px; max-width: 400px; max-height: 400px;

}
#main #main_contents .list_content .entry_body .entry_image {
  width: 200px; /* 横幅 */
  height: 140px; /* 高さ */
  margin: 0px 0 0 0px; /* 画像位置 */
  overflow: hidden;
  border: 4px solid #FFFFFF;
  -webkit-box-shadow: 0px 1px 1px 0px #999999;
  -moz-box-shadow: 0px 1px 1px 0px #999999;
  box-shadow: 0px 1px 1px 0px #999999;
}
#main #main_contents .list_content .entry_body .entry_image img {
  /* 画像表示基点 */
  border: 0; display: block; margin-top: -0%; margin-left: -0%;
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.list_content .entry_body .entry_image a {display: block;}

#main_contents .entry_body .entry_discription,
#main_contents .entry_body .entry_description {
  margin-left: 238px; /* サムネイル幅を変更した場合はこちらも調整して下さい */
  min-height: 228px;
}

 以上でリスト表示の全てのサムネイル画像が、横幅と高さで指定した数値の大きさで固定されます。横幅の指定方法などは先の[1]スタイルシートと同じです。記事冒頭文の左側の余白は.entry_discriptionのmargin-leftの値で調整します。

正常に反映されない場合

 他のカスタマイズで画像の横幅や高さが指定されていないかを確認し、あればそちらも同様に変更を加えてみてください。どうしても反映されない時は追加したコードの各値の「;」の前に「!important」をつけてください。

min-width: 1px !important; max-width: 400px !important; max-height: 400px !important;

width: 150px !important; /* 横幅 */
height: 130px !important; /* 高さ */

指定した横幅・高さが足りない場合の背景色を指定する

 画像が指定の横幅・高さより小さい時は余白が生じます。この余白部分の背景色を変更する時は追加した各表示コードに「background: #dddddd;」を加えてください。

#main #main_contents .grid_content .entry_body .entry_image {
  width: 150px; /* 横幅 */
  height: 130px; /* 高さ */
  margin: 0px 0 0 0px; /* 画像位置 */
  overflow: hidden;
  border: 4px solid #FFFFFF;
  -webkit-box-shadow: 0px 1px 1px 0px #999999;
  -moz-box-shadow: 0px 1px 1px 0px #999999;
  box-shadow: 0px 1px 1px 0px #999999;
  background: #dddddd;
}

 グリッド最初の記事やリスト表示のコードも同様に変更します。色は「#dddddd」の部分で変更できます。

記事の高さを変更する

 記事全体の高さを調整する時は「グリッド表示の時の記事の高さ」の数値を増減させてください。このブログで紹介している他のカスタマイズで高さを指定するコードを追加した場合はそちらを変更してみてください。

#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  width: 50%;
  height: 310px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}

 リスト表示の際の高さは以下の部分で調整できます。

#main_contents .entry_body .entry_discription,
#main_contents .entry_body .entry_description {
  margin-left: 238px; /* サムネイル幅を変更した場合はこちらも調整して下さい */
  min-height: 228px;
}

テンプレートの利用時期によっては「,~entry_description」がない場合もありますが、調整する場所は同じです。

関連記事
スポンサー リンク
コメント

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered