Empty-street - FC2ブログテンプレート

グローバル・ナビゲーションについてのご質問

初めまして。
「Empty-street」を使用させていただいているBItouと申します。
表題の件について１点ご質問させていただきたいと思いコメント欄から失礼します。

カスタマイズ初心者ながら、グローバル・ナビのリンク先を変更したくて
次のようにHTMLを変更したところ、ナビ上の「カテゴリ」の右側に大きな余白が出来てしまいました。
（スタイルシートは変更していません。）

　<li><a href="<%url>">Home</a>
　<li><label for="category-modal-trigger" id="category-modal-trigger-label">カテゴリ</label>
　<li><a href="<%url>blog-category-1.html">店舗案内</a>
　<li><a href="<%url>blog-category-25.html">通信販売</a>
　<li><a href="<%url>blog-category-28.html">買取り</a>
<!-- <li class="pc-hide"><a href="<%url>?sp">Mobile</a> 注)スマホ版誘導ボタン必要な方コメント削除 -->
<li class="sp-hide"><a href="<%url>?xml" target="_blank">RSS</a>
<li class="expand-form">
<form id="search-form" action="./" method="get">
<input id="search-text" type="text" name="q" placeholder="キーワードを入力してください" value="">
<input id="search-submit" type="submit">
<span id="search-btn">検索</span>

初心者なりに色々と試してみたのですが修正ができません。
お手すきの時で結構ですので、どこを修正すれば良いか、
教えていただけきたいのですが・・・

お手数おかけいたしますがどうぞよろしくお願いいたします。

To Bitouさん

お返事大変遅くなりました (*_ _)

> ナビ上の「カテゴリ」の右側に大きな余白が出来てしまいました〜

これはですね、実際はそういうことではありません。

X カテゴリの右横に空白
✔ 追加要素のテキストリンクに空白ができて縦幅が大きくなっている

後者が実際で、その影響をカテゴリのリンクが受けている状態です。
推測するに

● カスタマイズをwebページ上で行った(html専用エディターに内容を移して修正を行っていない。管理画面のまま行った。)
● ソース内で<li>の行(各li要素)の文頭を揃えるために半角スペースを利用した。

後者に該当しませんでしょうか。
htmlソースはインデントなどが用いられていますが、それは「半角スペース」とは全く別のものです。
ソース内でBitouさんがspaceキーを利用して文頭の調節を行ったのであれば、それはインデントではなく「空白の挿入」になります。
そしてナビゲーションの縦幅も狂いが生じ、正しい状態よりも大きくなっています。
デフォルト状態のEmpty-streetの、ナビゲーションとスライダーとの距離は現在のBitouさんのものよりも狭いはずですので比較してみてくださいね。

上記に該当するのであれば修正方法は、既にカスタマイズされていますので再DLが困難ということであれば、
追加したリンクを一度削除してください。
そしてあらためて、追加したい場所の前要素(今回の場合は「カテゴリ」)の後ろで一度改段落(Enter/ Returnキー押下)し、前要素(カテゴリ)と次要素(RSS)と文頭を揃えようとはせずにすぐに内容を書きます。
ソースの見た目がガクガクとした感じにはなりますが、揃えたい場合にはhtml専用エディターを利用してください。
管理画面での半角スペース利用による文頭揃えは厳禁です。

スクショ ↓

現在の状態(推測)
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture9287493th.jpg

正しい状態
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture92847923th.jpg

li要素というのは終了タグ</li>を書いてしまうと横並びにした時に隙間ができてしまいます。
隙間ができると計算が合わなくなりますので、終了タグを「書かない」方法を取っています(li要素終了タグの省略は文法的に許可されています)
終了タグはブラウザが自動補完しますが、その位置というのは次のli要素の「直前」ですので、文頭揃えの空白スペースが入っている場合、その空白は自身の「前」にある要素の「後ろ」にくっつくことになります。
わかりますかね ^^;
「カテゴリの右側が広くなっちゃった」の原因は、追加したli要素の文頭に入れた(つもりの)空白が、実際には前のli要素の文末にくっついている、ということです。
li要素の横並びはちょっと特殊ですので、今後は注意書きをしようと思います。
その点私が不親切でした。申し訳ないです。

上記に心当たりが無い、という場合は再度検証しますのでその旨お伝えください。
よろしくお願いします。

修正のご報告

Akiraさま
丁寧な解説をいただきありがとうございます！
早速、指示通りに修正したところ、正常に表示されるようになりました！！
ナビゲーションの縦幅も気になっていたのですが、同一の原因だったんですね…。

>htmlソースはインデントなどが用いられていますが、それは「半角スペース」とは全く別のもの

こんなことも知らなかった初心者の質問にお時間を割いていただいてホント恐縮です(^-^;

おかげさまですごくスッキリしました。
ありがとうございました！
Bitou

To Bitouさん (修正完了のご報告)

いえいえ。私が不親切でした。
終了タグなしのli要素の扱いを書いておけば防げたことですので私が不親切でした。
お手間取らせてごめんなさいね。
修正できたということで安心しました。
お疲れ様でした :)

To 足達さん(移動先)

http://vanillaice000.blog.fc2.com/blog-entry-570.html#comment4037

> 記事ヘッダー部「comment 0」を消去したい件〜

Ctrl+F(Windows)/ Command+F(Mac)キー検索で
<div class="entry-header-content-box" id="entry-comment">
を見つけ、スクリーンショットと照らしながら該当部位を削除してください。

スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/captureeditor98ywedth.jpg

よろしくお願いします。

場所が・・・

何度も申し訳ないです。
これはスタイルシートで治しますか？
なんだか場所がどうしても分かりません（涙）
初心者で申し訳ないです。

To 足達さん

管理画面はおわかりですよね。
このページから飛ぶのであれば上部にあるナビゲーションメニュの「LOG IN」を押してください。
今これから押す場合には
右クリック → 新しいタブで開く
を選択して開きます。
これやらないとこのページが切り替わってしまいますので注意。

ご自分の管理画面に行きましたら、左側にある緑色の見出し「設定」の中に「テンプレートの設定」という項目がありますので、そちらをクリック。

スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capturempage9i3th.jpg

今回操作するのは「html」で、「上段」にあるものがそれです。CSSが「スタイルシート」で、「下段」にあります。
このページを開いた上で、恐らくWindowsパソコンだと思いますので
Controlキーを押したままFキーを押してください。
するとブラウザによって場所は違いますが、大抵は検索バー付近に「ページ内文字列検索」のためのバーが出てきます。
そこへ

<div class="entry-header-content-box" id="entry-comment">

と入れると(コピペでどうぞ)、該当箇所まで導いてくれます。
この「ページ内検索」を利用しないと、htmlもCSSも内容が長大ですのでとてもじゃないが探せません。

という説明で良かったかしら ^^;
わかりづらければお手数ですがまたその旨お申し出くださいね。
よろしくお願いします。

---------

ここから余談ですので修正は任意でお願いします。

① プロフィールの電話番号の位置ズレ
② プロフィール画像未設定
② HPへの誘導リンク

①ですが、プロフィール設定画面で、住所と電話番号の間にスペースを設けることで調整しようとした… のかな？
スペースというのは絶対的な調整はできませんので、住所の後ろで改行された方が良いと思います。
そして電話番号は半角数字で ^^;

② プロィール画像が設定されていませんので、記事下の「著作者」の部分(posted by)が No image になっています。
せっかくの商用ですので是非プロフィール画像を設定して頂きたいところです。
屋号のロゴでも良いですし、代表者の顔写真でも、紋でも良いと思います。
正方形でロゴなど作成しておくと汎用的に使えますのでおすすめです。

③ あとは公式ページをお持ちですので、そちらへの誘導のために相互リンクを設けると良いですね。
ナビゲーション内の「About」を「公式HP」などにテキスト書き換えし、リンクを設ける。
そしてHP側にも「ブログ」への誘導リンクを入れておかれると良いと思います。
Aboutを書き換える際には target="_blank" の指定もお忘れなく。

<li><a href="ここにHPアドレス" target="_blank">公式HP</a>

注)予備リンク
で検索されますと該当箇所が出てきます。

ご丁寧に。

Akiraさん、ご丁寧にありがとうございます。
今日は酔っちゃったので明日頑張って治してみます。
他にもいろいろとアドバイス嬉しいです。
些細なことにも時間がかかり、ダメな私ですが、こうして丁寧に教えてもらえて本当に助かります。
ありがとうございます。

To 足達さん

大変申し訳ございません。
ご利用のテンプレートって、Empty-streetじゃなくてClassicaですよね？
わー！間違えちゃった！ごめんなさい (*_ _)
全部私の勘違いのせいです。
テンプレートが違うのだから見つかるはずもありません。
ホントにごめんなさい(汗)

再三で申し訳ないのですが、該当記事へ移動をお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-561.html

slider

Akiraさま
sliderに関して３つ質問があります。
１．動き出すのと止まるのはどのタイミング（動作）でされるのでしょうか？　ずーと動いている時もあれば、止まっている時があるように感じます。
２．CSSを見てはいるのですが、どうやって動いているのか理解できなくて、画像が切り替わる時間とかは、変えられるのでしょうか？　javaを使って同じようなことをしたことはあるのですが。
３．sliderに表示される画像は、記事の画像の上の方を切り出しているように思うのですが、この切り出し位置は指定できるものなのでしょうか、それとも固定のものなのでしょうか？
どうしても画像の中心あたりを切り出さないと、よくわからない画像になってしまうので。

いろいろ質問させていただきましたが、よろしくお願いいたします。

To 福長さん

こんにちは (●'0'●)/

1 > ずーと動いている時もあれば、止まっている時があるように感じます〜

・ウィンドウが非アクティブ状態のとき
・マウスが上に乗っているとき
は動きを止めます。
非アクティブの時は動かしてもメモリ食うだけで無駄ですし、マウスオーバーの時にはクリックなどが行われる可能性がありますので、画像が推移しては都合が悪い、という判断です。

2 > 画像が切り替わる時間とかは、変えられるのでしょうか？〜

Ctrl+F(Windows)/ Command+F(Mac)キー検索
slideshowSpeed:3500
が表示秒数(ミリ秒指定)です。
animationSpeed:1000
が切り替えに要する時間(ミリ秒指定)ですので、各々都合の良い数値に変更してください。

3 > この切り出し位置は指定できるものなのでしょうか〜

「切り出す」というよりも「窓を造る」と捉えるとわかりやすいと思います。
通常の全面背景(固定含む)というのは表示範囲を指定し、その範囲全面に画像を配しますが、パララックスで用いる background-attachment というプロパティはブラウザ画面を範囲対象とします。
ブラウザ全体に背景が敷いてあり、その上(重なり上位)にテンプレートレイアウトが乗っている、という感じですかね。
窓を設けることでその窓の部分だけ下敷きの画像が見える、という仕組みです。
ですから「切り出し」という感覚ではないんです。

固定背景はスクロール量が合致していない場合や、左右上下いずれかの寸が足りていない場合はスクロール中のどこかで途切れが生じてしまいます。
パララックスでは特にスクロール差分をわざと生じさせ、少しづつ上に移動させていますので途切れの可能性が高くなります。
このページの本文中の

思うような上下位置合わせにならないかもしれませんが、デフォルトの状態がベストですので位置合わせのご相談についてはごめんなさい

という但し書きは仕組みによるものです。
パララックスで「画像表示位置」を重要視されるのであれば、窓を大きくする以外にありません。
サンプルとしてジプシー・ラリさんのサイトをご紹介します。

https://gypsie-raleigh.myshopify.com/

パララックスを利用していますが、イラストの見切れが最小限になるように窓を大きく設定しています(全画面ヘッダー)
こちらのパララックスはEmpty-streetとは異なる手法で表現していますが、特徴については同じです。

Empty-streetのスライダー縦幅は580pxがデフォルトですが、福長さんご自身のカスタマイズで380pxにされていますよね。
縦幅が短ければ縦表示範囲が狭くなるわけですから、表示位置が気になるのであればデフォルト値に戻されることをおすすめします。

slider

Akiraさま
迅速かつご丁寧な説明ありがとうございます。
380pxに変えたのは、画面がsliderでおおわれてしまい、記事が見えなくなっていたので、記事が見えるぐらいが良いかと思って、小さくしてみました。ご説明は理解しました、但し書きがあったのには気が付いたのですが、思わず聞いてしまいました。
実際にはOut-of-styleを利用させてもらおうと思っていて、Empty-streetもいいかな～と思いこちらも試していました。現在Out-of-styleの変更版をテンプレートに設定しました。
ホームページ(http://newfarmerschool.org/)とブログと両方で運用しようとしていて、Akiraさんのテンプレートがどれよりも素晴らしかったので、いろいろなものを試していました。
http://fukunaganana.html.xdomain.jp/も作った（と言っても無料のテンプレート改造しただけなおですが）のですが、こちらがEmpty-streetに近かったので、Empty-streetを試そうとしていました。
なんせHTMLに比べて膨大なCSSなので私ではとても理解が及びません。HTMLも十分には理解できませんが。

大変ありがとうございました。また何かあれば質問させてください。

To 福長さん

了解です。ご期待に添えずごめんなさいね。
お疲れ様でした :)

スライダー削除について

Akira様

《Empty-street》を利用させて頂いておりますMeaneと申します。
以前、ナビゲーションリンクの件で《Southerly》と《Empty-street》どちらが適しているか
質問させていただいた者です。
その節はご丁寧にありがとうございました(・∀・)

今回はトップページのスライダーの件で教えて頂きたいことがあります。
トップページのスライダーを停止して
トップ用の画像を固定にしたいのですが
《スライダー不要の方ここまで削除 1/3》の1/3〜3/3の３箇所を削除したところ
トップが真っ白になってしまい、元に戻した状態です。

どのようにカスタマイズしたらいいのか教えていただけますでしょうか。
(トップ画にかかるグラデーションはとても気に入ってるのでこれも残したいところです...)

Akiraさんがお手すきの時で構いませんのでよろしくお願いいたします。

To Meaneさん

