テンプレートの修正・更新致しました。22/06/27

Re: ど素人 様へ

ど素人 様、初めまして。コメント頂き有難うございます。
早速ご質問の件です。

> 新しい記事を投稿し、試しにプレビュー画面を確認すると、タイトルの背景に表示されている画像が表示されない状態になります。これはプレビュー時だけの仕様か何かで、実際に投稿し、公開すれば問題なく表示されるのでしょうか？

…記事本文のページにはトップ画像を表示しないようにしています。なので、プレビュー表示は正しいです。
画像のスペースを無くして記事自体を素早く読めるよう、敢えてそのようにデザインしております。
当方の記事に画像を表示させるカスタマイズを掲載しておりますので、お手数ですが下記のページをご覧頂きカスタマイズを行って下さい。

https://sorauta1.blog.fc2.com/blog-entry-430.html
（この記事の2番に有る、「逆に、素のテンプレートでは記事ページにトップ画像を表示していませんが、記事ページにも表示したい場合は、上記HTMLを下記のように変更して下さい。（コピペ可）」という部分です。）

それともう一つのご質問についてです。
> タイトルと説明文をHPトップの上部に表示された画像の前面に関連付けて表示したい場合、CSSのbackgroundプロパティを指定し、タイトル部分も編集し、変更できるかどうかも教えていただけないでしょうか。

…読解力が乏しいので詳しくお教え頂けますか？
予めブログタイトルと説明文を入れた画像をヘッダーにしたい…という事でしょうか？違っていたらゴメンナサイ。m(__)m
出来なくは無いのですが、レスポンシブテンプレートでは少し問題が有ります。
コメント欄では説明するのが難しいので、他者様が説明されているページをご覧下さいませ。

https://vanillaice000.blog.fc2.com/blog-entry-569.html
『ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】』

↑ The other way round のAkira氏が詳しく書いていらっしゃいます。
当方のテンプレートもAkira氏と同様のレスポンシブウェブデザインテンプレートなので、気を付けなければいけない事は同じです。
ブログ管理画面の環境設定→ブログの設定→スマホ版の表示設定で、スマートフォン専用版の表示設定を「無効にする」にして、お持ちのスマートフォンでブログを表示してみて頂くと問題点が分かると思います。

もし違うご質問であれば、お手数ですが今一度どういう表示をさせたいのかをお教え頂けますか？

Re: - 様へ

こんにちは。コメント頂き有難うございます。
チェックボックスが非表示になってました！スミマセン!!（修正しました。）
…件についてはそちらでお返事致しますね。(^-^)

Re: ど素人 様へ

こんにちは。お返事有難うございます。

タイトルの中央寄せ等については後程こちらで方法を考えますので、左メニューカラムの幅をどれ位にしたいのかをお教え頂けますか？
お返事お待ちしております。m(__)m

Re: - 様へ

こんばんは。
向こうへ出張りましたので、そちらをご覧下さいませ。
宜しくお願い致します。m(__)m

Re: ど素人 様へ

こんばんは。お返事頂き有難うございます。

やりたい事は何となく分かるのですが、既に色んな所に手を入れていらっしゃるようなので「ここを直したら良いですよ。」と簡単には言えないようです。^^;
出来ましたら当方のテンプレートを適用して頂き、ブログのURLを教えて頂ければCSSのどこが悪いのかを拝見する事が出来るのですが…お教え頂く事は可能ですか？
公に出したくない場合は、コメント投稿者のURL欄では無く、コメント内にURLを書いて「 Secret：□ 非公開コメント」にチェックを入れて送信して頂くと、私以外は見れません。
勿論、他言は絶対に致しませんので如何でしょう、難しいですか？

追記です。
一応、こちらでカスタマイズしたものを見本で上げておきます。
https://sorauta1.blog.fc2.com/?template=home_resp2cl--2&index　（トップページ）
https://sorauta1.blog.fc2.com/?template=home_resp2cl--2&no=505　（個別記事。ヘッダー画像を追加しています）
このような形で良ければ、素のテンプレートにHTMLの一部修正とCSS追加ですぐ出来ます。

Re: ど素人 様へ

こんばんは。お返事有難うございます。

> ～～どの編集済みテンプレートを使うと、このような形で表示されるのか教えていただけないでしょうか？

…編集済みのテンプレートなどは有りません。共有化されている home_resp2c-l に少しだけ手を加えております。
削除されておりましたら、再度新しく home_resp2c-l をダウンロードして下さい。
そのテンプレートをこれからご自身で調整して頂く事になります。

先ずはテンプレートをダウンロードして適用し、テスト記事を一つ投稿してみて下さい。（内容はテストテストでも構いません。）
テンプレートや記事は後からでも修正・削除が出来ますので、取り敢えず上記を行ってからお返事を頂けますか？
ブログタイトルの中央寄せ等のカスタマイズはその後で行います。
宜しくお願い致します。m(__)m

Re: ど素人 様へ

こんばんは。お待たせ致しました。
下記の方法はコピペのみですので、手順に沿って行う事で一番簡単に好みの形になると思います。


① FC2ブログ左のメニュー設定関連『テンプレートの設定』
↓
「 home_resp2c-l 」の「複製」をクリック
↓
「 home_resp2c-l1 」という複製が出来るので、そのテンプレートの「編集」をクリック
↓
画面を開いている状態で、パソコンのキーボードで『 Ctrl 』キーと『 F 』キーを一緒に押すと画面上に小さい検索窓が出るので、その中に「<div id="content">」と入れて「 Enter 」キーを押し、該当する場所を探します。
↓
すると「 home_resp2c-l1 のHTML編集」枠内に1ヶ所見付かるので、その場所を下記のように変更します。

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

