*Essence

FC2ブログ共有テンプレートを作成・配布しています。不精なので時々更新。(^^;

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

テンプレートをチェックしておりましたら、個人的に位置の不揃いが気になったものが有りましたので、本日修正・更新致しました。m(__)m

修正したのは『(テンプレート名)home_resp2c-l, home_resp2c-r, home_resp3c 』のブログタイトル部分です。

トップページから個別記事のページに移動した際にちょっとだけブログタイトルがズレるのを直しました。(そのままでも閲覧に支障は有りません。)

気になる方のみ下記のCSSをテンプレートのスタイルシート編集枠最下段に追加して下さいませ。

PCで見た場合の差異はこれ位。

PCで見た場合

モバイルデバイスで見た場合の差異はこれ位。

モバイルデバイスで見た場合

home_resp2c-l,r(2カラムタイプ)

/* ブログタイトル部調整CSS */
.page-header{
  top:10px;
}
@media only screen and (max-width: 759px){
header{
  padding-left:10px;
}
.page-header{
  top:0;
  padding-left:0;
}}

home_resp3c(3カラムタイプ)

/* ブログタイトル部調整CSS */
header{
  top:20px;
}
.page-header{
  top:10px;
}
@media only screen and (max-width: 759px){
header {
  top:0;
  padding-left:0px;
}
.page-header{
  top:0;
  padding-left:0;
}}

久々の記事が修正でスミマセン。

Last Modified :

Comments







非公開コメント
No Subject
初めまして、ど素人と申します。home_resp2c-lがとても素敵なデザインで、ぜひ使わせて欲しいのですが、新しい記事を投稿し、試しにプレビュー画面を確認すると、タイトルの背景に表示されている画像が表示されない状態になります。これはプレビュー時だけの仕様か何かで、実際に投稿し、公開すれば問題なく表示されるのでしょうか?
加えて、タイトルと説明文をHPトップの上部に表示された画像の前面に関連付けて表示したい場合、CSSのbackgroundプロパティを指定し、タイトル部分も編集し、変更できるかどうかも教えていただけないでしょうか。
突然の訪問で質問攻めで恐縮です、もしご覧頂けて、お暇があれば返信頂けると光栄です。
2022-07-18-15:25 ど素人
[ 返信 ]
aki
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氏と同様のレスポンシブウェブデザインテンプレートなので、気を付けなければいけない事は同じです。
ブログ管理画面の環境設定→ブログの設定→スマホ版の表示設定で、スマートフォン専用版の表示設定を「無効にする」にして、お持ちのスマートフォンでブログを表示してみて頂くと問題点が分かると思います。

もし違うご質問であれば、お手数ですが今一度どういう表示をさせたいのかをお教え頂けますか?
2022-07-19-00:28 aki
[ 返信 * 編集 ]
No Subject
ご返事頂き、ありがとうございます。
恥ずかしながら、私、HTMLはわかっておりません。わかっていないまま書きなぐってしまったため、うまく伝えることができませんでした、すみません。全くわかっていない人間の質問で本当に恐縮です。

>>「記事本文のページにはトップ画像を表示しないようにしています」
まだ一度も投稿さえしたことがなく、プレビューだけだったのでわからなかったのですが、画像下と左サイドメニューは、どのメニューや記事をクリックしようとも固定表示のままで、クリックした内容というか記事や画像が、画像下・左サイドメニュー右側空白部分に表示される、そういうものだと思っておりました。

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

大変申し訳ございません、この部分も、単に私の無知でうまく伝えられませんでした。見た目上で、関連する色や数値の指定さえ変えればいいのではと思い込んでいました。
当初、変更しようとしたのは、タイトルのテキストを画像の中央に表示し、その下の説明を画像の一番下にずらし、両者の色を変え、左サイドメニューの幅を少し狭くすることでした。単に興味本位でした。どの記事をクリックしてもスクロールしても画像はそこに固定されているものと思っていたところ、タイトルが右からはみ出したため、そう思い込んでしまったのかもしれません。左メニューの幅を狭くしたつもりが、左サイドメニューが下に配置され、3カラム型みたいな状態にもなったりしました。paddingやmarginの数値ですが、こういったものの基点がわからず、適当にいじってみただけでした。画像の前面にタイトルのテキストが表示されていたので、てっきりタイトルと説明は画像の位置に対して、中央であればcenterで真ん中にできるのだと思い込んでいました。
レスポンシブデザインという概念というか、記述のルールや注意事項さえ知りませんでした・・・。あまりに勉強不足で本当にお恥ずかしい限りです。教えて頂いたレスポンシブデザインやリンク先の説明は、たいへん詳しく参考になります。
質問するにも、もうちょっと知ってからにすべきでした、貴重なお時間割かせてしまいまして、大変申し訳ありませんでした。
2022-07-19-02:06 ど素人
[ 返信 ]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2022-07-19-08:35 -
[ 返信 ]
aki
Re: - 様へ
こんにちは。コメント頂き有難うございます。
チェックボックスが非表示になってました!スミマセン!!(修正しました。)
…件についてはそちらでお返事致しますね。(^-^)
2022-07-19-14:36 aki
[ 返信 * 編集 ]
aki
Re: ど素人 様へ
こんにちは。お返事有難うございます。

タイトルの中央寄せ等については後程こちらで方法を考えますので、左メニューカラムの幅をどれ位にしたいのかをお教え頂けますか?
お返事お待ちしております。m(__)m
2022-07-19-14:40 aki
[ 返信 * 編集 ]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2022-07-19-16:33 -
[ 返信 ]
Re: aki 様へ
有難うございます。
当初、変えたい部分は、左メニュー(最新コメント・月別アーカイブ・・・と続くメニュー)のボックスの横幅を少し小さくし、それに合わせてバナー画像を左に広げること、それからタイトルを画像の中央に配置することでした。
これをしようと、ウェブ上で検索して出てくる情報を元に、全くわかっていないまま、例えばCSSの「/* 2カラム+ベース部分 */」の下に記述してある#left-boxの{}内、width:270px;を240pxに指定したところ、ボックスの横幅は指定どおりに短くなったものの、配置そのものが変わってしまったように記憶しています(これは私の弱い記憶であいまいです、違っていてさらに混乱させてしまいましたら申し訳ありません)。さっき試してみたところ、widthのピクセル数を240に変えると、指定通りに左メニューボックスは短くなったため、他のパラメータをいじった結果かと思われますが、編集した履歴をメモさえしておらず、原因はわかりません。
さらにタイトルを中央寄せにしようと思い、同じようにCSSの何れかの記述をcenterと変えたかもしれず、他にもpaddingやmarginなど、100%にしたりautoにしたり適当に変えたためか、タイトルが画像の右からはみだしてしまったように記憶しています。編集箇所はしっかりメモしておくべきでした、申し訳ありません。

2022-07-19-16:37 ど素人
[ 返信 ]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2022-07-19-20:33 -
[ 返信 ]
aki
Re: - 様へ
こんばんは。
向こうへ出張りましたので、そちらをご覧下さいませ。
宜しくお願い致します。m(__)m
2022-07-19-21:45 aki
[ 返信 * 編集 ]
aki
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追加ですぐ出来ます。
2022-07-20-00:11 aki
[ 返信 * 編集 ]
Re: aki 様へ
いじった後のテンプレートは、すでに削除してしまいました。恥ずかしながら、ブログ自体は公開どころか記事を書いたことさえないんです。記事を書いた時の見た目をプレビューで確認しようとして、バナー画像が消えていたので、その理由を知りたくて質問させて頂いた次第で御座います。
07-20-00:11にaki様に返信頂いた、下部の追記の2つのリンク先の下の見本では、バナー画像の下の空白部分に「テンプレートの修正・更新致しました。22/06/27」と題した記事が記載されていますが、どの編集済みテンプレートを使うと、このような形で表示されるのか教えていただけないでしょうか?
2022-07-20-11:05 ど素人
[ 返信 ]
Re: aki 様へ
追記:どこをいじったのかはっきり覚えていないですが、他にもデフォルトで表示されるタイトルの背後にある、薄い白色の透過ボックスがあったと思うのですが、それも記述部分を探して、確かHTMLかCSSのいずれかのz-indexを含んだ2行を完全に削除した記憶があります。これを削除した直後、プレビューでは、薄い白色の透過ボックスは見た目上は消えていました。
2022-07-20-11:44 ど素人
[ 返信 ]
aki
Re: ど素人 様へ
こんばんは。お返事有難うございます。

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

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

先ずはテンプレートをダウンロードして適用し、テスト記事を一つ投稿してみて下さい。(内容はテストテストでも構いません。)
テンプレートや記事は後からでも修正・削除が出来ますので、取り敢えず上記を行ってからお返事を頂けますか?
ブログタイトルの中央寄せ等のカスタマイズはその後で行います。
宜しくお願い致します。m(__)m
2022-07-20-22:40 aki
[ 返信 * 編集 ]
Re: aki 様へ
返信有難う御座います。何度も申し訳ないです。
編集前のデフォルトの[home_resp2c-l]を再度、自身のブログのテンプレート一覧に追加し、試しにテスト用に新しく記事を書き、一番下の左に「プレビュー」、右に「記事を保存」のボタンがあり、プレビューを押しましたところ、やはりプレビュー画面では同様にバナー画像というか、デフォルトでタイトルの背景となっている、風景の画像が消えて見えます。記事を保存して、ページを開いて確かめたことはないです。
2022-07-21-10:45 ど素人
[ 返信 ]
Re: aki 様へ
何度も申し訳ないです。
再度、[home_resp2c-l]を自身のテンプレート一覧に追加し、それをブログに適用し、新しく記事を書き、その時に出てくる一番下の左側に「プレビュー」、右側に「記事を保存」と表示されているうち、左のプレビューのボタンを押し、その際に表示される画面をスクリーンショットで撮ってアップロードサイトにアップした際のアドレスを載せてみます。
https://d.kuku.lu/9c6087f37
2022-07-21-10:56 ど素人
[ 返信 ]
No Subject
ブログタイトルの中央寄せは、タイトルの背後の薄い白い透過で帯のように表示されている部分を完全な透過になるようrgba[255,255,255,0]と指定し、タイトル位置をcenterに変更すると、うまくできました。
あとは左メニューの幅は短くすることはデフォルトで270pxになっているものを250pxにするだけで、見た目上は幅だけは短くなっているようですが、それに合わせてバナー画像やタイトル背後の帯などを左に広げるのは、まだ試してみたことはありません。
たぶん、私が最初とその後に投稿しました、配置が変わったりしたというものは、単に違う部分を勝手にいじってしまったせいですが、どこをどう変えたかは削除してしまいましてわかりません。たぶん、何かを100%とかautoに変えたような気がするのですが、そのせいかもしれないです。
2022-07-21-11:08 ど素人
[ 返信 ]
Re: ど素人 様へ
こんにちは。(今忙しいので)取り急ぎコメント致します。

えっと、テンプレートはそのまま弄らないで下さい。何も改変しないで下さい。
前のお返事にも申し上げましたが、素のテンプレートでのデフォルトがトップの画像が無い状態です。なので、プレビューで見た状態で正しいのです。
それをこれからカスタマイズしようという話なので、こちらから方法を掲載するまでは何も行わないで下さい。
改変したものは元に戻して下さい。
重ねて申し上げます。色々先走らず、こちらが指示するまでダウンロードしたテンプレートに「何もしないで下さい。」

宜しくお願い致します。m(__)m
2022-07-21-12:51 aki
[ 返信 * 編集 ]
Re: aki 様へ
すみません、お忙しいところ恐縮です。了解致しました。
2022-07-21-16:57 ど素人
[ 返信 ]
aki
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 」の複製を更に作って行えば失敗した場合でも元に戻せて安心です。

先ずはここまで行ってご確認頂けますか?
2022-07-21-21:52 aki
[ 返信 * 編集 ]
Re: aki 様へ
aki様の指示どおり、初期テンプレートを複製し、それにコピペし、プレビューで試したところ、問題なく表示されています。とてもわかりやすいです、有難う御座います。
https://d.kuku.lu/ed40054c9
2022-07-22-12:08 ど素人
[ 返信 ]
aki
Re: ど素人 様へ
こんにちは。
取り急ぎのお返事ですが、画像を拝見致しますとカスタマイズ用の追加スタイルシート(②の部分)が反映されていません。
②は追加していらっしゃいますか?
若しくは追加する際に他の文字列を入れていませんか?


例:

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

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

全てが反映されましたら、追加したスタイルシート部分を説明致しますのでご連絡下さいませ。m(__)m
2022-07-22-16:24 aki
[ 返信 * 編集 ]
No Subject
すみません、間違えたかもしれません。再度、試してこちらになりました。
https://d.kuku.lu/8b6768d01
2022-07-22-17:22 ど素人
[ 返信 ]
aki
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
2022-07-23-02:36 aki
[ 返信 * 編集 ]
Re: aki 様へ
有難うございます。
各々の記述箇所と変更内容が説明してあり、とてもわかりやすいです。やはり基本的なルールを身に着けてからでないと、思うようにはいかないですね。ここまで時間を割いて下さって、感激です。

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

2022-07-23-14:38 ど素人
[ 返信 ]
aki
Re: ど素人 様へ
こんばんは。お返事有難うございます。

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

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

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

また何かございましたら、どうぞ気兼ね無くお声掛け下さいませ。
今後とも宜しくお願い致します。m(__)m
2022-07-23-19:56 aki
[ 返信 * 編集 ]
Re: aki 様へ
有難うございます、感謝です。私もaki様が作られたような素敵なテンプレートを作れるよう頑張りたいと思います。こちらこそ、今後とも宜しくお願いいたします。
2022-07-24-22:57 ど素人
[ 返信 ]
aki
Re: ど素人 様へ
はい。宜しくお願い致します。(^-^)
2022-07-25-01:37 aki
[ 返信 * 編集 ]