こんばんは (●'0'●)/

> ３箇所を削除したところトップが真っ白になってしまい〜

正しい箇所を正しく削除して頂ければhtml要素自体が無くなりますのでブログタイトル下にグリッドが並んでレイアウトの崩れなどは無いはずなのですが、白い空間ができてしまうということでしょうか？
ちょっと「トップが真っ白」の状況がよくわからないです。ごめんなさい。

で、
①スライダーを削除してスライダーが有った箇所に固定画像を入れるという意味でしょうか。
それとも
②スライダーの画像を新着記事から引っ張るのではなく固定にしたいということでしょうか。

スライダー無し1枚固定画でパララックスを作成するには大幅なhtml, CSSの書き直しが必要ですので、こちらについては申し訳ありませんがお受けできません。
ごめんなさいね。

スライダーを流用して数枚の固定に取り替えるだけという意味なのかしら。
察しが悪くてすみません (´・ｪ・｀)
こちらお返事待ちにさせてくださいね。よろしくお願いします。

お返事遅くなりました

Akira様

深夜にもかかわらず、早々のお返事ありがとうございました。
説明不足で申し訳ありません〜〜(/ω＼)

トップ画面がすべて白くなるのではなく、スライダーがあった箇所が白い状態(白い空間)になってしまうという意味でした。


> スライダー無し1枚固定画でパララックスを作成するには大幅なhtml, CSSの書き直しが必要ですので、こちらについては申し訳ありませんがお受けできません。

とのことでしたので、

当初、①のつもりでご質問させていただいてましたが

スライダーはそのまま活かして、新着記事を引っ張るのではなく
固定の画像を複数枚スライドさせることがもし可能でしたらやり方を教えていただけますでしょうか？

何度もすみません〜よろしくお願いいたします。

To Meaneさん

こんばんは。
正しい削除を行えば以下のスクショのように整うはずですので、削除範囲を間違えられたのではないかと思います。

https://blog-imgs-118.fc2.com/v/a/n/vanillaice000/captureemptynosliderth.jpg

--------
スライダー画像を固定に変更

<!--recent-->
で検索されますとhtml内に1箇所ありますので、その<!--recent-->から<!--/recent-->までを一旦削除。
削除した同じ箇所に以下を枚数分追加。

<li class="para-normal para-item" style="background-image: url(ここに画像アドレス);">

CSSの修正は不要ですが(無駄は出ます)、テキストが無くなりますのでグラデーションも不要です。
グラデーションを削除される場合には

.slides li:before
という箇所がCSSに1箇所ありますのでその内容を削除。
以上です。その他細かいCSS修正などは自己責任・自力で。
よろしくお願いします。

できました(๑˃̵ᴗ˂̵)و

Akiraさま

