アイキャッチ画像を差し替える
表示する画像を変更する場合はimg.jpgを同名上書き します。
なお、アイキャッチ画像は、ブラウザの縦横幅によって拡大縮小されることがあり、テンプレートによってはブラウザサイズの如何で一部見切れる場合がありますのでご了承ください。画像の見せたい位置がある場合はbackground-position
の編集で対応できるかもしれません。
拡張子やサイズが異なる画像に差し替えたり表示位置を変える場合はstyle.css を編集します。▼アイキャッチ で文字列検索の上、style.css内のコメントを参照して変更してください。。
変更該当箇所
/* ▼アイキャッチ */
#HEADER::after,
#FOOTER::before
{
content:""; /* 編集不可 */
background-image:url(maiden/img.jpg ); /* 画像URI */
padding-top:calc( 250 / 900 * 100% ); /* 【250 】画像縦幅(単位無用)【900 】画像横幅(単位無用) */
background-position:50% 50%;
}
#FOOTER::before
{
padding-top: 40px; /* フッターの画像の高さ */
background-position:50% 50%;
}
/* ▲アイキャッチここまで */
数値を変える際はcalc
を用いず自力で計算した数値を指定しても構いません。
例:padding-top:27.78% ; /* ( 250 ÷ 900 × 100 ) */
表示領域が狭い環境での扱いについて
このテンプレートはスマートフォンなど表示領域が縦もしくは縦横に狭い場合、コンテンツ優先のためINDEX以外でアイキャッチの表示領域を狭くするもしくは表示させないようにしています。もしアイキャッチが重要で、INDEX以外でもINDEXと同様に表示させたい or INDEX非表示でINDEX以外表示にさせるようにする場合は、▼INDEX以外アイキャッチ で検索し、以下の部分を削除してください。
/* ▼INDEX以外アイキャッチなし */
body:not(#INDEX) #HEADER{ border-bottom:2px dotted #CCC; margin-bottom:15px; }
body:not(#INDEX) #HEADER::after{ content:""; display:none !important; }
アイキャッチ画像を全てのページで表示させない
/* ▼アイキャッチ */
から/* ▲アイキャッチここまで */
を削除します。
以下の部分も不要です。/* ▼アイキャッチ */
~/* ▲アイキャッチここまで */
以外の場所にある場合もありますので、アイキャッチ で文字列検索の上、あれば削除してください。
/* ▼INDEX以外アイキャッチなし */
body:not(#INDEX) #HEADER{ border-bottom:2px dotted #CCC; margin-bottom:15px; }
body:not(#INDEX) #HEADER::after{ content:""; display:none !important; }
INDEXとそれ以外で画像やサイズを変えるor変えない
INDEXは表示領域が広くそれ以外では狭い、或いはINDEXは狭くそれ以外で広い
INDEXとそれ以外で表示する画像を変更する(モノクロイラスト⇔カラー、ぼかしあり⇔なし…など)
style.css を開き、/* ▼アイキャッチ */
から/* ▲アイキャッチここまで */
の間の記述をコピー・ペーストします
コピペしたほうのセレクタの頭に#INDEX
(全て半角で「#INDEX」のあと、半角のスペース1つ)を書き加えます。セレクタがbody
だった場合はbody#INDEX
にします。書き足したほうがINDEX用の記述になります。
該当部をコピペ(手順1)し、セレクタを書き換え(手順2)たサンプル
/* ▼アイキャッチ */
#HEADER::after,
#FOOTER::before
{
content:""; /* 編集不可 */
background-image:url(maiden/img.jpg ); /* 画像URI */
padding-top:calc( 250 / 900 * 100% ); /* 【250 】画像縦幅(単位無用)【900 】画像横幅(単位無用) */
background-position:50% 50%;
}
#FOOTER::before
{
padding-top: 40px; /* フッターの画像の高さ */
background-position:50% 50%;
}
#INDEX #HEADER::after,
#INDEX #FOOTER::before
{
content:""; /* 編集不可 */
background-image:url(maiden/img.jpg ); /* INDEXの画像URI */
padding-top:calc( 250 / 900 * 100% ); /* 【250 】INDEXの画像縦幅(単位無用)【900 】INDEXの画像横幅(単位無用) */
background-position:50% 50%;
}
#INDEX #FOOTER::before
{
padding-top: 40px; /* フッターのINDEXの画像の高さ */
background-position:50% 50%;
}
/* ▲アイキャッチここまで */
INDEXで変えたい項目についてINDEX用の記述の値を書き換えます。値を書き換えなかったものはINDEX用の記述から削除してください。
アイキャッチ画像をINDEXのみで表示/INDEXのみ非表示
INDEXのみで表示
セレクタの前に#INDEX
(全て半角で「#INDEX」のあと、半角のスペース1つ)を追加
セレクタがbody
だった場合は body#INDEX
に書き換え
INDEX以外表示(INDEXでは非表示)
セレクタの前にbody:not(#INDEX)
(全て半角で「body:not(#INDEX)」のあと、半角のスペース1つ)を追加
セレクタがbody
だった場合は body:not(#INDEX)
に書き換え
INDEXのみ表示に変更後のサンプル
/* ▼アイキャッチ */
#INDEX #HEADER::after,
#INDEX #FOOTER::before
{
content:""; /* 編集不可 */
background-image:url(maiden/img.jpg ); /* 画像URI */
padding-top:calc( 250 / 900 * 100% ); /* 【250 】画像縦幅(単位無用)【900 】画像横幅(単位無用) */
background-position:50% 50%;
}
#INDEX #FOOTER::before
{
padding-top: 40px; /* フッターの画像の高さ */
background-position:50% 50%;
}
/* ▲アイキャッチここまで */
INDEX以外表示(INDEXでは非表示)に変更後サンプル
/* ▼アイキャッチ */
body:not(#INDEX) #HEADER::after,
#body:not(#INDEX) #FOOTER::before
{
content:""; /* 編集不可 */
background-image:url(maiden/img.jpg ); /* 画像URI */
padding-top:calc( 250 / 900 * 100% ); /* 【250 】画像縦幅(単位無用)【900 】画像横幅(単位無用) */
background-position:50% 50%;
}
#body:not(#INDEX) #FOOTER::before
{
padding-top: 40px; /* フッターの画像の高さ */
background-position:50% 50%;
}
/* ▲アイキャッチここまで */