*Essence

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

Top Page › Template › カスタマイズ › ct_responsive のカスタマイズ(トップ画像・背景色変更)
2018-10-28 (Sun)  02:00

ct_responsive のカスタマイズ(トップ画像・背景色変更)

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

/* トップ画像 */
.topimg{
height:0;
padding-top:縦横比の数値%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('アップロードした画像のURL')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}

赤文字の部分は変更する画像の縦横比を計算して数値を入れ、青文字の部分は表示したい画像のアップロード先URLを入れて下さい。

高さを0に指定してpaddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ)÷表示画像の幅(横サイズ)×100
という計算式で求めます。
パーセント指定をすることでブラウザのサイズに合わせて高さが変わるようになり、background-size:contain; で表示領域に画像が全て表示されるようになります。
元画像のサイズによっては、高さ(縦)が高くて記事部分が随分と下がってしまったり、幅(横)が足りなくて画像が引き延ばされて画質が荒くなることが有りますので、色々試して落ち着くサイズを探して下さい。m(__)m

* 画像部分を削除したい時
逆に、トップの画像を無くしたい場合は、スタイルシート編集枠を少し下にスクロールした所に有る
/* トップ画像 */
.topimg{
height:0;
padding-top:22.68%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-122.fc2.com/s/o/r/sorauta1/top-image2.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}

の部分を下記のように変更
.topimg{
margin:0 20px;
padding-top:100px;
}


更に、編集枠を2/3程下にスクロールした所に/* 1カラム */用の箇所が有るので、そこに下記を追加
.topimg{
margin:0;
padding-top:0;
}


これでスッキリ、トップ画像が無くなって整形されます。
不要な場合はお試し下さい。m(__)m

すぐに使えるトップ画像変更CSSを3種、用意致しました。
お気に召すものがございましたらご利用下さい。(Read Moreをクリック)

