*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

TOP >  Template >  カスタマイズ >  genial_resp のカスタマイズ(トップ画像変更)

genial_resp のカスタマイズ(トップ画像変更)

テンプレート genial_resp 2c,3c のトップ画像の変更方法です。

表示領域のサイズに合わせて画像が拡大・縮小されるので、スマートフォンやタブレットなど 端末に合わせた表示が出来ます。
画像をレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と background-size:cover; を使った方法です。
background-size:cover; は、画像の幅と高さの比率を固定して領域を覆うように表示し、はみ出した部分を非表示にします。

テンプレートの管理画面下段の [ genial_resp〇c ] のスタイルシート編集枠内
スクロールすると1/8手前位に下記のような箇所が有ります。

/* トップ画像 */
.topimg{
position:relative;
overflow:hidden;
padding-top:35.63%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/park.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

paddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ)÷表示画像の幅(横サイズ)×100
という計算式で求めます。
(青文字の部分は表示したい画像のアップロード先URLを入れて下さい。)
縦横比の計算値で%指定すると元画像が(拡大・縮小されて)全て表示されます。
この数値を計算値より少なくすると高さが縮小され縦が非表示になり、大きくすると拡大された画像の横が非表示になります。

genial-mihon2cr.jpg

上記の場合は

/* トップ画像 */
.topimg{
position:relative;
overflow:hidden;
padding-top:45.00%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/himawari.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

になっており、
ひまわりの画像サイズは700px×315pxになっているので、315÷700×100、という計算で導いた値を%として入れています。
右カラムも左カラムも同様です。
背景色(薄いストライプ部分)を変更する場合は、同じくスタイルシート編集枠上部に有る

body::before{
background:#e7f7e7 url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ww-st1.png) repeat center; /* 色+背景画像 */
~~~~以下略~~~~
}
の部分を

body::before{
background:#dff0ff url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ww-st1.png) repeat center; /* 色+背景画像 */
~~~~以下略~~~~
}
に変更して頂けば薄い水色になります。
(背景色変更の際、参考色としてご覧下さい。
カラーコード表(web safe color 216色)
カラーネーム表(147色)

3カラムの場合はもうひと手間!お願いします。^^;
トップに使う画像サイズによっては左のカラムに画像が重なってしまう事が有りますので、下記のように指定部分の数値変更をお願い致します。
genial_resp3c のみ、変更画像CSS部分の下に

#left-box{
margin-top:300px; /* トップ画像を変更して左メニューに被ったら数値を増やして調整 */
}
というCSSが有るので、そこの数値をトップ画像に合わせて変更して下さい。
例えば、ひまわりの画像を利用する場合、下記画像のように重なってしまいます。

genial-mihon3c1.jpg

↑そのままの300pxだと重なってしまうので↓重ならないように380pxに増やして見栄えを調整。

genial-mihon3c2.jpg

#left-box{
margin-top:380px; /* トップ画像を変更して左メニューに被ったら数値を増やして調整 */
}


他の画像をご利用の場合も同様に、プレビューで確認しながら数値を調整し、程良くなったら更新ボタンを押し確定して下さい。
季節も丁度良いので、ひまわり画像のカスタマイズ、コピペで利用頂けます。是非どうぞ♪
大きい画像の位置を指定して使う場合は、下記リンクのページをご参考に。
serene_resp のカスタマイズ(トップ画像変更)
不具合が有った時のために、複製を作って作業すると安心です。(^-^)

関連記事

コメント







管理者にだけ表示を許可

aki Re: UKCOSMIC❤ 様へ

お返事頂き有難うございます。

HTML編集枠内を見て頂くと、一般的にHTML5で使用するタグ以外に『FC2ブログ独自の変数』が幾つも出現します。
同じ枠内に色んなページ(トップや記事、月別やカテゴリー別等)を作るための変数です。
これを使って表示させたりさせなかったりしてる訳ですね。
「こんな変数が有るのか」と、見て頂くと今後カスタマイズするのに役に立つと思いますよ。
https://help.fc2.com/blog/manual/Home/template/templatevariable.html
[テンプレート用変数一覧]是非ご参考に。(^-^)

また何かございましたらお声掛け下さいませ。m(__)m
2019-12-02-23:18 * aki [ 返信 * 編集 ]

Re: aki 様へ