ありがとうございました〜〜できました+ﾟ｡*(*´∀`*)*｡ﾟ+

白い空白は私のミスでした...スクショまで入れていただき
お手数かけてしまいすみませんでした。

スライダー画像を固定画像にする方法もありがとうございました。
おかげで思い通りのテンプレートにカスタムできました。

悩んでいた数ヶ月が二日間で解決して嬉しいです(๑˃̵ᴗ˂̵)و
また何かありましたらご質問させてください。

To Meaneさん

ご希望の沿う形になりましたでしょうか。
お疲れ様でした :)

テンプレートのカラムについての質問

はじめまして。
いつもAkiraさんの素敵なテンプレートを利用させていただいております。m(._.)m
さっそく質問です。
今現在「Alternative」を使っているんですが、
今まで2カラムで右側にプラグイン画面があったんですが、
昨日からプラグイン画面が下になってしまいました。
もちろん何も触ってはいません。
これはテンプレの仕様が変わったのでしょうか？
もし元に戻せるなら戻したいと思うのですが、可能でしょうか？
お忙しい中、申し訳ありません。どうぞよろしくお願いいたします。

ブログ名「人形ときどき犬猫」http://masachi999.blog.fc2.com/

To ヴィオラさん

ありがとうございます。
コメント投稿欄(Leave a replyの下)に明記してある通りお約束事をお守り頂いた上で再度お尋ねください。
よろしくお願いします。

Empty-streetのPC版TOPページに不具合が起きました

Akira 様

夜分に失礼します。 大諸居拓吾郎と申します。

先日より下記ブログで、貴Empty-street を利用させてもらっております。
素敵なテンプレートがたくさんで幾つかの作品から随分迷って決めました。
編集していた途中で、いよいよ壁にぶつかってしまいました。

大諸居拓吾郎商店FC2店様前臨時屋台
https://oomoroitakugoro.blog.fc2.com

そこで、『PC用のTOPページのみと思われ』ますが昨日より(TOPページの)表示がおかしくなって(大きく崩れて)しまいました。
その画面は以下の状態です。御確認をお願いします。

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/201804012057239af.jpg　　◀1/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205725221.jpg ◀2/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205721274.jpg ◀3/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205723c45.jpg ◀4/4

私(ども)の構文間違いなどの単純ミスでこの様になったと考えて、昨日から長くPC画面とにらめっこしていますが、どうにも分からなくなってしまいました。
ブログの開設から1年強、CSS等未だ判っていません <(_ _)> 。
カスタマイズ点は、『フォント、文字色、太さ、サイズ』『背景色』『各max-widthを拡大』『サイド欄に各FC2プラグイン挿入』『スクロールボタンを丸に変更』などの表面部分のみです。

どうぞお助け下さい。
よろしくお願いします。

追記　 大変お手数ですが、この貴テンプレートの英文字と数字のフォントをさわりたいのですが、これも未だにどれを変えていいか見つけられません。
どれをさわるのか、教えて頂けますか。
上述質問と併せ、たいそうお手間をお掛けします。

重ねてどうぞお助け下さい。<(_ _)> m(__)m <(_ _)> m(__)m


大諸居拓吾郎 (商店FC2店管理者店長代理)

To 大諸居拓吾郎さん

ありがとうございます ('0')/

htmlソース内に
rel="canonical" href="<%url>"
という箇所が2箇所あります。
正しいのは

<link rel="canonical" href="<%url>">

ですが赤字部分の記号が欠損しています。
2箇所とも記述が正しいかチェック及び修正を行なってください。
それでも直らない場合はその旨お知らせください。

欧文フォントの変更は
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,400i">
を削除した上で
body {
へのフォント指定
font: 1.4rem/1.9 'Lora', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', sans-serif;

赤字が欧文フォント指定(数字及びアルファベット)ですので変更してください。
フォントは閲覧者のOS依存ですので指定したいフォントがWindows, Mac双方にあるかどうか、無いのであればWindows用・Mac用を設定するなどご留意ください。

参考ページ
意外と知らないフォント設定の仕方
https://vanillaice000.blog.fc2.com/blog-entry-484.html

また、Lora で検索し、CSS内のLoraフォントも全て変更をお忘れなく。
全部で10箇所あります。
よろしくお願いします。

Empty-streetのPC版TOPページの乱れ、治りましたぁ!!

Akira 様

深夜に再び失礼します。さらに浮かれて空メールを飛ばしてしまいましたのはぼく等です、御免なさい。
m(_ _)m <(_ _)>

報告致します。 Akira様のご指摘通りに修正しまして、TOP画面が 治りましたあ♬!!
英数字フォントの方もちゃんと変わりました！

ありがとうございました !!

大変遅い時間にかかわらず、すぐに返信下さりご丁寧に的確に教えて下さいました。
また、借りましたテンプレートを、見た目のみ変えまして恥ずかしい限りですがそれも大目に見ていただいていると思うと『感謝の2乗』です。

返信に手間取りさらに遅くなりました。FC2のような大きなブログでも、もうAkira様位しか今現在に対応したテンプレートを作製している有り難いお方がいないだろう事を想います時、きっと自分のような単純な質問やややこしい質問に日々忙殺してはんにゃろうな、と思います。

もっと勉強せなあかんですね。お手数お掛けしました。

Akira様、どうもありがとうございました。


大諸居拓吾郎(商店)
店長代理
L男
C次郎

To 大諸居拓吾郎さん

修正できたということで安心しました。
お疲れ様でした :)

記事本文のフォントサイズ変更

はじめまして。ゆうぴんと申します。
記事本文のフォントサイズを少し大きくしたいのですが、その場合どこから変更すればよいのか教えていただけないでしょうか？

初歩的な質問ですみません。
font-sizeで検索とするとヒット数が多く、どれが本文記事に対応しているのか分かりませんでした。


最近ブログを始めたばかりで、当初は公式テンプレートを使用していましたが
Akira様の非常にお洒落なテンプレートを発見してすぐに採用させていただきました。

お忙しいところ恐れ入りますがよろしくお願いします。

To ゆうぴんさん

ありがとうございます (●'0'●)/

記事本文の文字だけならば
body {
で検索するとCSSソース内に3箇所あり、一番最初のものが対象です。

font: 1.4rem/1.9 〜省略

赤字を1.5にすると15pxに、1.6にすると16pxになります。
全体の文字を調整する場合はbodyではなくそのすぐ上にある
html {
の

font-size: 62.5%;

赤字部位を以下のサイトを参照しながら修正してください。
http://pxtoem.com/

よろしくお願いします。

To Akiraさん

早速お返事をいただきありがとうございます。

テンプレートのお洒落さにも感動しましたが、対応の早さも感動です。
ありがとうございます！

To ゆうぴんさん(完了のご報告)

お役に立てたのならば幸いです。
お疲れ様です :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-streetレイアウト崩れの件 内緒さん

こんばんは。ご迷惑おかけしております。

こちら私の制作上のミスです。申し訳ございません。
今修正・上書きしましたのでお手数ですが再DLをお願いします。
また他にもお気づきの点がありましたら教えてくださいね。
よろしくお願いします (*_ _)

https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45701

美しいペン字

こんにちは。Seishuと申します。
とても素敵なテンプレートでしたので利用させて頂いております。

そこで、お伺いしたいのですが、トップページに表示される画像は記事に挿入した画像が
表示されると思うのですが、Read Moreの部分に表示される画像は、画像の中間あたりから
の表示になっています。これをトップに表示される画像のように、画像の上段からから表示
させる方法などはありますでしょうか。

写真ならばとてもいい感じになると思うのですが、私の場合文字の画像が主になりますので
出来ることなら上段から綺麗に表示させられたらと思い質問させていただきました。
よろしくお願い致します。

利用端末 : Windows7 Ultimate 64bit
利用ブラウザ : Google Chrome

To Seishuさん

こんにちは ('0')/

> Read Moreの部分に表示される画像は、画像の中間あたりからの表示になっています。〜

画像のオブジェクトの位置合わせのことでしょうか。
.image-wrapper img
で検索されますとCSS内に1箇所あります。
object-position: center center;
最初のcenterが水平位置、赤字のcenterが垂直位置の合わせなので、画像の上辺を基点にするには赤字部位を top に変更してください。
また、近接にあるIE11用後方互換用の
font-family: 'object-fit: cover; object-position: center center;';
こちらも同時に変更してください。

鍵付きブログのご質問時にはパスワードをお伝え頂くお約束になっていますので、
(現状確認ができないと問題点・原因の把握ができません)
今回はわかる範囲でお答えしましたが次回以降はご配慮頂けると助かります。
よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To パスワードの件 内緒さん(完了のご報告)

そういうことでしたか。システムをご存知なかったんですね。

コメント欄の下にあるパスワード入力欄は、ご自身が投稿したコメントに対するパスワードです。
これを設定しておくと投稿後に編集することができます。
パスワードを入れずに送信したコメントは編集できません。

ブログのパスワードは全く別で、ブログ入室のためにブログ主が設定するものです。
コメント欄のパスワードとブログパスワードは用途が違うということです。

コメントパスワードは閲覧者もブログ管理人も見ることはできません。入力した人だけが知っています。
ブログパスワードの方は、第三者にパスワードを伝えるにはコメント欄を利用するか(他の人に見られたくない場合にはsecretにチェック)、メッセージを送るなどの方法があります。
第三者ブログのコメント欄でご自身のブログパスワードやアカウントパスワードの入力を迫られる場面はありません。
これはFC2ブログサービス内の共通事項なので覚えておかれると良いと思います。


修正の方は完了したということでお疲れ様でした :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street個別記事下プロフィール画像の件 内緒さん

ありがとうございます ('0')/

> ブロガーのプロフィール画像が表示されますが、それを、コメント欄で使用しているものと同じ画像に変更可能でしょうか？〜

この部位は個人設定の「プロフィール」で指定した画像が自動で出力されますので、プロフィール画像と別のものに差し替える場合には
url(<%image>)
で検索されますとhtml(テンプレ管理画面上段)に1箇所あります。<%image>を削除し、直接画像URLを記入してください。以下のような感じです(URLはダミーです)

url(https://xxxx.jpg)

よろしくお願いします。

To Akiraさん

こんばんは！
お忙しい中、早々にお返事いただきありがとうございます。

早速変更してみました。
無事に差し替えられて嬉しいです。

お気に入りのテンプレートなので
大切に使わせていただきます。!(^^)!

ヘッダー上のSNSナビ枠が下にずれてしまった

Akiraさん、初めまして。
FC2でブログを始めたクアトロと申します。

テンプレートが素敵で一目で気に入って使用させて頂いているのですが、
今日アナリティクスとSearchコンソールを入れる作業中に、
metaタグ（コンソールの）をhead内に入れて更新したら、
ページ一番上のSNSナビが並んでいる枠線が下にずれて、白い空白ができてしまいました。

当方初心者で、なぜ崩れたのか分かりません。
サイトはこちらです。

宜しければ、対処法を教えていただけないでしょうか。

To クアトロさん

ありがとうございます ('0')/

<script>
window.dataLayer
〜省略〜
</script>全角スペース 半角スペース 半角スペース

貼り付けたスクリプト要素の </script> の直後(右側)に上記の通り余分なスペースが含まれています。
全角が1つ、半角が2つです。
この3つを削除し、</script>の直後に何も無い状態に修正してください。
全角スペースの使用はNGです。

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

また、このscript要素はこの位置ではなく </head> の直前に記すようにし、meta charsetよりも前には何も入れないようにしてください。
よろしくお願いします。

すみません

素早いお返事有難うございます。

該当箇所→～gtag('config', 'UA-128546125-1');
</script>○○○

このスペースを削除というか、指定された通りに
何度も試しているのですが、上手くいきません。

</head>内直前に貼り付けて、スペースを修正してるんですが、
スペースの余った部分を無くすという作業が分からなく途方に暮れています。

To クアトロさん②

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

↑ この後ろにも全角スペースが入っています。
どのように作業されているのかが不明ですが、全角スペースは目に見えませんので注意してください。
各行の末尾にカーソルを合わせた時にすぐ右側にカーソルが来なければ(隙間が空いていれば)、スペースが入っています。

他の箇所にもあるかもしれませんが、とりあえず今トップページに20あまりの構文エラーがあり、全角スペースが原因のはずです。
たぶんあとこの1つだと思いますので修正することでエラーも0になるはずです。

先程拝見した際にこの部位に全角スペースはありませんでしたので、注意深く作業なさってくださいね。
恐らく 文頭(ソースの頭の揃い) を合わせようとして全角を打っているのだと思います。
掲載したリンク先ページの内容をよくよく読まれまして理解をして頂いた上で作業してください。
該当箇所は
「htmlソースの見た目にはこだわらなくて良い」
の見出しです。

これは私のテンプレートだけでなくhtml全般ですので、htmlやcssを触る時にはまず最初に半角英数字に変更する 癖をつけると良いと思います。
もちろん日本語入力以外で、という意味です。
ソースコードのインデントは半角スペース2つ分です。つまり見た目(空白)は全角1つ分と等しいので、文頭を揃えようとして多くの方がミスをします。
最初に貼り付けをした際に全角を使用し、先の修正で 目に見える内容だけをカットした ために全角スペースが残ってしまったのだと思いますよ。

お手数をおかけしました！直りました！（ご報告）

何度もほんとに素早いお返事有難うございます！

良かった！直りました^^
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
Akiraさん↑の記述箇所を見直してみると、確かにそのすぐ下行空白枠に全角表示で青枠が出た箇所が一箇所。

その部分を詰めてみるとピシャリでした。（多分大丈夫ですよね^^；）

アナティリクスタグも入念にチェックして、コンソールのメタタグも注意して取り付けたはずなのに・・
と思ってたんですが。

たったスペース一つでこうも変わってしまうんですね。
疲れました。

有難うございます。

To クアトロさん(完了のご報告)

修正できたということで安心しました。

そうですね。これは日本人特有のミスというか、欧米諸国にもhtmlの世界にも「全角」という概念はありませんので、日本人である以上気をつけましょう(笑)
お疲れ様でした :)

No title

Akira様 はじめまして。

「Empty-street」を使用させていただいているMと申します。
表題の件について１点ご質問させていただきたいと思いコメント欄から失礼します。

私のブログは有料でドメインを使用しているのですが、FC2が有料分についてもSSL化のサービスを開始したことを知りました。

早速SSL化の設定を行なったのですが、FacebookのシェアをするとFacebookのほうで上手くカードが表示されなくなりました。私の方に何か設定ミスがありますでしょうか？自分としては何もいじってはいないはずなんです。

ご教授頂けると幸いに存じます。

To Mさん

ありがとうございます (●'0'●)/
独自ドメインのSSLがようやく始まったんですね。一時はどうなることかと ^^;

SNSシェアの件ですが、SSLのエラーですのでエンドユーザーにはどうにもできないです (´・ω・｀)
FC2ブログへ直接お問い合わせされまして、その際に
「cURL(60)のエラーでバリデートできないようです。」とお伝えください。技術者にはそれで伝わるはずです。

----
お問い合わせの返事をお待ちの間にhtml構文エラーを修正されると良いですね。

① 属性間スペース無し(複数箇所)
×
<link rel="stylesheet"href
✔
<link rel="stylesheet" href

② ID重複
個別記事の上部に「更新日時」を追加する際に投稿日時に係るhtmlを複製したと思いますが、entry-datetime 及び entry-day はクラス名ではなくID名なのでクラスに変更してください。

修正前
<time class="entry-header-content-box" id="entry-datetime" 〜
<span id="entry-day">
修正後
<time class="entry-header-content-box entry-datetime"〜
<span class="entry-day">

CSSの方も #entry-datetime を .entry-datetime に、#entry-day を .entry-day に修正。

③ style属性重複(複数箇所)
サイドメニュー内「カテゴリ」のhtml内容が
<li style="list-style-type: none;" class="main_list" style="text-align:left">
と重複です。重複したstyle設定は反映されずパースエラーになりますので修正が必要です。そしてlist-style-type: none も text-align: left もli要素の個々につけるのではなく親のulに指定すれば一度で済みます。

<ul class="main_menu" style="list-style: none; text-align: left;">

④ pタグのエラー
サイドメニュー内「コメント」プラグイン、ul要素をpタグで囲っていませんでしょうか。
p要素の中には同じp要素を始め、ul要素やdiv要素などほとんどの要素を入れることができません。入れ子できるのはせいぜいリンクや画像などです(display値がinlineのもの)
pタグは使い方を間違えるとブラウザが終了タグの自動補完を行いますので、現状のhtmlソースは
<p></p>
<ul>
<li>
</ul>
<p></p>

赤字がブラウザによる強制補完です。

-----
SSLの件が片付く間に余力があれば修正してくださいね。

参考記事: ブログ作成に役立つブックマークレット
https://vanillaice000.blog.fc2.com/blog-entry-781.html

上記ページの「W3C validation」を利用し、トップページから修正されると良いと思います。
Empty-streetのトップページは
「Document checking completed. No errors or warnings to show.」と緑色で表示され、完全validのはずですから赤字や黄色字が出た場合にはサイドメニューあるいはご自身でテンプレートに追加した内容に起因します。
個別記事の方はやっかいですが頑張って (´・ω・｀)
ただ、どのエラーや警告も最優先事項というわけではありません(レイアウトが崩れてもいませんし致命的なエラーは無いように思います)のでお時間が許せば、という感じです。

To Akiraさん

Akira様

早急にお返事を頂きありがとうございます！！

ご指摘いただいた通りに問い合わせをしてみようと思います。

その上に他の構文チェックまでして頂いて...。

ご厚情に感謝いたします！！

To Mさん(FC2からの回答待ち)

はい。面倒ですが問い合わせてみてくださいね。もしかしたら運営スタッフも気づいていないかも ^^;

バリデートの件はSSL化されたということでURLチェックなどをされるでしょうから、同時に進めると効率が良いのではないかと思います。
大変お手数ですが、cURLの件、事が全て終了してからで良いので結果など教えて頂けると助かります。
お疲れ様です :)

To Akiraさん

Akira様

お世話になっております。FC2にはすぐに問い合わせを致しました。

返事があり次第またご報告させていただきますね！

いろいろとありがとうございます！

To Mさん

はい。よろしくお願いします :)

有料プラン独自ドメインのSSL化について

お久しぶりです。「Empty-street」を使わせていただいているクアトロです。

Mさんとのやり取り、コメントを拝見しまして、自分の方もようやく独自ドメインでのSSL化までこぎつけることができました。

現在トップページでは一応正式に鍵付きマークでhttpsが反映されている状態ですが、302リダイレクトとSSL化に伴い、今後最初にやるべきこととして①HTML内、CSS内の「http://」を全て 「//」に置換しても良いものでしょうか・・。（現状headなど、「http://」は全て含めて13箇所ヒットするのですが）
②各種プラグインの見直し
③個別記事の確認

外部サービスはアナリティクスとコンソールURL修正を最優先など、ですかね。
きちんとSSL化を反映するにあたり、もし宜しければご教授いただければ幸いです。

To Akiraさん（中間報告）

Akira 様

お世話になっております。ゆうらりHappySmileの管理人Mです。

先日ご相談したFacebookのシャアに関する「cURLの件」ですが、未だFC2の運営側から回答はないものの、改善のほうは着々と行われているようです。

本日、ブログを更新した後にFacebookのシェアをしてみると一応、表示のほうはされました。しかしまだ画像については未反映なのでFC2側で技術的な修正を進めているものだと思われます。

実は、ご相談時に書かなかったことですが、SSL化設定後に、ボクが登録しているFC2のブログランキングで今まで表示されていた記事画像が反映されない不具合も起きていました。これに関しては先程から表示されるようになりましたので、Facebookのほうもじきに解決されるのでは？修正が済んだら回答が送られてくるのかな？と感じております。

まずは中間のご報告まで。FC2から回答メールが送られて来ましたらまたご報告させて頂きます(^^)

To クアトロさん

こんにちは (●'0'●)/

> HTML内、CSS内の「http://」を全て 「//」に置換しても良いものでしょうか〜

そういうわけにはいかないですね。残念ながら。
テンプレートをデフォルトの状態のままお使い頂く場合にはテンプレートのhtml, CSSの修正はありません。
クアトロさんの場合は追加項目がいくつかあるようですからそちらはチェックしてください。

html内で変更してはいけないもの
①
<head prefix="og: http://ogp.me/ns# fb: http://〜省略">
OGPの正規リンクはあくまでもhttpなのでそのままで。アクセスしているわけではありませんので混在コンテンツの対象とはなりません。

②
<a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);"〜省略
これはトラックバックに利用するJSですが、httpsに書き換えてしまうと相手方がhttpアドレスの場合にトラックバックできません。こちらも単にリンクで飛ばしますので混在コンテンツとはなりません。

③
"@context": "http://schema.org"
こちらは構造化マークアップに係るjsonコードです。OGPと同様混在コンテンツ対象外。

デフォルトで含まれているhttpスキームは全部でhtmlに6つ + CSSに1つ(最上部にある私のブログのURLですが単なるコメント)です。13あるとしたら残りの7つはクアトロさんが足したものではないかと思います。

追加内容
・リンクの場合(ページ遷移) --- 遷移先ページがhttpsで開けるか確認、開けるのならばhttpsに変更
・追加JSファイル --- 有れば修正必須
・追加CSSファイル --- 有れば修正必須

リンクについてはご自身のブログにジャンプするのであればhttpsに書き換えてください。外部サイトの場合にはhttpsでアクセスできるか必ず確認をしてください。
リンクは混在コンテンツではありませんのでhttpのままでも何ら問題はありません。

参考記事: SSL対策時の注意【全てのURLをhttpsに書き換えてはいけない】
https://vanillaice000.blog.fc2.com/blog-entry-621.html

----
Google Fontsのmontezフォントを追加されていますが、Google Fontsへのリンクはデフォルトで既に導入されています。
そしてこの追加フォントがhttpですね。残り7つのうちの1つです。混在コンテンツとしてブロックされ、現状では総称ファミリー指定のcursiveで表示されています。

現状
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,400i">
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>

以下のように一つにまとめてください。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,400i%7CMontez">

linkのtype属性も不要です(text/cssは初期値なので記す必要なし)

----
混在コンテンツの修正ですが。Chromeをご利用でしたら
右クリック「検証」でDevToolを表示させると下部に赤字で「Mixed Content」と表示され、その対象が何なのかも教えてくれますので利用されると良いですね。
検証の際にはもしadblock系ブラウザ拡張をご利用中であれば一旦切ってください。でないとブロックされた広告なども赤字で表示されて作業の邪魔になると思います。

----
混在コンテンツ修正の目処がつきましたら302から301へ変更してくださいね。302は一時転送、301は恒久転送です。
あとはおっしゃる通り、search consoleへの追加登録も必要です。

----
別件では構文エラーが結構あります ^^:
htmlで致命的なのは<ul>要素の直後に<br>のついているもの。黒板装飾の中身が該当です。

参考記事: FC2ブログで謎の空白行ができるのはソースの途中改行が原因です
https://vanillaice000.blog.fc2.com/blog-entry-794.html

クアトロさんの場合は余白を設けるために<br>を能動的に書いているような気がします。改行の扱いを「htmlのみ」にしていると仮定して。
他にも同じ要領で書いているulやol要素があればそちらも要修正。

CSSも致命的なものがいくつか。こちらはリボン装飾です。
htmlはクローラーにもブラウザにもul要素として認められていません。
CSSの方は内容が破棄されて反映されていません。この2つは要修正です。他にもありますが後回しで構わないと思います。

To Mさん

こんにちは (●'0'●)/

まだ公式アナウンスが無いところをみると、もしかしたらスタッフ的には「まだやっとる最中や…」と指摘されたくなかったかもしれませんね(笑)
でもたまに修正したくせに「そんな症状は見当たらない」とかシレっと言ってくることあるからなぁ （￣∀￣；）
担当者にもよりますけど、そういう人にあたるとイラっとします(笑)
とりあえず様子を見ることにしましょう。お疲れ様です :)

コメントありがとうございます。

すみません。お忙しい中迅速なお返事ありがとうございますm(_ _)m

なるほどですね。本当に構文や仕組みについて初心者なのでお教えいただいて申し訳ないです。^^；

つまり①、②、③の件についてはそのままで良い。
リンクに関してはHTMLテンプレに関してはhttpsで問題なく表示されましたのでhttpsへ修正しました。
Google Fontsについてもご指摘通りまとめました（これ目次リボン部分の文字装飾に入れていた部分なんです。）


「htmlで致命的なのは<ul>要素の直後に<br>のついているもの。黒板装飾の中身が該当」

これは記事内でbrタグを利用しているわけではなく、途中改行を空白で対処している、というところが致命的なのでしょうか？でしたら、例えば、

<div class="黒板クラス名"><ul>「ココがenterによる空白・途中改行」
<p><span class="marker-blue"><b>本項の主な考察ポイント</b></span></p>
<li><b>究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか？</b></li>
<li><b>先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い</b></li>
<li><b>人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある</b></li></ul>
</div>

としているところを、

<div class="kokuban-s1"><ul><p><span class="marker-blue"><b>本項の主な考察ポイント</b></span></p><li><b>究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか？</b></li><li><b>先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い</b></li><li><b>人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある</b></li></ul></div>

↑こう表現した方が良い、ということでしょうか・・。他のulやol要素で記載してあるものも含め。


それから、リボン装飾は目次になんとか表記で使いたいのですが、
”htmlはクローラーにもブラウザにもul要素として認められていません。”
”CSSの方は内容が破棄されて反映されていません。”「要修正」


こちら２点をご教授いただいてよろしいでしょうか・・。
ほんとにすみません。良案はございませんでしょうか。

To クアトロさん②

頂いた内容が実際の内容と同一である判断しますね。差分などは見ていませんのでそれを前提にします。

まず、基本的にhtmlを常に利用して記事を書かれる場合には改行の扱いを「htmlのみ」にされることをおすすめします。理由はリンク掲載したページにある通りです(FC2ブログで謎の空白行が〜)
htmlソースコードの可読性のためにenterを押してしまうと今回のような結果になります。

あと根本的なhtmlの入れ子のミスもあります。

<div class="黒板クラス名"><ul> --- この位置での改行不可
<p><span class="marker-blue"><b>本項の主な考察ポイント</b></span></p> --- ul要素内へのp要素の入れ子不可
<li><b>究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか？</b></li> --- この位置での改行不可
<li><b>先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い</b></li> --- この位置での改行不可
<li><b>人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある</b></li></ul>
</div>

----
ul要素内でタイトルや見出しはつけることができません。

ul要素・ol要素というのは必ずこの形です ↓
(li要素とp要素の終了タグは省略可能なのでここからは文字数を減らしたいので省略して書きます)

✔
<ul>
<li>内容1
<li>内容2
<li>内容3
</ul>

×
<ul>
<p>テキスト
<li>内容1
<li>内容2
<li>内容3
</ul>

✔
<ul>
<li><p>テキスト
<li>内容1
<li>内容2
<li>内容3
</ul>

li要素の子要素にp要素はOKですが、この場合にはp要素の前にマーカーが付きます。
今回のクアトロさんの場合は以下の構成にされると良いと思いますよ。

<div class="黒板クラス名">
<p><span class="marker-blue">本項の主な考察ポイント</span>
<ul>
<li style="font-weight: bold;">究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか？
<li style="font-weight: bold;">先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い
<li style="font-weight: bold;">人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある
</ul>
</div>

せっかくmarker-blueというクラス名がありますから、<b>要素にはせずにスタイルシートの方で
.marker-blue {
.
.
font-weight: bold;
}

とされた方が良いと思います。ドット(.)は既存内容の省略を意味しています。念の為。
つまり既存内容の末尾に font-weight: bold; を追加する、ということですね。

html5のbタグの定義は「他のテキストと区別する」用途です。
参考記事: strongタグとbタグ論争に個人的意見
https://vanillaice000.blog.fc2.com/blog-entry-794.html

たぶんGoogle的にもbタグの使用はなるべく避けてほしいはずです。
同様にli要素内のbタグも外してli要素へのstyle指定で十分ではないかと思います。htmlの入れ子は少ない方が望ましいので。
あとli要素とp要素の終了タグが必要ならば付けてください。こちらは常日頃の方針と揃えられた方が良いと思います。

で、上記が「htmlのみ」設定にした場合です。改行を「自動」にする場合には全て横一列に繋げなければいけません。全部です。

<div class="黒板クラス名"><p><span class="marker-blue">本項の主な考察ポイント</span></p><ul>
<li style="font-weight: bold;">究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか？<li style="font-weight: bold;">先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い<li style="font-weight: bold;">人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある</ul></div>

こうなると後のメンテナンスに相当苦労されるのではないかと思います。
ですから記事内でhtmlを頻繁に利用する方へは「htmlのみ」の改行指定をおすすめします。

一旦投稿しますね。
CSSの方はソースを拝見しないと書けませんのでお待ちください。ちょっと外します。
長女を迎えに行ってきます(笑)

ほんとにいろいろと申し訳ありません。

ここまでいろいろ無償でご対応下さって、こちらが何もできないのが恐縮です・・。
はい。現状の解釈（上記）<ul> <li>及び<p>タグの子要素などの関係は丁寧なご説明で理解できました。

なるほど、CSSで<b>タグもfont-weight: bold;で制御できますね^^；クラスつけてるんだから・・。


自分で色々弄ると余計ややこしくなるので、再度お返事頂けるまでそのままにしておきます＾＾；
連休前なのでお迎え、気をつけてくださいね。

To クアトロさん③

お気遣いありがとうございます :)
続いてCSSの方です。

/*箇条書き装飾*/
の
ul.check li:before
の中に
color:; /* 文字色 */
という部位がありますがcolorプロパティの空白値は認められていませんので削除するか、あるいは以下の形に修正。

/* color:; 文字色 */

色指定してコメントを外したときにミスする可能性があるので削除されたほうが良いと思います。
あと ul.check li:before という書き方は不要に思います。
.check li:before
でOKです。すぐ上にある
ul.check li も同様 .check li に修正。CSSのセレクタは右から順に読まれますので、全体からli要素を探し、クラス名checkの付いている要素を探し、checkクラスが付いていてさらにul要素のものを探す、という3段もの手間が発生しています。
checkクラスを持つ要素が他に存在しないのならば(例: <ol class="check">)クラス名だけで十分です。

ですがこのCSSは機能していないはずです。何故ならempty-streetには強制力の強い指定が含まれているからです。

#inner-contents .check li
と
#inner-contents .check li::before
に修正してください。その前に私はcheckクラスの要素を見つけることができませんでした。使用の有無も確認してくださいね。使用していないCSSならば削除。

-----
/*目次装飾リボン*/
の
.ribbon1
の中に
background-color: #282828;
background-image: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000000));
background-image: -webkit-linear-gradient(top, #282828, #000000);
background-image: -moz-linear-gradient(top, #282828, #000000);
background-image: -ms-linear-gradient(top, #282828, #000000);
background-image: -o-linear-gradient(top, #282828, #000000);
background-image: linear-gradient(top, #282828, #000000);
というのがありますが、ベンダープリフィックスはもう要らないと思いますし、書き方もちょっと間違ってますね。

background-color: #282828;
background: linear-gradient(to top, #282828, #000000);

これでOKです。
background-colorは古いIE用のフォールバックなので残しておいてください。といっても古いIEではどのみちデザイン自体崩れてますが。

------
.content-inner-follow-buttons .follow-title
のすぐ上に
text-align: center;
margin-top:40px;
width:100%;
と3つ浮いた状態ですがこれがどのセレクタへの指定なのか不明でありエラーです。
セレクタ名を確認されまして

.xxx {
text-align: center;
margin-top:40px;
width:100%;
}

という正しい形に修正してください。

-----
.clip-box-a::before
の中に
background-color: none;
とありますがbackground-colorのnone値は存在しません。
背景色が不要な場合は何も書かなければ良いだけなので削除。あるいは
background: transparent;
に変更。

とりあえず以上です。修正後に再度チェックしますのでお知らせくださいね。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Akiraさん

Akira 様

お世話様です。お返事ありがとうございます。

FC2運営側もいろいろと対応に追われているんでしょうね。

ちなみに、Facebookのシャアに関しては画像のほうも反映されるように改善されました(^^)

FC2からの回答は何もありませんが…。

もうしばらく様子見ですね。

いつもありがとうございます！

To Empty-street構文エラーの件 内緒さん

こんにちは (o'ω')ﾉ

最新記事で検証しました。
ちょっとコメント遡ります。

> つまり①、②、③の件についてはそのままで良い。〜

そのままで良くないです(笑)
①テンプレート内http --- 修正済み
②プラグインの精査 --- 修正必須箇所あり(SSLとは無関係ですが構文エラーあり)
③個別記事 --- 全記事でチェックが必要

個別記事については

・記事内でimg要素やiframe要素を利用しているか --- httpアドレスの画像、動画や外部ウィジェットなどのアドレスがhttp、ブログカードの相手先画像・サイトアドレスがhttp

これはチェック必須です。特にiframeは混在コンテンツの中でもactive mixed contentと言って画像などのpassive mixed contentよりも危険度が高いのでブロックされることになります。
(画像はパッシブなのでブロックされず表示が行われます)
個別記事は各ユーザー任意の内容ですから管理人自身のチェックが必須です。

----
ul要素については未修正ですね。以下は修正必須箇所です。

① html
ul及びol要素の改行修正

----
② html内インラインCSS
contents of articleの付近に
<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffｆｆ;">
というのがあります。
赤字部位カラーコードの最後の2つのfが全角ですね。

×
#ffffｆｆ

✔
#ffffff

全角スペースの使用については以前の質疑応答と同じで特に注意が必要です。

-----
③ html
こちらはサイドメニュー(プラグイン)です。
現時点で以下のような内容になってます

<p class="plugin-myimage" style="text-align:left"></p>
<p class="img01 waku02 radius bImg shadow bWidth"><img src="" alt=""></p>
</p>
<p align="center">
<b><span style="font-size:large;"><span class="marker-blue">クアトロ</span></span></b><br>
</p>
<p style="text-align:left">
<div class="clip-box-a">
<p class="dot">xx在住の〜発症。</p>
<p class="dot">症状の〜経験。</p>
<br />
<p class="dot">独身〜ます。</p>
<br />
<p class="dot">自宅〜ました。</p>
<br />
<p class="dot">ライフ〜好きです。</p>
<br />
<p class="dot">インターネット〜勉強中。</p>
<br />
<p class="dot">深掘り〜ください。</p>
<br />
<div class="sidebar-follow-buttons">
<a class="hatena" href="xxx"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a>
</div>
</p>

修正すると以下のような感じでしょうか。

<div class="xxx"><img src="" alt=""></div>
<div style="text-align: center; font-size:large;">
<span class="marker-blue">クアトロ</span>
</div>
<div class="clip-box-a">
<p class="dot">xx在住の〜発症。</p>
<p class="dot">症状の〜経験。</p>
<p class="dot">独身〜ます。</p>
<p class="dot">自宅〜ました。</p>
<p class="dot">ライフ〜好きです。</p>
<p class="dot">インターネット〜勉強中。</p>
<p class="dot">深掘り〜ください。</p>
<div class="sidebar-follow-buttons">
<a class="hatena" href="xxx"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a>
</div>

plugin-myimageクラスを持つp要素が空の状態で浮いています。不要なので削除。

img01 waku02など多数のクラスを持つp要素がありますが大変無駄が生じますので一つのクラスにまとめます。新しくクラス名を付け、そのクラス名にスタイルをまとめるようにしてください。

p要素内にdiv要素を入れることはできません。また、せっかくp要素でマークアップしているのですからp要素間の余白は<br>ではなくmarginで行うようにしてください。各p要素は dot というクラス名を持っていますが、そちらへ margin指定が 0 になっています。ここを margin: 1em 0 などに変更(1emが上下、0が左右)

<div align="center">は廃止属性です。今後は<div style="text-align: center;">を使うように意識を変更してください。過去記事に遡って修正する必要まではありません。「今後」で良いと思います。もちろん修正できるならするに越したことはありませんが。

先回と同じでmarker-blueクラスへのfont-weight: boldの追加、font-size: largeの指定は入れ子で要素を増やさずに親のp要素へ直接指定。

----
p要素というのは先回もお伝えした通り、入れ子にできる要素がかなり限定されています。そしてブラウザの補完が行われるタグでもあります。

例)
<p>
<div>あいうえお</div>
</p>

↓ ブラウザの補完

<p></p>
<div>あいうえお</div>
<p></p>

こうして間違いがあると強制的に直されてしまい、html構文としては崩壊してしまいます。
装飾だけが目的の場合には迷わずdiv要素、段落のp要素にしたい場合には入れ子できる要素の把握とp要素間に空白行作成のための<br>が入り込まないようにする、この2点に注意してください。

念の為brのサンプル

✔
<p>
あいうえお<br>
かきくけこ
</p>
<p>
さしすせそ<br>
たちつてと
</p>

×
<p>
あいうえお<br>
かきくけこ
</p><br>
<p>
さしすせそ<br>
たちつてと
</p>

で、サイドメニューのプラグインはほとんどページ種で表示されますし、一度記した内容はあまりみなさんチェックされないのでこの機会に綺麗に修正されると良いですね。でないと長く間違いを引きずることになります。

----
⑤ ダブルクォーテーション欠損
こちらもサイドメニュー部の「SNSをフォロー」の付近。
<a class="twitter" href="" target="_blank rel="noopener">
正しくは
<a class="twitter" href="" target="_blank" rel="noopener">

ダブルクォーテーションの欠損や重複のミスは後続要素に長く悪影響を及ぼします。これはhtml構文ミスの中でもクリティカルなものと言って良いと思います。傾向を見ているとどうもみなさん
target="_blank"
この別タブ指定とその直近の属性にミスが多い気がします。たぶんアンダースコアが目眩まし的な存在になっている気がする ^^;
せっかくのnoopenerが効いていませんので要修正。

----
とりあえず最新記事のみの検証です。他のページにもあるかもしれませんが要領は同じですから、まずサイドメニューを修正し、エラーの数を減らした上で個別記事のチェックをされると良いと思います。
サイドメニューの後の最優先事項はul要素の修正ですかね。

To Mさん

あー。ホントですね。ちゃんとできるようになっている(笑)
とりあえず安心しました ^^;

To 家庭教師の件 内緒さん

こんにちは (o'ω')ﾉ

いえ。逆に嬉しいです(笑)
いつもありがとうございます :)

もうほんとすみません。

ありがとうございます。
こんな長文書かせてしまってすみません・・。

これだけ懇切丁寧に教えて頂いているのに自分で理解できなくなってしまいました・・。

とりあえず② html内インラインCSS
⑤ ダブルクォーテーション欠損
は直せたのですが、他の修正項目が自分で全く分からなくなってしまいました。m(._.)m

ご質問完了の報告（本当にありがとうございました）

この度はいろいろと長文でご教授頂いたにも関わらず、僕の理解不足でお手間を煩わせてしまってすみません。

これ以上ご質問に余計なお時間をとらせるわけにいきませんので、これをもって終わりにさせていただきます。
本当にお忙しい中、どうもありがとうございました。

To クアトロさん(終了のご報告)

了解です。お疲れ様でした :)

先日より

こんばんは。クアトロです。

ご報告をもって終了、と言ったばかりなのですが、やはりどうしてもAkiraさんに再チェックしていただきたく、もう一度ご連絡してしまいました・・。

実は、Fc2ブログでの旧投稿記事ページの仕様自体があまり理解できておらず、ul、li要素も自分で直せたつもりだと思っていたんですけど、ようやくおっしゃっていた意味が分かりました。⇒自動改行の場合、横一列で全て繋げて続けて書かなければいけない意味が。
「HTMLのみ」の設定にはしていなく、初期設定の「自動改行」指定で今までずっと投稿し続けていました。

（”余白を設けるために<br>を能動的に書いているような気がします。”）
↑まさにおっしゃる通りです。少しでも見やすくなればと</p>タグ終了後にEnterキーで空白行を差し込んでいました。

とりあえず自分のなかで理解できる範囲で可能な限り、上記のご説明をもう一度見返しながら、修正してみたのですがいかがでしょう。致命的なところはございますか？
あと、もし「HTMLのみ」の設定にした場合は、<br>タグを常に差し込んで改行（空白行）をとって良いのでしょうか・・。

お時間がある時で構いません。
致命的なところのみでも良いので教えてください。

To クアトロさん

こんばんは (o'ω')ﾉ

今ちょうど記事をひとつアップしましたのでとりあえずそちらをご覧ください。
参考記事: そのhtml、ホントに要りますか？
https://vanillaice000.blog.fc2.com/blog-entry-798.html

他の方のコメントにお返事してから拝見します。お待ち下さいね。

To クアトロさん②

最新記事は避けて最新から2つ目の記事を拝見しました。
最新記事なんですが、構文エラーが影響しているのかカエレバのコードがアレでソレなのか、ちょっと検証の邪魔になりますので避けます。
以下の内容を綺麗に直すことで最新記事の方も検証できるようになるかと思います。

-----
ul要素については修正できています。
で、修正段階でタグの抜け落ちなどが発生してしまったようです。以前は無かったエラーが新たに生まれてしまいましたね。こちらも修正しましょう。

サイドメニュー部「about me」
ソースの書き出しが

<p style="text-align: left;">
になっているはずです。
そしてその中に
<div class="clip-box-a">
が入っていますが、p要素の中にdiv要素を入れることはできませんので消去。以下のように修正。

<p style="text-align:left">
<div class="clip-box-a">
<p class="dot">九州〜発症。</p>
<p class="dot">症状の〜経験。</p>
<p class="dot">独身〜ます。</p>
<p class="dot">自宅〜ました。</p>
<p class="dot">ライフ〜好きです。</p>
<p class="dot">インターネット〜勉強中。</p>
<p class="dot">深掘り〜ご覧ください。</p>
<div class="sidebar-follow-buttons">
<a class="hatena" href=""><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a></div>
</p>
</div>

まずこれを修正してもらえないでしょうか。現時点でテンプレート全体の構造が狂っていますので、ここを直すのが最優先です。
あとblockquoteもpやul同様、記事内にhtmlを書くときにはソース途中での改行不可です。
htmlを改行「自動」で書くときはいかなるhtmlも横につなげるようにしてください。

* お返事急がれなくて良いですよ。ご自分のペースでやってくださいね。私も今日はこれで寝ます(笑)

ありがとうございます。

早朝からすみません。
時間だけはあるものですから。症状と職場へ復帰できないので生活苦です・・^^；(笑)

お気遣い本当にありがとうございます。

----- ①
”ul要素については修正できています。
で、修正段階でタグの抜け落ちなどが発生してしまったようです。以前は無かったエラーが新たに生まれてしまいましたね。こちらも修正しましょう。 ”
-----
↑良かった。ただ、タグの抜け落ちがどこか分かりませんでした・・。はい、分かり次第修正します。


----- ②
”サイドメニュー部「about me」ソースの書き出し <p style="text-align: left;">～関連の修正 ”
-----
↑公式プラグインプロフィール内<%introduction2>（紹介文説明変数）以外を削除し、ソースを確認してみました。
ここはご指摘通り

<div class="clip-box-a">
<p class="dot">九州〜発症。</p>
<p class="dot">症状の〜経験。</p>
<p class="dot">独身〜ます。</p>
<p class="dot">自宅〜ました。</p>
<p class="dot">ライフ〜好きです。</p>
<p class="dot">インターネット〜勉強中。</p>
<p class="dot">深掘り〜ご覧ください。</p>
<div class="sidebar-follow-buttons">
<a class="hatena" href=""><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a></div>
</div>

の形に戻ったことを確認しました。

----- ③
”blockquoteもpやul同様、記事内にhtmlを書くときにはソース途中での改行不可です。
htmlを改行「自動」で書くときはいかなるhtmlも横につなげるようにしてください。 ”
-----
↑引用に関しても改行不可なのですね・・。これもきちんとしないと。
一応ul要素同様、ソース途中改行に注意して修正しましたが、いかがでしょう？


次のステップ（タグの抜け落ちなど）へ行けるようでしたら、頑張ります。
またお伺いします。

To クアトロさん

お疲れ様です (o'ω')ﾉ

もう一度サイドメニューの方を。改行の位置がわかるように矢印も付けます。プラグインについてはFC2の「改行『自動』」の効力はありませんので、<br>が付いているわけではなく「enterを押した」という意味だと思ってください。問題点ではなくただ単に位置をお知らせしているだけです。
その上で問題部位・不要部位を赤く記します。

現在の内容

<div class="img01 waku02 radius bImg shadow bWidth"><img src="" alt="クアトロ"></div>↩
<div style="text-align: center; font-size:large;">↩
<span class="marker-blue">クアトロ</span><br>↩
</div><div class="clip-box-a"><p class="dot">九州〜発症。</p><p class="dot">症状〜経験。</p><p class="dot">独身〜ます。</p><p class="dot">自宅〜ました。</p><p class="dot">ライフ〜好きです。</p><p class="dot">インターネット〜勉強中。</p><p class="dot">深掘り〜ご覧ください。</p><div class="sidebar-follow-buttons"><a class="hatena" href="https://***"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a></div></div>

----
ここまで「改行『自動』」のシステムで苦しんでいましたので恐らく混同されているのだと思いますが、『自動』はあくまでもFC2ブログエディター、つまり「記事編集画面」での機能です。つまりプラグインのhtml編集画面は無関係。
プラグイン編集時にenterキーを押しても<br>が自動で追加されることはありません。
なのでソースコードの可読性を重視して以下のように直してください。
というか私がコメント欄にソースを書いた場合には コピペ してそのままお使い頂くことを前提にしています(笑)
もちろん文章などを綺麗に入力し直す必要はありますが、htmlの構成についてはコピペが一番安全です。私がミスすれば「ごめんなさい。間違えちゃった。」とお伝えすることになりますが ^^;

1. img01 waku02 radius bImg shadow bWidth と複数のクラス名で装飾を小分けするのはやめましょう。これだけでもメンテナンスは困難になります。共通クラスを利用している他要素も見当たりませんので、どれか一つのクラス名に絞ってそちらへ全スタイルを書く ように修正した方が良いと思います。

現在
.img01 {
max-width: 500px;
margin: 0 auto;
box-sizing: border-box; --- 不要
-moz-box-sizing: border-box; --- 不要
-webkit-box-sizing: border-box; --- 不要
-ms-box-sizing: border-box; --- 不要
}

.waku02 {
position: relative;
}

.waku02.bWidth {
border-width: 16px; --- 重複(上書きされて打ち消されているので無駄な指定)
}

.waku02.shadow {
box-shadow: 1px 3px 8px rgba(20,20,20,0.3);
}

.waku02.bImg {
border: 10px solid #ccc;
border-image: url(省略) 15 repeat;
-webkit-border-image: url(省略) 15 repeat;
}

.waku02:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0px 8px rgba(255,255,255,0.6); --- 打ち消されて無駄
}

.waku02.shadow:before {
box-shadow: inset 1px 1px 6px 0px rgba(0,0,0,0.4), -1px -1px 2px rgba(40,40,40,0.2), 1px 1px 2px rgba(255,255,255,1);
}

.waku02.bImg:before {
box-shadow: none; --- 打ち消されて無駄
}
.waku02:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0px 8px rgba(255,255,255,0.6);
}

これだけの分割があります。radiusクラスについては指定がありません。
新しく xxx というクラス名を付け(言葉通りxxxではなく新規クラス名を考える、という意味です)以下のようにすればマッチングにも無駄が生じませんし管理が楽になるはずです。

<div class="xxx">

.xxx {
position: relative;
max-width: 500px;
margin: auto;
border-image: url(省略) 15 repeat;
border: 10px solid #ccc;
box-shadow: 1px 3px 8px rgba(20,20,20,.3);
}

.xxx::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 1px 1px 6px 0 rgba(0,0,0,.4), -1px -1px 2px rgba(40,40,40,.2), 1px 1px 2px rgba(255,255,255,1);
}

CSSは上から順にマッチングが行われ、重複があった場合には上書きされます。
例)
.xxx {color: white}
.xxx {color: red}

多重クラスだとさらにわけがわからなくなってしまします。

例) <div class="xxx yyy">
.xxx と .yyy が同じ要素を示している

.xxx {border: 1px solid white}
.yyy {border: 0}
この場合 .xxx と .yyy は同じ要素ですから、結果的にボーダーは付きません。

----
上記を踏まえ綺麗に直します。コピペでどうぞ。赤文字部位のみ書き換え必須です。
【html】
<div class="xxx">
<img src="" alt="クアトロ">
</div>
<div style="margin-bottom: 後続要素との距離px; text-align: center; font-size: large;">
<span class="marker-blue">クアトロ</span>
</div>
<div class="clip-box-a">
<p class="dot">九州〜発症。</p>
<p class="dot">症状〜経験。</p>
<p class="dot">独身〜ます。</p>
<p class="dot">自宅〜ました。</p>
<p class="dot">ライフ〜好きです。</p>
<p class="dot">インターネット〜勉強中。</p>
<p class="dot">深掘り〜ご覧ください。</p>
<div class="sidebar-follow-buttons">
<a class="hatena" href="https://***"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a>
</div>
</div>

【CSS】
/* プロフィール画像装飾 */
から
/* プロフィール画像装飾 */
までを削除、以下の内容を追加。

.xxx {
position: relative;
max-width: 500px;
margin: auto;
border-image: url(省略) 15 repeat;
border: 10px solid #ccc;
box-shadow: 1px 3px 8px rgba(20,20,20,.3);
}

.xxx::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 1px 1px 6px 0 rgba(0,0,0,.4), -1px -1px 2px rgba(40,40,40,.2), 1px 1px 2px rgba(255,255,255,1);
}

2つ目の /* プロフィール画像装飾 */ の直前に .filter02:after というのがありますが使われている様子がありません。不安であればこのセレクタのみ残しておかれると良いと思います。

-----
で、このabou meの部位のみ終了タグが足りないんですが、テンプレートの方のhtmlが壊れていませんでしょうか。
プラグインの内容はFC2サーバーからの自動出力で、私たち第三者が見られるのはサーバーで変換された後の内容だけです。
テンプレートには独自変数で記されますが、ブラウザで検証するときには既に変数が実際の文字列に書き換わっているので元の内容を確認することができないんです。なのでクアトロさんに確認してもらうしか方法はありません。

テンプレートのhtml内に
<!-- サイドメニュー -->
というコメントの付いている箇所があります。この付近のスクリーンショットを撮って見せて頂けないでしょうか。
<!-- サイドメニュー --> の文字列を含み、下の方は <!--edit_area--> までが収まるように。この位置です ↓
https://file.blog.fc2.com/vanillaice000/capture/capooiujde----1000.png
あと念の為確認で、

1. about me は「プラグイン」に記したものですよね？テンプレートに直接書いてはいないですよね？
2. about meのプラグインカテゴリは単独設置ですか？(例: カテゴリ1または2にabout meだけ)
3. about me のhtml内容がプラグインだとして、ソースの書き出しは
<div class="img01 waku02 radius bImg shadow bWidth">
ですか？それともこれより前に何か書いてありますか？

以上よろしくお願いします。もうあとここだけなので頑張りましょう。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

上記総合的な設定の件

Akiraさん、こんばんは。クアトロです。

ここまでいろいろと懇切丁寧にお時間を割いて教えていただいて・・。
御礼の言葉もございません。

おっしゃった通りの設定は今一応全て施して見ました。
（.filter02:after～のクラスは、少し不安でしたのでそのまま残して適用してみたところ、プロフィール画像の枠要素のCSSの様で、若干以前よりも枠の印象が角張ったりと変化しました。）


それともう一つ、自分で気づいたところは、プロフィール設置ボタン要素
<a class="hatena" href="～"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a></div>○○○　←この位置に</div>終了タグが一つ抜けておりました。


これがテンプレートの方のHTML崩壊の要因でしょうか・・・。
いかがでしょう。

To クアトロさん

お疲れ様です (●'0'●)/

結論から先に言うと、修正できてます。良かったです(笑)
原因がようやくわかりました。
私は自分がここで書いたhtmlをクアトロさんがコピペする・しているという思い込みで話しをすすめていましたが、実際は
<%introduction2>
を用いた変数による出力を利用されていたということですよね。
てっきりp要素を充てている文章については手打ちされているものだとばかり。
いや、コピペしていない、というのはこのちょっと前のコメントで気づいたけれども(笑)

またややこしい話になりますが、<%introduction2> という変数はどこから内容を拾うかと言うと、環境設定の プロフィール です。
プラグインは改行『自動』は効きませんが、プロフィール入力欄は改行『自動』がデフォルトなんですね。ですからプロフィールの内容を反映させたい場合には記事内と同じで
・要素間改行なし(enter押しで<br>が入るので横に続けて書く)
・htmlが使えるようになっているので構文エラーに気をつける
この2点が重要です。
例えばプロフィールが

<div>
<div>
<span></span>
</div>

という形になっていた場合。divの終了タグが一つありませんが<%introduction2>変数によってこのままそっくり自動出力されてしまいますので結果構文エラーが引き継がれる、という仕様です。
変数による出力を用いると管理する場所が2箇所になってしまいますので、htmlを利用して複雑な長文を書かれる際には<%introduction>変数に頼るのではなく、プラグインのhtml画面に直接入力してください。
プロフィールが絡むとプラグイン内のhtmlとプロフィールのhtml、といったように2箇所での管理が必要ですが、プラグイン1箇所にまとめれば全ての内容を一度に管理でき、htmlの整合性も目で見てすぐにわかるようになります。

現在はコピペされているはずなので構文エラーは解消されています。
いずれにしてもプロフィール文は構文エラーのはずですから、どこかのタイミングで修正された方が良いと思います(既にお気づきのようなので修正済みかしら？)
テンプレートを変更された際にそのテンプレートで<%introduction2>が用いられている可能性もあります。その場合にはまたエラーを引き継ぐことになります。

一旦投稿します。

To クアトロさん②

あと、ごめんなさい。
border-image
で検索するとCSS内に1箇所あります。その「下」に
border: 10px solid #ccc;
という記述があると思うんですが、これ逆でした。

×
border-image: url(https://blog-imgs-113.fc2.com/f/r/e/freelifestylelabo/paper123.gif) 15 repeat;
border: 10px solid #ccc;

✔
border: 10px solid #ccc;
border-image: url(https://blog-imgs-113.fc2.com/f/r/e/freelifestylelabo/paper123.gif) 15 repeat;

box-shadowの様子など、最終型がどうなればクアトロさんの目標と合致するのかがわかりませんのでなんとも言えませんが、とりあえず私のポカの部分を修正して再確認をお願いします。

To クアトロさん③

かなり複雑な作業になって混乱されているかもしれませんのでまとめますね。

【記事内でhtmlを使用する場合】

* 改行「自動」の場合
要素間改行をしてはいけない
例)
×
<blockquote>
<p>
文章
</p>
</blockquote>

✔
<blockquote><p>文章</p></blockquote>

×
<p>
あいうえお
<span>かきくけこ</span>
</p>

✔
<p>あいうえお<span>かきくけこ</span></p>

【環境設定 > プロフィール編集】

要素間改行をしてはいけない(記事内の改行『自動』と同じ)
html構文エラーに気をつける

以上です。
構文エラーは他にもありますが、クリティカルなものは排除できたはずです。
残っているエラーは
・FC2ブログの仕様上致し方ないもの(サムネイルつき最新記事プラグインの画像のalt属性無し)
・style要素を書く場所(こちらもサムネイルつき最新記事プラグインが対象です)
参考記事: body内のstyle要素が一定条件下で再びエラーに
https://vanillaice000.blog.fc2.com/blog-entry-796.html
・html5廃止要素の使用(サイドメニュー最下部の「Facebook」ウィジェットの scrolling属性 の使用, 同じくこのウィジェットの frameborder属性 の使用, 同じく allowtransparency属性 の使用)

上記については何もしなくて良いと思います。最新記事はhtmlとCSSを自分で全て書き直さなれけばいけなくなりますし、FBウィジェットについては外部の仕様ですしね (´・ｪ・｀)
現時点で最新記事から2つ目のページについては綺麗なもんですよ。他ブロガーさんと比較してもかなり綺麗な方だと思います(笑)

ただ、最新記事にある「カエレバ」なんですが、一度ソースコードを確認された方が良いかもしれません。コードの再取得というか。
エラーが大変多く、無関係な後続の要素にも悪影響を及ぼしています。
こちらについてはカエレバの仕様ですので気になるようであればチェックしてみてください。
URLはエンコードが必要なはずですがエンコード済みのソースって出してもらえないんだろうか (´・ω・｀)
利用したことがないのでわかりませんが、ちょっと今検索してみたら
https://www.bcafe.jp/posts/93
これクアトロさんと同じ状況のはずです。コメント欄で交わされてている内容がまさしくそれそのもの。

とりあえず致命的なエラーは(カエレバを除けば)消滅しています。大変苦労されたと思います。お疲れ様です :)

----
あともう一つ。
Adsenseの設置箇所について。
Empty-streetのサイドメニューは追尾型です。メインコンテンツよりもサイドメニューが短い場合に画面外に流れていかないようにストップしますよね。こういうのを「sticky(スティッキー)」というんですが、Adsenseはこのスティッキー部位への掲載はポリシー違反のはずです。
私の最近のテンプレートはサイドメニューの最下部のみstickyですがEmpty-streetの場合はサイドメニュー全体がsticky。
ですからサイドメニューに掲載したい場合にはstickyを解除してください。
メインコンテンツ部位の近接に設置する場合には問題ありません。サイドメニュー掲載のみ注意。その時はまたご相談くださいね。JSの外し方などお伝えします。よろしくお願いします。
知らずに設置してBANされたら申し訳ないので事前にお伝えしておきます。

長かったです。本当にお世話になりました。【エラー修正完了のご報告】

なんというべきか・・。
言葉では改めて御礼と、お世話になりました。としか言えませんが。

とにかく、いろいろとお手間をかけさせてしまいました。本当にどうもありがとうございました。

自分よりもAkiraさんの方が大変だったように思います。
（受講料をお支払いしたいくらいですが、どうか御礼の言葉のみで・・m(_ _)m・・）
自分も、症状と並行しながらの作業でしたので、なかなかはかどらなかったですけどね。


はい。<%introduction2>を用いた変数出力を利用してました。^^;
なるほど。Fc2のエディタ、プロフィール環境の仕様なども含めて、今回は本当に勉強になったように思います。
（ええ。プロフィール文については修正済みで、確認して繋げて書いてます。大丈夫かと。）

border: 10px solid #ccc;
border-image: url(https://blog-imgs-113.fc2.com/f/r/e/freelifestylelabo/paper123.gif) 15 repeat;

↑こちらの件も改めて、ご記載いただきありがとうございます。


カエレバのソースコードは文章中のHTMLですよね？
再習得か・・・。一応リンクに関しては無効なリンクにはならないのですがね。（CSSも含めて見直さなければならないかな。こちらもいろいろと検索して調べてみます。無論、カエレバ公式のページから習得したソースなんですが・・。）
カエレバ自体普及してだいぶ古いので、エンコード済みのソースは現時点でご予定にないんでしょう。；；
いずれにしても、無関係な後続要素にも悪影響を及ぼしているのならば取り払います。私の場合、収益というよりも、純粋にお聴きしてもらいたい意味で記事にしましたし。
（Youtubeには非公式でほぼ全曲あげられてますが、相変わらず著作権の無法地帯ですね・・。無論リンク掲載はしません。）


Adsenseについての補足、お気遣いも本当にありがとうございます。
（というか審査すらされているのか、私のブログの内容が悪いのか。アクセスがないからなのか・・。審査用の自動広告用コードは「head」に正しく貼られている（はず）ですので。いずれにしても合否連絡すら、11日経っても届いていません（悲））


はい。恐縮ですが、今後もいろいろとご相談させていただくことは多いと思います。
こちらこそ、宜しくお願いいたしますm(_ _)m

To Akiraさん（ご報告）

Akira 様
お世話になっております。

FC2からやっと回答が送られてきましたので、そのご報告です。
と言っても、すでに修正はされておりますのであまり意味はないのですが(;^ω^)

下記がその内容です。

【FC2】お問い合わせの件に関しまして

いつもFC2をご利用いただきありがとうございます。
FC2ユーザーサポートの●●と申します。

このたびは、ご迷惑をおかけいたしまして申し訳ございません。

お問い合わせいただいた件につきまして、
システムの調整を行いました。

お手数をおかけいたしますが、
お客様のご利用環境下でも正常に動作・表示されるかどうかを
ご確認くださいますようお願いいたします。

今後ともFC2をよろしくお願いいたします。

この度はご相談に親切に対応して頂きましてありがとうございました。

また宜しくお願い申し上げます(^^)

To クアトロさん(完了のご報告)

こんにちは (●'0'●)/

adsenseの方を申請されている段階では他のアフィリは利用しない方が良いかもしれませんね。
併用不可というルールはありませんが、一応競合になるわけなので(特にAmazonと楽天はadsense取得後もアクセスから外すなどの対策が必要かもしれませんのでそのあたりもよくお調べになってくださいね)

クアトロさんは途中で投げ出すこともありませんでしたし、質問者によっては逆ギレする方も居るなか本当に頑張られたと思います。
お疲れ様でした。お体もご自愛くださいね :)

To Mさん(終了のご報告)

こんにちは (●'0'●)/

今見たら公式なアナウンスも出てますね。
FC2側の返答が「え？そんな症状ありませんけど？」的なものでなくて良かったです(笑)
お忙しい中ご報告ありがとうございます :)

To Akiraさん（お返事不要）

Akira様

こんにちは。

Akira様のコメントを拝見してから確認してみるとFC2が公式にアナウンスしておりました(^^)

ボクはどうやら先走ってしまったようですね(;^ω^)

余談ですが、Akira様が今お使いになられているテンプレートはとても格好イイですね！8月限定だということを見逃しておりました(-_-;)

今ボクが使っているEmpty-streetですが、ブラック版が発表されないかなーって思っている今日この頃です(;^ω^)

いつもありがとうございます。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street スクロールアンカー解除の件 内緒さん

こんばんは ('0')/
承認されたのですね。おめでとうございます。

注)スクロールアンカー不要の方ここから削除
で検索するとhtml内に出てきますのでガイダンスに従って削除してください。CSSを修正する必要はありません。

-----
レイアウト的なことで特に注意することは無いと思います。
強いて言えば「レスポンシブタイプ」を選択して頂くのと、Adsenseは(仕様が変わっていなければ)ローディングの後にブラウザサイズを変更しても幅が変わりませんのではみ出します。ローディング直後はきちんと収まっています。
これは仕様なのでお伝えしておきます。

よろしくお願いします。

---- 追記
一つありました。先回お伝えしようと思ってすっかり忘れてました。
内緒さんはナビゲーション内のリンクを追加されていますので、本記事内の「ナビゲーション内について」の章の内容の対象者です。
記事内容を参照しながら適切なブレイクポイントを設定してください。現時点ではブラウザサイズを変更するとサイト内検索とprofileが重なってまともに使えません。
レスポンシブデザインをカスタマイズする際は一定のブラウザサイズだけで行わず、マウスでサイズを大きくしたり小さくしたり、あらゆる画面サイズできちんと収まっているかどうか確認をしてくださいね。
よろしくお願いします。

スクロールアンカー解除及びブレイクポイント設定の件【完了のご報告】

おはようございます。お世話になっております、クアトロです。
（考えてみたらシークレットにする必要性なかったのにシークレット回答してました。バカ）


有難うございます！　もっとかかると思っていたのですがね・・。
最近すこぶる症状が良くないので、これが唯一嬉しい出来事でした。

追記の件はどうも有難うございます。（どうもレスポンシブというのを忘れブラウザ最大幅のまま作業してしまい、「可変しながら調整」ということをつくづく疎かにしてしまいますよね。）一応ブレイクポイントは1000px辺りで可変するよう調整したのですが、なんとか現状のナビゲーションでは大体上手く調整できたかなと思います。


広告レイアウト仕様の件、了解致しました。


Akiraさんもお時間あれば、たまにはブログ覗きに来てくださいね。←興味ないかもしれませんけど^^;
今年はテンプレート使用、構文エラーの件を含め、本当に色々なことでご教授いただき感謝しております。

まだ少し早いですが、お子様ともども、年末年始含め、体調にはくれぐれも気をつけてお過ごし下さい。

今後とも宜しくお願いいたしますm(_ _)m

To クアトロさん(完了のご報告)

こんにちは ('0')/

はい。またお邪魔させてもらいますね 。
クアトロさんもどうぞお身体ご自愛しつつ良いお年をお迎えください :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street広告バナーの件 内緒さん

こんばんは ('0')/

バナーがどんなものでどんなhtml, CSSソースなのか私では知る由もありませんので、実際に掲載して頂かないことには何のアドバイスもできません。
よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street広告バナーの件 内緒さん②

こんにちは (o'ω')ﾉ

ちょっと整理しますね。
私が事前にお伝えしたのは以下の2点です。
・レスポンシブタイプを選ぶこと
・adsenseの仕様上、ローディング直後は綺麗に収まっていてもブラウザサイズを変更しても横幅が可変にはならないこと(ローディング直後に最適なサイズで表示されるが以降の変更は再ローディングまで行わない)

で、ご質問と現状を整理しますと

> 中央にバナー配置したいのですけれど〜右に寄ってしまう〜ちなみにレスポンシブタイプではありません〜

.header-billboard自体は中央寄せになっていますが中身が.header-billboardよりも大きいのでoverflow(溢れ, はみ出し)している状態です。
広告はiframeの別documentとして表示されます。親のdocumentがテンプレートのhtmlで、その中に別documentの広告、とうことです。

<do

-----
<html> --- 親doc(テンプレート)
<head> --- 親doc(テンプレート)
</head> --- 親doc(テンプレート)
<body>

<script></script> --- 広告スクリプト(広告内容の書き出し処理)
<iframe> --- 広告自体の要素
<html> --- 子doc(広告)
<head> --- 子doc(広告)
</head> --- 子doc(広告)
<body> --- 子doc(広告)
広告関連要素(省略)
</body> --- 子doc(広告)
</html> --- 子doc(広告)
</iframe> --- 広告終了

テンプレート内容
</body> --- 親doc(テンプレート)
</html> --- 親doc(テンプレート)

こういう感じですね。こういうのが別のdocumentなんですが、基本的にiframeが別documentを書き出す時には親documentからのCSS操作などは受け付けません。つまりテンプレートのスタイルシートにCSSを書いても無効です。iframeをdiv要素などで囲っても無理です。かといってJSで無理やりiframeのCSS操作をすれば恐らく規約に抵触するのではないかと思います。
なので レスポンシブタイプを選んでください とお伝えしました。

-----
特徴を再度お伝えしましたので、適切なものを選び直されることをおすすめします。

----- 追記
広告自体はちゃんとレスポンシブに対応しているようですよ。
親要素(script要素を挟むために内緒さんが入れた.header-billboard)に margin: 0 10em 0 0 の指定があります。これは上0px, 右10px, 下0px, 左0px という指定で、width: 100% を同時に指定しているのですから 横100% + 右に10px ということになります。すなわち超過です。
このために中にある広告がwidthの制限を受け、.header-billboardに収まりきらずに右にはみ出ています。
.header-billboardの要素は不要ですから削除すれば自動で収まると思いますので一度お試しください。
それでダメならレスポンシブタイプに選び直しですね。つか、たぶんレスポンシブになってますよ。.header-billboardが邪魔してるだけで (´・ω・｀)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street広告バナーの件 内緒さん③

今の位置から </header> の直前に移動させてみるとどうでしょう。これ私伝えてなかったですね。ごめんなさい。
一度ご確認ください。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street広告バナーの件 内緒さん④

こんにちは (o'ω')ﾉ

センタリングについては広告の選択の際にレイアウト指定できるはずですからご確認ください。

で、広告の設置指南については原則としてお断りしています。理由は私が実証見聞することができないこと(コードを勝手に貼るわけにいきません)や、広告は多種多様なサービスがあり、私がそれぞれの規約を確認する義務がありません。
なので後は私の知りうる限りの情報を記しますので、ご自身で対策をお願いします。

まず、センタリングについては先に記した通りですが、カスタマイズの性質上不要になるかもしれませんので作業は最後に取っておいてください。それ以前のカスタマイズで中央になるようでしたら不要です。

scriptで内容を書き出すものについては どこからどこまでがhtmlとして見えており、どこからどこまでがscript実行後の内容なのか が一見しただけではわかりません。なので本来はご質問時にコードを書いて頂かないと検証できません。

<script async src="xxx"></script>
<ins class="adsbygoogle" style="display: inline-block" data-ad-client="ca-pub-xxxxx" data-ad-slot="xxxxx" data-ad-format="auto"></ins>
<script>省略</script>

これで合ってますでしょうか。
結局はこれが一番大事なので必ず確認をしてください。

-----
はみ出す原因なんですけども、「右に寄っている」という表現は的確ではなく、marginやpaddingによって画面幅を制限されているため「右にはみ出している」んですね。
adsenseはデバイスの横幅を見分けています。例えばiPhone SEならば横320pxですから、320あるいは318とかそのぐらいで表示するのではないかと思います。

ところがテンプレートというのは大抵の場合左右にpaddingによる余白が設けられています。そうしないとテキストが左右辺にピッタリくっついて非常に読みづらくなるからです。
Empty-streetの場合はPCで60px、タブレットで30px、スマホで15pxの余白を左右につけています。iPhone seだと
320px - (15 × 2) = 290
290pxの領域しかないのに320pxで広告を表示してしまえば当然はみ出します。右に寄っているように感じるのは左のpaddingのせいです。

方法①
paddingの影響を受けない箇所に貼り付ける
先回のヘッダービックバナーはこの方法です。headerにはpaddingを設けていませんので比較的小さめな画面幅のときは左右いっぱいを使い切るように広告が表示されているはずです。
ですがこの方法だとpaddingの無い部分をテンプレートのCSSから調べ出さないといけませんので、html, CSS初心者の方には向きませんし掲載場所がかなり限定されてしまいます。
(注: ヘッダー部位の広告のセンタリングは .header-billboard に style="text-aglin: center;" 追加でできるはずです)
リンクユニットについては内緒さんのページ内で実物を確認できませんので言及できません。

----
方法②
ネガティブマージンで左側を引っ張る
記事下にユニットを入れるのなら使えるかもしれませんが、繰り返しますが実物が無いのではっきりはわかりません。
広告関連コードをdivで囲い、そのdivに style="margin-left: -数値px を指定することで左側が引っ張られて右のはみ出した部位を画面内に引き込むことができるかもしれません。

----
方法③
メディアクエリの設定を変更する
カスタムでstyle要素によるメディアクエリを使えるようになっているはずです。分岐はPC, タブレット(768px). スマホ(320px)ではないかと思います。具体的なことは存じませんので確認してください。
<style>
@media screen and (min-width: 320px) {
.xxx {
max-width: 数値px;
}
}
</style>

max-widthではなくwidthかもしれませんが、ともかくこの数値を変更。Empty-streetの余白はお伝えしましたのでその数値を規定から引いてください(左右ですから2倍です, スマホなら15×2で30px)

----
ネガティブマージンが一番簡単かもしれません。
ただし技術的に「できる」のと規約的なそれとが必ずしも合致するとは限りません。規約についてはご自身で確認をし、自己責任を徹底してください。
よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street広告バナーの件 内緒さん⑤

お疲れ様です (o'ω')ﾉ

ともかくまずは指南通りにやってみましょう。
・ビッグバナー --- style属性に text-align: center を追加すればセンタリングになるはずです。そしてこの部位はこの作業で終了ではないかと思います。
(displayプロパティは私の記し忘れですので追加しておきました)
・カスタムデータ属性(data-xxx)の変更を試す前にネガティブマージンは試しましたか？

data-ad-client や data-ad-format というのは カスタムデータ属性 といって、文字通りユーザーの独自拡張なんですね。ですからhtml5の一般構文ではないんです。
例えば
data-akira="open" でクリック展開する、data-akira="close" で閉じる、など、ユーザーが任意で属性の役割を指定できます。
仕様・仕組みについてはGoogleがscript内容をどう作っているかによるんです。ですから例えばQ&Aで質問するとしても、そのdata属性値に「何が用意されているのか」「真偽値(true or false)が指定できるのか、またそれぞれの値が存在するのか」などを相手に知らせないとどうにも回答ができないんですね。
というわけでdata属性を操作する際にはGoogleのdata属性一覧を参照しなければなんともなりません。

私が参照したのは以下のページです
https://www.acky.info/tips/web/00020.html

----
結局今何が起こっているかというとこういうことです ↓

参考記事: 記事の横幅が広すぎて文章の見た目が悪い… と感じたときの対処法
https://vanillaice000.blog.fc2.com/blog-entry-810.html

上記記事に「widthに絶対値をつけてはいけませんよ」と書いてありますのでその部分だけ読んでください。
adsenseのバナーというのは絶対値のpx指定なんですね。それ故に

<div class="xxx" style="width: 100% !important"> --- 制御用に追加したdiv
取得したコード
</div>

例えば制御用divに横幅は100%でさらにimportantをつけて最重要規則として指定しても、それは.xxxのdivが守るだけで中身が仮に700pxというように絶対値が記されていた場合、.xxxが500pxに制御されていたとしても中身は700pxとはっきり明示されているので700pxを守って、結果はみ出します。
adsenseのバナーは絶対値なのですから、この値を変更しない限りはみ出しは直りません。
それ故にネガティブマージンで引っ張るという方法を提案しました。

それよりもっと根本的なその絶対値の値を変更する、というのがメディアクエリによる変更です。width: 700px がはみ出すのならば width: 500px に変更しましょう、というのがこちらの方法です。数値については「例えばの話」ですよ？念の為。
言ってみればGoogleの横幅自動調整に頼らない、自分で決める、というやり方。

リンクユニットがはみ出す仕組みは既にお伝えしたとおりです。デバイス横幅と同等の値をpxで出力するのでテンプレート側のpaddingやmarginの影響ではみ出します。
これはどれだけやっても変わらないですよ。ネガティブマージンかメディアクエリのいずれかを操作しないことには。
結局は「Googleがpxの絶対値ではなく%の相対値で出力してくれれば良いのに」ということなんですが、それはGoogleの仕様ですから仕方がありません。

何はともあれ「ビッグバナーの制御用div(親のdiv)にtext-align: center」
と
「リンクユニットの様子を見ながらネガティブマージン指定」
を実際にやってみてください。
それでもダメならメディアクエリで自分で横幅を決める、と。

---- 追記
今拝見しましたが、記事途中に埋め込まれてますね。ネガティブマージン云々以前に完全に超過してますね(笑)
これもうメディアクエリでやらないとどうしようもないと思います。あるいは
data-ad-format=”auto”
の追加と、display値がblockになっていますので inline-block に変更することで上手く調整できるかもしれませんが。
あるいは上記2点とメディアクエリの複合か。
またあるいはもっと適切なものを選べるのか。

その前にテンプレートCSSに一つ追加してみてください。
primary {
で検索するとCSS内に2箇所ありますので、最初の方に
max-width: calc(100% - 50px - 300px);
を追加。2つ目の方に
max-width: 100%;
を追加。
もしかしたらこれで上手くいく「かも」です。

あとついでに .ad-link-unit の margin-bottom が margin-bottm のスペルミスで効いていませんので修正を。

----
コメントアイコンの件もありましたね。
.name管理人クxxx:before
ではなく
.nameクxxx:before
ですよ。

To Empty-street広告バナーの件 内緒さん⑥

今拝見しましたらユニットの方も上手く収まっているようですがいかがでしょうか。
これでヨシと思われましたらテンプレートの方に指定を追加しようと思います。そして管理人コメントも自動で表示されるように変更しようかと。
内緒さんがモニターみたいになってしまってすみません ^^;

とりあえずご報告をお待ちします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street広告バナーの件 内緒さん⑦

> Xperia SOV36〜端枠がほんの少し欠ける〜

絶対値指定の問題点はまさにこれなんですよね。Googleはメジャーな端末のビューポートはサポートしていますが全てではないんです。
Xperia SOV36の横幅は424ではないかと思います。なので分岐は
@media screen and (max-width: 424px) --- Xperiaを「含み」それ「以下」の横幅の場合 ①
@media screen and (max-width: 423px) --- Xperiaを「含まず」それ以下の〜 ②
または
@media screen and (min-width: 424px) --- Xperiaを「含み」それ「以上の」〜 ③
@media screen and (min-width: 425px) --- Xperiaを「含まず」それ「以上の」〜 ④
という意味なので、maxとminの意味を取り違えないようによく注意しながら、どう分岐させたら良いかを検討してください。

今回の場合は①か③になると思います。
①の場合は320pxが最小機種ですから、それを軸にしてください。Xperiaの424で考えてしまうとiPhone seなどではみ出します。
③の場合は逆にXperiaを軸に。
といっても難しいですよね。たぶん。この分岐でも良いかなぁ ↓

@media screen and (min-width: 424px) and (max-device-width: 425px) {
...
}

これだともうほぼXperia専用分岐という感じですね。誤差1px。その前に424pxで本当に正しいか確認もお願いします。
とりあえずほぼ解消ということで大丈夫でしょうかね。お疲れ様ですー。

-----
ここからテンプレートのアップデートの件です。
これから少しづつ修正するんですが、今回スピード調整(高速化)などは行いません。そこで内緒さんがアップデートするかどうかになるんですけども。
現時点で内緒さんはFontAwesomeの 旧バージョンの書式 を利用してリンクなどを追加されてるんですね。仮に記事内でもFAを使うことがあるとすると、できれば今のうちに新しい書き方に変更されたほうが良いと思います。
理由についてはのちほど記事にしますのでそちらでご確認ください。

・旧FAでやりたい
・任意カスタマイズの再適用が困難

という場合にはアップデートはおすすめしません。
ただし上記に該当しない場合には面倒でもアップデートされた方が後々楽ではないかと思います。
ともかく記事を書きますね。よろしくご検討ください。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street広告バナーの件 内緒さん(完了のご報告)

こんにちは ('0')/

はい。アップデートは強制ではありませんので、されるにしてもご自身のタイミングで行ってください。
そして記事を書くことが最重要課題ですから、そちらを最優先で。
お身体も気をつけてくださいね。あまり根を詰めすぎてもよくありません。当面は落ち着いて記事の更新に集中できるのではないでしょうか。
お疲れ様でした :)

ありがとうございます！

Akiraさん、こんにちは。
テンプレートのメンテナンス、お疲れ様です＆ありがとうございます。

早速DLして調整してみました。
これでまた、このテンプレートとのお付き合いが長くなりそうで嬉しいです。
（新作が発表になる度、ついつい目移りしてしまうのですけど（汗））

どうかAkiraさんもご自愛ください。

To そふぃあさん

そふぃあさん、こんばんは (●'0'●)/

何か不備がありましたら教えてくださいね。
いつもありがとうございます :)

メールフォームからメールが送れない

お世話になっております。テンプレートのアップデートを試みたところ、読者の方から「メールフォームからメールが送れない」とコメントを頂きました。どうやら「メールフォームが設置されてません」となるようです。

私の能力ではどのように対処して良いか分からず、どこがどのように間違えてしまったのか途方に暮れております。

何か良い対処法はございますでしょうか？お忙しいなか初歩的なコメントをしてしまってすみません。

To Mさん

こんばんは。

まずご自身で動作の確認をお願いします。
テンプレートのメールフォームからご自身に送ってみてください。それで届かなければ再度お知らせくださいね。

ボクのウッカリミスでした

Akiraさま

もの凄い素早いお返事ありがとうございます！

何度か自分でテスト送信しているうちに、ついウッカリしてプラグインに追加してあるメールフォームを削除していた事に気付きました。プラグインを非表示にしていてもメールフォームは追加しておかないといけなかったんですね(;^ω^)

公式プラグインのメールフォームを追加してから非表示に設定した後、メールを送信してみたらちゃんと送れました。

貴重なお時間をお邪魔してしまい、大変失礼致しました。ありがとうございます。

To Mさん

いえいえ。今ちょうど既存テンプレートの修正作業をしておりました(笑)

とりあえず解決されたということで安心しました。
お疲れ様でした :)

To Akiraさん

Akiraさま

メールは送れたのですが、肝心の、送ったテストメールがまだ届かないみたいです(;^ω^)

時間的なものなのかも知れませんが、根気よく待ってみようと思います。

ありがとうございます。

To Mさん

あっさり「解決」としてしまいましたが、実際は公式プラグインを入れていなくてもメールは届くはずなんですよね。
ちょっと私の方でも動作確認してみますのでしばしお時間ください。

メールアドレスを変えた、とか根本的なアレは無いですよね(笑)
いや念の為 ^^;
また確認後にコメントしますね。

To Akiraさん

たびたび恐れ入ります。

メールアドレスは変えてません。

メール送信するとちゃんと「メールが送信されました」と表示されます。

しかし、ブラウザの更新ボタンを押すと、「メールフォームが不正です」と表示され、メールが送れてない事がわかりました。

試しに、アップデート前のテンプレでやってみても同じ結果でした。

これって、またＦＣ２側の問題でしょうか？

To Mさん

メールフォームの更新・リロードはもともと不正扱いになりますのでここでは無視してください。
これはFC2以外でも同じです。

メールはGmailか何かですかね。そしてFC2ブログ内でもらったコメントって届いてますか？
「新着コメントのお知らせ」という題名で届くと思うんですが、これが届いているか確認してみてください。

私もメール届かないですね。公式テンプレート+公式プラグイン でやってもやはり届きません。
FC2の不具合じゃないかしら (´・ω・｀)
お問い合わせされた方が良いかもしれません。
https://form1ssl.fc2.com/form/?id=15028

To Akiraさん

はい。ボクはＧmailを使ってます。

ブログ内の新着コメントはちゃんと届きました。いつもメールを頂いている読者の方からコメントを頂いたことで
今回の不具合が判明しました。

またFC2に問い合わせてみます。

運営側から返答がありましたらご報告させて頂きます。

いつもありがとうございます。

To Mさん

はい。たぶん不具合じゃないかなぁ、と思います。
なにせ普段メールフォームを使っていないので自信を持って言えませんが。
私がやってもコメントは届くけれどメールは届かない、という症状です。メールフォームは公式プラグイン、テンプレートも公式テンプレート、という環境で行いました。

お問い合わせの際には
・公式プラグインから送信した
・公式テンプレートを設定して行った

上記2点をお書き添えくださいね。でないと「テンプレートカスタマイズの質問は受け付けません」とかすっとぼけた返信が届くことがあります。

To Akiraさん

あ。「公式…」のくだりは書かずに送ってしまいました(;^ω^)

念の為、しばらく公式プラグインを表示させておこうと思います。

To Akiraさん

Akiraさま

お世話になっております。

FC2から下記の回答がありました。

いつもFC2をご利用いただきありがとうございます。
FC2ユーザーサポート●●と申します。

お問い合わせいただきました件ですが、
Gmailのメールアドレスをメールフォームプラグインに入力し、
動作テストを行いましたが
問題なくメールが受信できることを確認いたしました。

ご利用中のメーラーによっては「迷惑フォルダー」内に
振り分けられる可能性がございます。

お手数ですが、今一度「迷惑フォルダー」内を
ご確認くださいますようお願い申し上げます。

今後ともFC2をよろしくお願いいたします。


この回答が来てから今一度試してみました。

今度はメールが届いた（迷惑メールの方に）のですが、ブログの方は「メールが送信されました」と表示がされた後ブラウザが固まってしまうようです。それで更新ボタンを押すと、やっぱり「不正なメールフォームが使用されています」と表示されてしまいます。

一体、何が問題なのでしょうね(;^ω^)

To Mさん

こんばんは。

「届かない」というのは送信後の画面動作不良のことだったんですか？メール自体が届かないのではなく。
(私もメールが迷惑フォルダに入っていました。ちゃんと確認せずすみません)

確認ですが、ナビにご自分で追加したフォームのことですよね。公式プラグインではなく。
今私の方から三度送信しましたので届いているかどうか確認をお願いします。三度目のみサイドメニュー部の公式プラグインから送信しました。

ナビの追加フォームはFC2デフォルトのメールフォームへ飛ばしているだけですから公式プラグインと中身は全く同じです。見た目が違うだけ。
で、送信後の画面のフリーズはMさんのサイト特有だと思います。私の環境でEmpty-streetを設定してメールを送信してもフリーズは起こりません。
以前指摘させて頂いたバリデートエラーについては修正がありませんのでなんともできませんが、その影響かもしれませんし、あるいはアフィリエイトが関係しているかもしれません。
一旦アフィリエイトを全て外されまして、その上でテスト送信を行ってください。
仮にそれで上手く動作するのであれば、そこから1件づつアフィリエイトを追加し、面倒ですがその都度テスト。
原因がアフィリエイトのコードにあるならばそれで特定できるかと思います。

テストは公式プラグインのカレンダーの翌月をクリックし、記事が無い状態のページで行ってください(html構文エラーの影響を避けるため)
それでも改善が無い場合には独自ドメイン環境を疑うことになるかなぁ、と思いますが現時点ではちょっとわからないですね (´・ω・｀)

あと、adsenseを利用する場合はスクロールアンカーは解除してくださいね。
参考記事: 【重要】テンプレートのアップデートについて, Font Awesomeについて(Google Adsense用にCSS追加の部分)
https://vanillaice000.blog.fc2.com/blog-entry-811.html

FC2からのメール、いつの間にか迷惑フォルダに入るようになっちゃったんですね ^^;
根を詰めず少しづつ解決しましょう。師走でお忙しいでしょうし、ともかくまずはお身体をご自愛くださいね。
(コメントは気づいたらすぐ返信するように心がけていますが、私のペースに合わせる必要はないですよ)

To Akiraさん

Akiraさま

お返事ありがとうございます。

Akiraさまからのメールは迷惑メールの方に届きました。「このメールにはご注意ください。Gmailではこのメールが本当に●●から送信されたものであることを確認出来ませんでした」というメッセージと一緒に(;^ω^)

最初のエラーの時はそもそも迷惑メールにすら届かなかったんですけどね...

いろいろ試してみます。いつもありがとうございます！！

To Mさん

こんばんは ('0')/

はい。ともかく今はお身体をお大事にしてくださいね。
なにかあればまたお尋ねください。

To Akiraさん

Akiraさま

おはようございます。

あれから、Akiraさまのご指示通りにいろいろ試してみました。挙句の果てには、別のテンプレートでも試してみたのですが、結局、不具合的な変な表示は改善されませんでした(;^ω^)

そこで、今一度FC2に問い合わせをしてみた所、次のような回答が送られてきました。

「ブラウザーを更新すると、その直前の動作が繰り返されます。メールフォームから連続してメールを送信すると条件によってはスパムメールとして認識されますのでメール送信後のブラウザーの更新は避けてください」

私自身がメールフォームを使うことはないのですが、閲覧者に「メール送信後はブラウザーの更新をしないで下さい。そうしないと変な表示がされます」なんて説明しづらいですよね(;'∀')

まあ、これがFC2側の結論のようです。何か納得は行きませんが...

キリがないので、一応これで解決ということにしました。

いろいろお手伝い頂き、ありがとうございました。

また何かございましたら宜しくお願い致しますm(__)m

To Mさん

こんにちは (●'0'●)/

FC2の返答は正しいですよ。何故ならMさんの問題はそこではないからです。
最初にお伝えした

>メールフォームの更新・リロードはもともと不正扱いになりますのでここでは無視してください。
これはFC2以外でも同じです。

これはFC2が言っているのと同じです。フォームの送信というのは繰り返せばどこのサービス、どのメーラーでもエラーになる性質のものです。容易にリロードできるものならば何度も同じメールが送信されてしまいますよね。
Mさんの直面している問題は
「メールの送信に失敗する」のではなく「リロードするとエラーになる」のでもなく
「メール送信後に画面が戻ってこない」というものです。
たぶんそこがFC2に伝わっていません。
メール送信自体は実際には終了している(ちゃんと届いていることは確認済みですよね)のに画面が「終了していない」状態を継続し、元の画面に戻れないわけなんです。
継続中と判定しているのですから当然リロードすればエラーです。
送信終了・完了後と判定されていればリロードしても何も起こらない、というよりもリロードを要求されること自体がありません。Mさんの現状はリロードを余儀なくされているのであって、そこが今回の問題点です。

で、お伝えしたとおり原因はざっと2つ予想が立ちます。
① なんらかのJSが画面の遷移を阻害している
② 独自ドメイン環境

> 別のテンプレートでも試してみたのですが、結局、不具合的な変な表示は改善されませんでした〜

これなんですけども、この「別のテンプレート」というのはデフォルトの状態、つまりアフィリエイト関連JSやプラグインなどMさん個人の内容を省いてあるものでしょうか。それとも追加後のものでしょうか。

もしデフォルトのままであるならば原因は独自ドメインの通信環境かもしれません。
私はFC2ブログの独自ドメインを持っていませんので検証ができません。
私の環境下(html, CSS, JSが正確、アフィリエイトなどはなし)ではEmpty-streetでも公式テンプレートでもMさんの問題は再現できませんので、Mさんが行った別テンプレートでの動作検証が「デフォルト」ということならば私の環境との違いはそこだけですから「独自ドメインの通信環境を調べて欲しい」旨再度FC2に依頼することになるかと思います。

まずそこをクリアにしてくださいね。デフォルトなのか追加後なのか。

デフォルト → 独自ドメインになにかあるかも？
追加後 → 追加内容(特にJS)を疑う

追加内容が阻害している場合には一旦デフォルトの状態に戻してから一つ一つ追加しながら検証するしか方法がありません。そしてそれは第三者が代行することができませんので、お身体の状態と相談しながら作業するしかないんですね (´・ω・｀)
ただ、他にも独自ドメインでポップアップのメールフォーム(私が記事にしておりMさんもナビ内に導入しているもの)あるいは公式プラグインでも同様の報告というのは届いていませんので、アフィリエイトに関連している可能性は高いと思います。

To Akiraさん

Akiraさま

お返事ありがとうございます。Akiraさまのご説明で理解出来ました。ありがとうございます。

一応、現在のテンプレートで、アフィリエイトを全て外して試してみてダメだったので、別のテンプレートをお借りしてデフォルトのままで試してもダメでした。

もう一度、アフィリエイトやJSを取り外してチェックしてみようと思います。その上でやはりダメだった場合は今一度FC2に問い合わせしてみます。

いろいろお気遣い頂きありがとうございます！！

To Mさん

お疲れ様です。

そうなるとやっぱりシステムが影響している気がしますよね。デフォルトで検証したということならば、私の環境との違いは「ドメイン」だけなので。
FC2に問い合わせる時には「独自ドメインの場合に起こるのではないか」という推測を添えておくと良いと思います。
これもSSLの影響かもしれませんね。
面倒なことになってしまいましたね (´・ω・｀)
いずれにしてもお身体を一番になさってくださいね。

To Akiraさん

Akiraさん

お返事ありがとうございます。

今、私のブログはアフィリエイトやJSなどを全て取り外した状態になっているのですが、やっぱり駄目みたいです。

FC2にもう一度問い合わせしてみようと思います。

ありがとうございます。

To Mさん

はい。お問い合わせしてみてください。
お疲れ様です :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-streetの件 内緒さん

こんにちは ('0')/

まず「カレンダー」の件がなんのことかよくわからないです。すみません。

--- 既にカスタマイズ済みのbodyへの背景について
background-attachment: fixed;
の指定がありますが、スマートフォンではbackground-attachmentプロパティは無視されます(正常に実装できているモバイル端末は今の所無い)のでご理解ください。今の状態だとスマートフォンでは背景はスクロールと共に移動します。
この点については念の為の確認というだけです。

--- 本題のぼかしについて
> この背景の効果は、たった一行のCSSで実装できます。」という説明通りにbackdrop-filter: blur(20px);　をヘッダーに入れてみました。〜

すりガラス調のぼかしを入れる際は背景色にアルファ値を設けてください。
background-color: white;
では背景色「不透明度ゼロの白」という意味ですから、当然透けないので下の様子は見えません。

#header-banner
のルールセット内に

background: rgba(255,255,255,.5);/* .5は不透明度, 任意数値設定 */
backdrop-filter: blur(6px);/* 6pxはぼかしの具合, 任意数値設定 */

上記の2行を追加して確認をお願いします。
注意点2点

1. backdrop-filterプロパティはFirefoxブラウザで未実装です。薄い白になるだけですりガラス調にはなりません
2. ナビゲーション部位は範囲外なので別途背景色を付けないと見づらいと思います(任意)

ナビゲーションを操作する場合は
.navi-menu
のルールセットへ指定。

一度お試しください。よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-streetの件 内緒さん

こんにちは。お返事大変遅くなってごめんなさい。
自己解決されたとのことで拝見しました。現在ですとスマートフォンでの見た目がよろしくないので、以下の修正をおすすめします。

#blog-name-container
のルールセット内にある
max-width: 1400px;
の一行、1400を700前後に変更。

同じくルールセット内に内緒さんが追加した
width: 27%;
の一行、27を90〜95前後に変更。

続いて

@media screen and (max-width: 700px)
#blog-name-container {
padding: 0 30px;
}

という内容がありますので、このルールセットを削除(スマートフォンで該当部位上下余白を取り除くとテキストと辺が近すぎるため)

以上です。よろしくお願いします。

---- 別件
任意でナビゲーション内に追加している「contact」のhtml記載が不正なのと、白背景に白文字で読めませんので、まずご自身で追加した

<li><label for="modal-trigger" id="modal-trigger-label">Contact</label>

の<li>の前にある全角スペースを削除。html内のインデントに全角スペースの利用は厳禁です。
参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

htmlの修正を済ませましたらスタイルシート内の
#modal-trigger-label
のルールセット内
color: white;
の一行を削除。

以上です。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street ナビゲーション文字色の件 内緒さん

お返事遅くなってごめんなさい。

スタイルシート最終に

.fixed-positioning #modal-trigger-label {
color: white;
}

を追加してください。よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Empty-street ナビゲーション文字色の件 内緒さん(完了のご報告)

こんにちは ('0')/

修正できたということで良かったです。お疲れ様でした :)