top-image-s.jpg← クリックすると見本を表示(PCのみ)
CSS枠上部にある
body::before{
background:#d3c7b4 url(https://blog-imgs-122.fc2.com/s/o/r/sorauta1/wgg-st4.png) repeat center;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}
を赤い部分のように変更し、

/* トップ画像 */
.topimg{
height:0;
padding-top:18.00%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-122.fc2.com/s/o/r/sorauta1/top-image1.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}
を赤い部分のように変更して下さい。


top-image3-s.jpg← クリックすると見本を表示(PCのみ)
兼トップページ全文表示見本 (^-^)
CSS枠上部にある
body::before{
background:#b29e85 url(https://blog-imgs-122.fc2.com/s/o/r/sorauta1/wgg-st4.png) repeat center;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}
を赤い部分のように変更し、

/* トップ画像 */
.topimg{
height:0;
padding-top:22.72%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-122.fc2.com/s/o/r/sorauta1/top-image3.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}
を赤い部分のように変更して下さい。


top-image4-s.jpg← クリックすると見本を表示(PCのみ)
CSS枠上部にある
body::before{
background:#cac2a8 url(https://blog-imgs-122.fc2.com/s/o/r/sorauta1/wgg-st4.png) repeat center;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}
を赤い部分のように変更し、

/* トップ画像 */
.topimg{
height:0;
padding-top:26.00%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-123.fc2.com/s/o/r/sorauta1/top-image4.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}
を赤い部分のように変更して下さい。
スポンサーサイト

最終更新日 : 2019-04-09

yasuko 様へ * by aki
yasuko様、お越し頂き有難うございます。
トップの画像も無事に改変できたようで何よりです。(^-^)
背景のカスタマイズは、ct_responsive のカスタマイズとして
https://sorauta1.blog.fc2.com/blog-entry-287.html
こちらのページが有りますが、リピート背景画像では無く大きな画像を背景にする方法も(al_responsive の記事として)掲載しておりますのでご参考に。
https://sorauta1.blog.fc2.com/blog-entry-274.html

ご不明な点はお気軽にお声掛け下さいませ。(^_^)
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

トップの画像変更 * by yasuko
トップの画像変更できました。
ご教授ありがとうございます。
次は背景にチャレンジしてみます。

マリー 様へ * by aki
マリー様、先程拝見させて頂きましたら直ったみたいですね。良かったです♪
ご利用頂きまして、その他不明点・不具合等がございましたら、どうぞお気兼ね無くお声掛け下さいませ。(^_^)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

No Subject * by マリー
メールフォームからのご助言本当に助かりましたorz
感謝の極みに御座います('ω')ノ!
ご指摘があった通りに時間がある時にでも書き換えて使用してみます('ω')!
本当に有難う御座いました(〃▽〃)

いえいえ、こちらこそ(^o^)丿 * by aki
素敵な記事に感謝♪です。
こちらこそ、有難うございました。
(また修正箇所出ましたが…^^;)今後ともよろしくお願い致します。

こちらこそありがとうございました。 * by éMu-te
何から何までついでのようにアレコレと聞いてしまってすみません。
お蔭様でなんとか形になりました。
記事ごとに貼り付けないといけないと勝手に勘違いしていました^^;
貼り付けはテンプレに、記事の登録は解析ページの管理からページ追加でよかったんですね。
最初から公式ヘルプを見ればよかった。。。

ブログの記事は言い足りないくらいです。
ここ数日とても満ち足りた気分です^^
このご縁に感謝です。
この度は本当にありがとうございました。

説明下手なもんでスミマセン…m(__)m * by aki
スマホ版に違うテンプレートをお持ちで、そちらの方が(広告が)気にならないようなら、レスポンシブデザインに拘らず『スマホ版の設定有効』で使って頂いて良いと思いますよ。
PCのデザインを引き継げるとは言え、広告が付くのは必須なので…。
参考に、当方のブログをスマホ(iPhone SE)で表示してみました。(クリックで画像表示)

GoogleChromeで表示
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/se-chrome.jpg
safariで表示
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/se-safari.jpg

使用しているiPhoneSEの画面は4インチと小さいので、随分と広告が大きく表示されます。(^-^;
しかし、広告が表示される状態がデフォルトなのです。(前の広告はもっと酷かったので、これはマシになった方だと思います。)
広告が邪魔で読み難い場合はPC版の画面を表示する…というのは「こうしてね」では無くあくまでも『代案』です。m(__)m

FC2 Analyzerの記述位置ですが、お返事にあった画像位置ではいけません。
せっかく付けたのに申し上げ難いのですが…時間が有る時にでも(出来れば記述した記事全て)外して下さい。
その後に入れた位置は<body>の下なので合っています。
テンプレートのHTMLは、FC2ブログ管理画面左メニュー『テンプレートの設定』の [ テンプレート名 ] のHTML編集、という枠の中です。
ブログを形成するためのタグやスクリプト等がこの枠内に記述されています。
(ブログの整形はその下の枠 スタイルシート、です。)
アクセス解析の設置場所については、
https://help.fc2.com/analysis/manual/Home/secchi.html
こちらに出ているのでご覧下さいませ。(…というか、現在は正しい位置に設置されています。)

先程、解析タグの確認に貴殿ブログへ訪問致しましたら、何やらスゴイお褒めの記事を書いて頂いているのを拝見し、恥ずかしいやら嬉しいやらで赤面ものです。(#^.^#)
数あるテンプレートの中から見つけて使って頂けるだけで有難いのですから…
また、お気付きの点やご質問などございましたら、どうぞ気兼ね無くお声掛け下さいませ。
この度のご縁に感謝しつつ、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m

なんとなく伝わりました! * by éMu-te
私はスマホ版は違うテンプレを適用していまして、PCのテンプレ(今回はakiさんの)で表示されている=PC表示だと思っていましたが、モバイル表示としてこちらのテンプレが表示されていたのですね。

ブログ訪問者がいちいちデスクトップ表示にする操作は手間なので気になっていたのです。
最低限の広告表示は承知の上でしたので問題ないです!
ただ以前はデスクトップ表示の操作をしなくても出てこなかったので今回気になったということでした。

FC2 Analyzerは最近つけ始め
ある程度さかのぼった記事にコードを貼りました。
どこかの記事で冒頭につけないと正確にカウントされないと見たのでそうしたのですが、違ってたのですね^^;

普段は思いついた文章をスマホのアプリから打っていて、最終的にはPCでアップする。またはアップ後修正することが多いです。

こんな感じです。

https://blog-imgs-98.fc2.com/a/c/h/achilles012/20181201135833bc9.png

テンプレの編集時のようなHTMLが表示されていないのでどこに</body>があるかわからないのです。
どこかで切り替えできた記憶があるのですが。。

ん~、説明が難しいのですが… * by aki
スマホ版の設定無効→自動的にPC用の表示、と言うより、FC2で用意されているスマホ用の画面を表示しない、と言った方が良いのかな~。(^^;
実際にスマホ版の表示設定を有効にしてスマホでブログを『モバイル表示』のままで見てみると、PCのデザインとは違う、FC2のモバイル画面で表示されていると思います。
ここを無効にする事で、スマホで表示した際にブラウザが『モバイル表示』している状態でもPCでのデザインで表示される、という事です。
…で、スマホのブラウザを『PC表示』にすると『モバイル表示』で出ていた広告が消える、というだけなんです。(;^_^A …やっぱり説明って難しい。。

広告の表示で消せないものは
【PCで表示されるもの】
*1ヶ月間、更新が無い場合に表示される広告
*固定広告(当方のテンプレートでは一番下段のコピーライト部分)
【スマホで表示されるもの】
*固定広告(下段の固定広告)
この広告を非表示にする術は無料版には有りません。何故なら…FC2の収入源だから。(^-^;
完全に消すには有料会員になるしか無いです。
でもですね、当方が日々スマホで見ている限りでは、同じブログを何度かPC表示設定を繰り返しているとキャッシュされるためなのか、そのままPC表示になって広告出なくなるんですよね。(iPhone iOS12.1のChromeとsafari、SO-01J Android6.0では。)
申し訳無いですが、無料である限りPCでもスマホでも、何処かに広告が出るのはご了承下さいませ。m(__)m

FC2 Analyzerなんですが、最近の更新記事2件にはついて無いですね。
11/22「作品展」以前の記事に付いているようですが、記事を書く時の一番最初にFC2 Analyzerのコード、入れてませんでしたか?
過去記事を随分と遡ってみても、ほぼ全ての記事の冒頭にコードが挿入されています。
(そのために、記事ページを見てみると冒頭部分に大きな余白が出来てしまっております。)
記事の本文を入力する部分にAnalyzerを入れても解析効果が有りません。付けるべき部分は<body>タグ下です。(若しくは</body>の上か。)
言ってる意味が分からない^^;…という場合は、記事をどの画面(スマホ?PC?)でどんな風に入力しているか・打ち込む際に何かしらのコードを入れていたかどうか、等を教えて下さい。m(__)m

重ね重ねありがとうございます。。。 * by éMu-te
もはや先生のようになっていますね^^
わざわざ確認までしていただきありがとうございます!

スマホ版の設定は無効にはしていましたが、スマホからの操作も必要なのですね。スマホ版を無効にしていればスマホで開いたときは自動的にPC用の表示になるものだと思ってました。
毎回、デスクトップ表示の操作をしないと広告は消えないのでしょうか?

FC2 Analyzerに関しては記事内容はHTML編集をしておらず、ただ文字を打ち込むだけの作成の仕方をしています。
記事のHTMLを表示させるのはどうすればいいのでしょうか?
今後もそこは変えるつもりはないのですが、
その際は<body>タグなどの位置がわかりませんので、どこに挿入すればいいのでしょう。。?

修正のお願い * by aki
無事にトップ画像が表示出来て何よりです。が、ひとつ修正して頂きたい箇所が出来ました。
(貴殿ブログへ訪問したら、記事の上が妙に空いているのでHTMLを拝見致しました。m(__)m)
『FC2 Analyzer』を追加されたと思いますが、発行されたHTMLタグを記述する場所が違います。
FC2のアクセス解析を付ける場所は<body>の下です。<div class="con_body ">の下では有りません。^^;
<body>タグは、編集枠の一番上から21行目に有ります。この<body>とその次の<div id="wrapper">の間に記述して下さい。

スマホでの表示ですが、管理画面での設定はお済みですか?
FC2ブログは、PC・ケータイ・スマホ それぞれでテンプレートが違います。
この度の『レスポンシブテンプレート』は、PCとスマホ(他padとかも)を一つのHTMLで表示させる事が出来ますので、スマホ版の表示を無効にする必要が有ります。

★「スマートフォン版の表示設定」を無効。
管理画面左の『環境設定』→『ブログの設定』→『スマートフォン版の表示設定』を無効にして更新。

これを済ませた後にスマホで表示した際に出る広告は、スマホでの設定をPCにして下さい。
スマホでのブラウザがGoogleChromeの場合は、表示した画面の一番下に点が3つ・・・のメニューが有るので、そこの『PC版サイトをリクエスト』で再表示して下さい。(それでも出るようならもう一回再読み込みして下さい。)
iPhoneのsafariも同様に、ブラウザ下段のメニューを開いて『デスクトップ用サイトを表示』をタップして表示し直して下さい。

ブログの広告は、更新をサボっても(^^;人の事言えない…)広告が出るまでは1ヶ月の猶予が有ります。
これはスマホの下段広告とは違って、記事更新すると消えます。
まぁ、月一更新なら出来ますよ。当方はそんな感じでゆるゆると10年超、やってますから。(;´∀`)
記事の更新は頑張らずに自分のペースで楽しく♪
是非、長く使ってやって下さい。(^-^)

やっとできました! * by éMu-te
何度も何度もありがとうございました。
やはりどこか誤って消してしまったみたいでした。
おかげさまでトップ画像も変わったし、初コメントも体験できましたし、本当に為になりました。
コメント返信に気づくようにわざわざメールまでいただきまして、お気遣い感謝します。
この感動を近々記事にさせていただきます^^


このテンプレの雰囲気が好きなのでスマホでもPC表示させたいのですが、最近更新をサボっていたら広告がでるようになってしまったんですが、オーバーレイ広告?は消せないんでしょうかね?

Re: No Subject * by aki
メールやコメント頂き有難うございます。(^-^)

では、こちらでお返事書かせて頂きます。

> まずブログプロフィールのHPリンクについては修正をしました。
…そうですね。最後には『指差し確認』でチェックしましょう。ってのは冗談ですが、そこから来る人もいるかも知れない事も忘れずに。

> そしてコメント制限に関しては~~
…スパムチェックは、英数字50%位で良いかな~と思います。当方のコメントのようにHTMLやCSSを書いて来る人はそんなに居ないと思うので。URLも含めて、様子を見て調整して下さい。
あからさまにスパムなら「管理者権限で削除します。」とでもコメント残して削除したら良いです。

> 教えていただいた通りFC2のファイルアップデートにてアップしたURLを使用しましたが変わりません。
…当方のテンプレ見本に貴殿のupしたURL入れてみましたが、表示されますよ…?
記述が間違ってませんか? CSSの「'や;」の記号を間違って消してしまったとか。
どちらにしても、画像サイズが(寸法だけでは無く容量も)大き過ぎますので、当方で作ってみました。
画像のサイズは、寸法や画像データの容量が大きいと表示が遅くなってしまいますので、出来る限り小さくしましょう。

元画像:https://blog-imgs-98.fc2.com/a/c/h/achilles012/IMG_1537_convert_20181128104028.jpg
サイズ:1500px×838px 243KB

サンプル1:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te.jpg
サイズ:1000px×559px 104KB(元サイズ縦横比そのままで横を1000pxにしたもの)

サンプル2:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te450.jpg
サイズ:1000px×450px 89.7KB(横1000pxで高さを450pxにカットしたもの)

サンプル3:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te400.jpg
サイズ:1000px×400px 81.8KB(横1000pxで高さを400pxにカットしたもの)

サンプル4:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te350.jpg
サイズ:1000px×350px 73KB(横1000pxで高さを350pxにカットしたもの)

サンプル5:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te300.jpg
サイズ:1000px×300px 63.3KB(横1000pxで高さを300pxにカットしたもの)

サンプル6:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te250.jpg
サイズ:1000px×250px 50.7KB(横1000pxで高さを250pxにカットしたもの)

サンプルのURLをクリックすると画像が表示されるので、気に入ったものが有りましたらそのURLをスタイルシート(CSS)に貼って下さい。

/* トップ画像 */
.topimg{
height:0;
padding-top:22.68%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-122.fc2.com/s/o/r/sorauta1/top-image2.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}

画像リンクの部分にサンプルのURLを貼って、青文字の部分の%は縦サイズ÷10 要するに450pxなら45%、350pxなら35% というように変更して下さい。
画像が無事に表示され、タイトル文字後ろの白い半透明部分が薄くて文字が読み辛いようであれば、その下の

/* ヘッダー部分 */
header {
background-color:rgba(255,255,255,0.5); /* ブログタイトルの透過背面 */
width:1140px;
height:80px;
position:absolute;
margin-top:10px;
}

赤文字部分の数値を増やして下さい。0~1.0で1.0が不透明な白です。


> 基本的にコメントをいただいた場合の返信はそのコメント欄にするのが一般的なのでしょうか?
…自分のブログについたコメントであれば自分のブログにコメントします。勿論、コメントの付いた記事に。
先方に伺って書くのは、先方のブログに対してのコメントです。若しくは用事が有る時とか。
この度の色んな行き来は、当方の書き込みたいコメントが文字数多過ぎて^^;+英数字+URLなもので撥ねられてしまった事が原因。故にそんなに気にせず普通のマナー感覚で問題無いです。
非公開コメントへの返信なら(身バレしないように)引用せず粛々とコメントし、普通のコメントなら引用が必要な場合にのみ元の文を載せて、そうでなければ普通にブログから書き込む。。その都度管理画面に来るのも面倒ですから。
ただ、コメントが付いたかどうかは気にして下さい。非公開コメだと返信するまでブログにも表示されませんので。(これは管理画面からでないと見れませんし、コメント表示の仕方次第で返信しても見えない設定も有ります。)
コメントの長短や返信の回数等も気にしないで。長~いご意見・ご感想、沢山のやり取りは嬉しいです。
あ、それは私が ですが。(^-^;(他の方は分かりません…)

> 例えば最初にいただいたコメント内容を公開させてもらってもよいでしょうか?
…一番初めに貴殿ブログに非公開で書き込んだのは、勝手にやって来てお節介かなぁ~と思っての事なので、ご迷惑になってなければ公開しても問題無いです。(^-^)

またご不明な点などがございましたら、何なりとご相談下さいませ。
当方が出来得る限りであればお手伝い致します。
拙いテンプレートですが、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m

管理人のみ閲覧できます * by -

内緒 様へ * by aki
貴殿ブログにてコメントしようとしましたが撥ねられてしまいました。^^;
メールを送っておりますのでご参照下さいませ。

管理人のみ閲覧できます * by -

éMu-te 様へ * by aki
éMu-te 様
わざわざこちらへの書き込み、有難うございます。
トップの画像ですが、FC2にアップロードして下さい。でないと表示されません。
貴殿のスタイルシートを拝見すると、
/* トップ画像 */ 以下の
background:url('~~ に、記述されているのは他サイトの画像URLですかね。長~いURL、これでは表示されません。
FC2ブログの管理画面『ファイルアップロード』で画像をアップロードすると、画像名・画像サイズ、その下に枠に入ったURLが表示されます。
そのURLをコピーしてスタイルシートの上記の部分に貼り付けて下さい。すると、画像が表示されるはずです。(^-^)

常時SSL化した際、画像が表示されない・ページが正しく表示されない・CSSが適用されていない、等の現象が起こる場合は、混在コンテンツが原因であると思われます。
要するに、ページ内にSSLで保護されたコンテンツと保護されていないものが混在するため、表示が制限された状態になります。(https: とhttp: の混在)
正しく表示させるには、すべてのコンテンツをSSLで保護された状態にする必要が有るので、一度FC2にアップロードしてからスタイルシートやプラグインに https:のURLを記述して下さい。

それと、貴殿ブログのコメント欄ですが、実は当方も何度か撥ねられてしまいました。(;´∀`)
本当はもっと文章が長かったんですけどね。(お礼の言葉とか…)
何かコメント設定で制限してるのではないかと思われます。

管理ページ→ブログの設定→コメント設定

ここで、コメントの文字数制限・英数字フィルタ・URLフィルタ、とか制限してませんか?多分私はこの辺りで引っ掛かったのではと推測します。(^-^;
一度、見直して頂けませんか?

追記:貴殿ブログにコメントを入力してみましたが、URL(英数字・URL)記述で跳ねられました。^^;
え~っとですね、もう一点変更して頂きたい所が有ります。
ブログ左メニューの『プロフィール』、ホームページのリンクですが、クリックしてもブログに飛んでしまいます。
環境設定→プロフィール、で記述しているタグを、下記のように変更して下さい。
<a href="www.~~~" target="_blank"> ホームページ </a>
これを↓こんな風に
<a href="https://www.~~~/" target="_blank"> ホームページ </a>
これで貴殿サイトに飛べると思います。(^^)

また何かご不明な点などございましたら、何なりとお声掛け下さいませ。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

No Subject * by éMu-te
先ほどテンプレのトップ画像のアドバイスをいただいたものです。
ご丁寧にありがとうございます。
素敵なテンプレでしたので利用させていただきます!
トップの画像ですが消したのではなく差し替えたつもりだったのですが消えてしまってどうしたらよいかと調べているところでした^^;
実は以前利用していたテンプレートを複製もせず編集してしまい、httpsのURLにしたくSLL?を有効にしたらなぜか背景以外が表示されずいっそのことテンプレごと変えてしまえ!!と今日利用させていただきました。
実はコメントをいただいたのも初めてで対応に焦っています(笑)
コメントに返信してみましたが何やら違いそうなのでこちらにもコメントさせていただきました。
akiさんのブログを参考にさせていただいたのですが何が違っていたのか。。。
仕事の合間にしているので今まで放置していました。
こんなご丁寧な対応とブログを通じて初めてコミュニケーションが取れたことにとても感動しています。
ありがとうございます。

Wizard 様へ * by aki
Wizard 様、初めまして。
拙いBlogにご訪問頂き、誠に有難うございます。(^-^)

相互リンクのお誘い、早速 [magic] をサイドメニューに貼らせて頂きました。
もう一つの方は、宜しければ弊サイト [web material *Essence] のAuto Links のページにご自身で登録をお願い致します。m(__)m
…というのも、只今弊素材サイトでは『HP素材・HP作成支援サイト』の相互リンクのみ、且つサイトバナー及び説明文を送信して頂いたサイトに限定して掲載しております。
お手数お掛けして申し訳ありません。

更新無精ですが、宜しくお付き合い下さいます様宜しくお願い致します。m(__)m

いつもたのしく拝見しております! * by Wizard
いつもたのしく拝見しております!

いつもたのしく拝見しております^^
僕もテンプレートやプラグインをつくっています!
良かったら、相互リンクを
していただけないでしょうか^^?
こちらのブログからは、
リンクさせていただきました!

http://magiceffect.blog.fc2.com/
https://magicpark.web.fc2.com/

Comment




ご質問の際は確認用にURLをお願い致します。




管理者にだけ表示を許可

yasuko 様へ

yasuko様、お越し頂き有難うございます。
トップの画像も無事に改変できたようで何よりです。(^-^)
背景のカスタマイズは、ct_responsive のカスタマイズとして
https://sorauta1.blog.fc2.com/blog-entry-287.html
こちらのページが有りますが、リピート背景画像では無く大きな画像を背景にする方法も(al_responsive の記事として)掲載しておりますのでご参考に。
https://sorauta1.blog.fc2.com/blog-entry-274.html

ご不明な点はお気軽にお声掛け下さいませ。(^_^)
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-04-03-03:11 * aki [ 編集 ]

トップの画像変更

トップの画像変更できました。
ご教授ありがとうございます。
次は背景にチャレンジしてみます。
2019-04-02-18:06 * yasuko [ 編集 ]

マリー 様へ

マリー様、先程拝見させて頂きましたら直ったみたいですね。良かったです♪
ご利用頂きまして、その他不明点・不具合等がございましたら、どうぞお気兼ね無くお声掛け下さいませ。(^_^)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-04-02-00:05 * aki [ 編集 ]

No Subject

メールフォームからのご助言本当に助かりましたorz
感謝の極みに御座います('ω')ノ!
ご指摘があった通りに時間がある時にでも書き換えて使用してみます('ω')!
本当に有難う御座いました(〃▽〃)
2019-04-01-18:47 * マリー [ 編集 ]

いえいえ、こちらこそ(^o^)丿

素敵な記事に感謝♪です。
こちらこそ、有難うございました。
(また修正箇所出ましたが…^^;)今後ともよろしくお願い致します。
2018-12-02-23:50 * aki [ 編集 ]

こちらこそありがとうございました。

何から何までついでのようにアレコレと聞いてしまってすみません。
お蔭様でなんとか形になりました。
記事ごとに貼り付けないといけないと勝手に勘違いしていました^^;
貼り付けはテンプレに、記事の登録は解析ページの管理からページ追加でよかったんですね。
最初から公式ヘルプを見ればよかった。。。

ブログの記事は言い足りないくらいです。
ここ数日とても満ち足りた気分です^^
このご縁に感謝です。
この度は本当にありがとうございました。
2018-12-02-10:21 * éMu-te [ 編集 ]

説明下手なもんでスミマセン…m(__)m

スマホ版に違うテンプレートをお持ちで、そちらの方が(広告が)気にならないようなら、レスポンシブデザインに拘らず『スマホ版の設定有効』で使って頂いて良いと思いますよ。
PCのデザインを引き継げるとは言え、広告が付くのは必須なので…。
参考に、当方のブログをスマホ(iPhone SE)で表示してみました。(クリックで画像表示)

GoogleChromeで表示
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/se-chrome.jpg
safariで表示
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/se-safari.jpg

使用しているiPhoneSEの画面は4インチと小さいので、随分と広告が大きく表示されます。(^-^;
しかし、広告が表示される状態がデフォルトなのです。(前の広告はもっと酷かったので、これはマシになった方だと思います。)
広告が邪魔で読み難い場合はPC版の画面を表示する…というのは「こうしてね」では無くあくまでも『代案』です。m(__)m

FC2 Analyzerの記述位置ですが、お返事にあった画像位置ではいけません。
せっかく付けたのに申し上げ難いのですが…時間が有る時にでも(出来れば記述した記事全て)外して下さい。
その後に入れた位置は<body>の下なので合っています。
テンプレートのHTMLは、FC2ブログ管理画面左メニュー『テンプレートの設定』の [ テンプレート名 ] のHTML編集、という枠の中です。
ブログを形成するためのタグやスクリプト等がこの枠内に記述されています。
(ブログの整形はその下の枠 スタイルシート、です。)
アクセス解析の設置場所については、
https://help.fc2.com/analysis/manual/Home/secchi.html
こちらに出ているのでご覧下さいませ。(…というか、現在は正しい位置に設置されています。)

先程、解析タグの確認に貴殿ブログへ訪問致しましたら、何やらスゴイお褒めの記事を書いて頂いているのを拝見し、恥ずかしいやら嬉しいやらで赤面ものです。(#^.^#)
数あるテンプレートの中から見つけて使って頂けるだけで有難いのですから…
また、お気付きの点やご質問などございましたら、どうぞ気兼ね無くお声掛け下さいませ。
この度のご縁に感謝しつつ、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m
2018-12-02-01:54 * aki [ 編集 ]

なんとなく伝わりました!

私はスマホ版は違うテンプレを適用していまして、PCのテンプレ(今回はakiさんの)で表示されている=PC表示だと思っていましたが、モバイル表示としてこちらのテンプレが表示されていたのですね。

ブログ訪問者がいちいちデスクトップ表示にする操作は手間なので気になっていたのです。
最低限の広告表示は承知の上でしたので問題ないです!
ただ以前はデスクトップ表示の操作をしなくても出てこなかったので今回気になったということでした。

FC2 Analyzerは最近つけ始め
ある程度さかのぼった記事にコードを貼りました。
どこかの記事で冒頭につけないと正確にカウントされないと見たのでそうしたのですが、違ってたのですね^^;

普段は思いついた文章をスマホのアプリから打っていて、最終的にはPCでアップする。またはアップ後修正することが多いです。

こんな感じです。

https://blog-imgs-98.fc2.com/a/c/h/achilles012/20181201135833bc9.png

テンプレの編集時のようなHTMLが表示されていないのでどこに</body>があるかわからないのです。
どこかで切り替えできた記憶があるのですが。。
2018-12-01-14:04 * éMu-te [ 編集 ]

ん~、説明が難しいのですが…

スマホ版の設定無効→自動的にPC用の表示、と言うより、FC2で用意されているスマホ用の画面を表示しない、と言った方が良いのかな~。(^^;
実際にスマホ版の表示設定を有効にしてスマホでブログを『モバイル表示』のままで見てみると、PCのデザインとは違う、FC2のモバイル画面で表示されていると思います。
ここを無効にする事で、スマホで表示した際にブラウザが『モバイル表示』している状態でもPCでのデザインで表示される、という事です。
…で、スマホのブラウザを『PC表示』にすると『モバイル表示』で出ていた広告が消える、というだけなんです。(;^_^A …やっぱり説明って難しい。。

広告の表示で消せないものは
【PCで表示されるもの】
*1ヶ月間、更新が無い場合に表示される広告
*固定広告(当方のテンプレートでは一番下段のコピーライト部分)
【スマホで表示されるもの】
*固定広告(下段の固定広告)
この広告を非表示にする術は無料版には有りません。何故なら…FC2の収入源だから。(^-^;
完全に消すには有料会員になるしか無いです。
でもですね、当方が日々スマホで見ている限りでは、同じブログを何度かPC表示設定を繰り返しているとキャッシュされるためなのか、そのままPC表示になって広告出なくなるんですよね。(iPhone iOS12.1のChromeとsafari、SO-01J Android6.0では。)
申し訳無いですが、無料である限りPCでもスマホでも、何処かに広告が出るのはご了承下さいませ。m(__)m

FC2 Analyzerなんですが、最近の更新記事2件にはついて無いですね。
11/22「作品展」以前の記事に付いているようですが、記事を書く時の一番最初にFC2 Analyzerのコード、入れてませんでしたか?
過去記事を随分と遡ってみても、ほぼ全ての記事の冒頭にコードが挿入されています。
(そのために、記事ページを見てみると冒頭部分に大きな余白が出来てしまっております。)
記事の本文を入力する部分にAnalyzerを入れても解析効果が有りません。付けるべき部分は<body>タグ下です。(若しくは</body>の上か。)
言ってる意味が分からない^^;…という場合は、記事をどの画面(スマホ?PC?)でどんな風に入力しているか・打ち込む際に何かしらのコードを入れていたかどうか、等を教えて下さい。m(__)m
2018-11-30-23:47 * aki [ 編集 ]

重ね重ねありがとうございます。。。

もはや先生のようになっていますね^^
わざわざ確認までしていただきありがとうございます!

スマホ版の設定は無効にはしていましたが、スマホからの操作も必要なのですね。スマホ版を無効にしていればスマホで開いたときは自動的にPC用の表示になるものだと思ってました。
毎回、デスクトップ表示の操作をしないと広告は消えないのでしょうか?

FC2 Analyzerに関しては記事内容はHTML編集をしておらず、ただ文字を打ち込むだけの作成の仕方をしています。
記事のHTMLを表示させるのはどうすればいいのでしょうか?
今後もそこは変えるつもりはないのですが、
その際は<body>タグなどの位置がわかりませんので、どこに挿入すればいいのでしょう。。?
2018-11-30-09:46 * éMu-te [ 編集 ]

修正のお願い

無事にトップ画像が表示出来て何よりです。が、ひとつ修正して頂きたい箇所が出来ました。
(貴殿ブログへ訪問したら、記事の上が妙に空いているのでHTMLを拝見致しました。m(__)m)
『FC2 Analyzer』を追加されたと思いますが、発行されたHTMLタグを記述する場所が違います。
FC2のアクセス解析を付ける場所は<body>の下です。<div class="con_body ">の下では有りません。^^;
<body>タグは、編集枠の一番上から21行目に有ります。この<body>とその次の<div id="wrapper">の間に記述して下さい。

スマホでの表示ですが、管理画面での設定はお済みですか?
FC2ブログは、PC・ケータイ・スマホ それぞれでテンプレートが違います。
この度の『レスポンシブテンプレート』は、PCとスマホ(他padとかも)を一つのHTMLで表示させる事が出来ますので、スマホ版の表示を無効にする必要が有ります。

★「スマートフォン版の表示設定」を無効。
管理画面左の『環境設定』→『ブログの設定』→『スマートフォン版の表示設定』を無効にして更新。

これを済ませた後にスマホで表示した際に出る広告は、スマホでの設定をPCにして下さい。
スマホでのブラウザがGoogleChromeの場合は、表示した画面の一番下に点が3つ・・・のメニューが有るので、そこの『PC版サイトをリクエスト』で再表示して下さい。(それでも出るようならもう一回再読み込みして下さい。)
iPhoneのsafariも同様に、ブラウザ下段のメニューを開いて『デスクトップ用サイトを表示』をタップして表示し直して下さい。

ブログの広告は、更新をサボっても(^^;人の事言えない…)広告が出るまでは1ヶ月の猶予が有ります。
これはスマホの下段広告とは違って、記事更新すると消えます。
まぁ、月一更新なら出来ますよ。当方はそんな感じでゆるゆると10年超、やってますから。(;´∀`)
記事の更新は頑張らずに自分のペースで楽しく♪
是非、長く使ってやって下さい。(^-^)
2018-11-29-22:16 * aki [ 編集 ]

やっとできました!

何度も何度もありがとうございました。
やはりどこか誤って消してしまったみたいでした。
おかげさまでトップ画像も変わったし、初コメントも体験できましたし、本当に為になりました。
コメント返信に気づくようにわざわざメールまでいただきまして、お気遣い感謝します。
この感動を近々記事にさせていただきます^^


このテンプレの雰囲気が好きなのでスマホでもPC表示させたいのですが、最近更新をサボっていたら広告がでるようになってしまったんですが、オーバーレイ広告?は消せないんでしょうかね?
2018-11-29-15:27 * éMu-te [ 編集 ]

Re: No Subject

メールやコメント頂き有難うございます。(^-^)

では、こちらでお返事書かせて頂きます。

> まずブログプロフィールのHPリンクについては修正をしました。
…そうですね。最後には『指差し確認』でチェックしましょう。ってのは冗談ですが、そこから来る人もいるかも知れない事も忘れずに。

> そしてコメント制限に関しては~~
…スパムチェックは、英数字50%位で良いかな~と思います。当方のコメントのようにHTMLやCSSを書いて来る人はそんなに居ないと思うので。URLも含めて、様子を見て調整して下さい。
あからさまにスパムなら「管理者権限で削除します。」とでもコメント残して削除したら良いです。

> 教えていただいた通りFC2のファイルアップデートにてアップしたURLを使用しましたが変わりません。
…当方のテンプレ見本に貴殿のupしたURL入れてみましたが、表示されますよ…?
記述が間違ってませんか? CSSの「'や;」の記号を間違って消してしまったとか。
どちらにしても、画像サイズが(寸法だけでは無く容量も)大き過ぎますので、当方で作ってみました。
画像のサイズは、寸法や画像データの容量が大きいと表示が遅くなってしまいますので、出来る限り小さくしましょう。

元画像:https://blog-imgs-98.fc2.com/a/c/h/achilles012/IMG_1537_convert_20181128104028.jpg
サイズ:1500px×838px 243KB

サンプル1:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te.jpg
サイズ:1000px×559px 104KB(元サイズ縦横比そのままで横を1000pxにしたもの)

サンプル2:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te450.jpg
サイズ:1000px×450px 89.7KB(横1000pxで高さを450pxにカットしたもの)

サンプル3:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te400.jpg
サイズ:1000px×400px 81.8KB(横1000pxで高さを400pxにカットしたもの)

サンプル4:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te350.jpg
サイズ:1000px×350px 73KB(横1000pxで高さを350pxにカットしたもの)

サンプル5:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te300.jpg
サイズ:1000px×300px 63.3KB(横1000pxで高さを300pxにカットしたもの)

サンプル6:https://blog-imgs-123.fc2.com/s/o/r/sorauta1/emu-te250.jpg
サイズ:1000px×250px 50.7KB(横1000pxで高さを250pxにカットしたもの)

サンプルのURLをクリックすると画像が表示されるので、気に入ったものが有りましたらそのURLをスタイルシート(CSS)に貼って下さい。

/* トップ画像 */
.topimg{
height:0;
padding-top:22.68%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-122.fc2.com/s/o/r/sorauta1/top-image2.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}

画像リンクの部分にサンプルのURLを貼って、青文字の部分の%は縦サイズ÷10 要するに450pxなら45%、350pxなら35% というように変更して下さい。
画像が無事に表示され、タイトル文字後ろの白い半透明部分が薄くて文字が読み辛いようであれば、その下の

/* ヘッダー部分 */
header {
background-color:rgba(255,255,255,0.5); /* ブログタイトルの透過背面 */
width:1140px;
height:80px;
position:absolute;
margin-top:10px;
}

赤文字部分の数値を増やして下さい。0~1.0で1.0が不透明な白です。


> 基本的にコメントをいただいた場合の返信はそのコメント欄にするのが一般的なのでしょうか?
…自分のブログについたコメントであれば自分のブログにコメントします。勿論、コメントの付いた記事に。
先方に伺って書くのは、先方のブログに対してのコメントです。若しくは用事が有る時とか。
この度の色んな行き来は、当方の書き込みたいコメントが文字数多過ぎて^^;+英数字+URLなもので撥ねられてしまった事が原因。故にそんなに気にせず普通のマナー感覚で問題無いです。
非公開コメントへの返信なら(身バレしないように)引用せず粛々とコメントし、普通のコメントなら引用が必要な場合にのみ元の文を載せて、そうでなければ普通にブログから書き込む。。その都度管理画面に来るのも面倒ですから。
ただ、コメントが付いたかどうかは気にして下さい。非公開コメだと返信するまでブログにも表示されませんので。(これは管理画面からでないと見れませんし、コメント表示の仕方次第で返信しても見えない設定も有ります。)
コメントの長短や返信の回数等も気にしないで。長~いご意見・ご感想、沢山のやり取りは嬉しいです。
あ、それは私が ですが。(^-^;(他の方は分かりません…)

> 例えば最初にいただいたコメント内容を公開させてもらってもよいでしょうか?
…一番初めに貴殿ブログに非公開で書き込んだのは、勝手にやって来てお節介かなぁ~と思っての事なので、ご迷惑になってなければ公開しても問題無いです。(^-^)

またご不明な点などがございましたら、何なりとご相談下さいませ。
当方が出来得る限りであればお手伝い致します。
拙いテンプレートですが、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m
2018-11-29-03:25 * aki [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2018-11-28-12:36 * - [ 編集 ]

内緒 様へ

貴殿ブログにてコメントしようとしましたが撥ねられてしまいました。^^;
メールを送っておりますのでご参照下さいませ。
2018-11-22-12:57 * aki [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2018-11-22-10:20 * - [ 編集 ]

éMu-te 様へ

éMu-te 様
わざわざこちらへの書き込み、有難うございます。
トップの画像ですが、FC2にアップロードして下さい。でないと表示されません。
貴殿のスタイルシートを拝見すると、
/* トップ画像 */ 以下の
background:url('~~ に、記述されているのは他サイトの画像URLですかね。長~いURL、これでは表示されません。
FC2ブログの管理画面『ファイルアップロード』で画像をアップロードすると、画像名・画像サイズ、その下に枠に入ったURLが表示されます。
そのURLをコピーしてスタイルシートの上記の部分に貼り付けて下さい。すると、画像が表示されるはずです。(^-^)

常時SSL化した際、画像が表示されない・ページが正しく表示されない・CSSが適用されていない、等の現象が起こる場合は、混在コンテンツが原因であると思われます。
要するに、ページ内にSSLで保護されたコンテンツと保護されていないものが混在するため、表示が制限された状態になります。(https: とhttp: の混在)
正しく表示させるには、すべてのコンテンツをSSLで保護された状態にする必要が有るので、一度FC2にアップロードしてからスタイルシートやプラグインに https:のURLを記述して下さい。

それと、貴殿ブログのコメント欄ですが、実は当方も何度か撥ねられてしまいました。(;´∀`)
本当はもっと文章が長かったんですけどね。(お礼の言葉とか…)
何かコメント設定で制限してるのではないかと思われます。

管理ページ→ブログの設定→コメント設定

ここで、コメントの文字数制限・英数字フィルタ・URLフィルタ、とか制限してませんか?多分私はこの辺りで引っ掛かったのではと推測します。(^-^;
一度、見直して頂けませんか?

追記:貴殿ブログにコメントを入力してみましたが、URL(英数字・URL)記述で跳ねられました。^^;
え~っとですね、もう一点変更して頂きたい所が有ります。
ブログ左メニューの『プロフィール』、ホームページのリンクですが、クリックしてもブログに飛んでしまいます。
環境設定→プロフィール、で記述しているタグを、下記のように変更して下さい。
<a href="www.~~~" target="_blank"> ホームページ </a>
これを↓こんな風に
<a href="https://www.~~~/" target="_blank"> ホームページ </a>
これで貴殿サイトに飛べると思います。(^^)

また何かご不明な点などございましたら、何なりとお声掛け下さいませ。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2018-11-20-21:58 * aki [ 編集 ]

No Subject

先ほどテンプレのトップ画像のアドバイスをいただいたものです。
ご丁寧にありがとうございます。
素敵なテンプレでしたので利用させていただきます!
トップの画像ですが消したのではなく差し替えたつもりだったのですが消えてしまってどうしたらよいかと調べているところでした^^;
実は以前利用していたテンプレートを複製もせず編集してしまい、httpsのURLにしたくSLL?を有効にしたらなぜか背景以外が表示されずいっそのことテンプレごと変えてしまえ!!と今日利用させていただきました。
実はコメントをいただいたのも初めてで対応に焦っています(笑)
コメントに返信してみましたが何やら違いそうなのでこちらにもコメントさせていただきました。
akiさんのブログを参考にさせていただいたのですが何が違っていたのか。。。
仕事の合間にしているので今まで放置していました。
こんなご丁寧な対応とブログを通じて初めてコミュニケーションが取れたことにとても感動しています。
ありがとうございます。
2018-11-20-18:08 * éMu-te [ 編集 ]

Wizard 様へ

Wizard 様、初めまして。
拙いBlogにご訪問頂き、誠に有難うございます。(^-^)

相互リンクのお誘い、早速 [magic] をサイドメニューに貼らせて頂きました。
もう一つの方は、宜しければ弊サイト [web material *Essence] のAuto Links のページにご自身で登録をお願い致します。m(__)m
…というのも、只今弊素材サイトでは『HP素材・HP作成支援サイト』の相互リンクのみ、且つサイトバナー及び説明文を送信して頂いたサイトに限定して掲載しております。
お手数お掛けして申し訳ありません。

更新無精ですが、宜しくお付き合い下さいます様宜しくお願い致します。m(__)m
2018-10-30-01:59 * aki [ 編集 ]

いつもたのしく拝見しております!

いつもたのしく拝見しております!

いつもたのしく拝見しております^^
僕もテンプレートやプラグインをつくっています!
良かったら、相互リンクを
していただけないでしょうか^^?
こちらのブログからは、
リンクさせていただきました!

http://magiceffect.blog.fc2.com/
https://magicpark.web.fc2.com/
2018-10-29-19:49 * Wizard [ 編集 ]