ありがとうございました!
メチャすっきりしました。
消したいページのタグ名を入れればよいこともわかりましたので
こうやって消したいときは増やしていけばよいのですね^^
ご親切に感謝します❤
2019-12-02-07:12 * UKCOSMIC❤ [ 返信 * 編集 ]

aki Re: UKC☆金星型地球人 様へ

では、先般のHTMLに少し追加して下さい。(^^)

<div id="content">
<!--not_permanent_area-->
<!--not_category_area-->
<div class="topimg">
<header>
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><p><%introduction></p>
</div>
</header>
</div>
<!--/not_category_area-->
<!--/not_permanent_area-->

Categoryのページもトップ画像を非表示にする場合は『青文字』部分を追加して下さい。
その後【更新】ボタンを押して頂ければ適用されます。

不具合が有りましたら再度ご連絡下さいませ。m(__)m
2019-11-08-01:07 * aki [ 返信 * 編集 ]

Re: aki 様へ

ありがとうございました
٩(๑′∀ ‵๑)۶•*¨*•.¸¸♪. ⋆*
これです!
スッキリしました

ちなみに
カテゴリーを1つクリックした時にそのカテゴリー内の記事が一覧でずらっと出てきた時のページのヘッダーも消したのですが
可能でしょうか?
要するに
最初に教えていただいたものも含めての非表示ということになります。
よろしくお願いします
2019-11-07-17:23 * UKC☆金星型地球人 [ 返信 * 編集 ]

aki Re: UKC☆金星型地球人 様へ

UKC☆金星型地球人 様、初めまして。(^_^)
この度はテンプレートをご利用頂き、誠に有難うございます。

ご質問の件ですが、記事の要約表示されているエントリーページはトップ画像(及びブログタイトル・説明文の部分)有り、『続きを読む』で表示される記事本文のページは無し、という事で説明させて頂きます。

テンプレートの管理ページ、適用している『[ genial_resp2c-l ] のHTML編集』の枠内を少しスクロールした所に

<div id="content">
<div class="topimg">
<header>
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><p><%introduction></p>
</div>
</header>
</div>

という部分が有ります。この部分に、下記赤文字を追加して下さい。

<div id="content">
<!--not_permanent_area-->
<div class="topimg">
<header>
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><p><%introduction></p>
</div>
</header>
</div>
<!--/not_permanent_area-->

後は更新ボタンを押して頂ければ完了です。
これじゃない感が有った場合は^^;、上記の赤文字部分を削除して頂ければ元に戻ります。
ご不明な点、当方の理解が異なる場合は、お手数ですが 再度ご連絡下さいませ。
宜しくお願い致します。m(__)m
2019-10-20-20:03 * aki [ 返信 * 編集 ]

ヘッダーカスタマイズについて

テンプレートをお借りしています
ありがとうございます


各記事ページに飛んだ時にヘッダー非表示にする方法

ブログタイトル+サブタイトル背景のヘッダー部分をTOPページだけに表示させたいのでよろしくお願いします
2019-10-20-10:22 * UKC☆金星型地球人 [ 返信 * 編集 ]

aki Re: - 様へ

また何かご不明な点がございましたらお気軽にお声掛け下さいませ。
(^_^)
2019-08-22-00:21 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-20-15:29 * - [ 返信 * 編集 ]

aki Re: - 様へ

お返事有難うございます。
一点、更新案内を拍手コメントにてしておりますのでご覧下さいませ。
お手数をお掛け致します。m(__)m
2019-08-20-00:26 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-19-17:22 * - [ 返信 * 編集 ]

aki Re: - 様へ

お返事遅くなりました。m(__)m
解決できたとの事ですが、取り敢えずお伺い致しました。(^-^)
今後とも末永くお付き合い下さいます様、宜しくお願い致します。

p.s. 貴ブログの拍手コメントをご覧下さいませ。
2019-08-19-16:42 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-19-12:24 * - [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-18-19:36 * - [ 返信 * 編集 ]

aki Re: - 様へ

ブログを拝見しましたが、無事に反映されておりますよ。(^_-)-☆
暑い夏も、爽やかな気持ちで乗り越えましょう!
2019-08-11-13:28 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-11-07:41 * - [ 返信 * 編集 ]

aki Re: - 様へ

いつもご愛顧、有難うございます。
お伺いしてお返事致しますね。(^-^)
2019-08-10-23:02 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-10-21:35 * - [ 返信 * 編集 ]