↑となっているものを↓のように変更（コピペ可）

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


② 次に、「 home_resp2c-l1 のスタイルシート編集」枠内、一番下までスクロールさせ、最下の位置に下記のCSSを全てコピペして下さい。

header {
width: 760px;
}
header,body.dark header {
background: none;
}
#blog-name{
text-align: center;
}
.introduction {
position: absolute;
bottom: 10px;
right: 0px;
color: #ffffff;
}
#content {
width: 790px;
}
#left-box {
width: 240px;
}
@media only screen and (min-width: 760px) and (max-width: 1117px){
header {
width: 100%;
}
#content {
width: 100%;
margin-left: -240px;
padding: 10px 20px 20px 245px;
}}
@media only screen and (max-width: 759px){
#content {
width: 100%;
}
header {
width: 100%;
}
nav {
width: 240px;
}
#btn2 {
width: 240px;
}
#nav_close {
padding-left: 195px;
}}
@media only screen and (max-width: 600px){
.introduction {
display: none !important;
}
.breadcrumb_list {
padding-top: 0;
}}


③ 後は更新ボタンを押して完了です。（必ず更新ボタンを押して下さい。でないと記事プレビューで反映しません。）
先に複製を作った事によって元々のテンプレートはそのまま残りますので、改変する場合は今程カスタマイズした「 home_resp2c-l1 」の複製を更に作って行えば失敗した場合でも元に戻せて安心です。

先ずはここまで行ってご確認頂けますか？

Re: ど素人 様へ

こんにちは。
取り急ぎのお返事ですが、画像を拝見致しますとカスタマイズ用の追加スタイルシート（②の部分）が反映されていません。
②は追加していらっしゃいますか？
若しくは追加する際に他の文字列を入れていませんか？


例：

-----ここから追加-----
header {
width: 760px;
}
header,body.dark header {
background: none;
}
～～～～
～～～～

-----ここから追加-----等の注釈を付けては駄目です。CSSでのコメントアウトの仕方は
/*-----ここから追加-----*/
のように「/*」「*/」で括る様に書かないと、その文字列以降のスタイルが無効になります。
なので、目印として何か注釈を付ける場合は
/*注釈*/
のように書いて下さい。

全てが反映されましたら、追加したスタイルシート部分を説明致しますのでご連絡下さいませ。m(__)m

Re: ど素人 様へ

こんばんは。画像拝見致しました。
ブログタイトルも中央になり、タイトル背面の白っぽい背景色も消せましたね。
左のメニューカラム部分は 240px に縮小し、右の記事カラムを増やしています。
一応ご希望のようになったかと思いますが、如何でしょうか。

カスタマイズした内容です。
①番で個別記事ページのトップ画像を表示するようにしています。
②番で変更したい該当箇所（セレクタ）のプロパティと値を上書きしています。
③番で変更を確定しています。

HTML及びスタイルシートは、ブラウザが表示する際に上から順に読み込まれて行きます。
なので、（②番のように）スタイルシートの変更したい該当箇所を元の記述位置より下に再記述すると、読み込まれたものが『上書き』されます。
スタイルシート内の変更する該当箇所がすぐ分かる場合はそのまま変更すれば良いですが、この方法は（スタイルシートの内容は少し増えますが）元の数値を弄るよりも簡単に上書き変更出来、戻したい時は追記した部分を削除すれば元の状態に戻す事が出来ます。

CSSの書き方は
セレクタ {プロパティ: 値;}
です。

②番で変更した箇所です。

header→ブログタイトル部の幅。730pxを760pxに変更
header,body.dark header→ブログタイトルの背に有る半透明部を削除
#blog-name→ヘッダー内に有るブログタイトルを中央寄せ
.introduction→ブログの説明文を右下に移動、白文字に変更
#content→ブログの右カラム。760pxを790pxに変更
#left-box→ブログの左カラム（メニュー部分）。270pxを240pxに変更

@media only screen and～～～以下はスマートフォンで表示した際の変更部分です。

#left-box（左のメニューカラム）を調整する場合は、併せてheader、#contentの数値も（#left-boxが10px増えたらheaderと#contentは10px減らす等）調整して下さい。

ご不明な点がございましたらご連絡下さいませ。
宜しくお願い致します。m(__)m

Re: ど素人 様へ

こんばんは。お返事有難うございます。

> 最初、HTMLをどんなふうに学ばれたんでしょうか。書籍とかウェブページ、動画、スクールなどでしょうか？

…本やNetで独学です。キチンとした下地が無いので JavaScript等のプログラミングは書けませんし、HTMLやCSSにしてももっと良い書き方が有ります。
私自身がまだまだ勉強中なため、テンプレートも修正・更新ばかりで皆様にご迷惑をお掛けしています。^^;

Netの情報では、基本から学べる『サルワカ』様のサイトがお勧めです。
未だに確認に度々訪問しています。
https://saruwakakun.com/

また何かございましたら、どうぞ気兼ね無くお声掛け下さいませ。
今後とも宜しくお願い致します。m(__)m

Re: ど素人 様へ

はい。宜しくお願い致します。(^-^)