Swollen - FC2ブログテンプレート

管理人のみ閲覧できます

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

うう〜リリース心待ちにしておりました！
PC環境が整ってないもので不具合確認も出来ず、変にコメントするのもどうかと思いこっそり静観しておりました…お力になれず申し訳ありません（ ; ; ）
運営さんへ報告して下さったり、現状を的確に伝えて頂けて、とっても頼もしかったです(*´︶`*)♡
というのも虫がいいような…！でも本当の気持ちです

こちらもカスタマイズして大切に使わせて頂きますね♡
いつも素敵なテンプレートありがとうございます！

To コメントの件 内緒さん

まず、使用報告の義務は一切ありませんのでお気になさらず。
私のテンプレートに限らず、その時その時で使いたいと思ったものを自由にお選びくださいね :)
そしてわざわざお越しいただきましてありがとうございます。

私、あなたのような方が幸せで居られないなんて納得できないので、
どうか笑顔になれることがたくさん起こりますように。
あなたの優しさは文章からも伝わってきます。
自信持って行きましょう ╭( ･ㅂ･)و

To 相槌さん

なんか…。不具合じゃないって言い切られ(笑)
し、仕様？！(汗) みたいな(笑)
「こちらの環境では起こりません。」とか言われたらもうどうしようも… ない （￣∀￣；）
結局あまりお役に立てず申し訳ないです (*_ _)

こちらこそありがとうございます。
励みになりますー :)

ヘッダー画像のリンク化他

HTML/CSSの初心者講座のような記事で勉強させてもらっています。いつもありがとうございます。
なんとなーくこんな感じ？で済ませていることがほとんどなので、毎回ギクツ！としてます(ﾟ＿ﾟi)
SSL化もHTML5化もできてませんし、フォントは”メイリオ”をとりあえず先頭に！といじったばかりでした(泣)。


Swollenがとても素敵だったので、お借りします<(_ _*)>
ただでさえ、多忙なakiraさんに質問して時間を取らして申し訳ないのですが、カスタマイズについて2点ほど、教えて頂けないでしょうか？

①トップページの最初の1ページ目に入るヘッダー画像をクリックすると、特定のページへの飛ばしたいのですが、可能でしょうか？

②記事のタイトルの文字サイズを大きくしたいのですが、どこを修正すれば宜しいでしょうか?（思い当たる箇所を弄ってみたのですが、うまくいかなくて）


お忙しいところ申し訳ありませんが、教えていただけると助かります。

ヘッダー画像のリンク化他

②については解決できました。”　あれこれ試した時に漏れていたようで、#entry-title{　”の箇所を弄ったら、うまくいきました！

お聞きしておいて申し訳ないです<(_ _*)>

To かめ太郎さん

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

① ヘッダー画像クリックでページ遷移〜

可能ですがhtml構造が複雑になります。
全画面リンクをご希望、という仮定で進めます。
htmlソース内
Ctrl+F(Windows)/ Command+F(Mac) キー検索。

<!-- ヘッダー下welcomeここから -->

上記を目印に <!-- ヘッダー下welcomeここまで --> に挟まれた内容を以下の通り変更。

<div id="lower-left">
<a href="アドレス">
<div id="left-inner-cell">
<p id="welcome">大きめテキスト内容</p>
<p id="proverb">小さめテキスト内容</p>
</div>
</a>
</div>

続きましてCSSソース。

#lower-left

3箇所ヒットしますが、まず一番目のものが対象です。
この項目の

padding: 30px 50px;

上記を削除

続きまして同じく #lower-left の三番目。
以下のような内容になっています。

#lower-left {
padding: 60px 20px;
}

赤字を変更して以下の通り。

#lower-left a {
padding: 60px 20px;
}

続きまして検索。

#welcome

先程の一番目の #lower-left のすぐ下にあります。
この #welcome のすぐ「上」に以下を追加。

#lower-left a {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
color: カラーコード;
padding: 30px 50px;
}

#left-inner-cell {
display: table-cell;
vertical-align: middle;
}

赤字部分は、中のテキストが全てリンクテキストになりますので適切な色を指定してください。
白にされるならば white と記載します。
その他の色はカラーコードをお調べになって記載してください。
また、マウスホバーの際にもしかしたらie系はテキストの色がおかしなことになるかもしれません。
その場合には
#lower-left a のまとまりの下に

#lower-left a:hover {
color: カラーコード;
}

を追加してください。
あまりゴチャゴチャしてもアレなんで、同じ色を指定しておかれると良いと思います。

リンクへの text-decoration: none; を削除しておられますので、今回のかめ太郎さんの場合はテキスト下に下線が置かれます。
見た目に煩いと感じられる場合には #lower-left a への指定内容の padding: 30px 50px; の下で良いので

text-decoration: none;

を追加してください。

=======

② 記事タイトルのフォント大きさ変更〜

検索。

.element-title

CSSソース内に1箇所あります。
こちらはトップページの記事タイトルです(個別記事のタイトルとは連動していません)
この項目の font-size を調整してください。

個別記事のタイトルは

.entry-title

のfont-sizeを変更してください。
既に全体の文字も大きくされていますので、トップページの記事タイトルを大きくされますと、要約記事の表示がかなり縦長の不格好になるかもしれません。
その点を予めご了承くださいね。

==========

③ フォント指定について

同じ名称のフォントが離れ離れになっていますのと、Mac 新OSではフォント名が変更になった関係上、やはり今のままではあまりよろしくありません。
丸みを帯びたフォントを第一指定にされるのであれば以下の通り修正してください。
その前に、記事内テキストで欧文のものは現状だとWindowsではメイリオ、Macでは游ゴシック体になっており、欧文フォントの指定は無効化されています。
それで良いのかどうかも併せてお考えください。
以下はフォント部分だけの書き出しです。
(行の最終に ; を付けるのは忘れないでくださいね)

'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'sans-serif'

Windowsはメイリオ、第二が游ゴシック。
Macはヒラギノ角ゴシック(ヒラギノサンズという英字名に変わりました)、第二がヒラギノ角ゴ ProN W3。
Macの方も上記が丸みのあるフォントです。

欧文フォントの Open Sans が必要な場合には 'メイリオ' の「前」に記述してください。

'Open Sans', 'メイリオ', 'Meiryo',.....省略.....,'sans-serif';
よろしくお願いします。

======

すぐ上でコメント頂いていたことにあとで気づきました(笑)
フォントサイズについては修正済み、ということですね。
あとはリンクとフォント名の方を頑張ってくださいませ。

ヘッダー画像のリンク化他

akiraさん

想像していたものよりいじる箇所が多くて、お手間を取らしてしまってすいません。
とても分かりやすく書いて下さいましたので、躓くことなく修正完了できました。

修正は今朝行ったのですが、途中でiPhone、Androidスマホ共にヘッダー画像やプロフィール等が表示されなくなったことに気付き、四苦八苦してました(泣)

PCやAndoroidタブレットでは問題なく表示できるし、テンプレートを再ダウンロード＆適用しても改善せず、プラグインもいじっていたので、すべてチェックを外しても変わらず。
FC2ブログ側の一時的な不具合か何かかなと思い、一日様子を見ていましたら16時位からスマホでも表示されるようになりました。

そんなわけで、返事が遅くなり失礼しました。

フォントのアドバイスも頂き、ありがとうございます！こちらも修正完了しました。
重ね重ね、有難うございました。

To かめ太郎さん

お出来になったようで良かったですー。
修正中に不具合食らうとパニクりますよね ^^;

作業お疲れ様でした :)

こんにちは。いつもお世話になっております。

テンプレートのカスタマイズミスの類いではないのでは？と思っているので、akiraさんにお聞きするのは申し訳なく思っております。ですが、これ以上どうすれば良いか検討がつかず困っております。どの辺りが怪しいのか思い当たることだけでも教えて頂けないでしょうか？


困っていることとは、実際の記事を遥かに超えるページがGoogleにインデックスされていることです。

記事の数はおよそ100ですが、3,000程度インデックスされています。

site:http://kametarobochibochi.blog.fc2.com

これを見ていただければお分かりの通り、1947年や2028年などのアーカイブ記事が大量に作成されています。

FC2ブログの設定などを確認致しましたがが、このような状態になる設定は見つからず、FC2ブログにも問い合せしていますが、3週間近く経っても一度も連絡がありません。


どの辺りをミスしている可能性があるのか思い当たることがあれば、お教え頂けないでしょうか？

To かめ太郎さん

こんにちは。
こちらこそお世話になります :)

> 実際の記事を遥かに超えるページがGoogleにインデックスされている〜

まず、FC2ではページ種がいくつかありますので、記事数 = インデックス数 というわけではない、というのを大前提に。
(ご存知かとは思いますが念のため)

そのインデックスがある時期を境に一気に増えたのであればスパムを疑った方が良いと思います。
そこで確認です。

① 現在のテンプレートをご利用頂く前に、別のテンプレートを利用していた時期があったかどうか YES/ NO

② ①でYESの場合、テンプレートに横置きカレンダーが付いていた、あるいは任意でカレンダーを利用していたかどうか YES/ NO

③ Noの場合も同様に、過去にカレンダーを設置したことがあったかどうか(現在は見当たりません) YES/ NO

=======

Search consoleの方はご確認頂きまして、一気に増えているものであればスパム投下を疑っても良いと思います。
過去には中華系のサイトの検索クエリによる「サイト内検索スパム」なんかがあったもんですから、検索結果については noindex, nofollow を指定しています。
アーカイブについてはクロール・インデックス共に制御をしていません。
かめ太郎さんにとって特に問題が無いのであれば、<head>〜</head>内の

<!--date_area-->
<meta name="robots" content="noindex, follow">
<title><%now_year>年<%now_month>月の記事 - <%current_page_num>ページ目<%cno> - <%blog_name></title>
<link rel="canonical" href="<%url>blog-date-<%now_year><%now_month>.html">
<!--/date_area-->

太字部分を追加しても良いかもしれません。
それかこのパターンだと noindex, nofollow の方が良いかもしれない。
で、FC2に問い合わせてもこういった問題にFC2は対処しません。
それが公式テンプレであってもです。
まずは質問へのご回答をお待ちします。
よろしくお願いします。

No title

ご連絡ありがとうございます。
スパムの可能性が高いとはびっくりしてしまいました。教えていただきありがとうございます。

質問された内容を回答しますと、
① 現在のテンプレートをご利用頂く前に、別のテンプレートを利用していた時期があったかどうか YES/ NO
→YES

② ①でYESの場合、テンプレートに横置きカレンダーが付いていた、あるいは任意でカレンダーを利用していたかどうか YES/ NO
→2016年3月～7月　公式テンプレート「basic_white」　横置きカレンダーなし。任意のカレンダーはどうだったか記憶があやふやです。
→7月下旬以降　promise-me　サイドメニューでカレンダーを利用

補足
ブログ開設の2016年3月～7月下旬までは公式テンプレートを利用していましたが、記事の数はテスト記事が２、３くらいの状態でした。7月下旬からは「Promise-me」を使わせて頂き、本格的に利用していました。
インデックス結果のグラフを見ると、8月から急激に増加しているためpromise-meの時期だと思いますが、念のためそれ以前の情報も記載しました。
〇log-imgs-102.fc2.com/k/a/m/kametarobochibochi/2017-03-30_05h37_46.png
（bを〇に変えています）


③ Noの場合も同様に、過去にカレンダーを設置したことがあったかどうか(現在は見当たりません) YES/ NO
②の回答の通りです。


教えて頂いたnoindex, nofollowについて調べているところですが、nofollowで止めてしまおうかと思っています。毎度毎度お世話になります゜(´□｀｡)

To かめ太郎さん

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

これね、FC2のカレンダーというのは無限に繰ることができるんですよ。
何故「横置き」と訪ねたかと言うと、通常の表カレンダーは更新日がわかりやすくなってるのと、基本的にはサイドメニュー内の設置なんですよね。
ところが横置きというのはテンプレートソース内にhtmlが書かれていて、しかもhtmlぜんたいの前の方に書いてあるんです。
botはhtmlの前方をより重要視するようになっているので横置きはおすすめしません。

私も公式プラグインのカレンダーを利用していますが、前月・後月のリンクは rel=nofollow を指定しています。
でもこれ、私がソース書いてるわけじゃなくて私は公式プラグインをCSSで整えてるだけなんですね。
なのでみなさんの場合、カレンダーのhtmlをカスタマイズされていなければ無限状態になってるんです。
つまり第三者が意図的にでも意図しなくても、存在しない月までクリックを繰り返してしまうと今回のようにインデックスされてしまう可能性は十分あるんです。
私、自分だけちゃっかり対策して申し訳ない感じ （￣∀￣；）
でも公式プラグインなもので、基本的にはテンプレートにしろプラグインにしろ、自分以外のソース内容には触れないようにしてるんです。
トラブルの元になるし (´・ω・｀)

で、かめ太郎さんのインデックスがどうなってるかというと、404 not found です。
これが200だとアカンのですよ。
404なのでセーフというか、Search consoleでせっせと一つづつ削除依頼を出す必要性は薄いかな、と思います。
あと、アーカイブのインデックスは個人的には必要無いと思います。
だけどもかめ太郎さんのようにnoindexを避けたい方が多いもんですから、私としては最初からnoindexというのは控えてます。
でも要らんと思う(笑)
どこかで誰かが窓口を作ることがまず無いですよね。アーカイブは。
それよりbotがどこまでもどこまでもカレンダーリンクを追いかけてしまう方が問題 ('ω')
そこはお任せしますが、既にこういった事態になっていますので公式カレンダーのhtmlにはnofollow追加をしておくと良いと思います。
あと考えられるのは意図的なクエリ操作ですね。
要するにスパムです。
404なので追求しようがないですけどねぇ (´・ω・｀)

カレンダーについては記事を書こうと思いますー (´・ω・｀)

To かめ太郎さん

ごめんなさい。
聞こうと思って忘れた。
インデックスが始まった当時って、スマホ版はどうされてました？
ちょっと気になるもので。
設定されていて、もし公式のものであるならば名称も差し支えなければ教えてください。
共有ならすみません、スルーで(笑)
よろしくお願いします。

追記
あまりにも数が多いのでスパムを疑いましたが、FC2ブログのカレンダーで3000記事インデックスとか割とザラだって気づきました （￣∀￣；）

回答ありがとうございます。
毎回私が理解できる様に書いてくださるのでよーくわかりました。
akiraさんがプラグインのソースに触れないのは至極もっともだと思います。

はじめに，お聞きになられたスマホ版についてですが，大量インデックスが始まった当時は，非表示設定にしていました。


今回の原因としては，botが無限にカレンダーを辿っていったか，スパムか。

今は404ですが、前は誘導されていたのか今となっては不明ですし，スパムはなかったとしてもなぜ私のブログだけひたすら追いかけているのか謎ですが、、
ここまでわかっただけで充分です。助かりました。
この1ヶ月ずっともやもやしていたもので，本当にありがとうございます。

また，先の私の回答のせいでakiraさんを誤解させてしましました。
私もアーカイブのインデックスは不要と思いますのでnoindexも追加します。

最後にお聞きしたいのですが，中身のないインデックスがこれだけあると，Googleの評価に影響を与える可能性はあるとお考えでしょうか？

To かめ太郎さん

スマホ版の件ですが、Googleの有名人というかエンジニアチーフ(スパム対策チーム責任者)にマット・カッツさんという方がいらっしゃるんだけれど。
「元」Googleの顔ですかね。退職されて現在は米国政府機関に在籍しているようなので。
その彼が何かのイベントだかなんだかで話してたのをYoutubeで見た覚えがあって。
「無限スクロールはカレンダーと同じで延々とリンクを辿って〜云々〜正しくやらないと空インデックスが〜云々」
って聞いた記憶があるんですよね。
でも定かじゃないんです。おぼろにしか覚えていない(笑)
検索してみたけれどヒットしないので勘違い… ではないと思うんだけれど。
自分の記憶に自信がない(笑)
でも「カレンダーが厄介」みたいなことは絶対耳にしたはずなんですよね。
で、FC2ブログのスマホ版デフォルトって無限スクロール風じゃないですか(笑)
それで記憶を辿ろうとした ^^;
すみません。変なこと聞いちゃって ^^;

> Googleの評価に影響を与える可能性はあるとお考えでしょうか

無いと思います。
これもカッツ氏の意見で、こちらははっきり覚えてます。
「404 not foundなんていくらでもあるんだし、404が大量にあるからといってサイト評価を下げたりはしない。
寧ろ『ページ自体がありません』と伝わることが大事。
下手に削除対策を打ったり、リダイレクトで代替ページを設けたりはしないほうが良い」
って言ってた (´・ω・｀)
これは自信ある(笑)
要するに閲覧者にステイタスがどうなっていて、現実(現状のページ)がどうなのかを伝えるほうが大事、ってことだと思います。
404ステイタス、ということで、かめ太郎さんが今すぐ何かしなければいけない対策は無いと思います。
自然と消滅していくでしょうし。
カレンダーにrel="nofollow"を追加して今後の対策とする、ということで締めて良いんじゃないでしょうか。
心配でしたら他の方にお尋ねになるのもアリですよ。
Q&Aサイトとか。
その上でかめ太郎さんが「自身の選択」とされるのが一番かと思います。

私のアンサーとしては
サイト評価に影響は無い
ということで。

とりあえず、ご心労だったかと思います(笑)
お疲れ様です :)

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

なるほど、スマホ版デフォルトを使ってると同じようになるかもしれないのですね(笑)


Google評価の件については、教えて頂いた内容に納得していますし、akiraさんのご意見をお聞きしたかっただけですので、これ以上の対処については、考えていません^_^

ありがとうございましたm(._.)m

To かめ太郎さん

こちらこそ勉強させて頂きました。
ありがとうございます。
お疲れ様でした :)

To Swollenヘッダー画像の件 内緒さん(移動先)

> ヘッダー画像を変更したい件〜

記事の中ほどに「ヘッダー画像変更」という見だしがありますので、そちらをご参照ください。
その他のカスタマイズされる際には
注)
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂くことでガイダンスがでてきます。
よろしくお願いします。

管理人のみ閲覧できます

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

To Swollenヘッダー画像の件 内緒さん②

ご報告ありがとうございます。
はい。またご不明な点があればお気軽にどうぞ。
作業お疲れ様でした :)

To Swollenフォント変更の件 内緒さん(移動先)

> blogを普通のMSゴシックかMS　Pゴシックで黒字にしたい〜

まず注意点と、現在までの作業にあたっての疑問点の答えです。
①
MacにはMSゴシックやMS Pゴシックはバンドルされていません。
なのでWindowsユーザーとMacユーザーとではフォントが大きく変わることになります。
②
WindowsユーザーでMSゴシックを好ましいと思う方はかなり少数派だと思います。
本当に変更して良いのかを作業前にもう一度お考えください。

③
MSゴシック系を選択される場合には、プロポーショナル(MS Pゴシック)にするのか等幅(MSゴシック)にするのかをご自身でお決めください。
欧文を多く扱う場合にはプロポーショナルをおすすめします。

--------

> font-familyを変えてみたりしましたが〜

現状では何も変更されていないように思います。

> Chromeの表示の設定の問題かと確認しましたが、こちらは「MSゴシック」で 表示するになっています。 しかし、明朝体で見えます〜

テンプレートでの指定(ユーザースタイルシート)が最優先です。
ブラウザでのフォント指定はテンプレートにフォント種の指定が無い場合や指定フォントがPC内に存在しない場合に適用されます。

=======

内緒さんのOSはWindows8.1ということですので、今目にしているフォントは「游ゴシック体」です。
Swollenのデフォルトでは

欧文 = 3種
和文 = 2種

のフォントが指定してあります。
その振り分けをどうするかをまずお考えください。
全てをMSゴシックにするのか、それとも欧文はそのまま残すのか。
とりあえず欧文含むという前提での作業説明です。
指定フォントは仮に「MS Pゴシック」とします。

●ブログタイトルフォントなど
デフォルトはPrataです。
こちらも変更されるのであれば
Ctrl+F(Windows)/ Command+F(Mac)キー検索

Prata

数カ所あります。

MS Pゴシック

に変更。
日本語フォントが残っていますが、内緒さんのブログタイトルは英単語のみですのでそのまま残してOKです。

● 基本フォント
検索

Open Sans

こちらはたくさんあります。
全てを

MS Pゴシック

に変更。

● ナビゲーションなど
検索

Montserrat

を

MS Pゴシック

に変更。


ともかく全てのフォント指定を変更します。
MacにはMS Pゴシックはありませんが、Microsoft officeの利用など任意でMS Pゴシックをインストールしている方もいらっしゃいますので、そういった方々はMacでもMS Pゴシック表示になります。
任意インストールをしていない方は游ゴシック体での表示です。

黒字にするには
(完全白背景に完全黒文字もあまり好ましくありませんので自己責任でお願いします)
検索

/* 注)テキスト基本色

ここを
color: black;

に変更してください。
よろしくお願いします。

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To Swollenスマホ下部広告について 内緒さん

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

はい。おっしゃる通りスマホの下部に固定されている広告は有料アカウントに切り替えない限り表示を避けることはできません。それはどのテンプレートでも同じで、仮に広告が表示されなかったりなにかしらの要素で広告が隠れてしまうと規約違反にあたりますのでアカウント抹消の危険もあります。

広告掲載については各ブラウザのポリシーがまちまちですから、ブラウザがデフォルトでトラッキング(情報追尾)系広告を表示させないなどの処理を行うことがあります。
このあたりはブラウザによってまちまちです。
Chromeは比較的厳しいので、Chromeがデフォルトブラウザに指定されているAndroidでは表示されないことも多いようですね。

管理人のみ閲覧できます

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

To Swollen投稿時間の件 内緒さん

ありがとうございます :)

> 投稿時間も出る様にしたい〜

</time>
で検索するとhtml内に2箇所あります。2つ目が対象です。
この直前(上の行)の最終、つまり <%topentry_day> の後ろに

<%topentry_hour>:<%topentry_minute>:<%topentry_second>

を追加してください(コピペでどうぞ)
ペーストする前に <%topentry_day> の後ろに半角スペースを一つ入れておくと良いと思います。というか入れないと日にちとくっついてしまいます。全角スペースと間違えないよう注意してください。
また、コピーすると末尾に余分なスペースがくっついてきますのでペーストしたら削除してくださいね。それかコピー時に末尾に気をつけてスペースを拾わないようにするか。
よろしくお願いします。

-----
トップページの概要文のフォントを大きくされていますのでテキスト下が見切れています。
.element-desc {
で検索すると2箇所ありますので、最初の

.element-desc {
margin: 15px 0;
max-height: 6.3rem;
overflow: hidden;
}

を

.element-desc {
margin: 15px 0;
overflow: hidden;
max-height: calc(1.7rem * 1.5 * 2);
}

に書き換え。元有った max-height: 6.3rem; は忘れずに削除。
最後の 2 は表示したい行数です。3行にするならば 3 に変更。

2つ目はスマホ表示の指定なので触らない方が良いと思います。
念の為ブラウザ幅を狭くして表示の状態を確認してください。

管理人のみ閲覧できます

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

To Swollen投稿時間の件 内緒さん(完了のご報告)

ご報告ありがとうございます。
お疲れ様でした :)

管理人のみ閲覧できます

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

To コメント非表示の件 内緒さん

そうなんです。現在FC2ブログのコメントは
① 受け付ける
② 受け付けない(既存コメント含め非表示)
③ 受け付けない(既存コメント表示)
の3種が選べます。そして③は新しく実装された機能です。

参考記事: FC2ブログ【コメントを受け付けない】設定の選択肢が増えました
https://vanillaice000.blog.fc2.com/blog-entry-635.html

で、お知らせ頂いた方は設定が
・受け付けない(既存コメント表示) --- つまり新規実装の③のパターン
・非公開コメントを非表示
この組み合わせだとそうなります。受信コメント欄にコメントは表示されていませんが、実際には非公開コメントが存在していますので「(見えているコメントは) 0 comment」という表示です。

あと、③を選ぶとコメント投稿用ブロック(html要素)と受信コメント一覧ブロックの双方がもろとも非表示になるんですが、③だとコメント投稿のブロックではなくformだけを非表示にするため「leave a comment」「post a comment」などの見出しが残ってしまうんですよね (´・ω・｀)
なので受信コメント一覧とコメント投稿は同じコンテナ内に入れた方が良いんだろうなぁ、と思います。次回作からはそうしようかと。

管理人のみ閲覧できます

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

To テンプレ制作の件 内緒さん

こんにちは。

そうですね。製作者サイドは常にジレンマがあると思います(笑)
どこで折り合いをつけるかですよねぇ （￣∀￣；）

テンプレートの仕様、FC2のシステム上の仕様、そして個人設定、これらが絡むと先回お話したような、ちょっと見ると「？？？」という状態を避けられなくなったり。
だからといってこちらが「xxxの設定は選ばないでください」とは言えませんしね。
個人的には「レスポンシブ設定(スマホ非表示)」と「OGP設定」以外は指図できないと思っています。この2つにしても、OGPならソーシャルに絡んでいるわけだから、ご本人がNOと言えばそれはやはりNOですよね。レスポンシブ設定も同じです。

-----
指摘を嫌がる人は多いですね。それが如何に正当であっても。
私は自分のテンプレートを使ってくださる方に明らかな不具合(終了タグ欠損によるカラム落ちなど)が発生しており、それに気づいているとしてもお伝えしません。意地悪なようですが、必要ならば本人が自主的に訪ねて来るのが一番だと思うから ^^;
こちらがあれこれ言うと嫌がる人が多いですし、もちろんその方はすごく良い方で「ありがとう」が返ってくる可能性もありますが、それは事前にはわからないですよね。
なのでトラブルを避ける意味で指摘はしないようにしています。
あと私が誰のブログにも訪問しない(実際は閲覧することは有りますがコメントは残さないという意味)のは、やっぱり良い方ほど気を使ってしまうんですね。
他の方のテンプレートに変更したくとも、私(Akira)が見ているのではないか… と思ったら躊躇したり断念してしまうこともあるだろうな、と。

個人的に「あの人が私のから他の人のに切り替えた…」「DL数が少ない…」といったことが気になりだしたら辞め時だと思っています。性格的にほぼそれは無いんですが(笑)
とはいえ自分のことであっても「絶対」は存在しないので、他の方のブログは極力訪問しませんし、DL数は確認すらしていない(笑)

ヘッダー画像

fc2ブログ初心者で何も分からない状況す。

ヘッダー画像の変更の操作が分かりません。
スタイリスト編集からheaderまでは見つかったのですが、どの部分を削除してファイル画像を入力して良いのか教えてください。
宜しくお願いします。

To kuneko123さん

こんにちは。

> fc2ブログ初心者で何も分からない〜

初心者の方は
・記事をちゃんと読むこと
・指南が有る場合はそれに従うこと
を心がけるようにして頂くと良いですね。
今回の件も記事内に既に書いてあります。
カスタマイズで大事なのは「どこのwhere」「どれを・何をwhat」「どのように・どうするhow」です。今回の場合は

どこの --- Ctrl+Fキー検索「注)ヘッダー下左側ボックス背景」で出てくる部位の
どれを・何を --- URL(今回の場合は　https://blog-imgs-100.fc2.com/v/a/n/vanillaice000/7exe0w0bcdk-andrew-branchth.jpg ) を
どうする --- 差し替える

です。URLとはhttps:(あるいはhttp:)から始まって .xxx の拡張子までの文字列を指します。

---
会話で言う「ヘッダー」は「ブログタイトルが書いてあったり画像が入れてある部位」で間違いではありませんが、html用語の<header> というのは「見出しやリンクなど記事へのナビゲーションヘルプ」なのでhtmlソース内に1箇所だけとは限りません。本テンプレートの場合もheader要素はたくさんありますので、「header」を目印にしてしまうと対象部位を探せません。そのためのカスタマイズ指南でありガイダンスです。

よろしくお願いします。

ありがとうございます

初心者で全く右も左も分から無い状態で
基本的な操作のご指導ありがとうございます。

はじめてヘッダー画像を変更しました。
これだけ詳しく書いて頂きやっと分かる状況です。
今まで呑気なブログから移行して
何事もやった事の無い事ばかりで
一つの道しるべを見つけた思いです。

助けて頂き本当にありがとうございました。

To kuneko123さん(重要)

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

最初は慣れないと思いますが今後少しづつ理解できてくると思います。
機会と尋ねる勇気があれば知識は広がりますので、また何かありましたらお気軽にどうぞ。
お疲れ様でした :)

----- 追記
今気づいたんですが、head要素内
<link rel="canonical" href="<%url>">
の直下に

f

という文字が含まれており、これは不正な文字ですからhtml構造が壊れています。
SEOにも影響します(head要素のクリティカルエラー)ので削除してくださいね。

To Akiraさん

スタイルシート内の検索を掛けた時にｆが入りました。
ｆ気になっていたのですが
何処にこのｆが存在しているのか分からないままでした。

検索を掛けたら場所分かり変更しました。

Akiraさん、ブログの確認ありがとうございました。
また色々と教えてくださいm(__)m

To kuneko123さん(完了のご報告)

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

修正確認できました。お疲れ様でした :)

全体幅の調整について質問です(navi breakpoint)

Akiraさん

はじめまして。以前からテンプレートを愛用、また記事を拝読し勉強させていただき、ありがとうございます。
今回、こちらのテンプレートをダウンロードさせていただきカスタマイズをしているのですが、グローバルナビゲーション幅のカスタマイズが上手くゆかず相談に参りました。
navi breakpoint 1/2　の数字を大きくしましたが、他にも数字を書き換えるべき場所がありますか？
navi breakpoint　で、検索したところ、一か所しか見つけられません。
横幅を完全に狭めるとハンバーガーボタンが正常に動作してくれますが、中途半端な幅だと、ハンバーガーボタンを開いても何も表示されない状態です。
よろしくお願いいたします。

Chicaco

To Chicacoさん

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

767px
で検索するとhtml内に1箇所ありますので、その数字(767)もスタイルシートに記したものと同じ数値に変更してください。ガイダンスが不足していてごめんなさいね。お手数おかけします。
よろしくお願いします。

To Akiraさん

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

無事に解決することが出来たと思います。また、ひとつ勉強になりました。勇気を出して質問してみて良かったです。
新しいテンプレートのリリース予定があるということで、そちらもワクワク楽しみです。
今回はお世話になり、ありがとうございます。

管理人のみ閲覧できます

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

To 4点程教えていただきたいのですが 内緒さん

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

内緒さんに一つお願いがあるのですが、ブログが鍵つきの状態継続中はコメントの都度パスワードを記載してもらえないでしょうか。個人情報の観点から私の方では他者ブログの入室パスワード保存は行いませんので、過去のコメントからパスワードを探す作業が発生してしまいます。
大変お手数ですがご協力頂けると助かります。

-----

> 1、グローバルナビゲーションについてですが、こちらはSoutherlyのように子要素の設定はできないのでしょうか？

子要素というのがちょっとよくわからないんですが、子要素というと通常は

<div>
<span>内容</span>
</div>

span要素が「子要素(child element)」にあたります。HTMLの専門用語です。
ナビゲーションの「About」のドロップダウンのことでしょうか？そうだと仮定して、ドロップダウン導入にはHTML, CSSの編集及びJSの導入などが発生します。



テンプレートの仕様を大きく変更するカスタマイズの指南は以前お伝えした理由から行えませんので、自己責任の元で移設させるなどの対処を行ってください。

-----

> 2、<!--plugin_third-->をヘッダーの画像とLatest articlesの間に設定したい〜


<!--plugin_third-->
で検索し、これを含み
<!--/plugin_third-->
までを削除。

<!--plugin-->
<div class="secondary-inner" style="width: 100%">
<!--plugin_third-->
<section class="sidemenu">
<h3 class="sidemenu-heading heading-style"><%plugin_third_title></h3>
<!--plugin_third_description-->
<div class="sidemenu-style"><%plugin_third_description></div>
<!--/plugin_third_description-->
<div class="sidemenu-style"><%plugin_third_content></div>
<!--plugin_third_description2-->
<div class="sidemenu-style"><%plugin_third_description2></div>
<!--/plugin_third_description2-->
</section>
<!--/plugin_third-->
</section>
</div>
<!--/plugin-->

上記HTMLを希望の位置にペースト。
スタイルについてはフッター上プラグインの状態を踏襲します。細かいカスタマイズはご自身の知識の範疇でお願いします。

-----

3、右側下部の上下のページスクロール〜Sweetieのように丸い表示で同じように上下の間にMENUを表示〜

スクロールボタンを円形にするには
.page_scroll-anchor {
で検索するとスタイルシート内にありますので、このルールセットの
border-radius: 2px;
を
border-radius: 50%;
に変更

MENUボタンを常時表示させるには
.pagemiddle {
で検索すると先程操作した内容のすぐ近くにありますので、
.pagemiddle {
display: none;
}
を削除。

-----

> 4、パンくずリストのトップが「ホーム」を〜「HOME」に変更〜

<%template_home>
で検索するとHTML内に9箇所ありますので、全て
HOME
に変更。

以上です。お試しください。

管理人のみ閲覧できます

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

To お返事ありがとうございます。内緒さん

すみません。もう一度コピーし直して改めてペーストしてみてください。

> プラグインが3つ横並びに並ぶという解釈でよろしいでしょうか〜

はい、そうです。

> それぞれのプラグインの横幅を広げて2つ横並びという設定にはできないでしょうか？〜

えーとですね、元々フッター上のプラグイン群も「3つ並び」という設定なわけではないです。「最大で3つに並ぶ」というのが正しい表現です。画面幅によってはシングルですし、別の画面幅では2つ並びですし、最大で3つ並びですね。
なのでこういったご質問への回答は非常に難しいんです。何故かというと

・常に2つ並びにしたいのか
・一定の画面幅でシングルにするのか、するならば画面幅いくつで並びを解除するのか
・大画面での状態を確認できているか(自身が何pxの画面幅で閲覧しているか、最大幅の目視確認ができているか)
・コンテンツの最小幅・最大幅を指定するか、するならば最大幅を超えたときに左に隙間ができて良いか
・その他諸々

など確認することが非常に多いんですね。内緒さんの理想の形というのは内緒さんの頭の中にあるもので私がそれをうかがい知ることはできません。

なので大体の可能性としてお返事をしますので、後の調整はご自身でお願いします。

HTMLの
<div class="secondary-inner" style="width: 100%">
を
<div class="secondary-inner tertiary">
に変更。

その上でスタイルシート最終に

.tertiary {
width: var(--width-whole_pct);
max-width: var(--width-whole);
margin: 40px auto;
}
@media screen and (min-width: 720px) {
.tertiary {
grid-template-columns: repeat(var(--grid-item-2), 1fr);
}
}

を追加。

> ヘッダー下ボックスの下に1本のラインが表示されてしまいます。〜

ご自身でスタイルシートに追加した
h2:after
のスタイルが原因です。

h2 や h2::after (正しくはコロン2連)などは要素セレクタです。要素セレクタは避けましょう。理由と対処法は以下のコメント欄をごらんください。
https://vanillaice000.blog.fc2.com/blog-entry-1029.html#comment12378

管理人のみ閲覧できます

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

To plugin_thirdの内容が表示されました。内緒さん

こんにちは (o'ω')ﾉ
ブログはちゃんと拝見しましたよ。コメント内に掲載したコードのまず試してから再度ご連絡くださいね。最大で2つ並びになるコードを提供しています。それで良ければ解決済みですし、ダメなら別のコードが必要かもしれません。
また、本テンプレートはレスポンシブデザインですから、

> できれば縦横共に現在の1.5～2倍くらいにしたい〜

これを常に守れるとは限りません。画面幅が狭くなれば当然表示サイズもそれに応じて小さくなります。
最大2並びで目視確認しましたが、いずれにしろ地図は見づらいですね。じゃあ逆に大きな領域を確保して単独で表示(他の要素と並ばせない)ようにすれば良いかというと、非常に広い範囲を取られてしまうためページ全体としてはやはり見やすいとは言えないのではないでしょうか。

地図は各部位がリンクになっていますので、操作性を考えると「他の要素とは並ばせない」というのがベストではなくともベターだと思います。その場合は地図だけをプラグイン3に設定し、先日お伝えしたコードに追加して

.tertiary .sidemenu {
max-width: initial;
}

をスタイルシート最終に記します。

-----

> h2:afterをh2.styled-title::afterに変更しましたが〜

styled-title というクラス名がスタイル対象要素に限定されているのであれば

.styled-title::after {
内容
}

でOKです。h2を記す必要はありません。CSSは右にあるものをマッチングしてから左にあるものをマッチングします。
h2.styled-title
の場合は「ページ全体から .styled-title クラスを持つ全ての要素を探す」 →「ページ全体から 全てのh2要素を探して.styled-titleとマッチングさせる」
という工程になり .styled-title だけでターゲットの絞り込みが可能であれば h2 を探す工程は不要というか効率的には無駄です。

例えば

<h2 class="styled-title">h2見出し</h2>
<h3 class="styled-title">h3見出し</h3>

という場合でh2のみ対象にしたい場合は

h2.styled-title
というセレクタにするほかありませんが、「要素名を問わず .styled-title を持つもの」で特定するならば
.styled-title
というセレクタで十分です。この場合はh2もh3も対象になります。クラス名はスタイル対象を特定するために用いますので、そこをしっかり理解すれば容易く操作できるようになります。

管理人のみ閲覧できます

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

Re: センタリング

> 追加コードも設定させていただいている状態にしています。〜わたしの目視では、追加コードを設定せずに2つ横並びにした状態のコードだけ〜

スタイルが反映されない原因は構文エラーです。
.btn_yahoo:hover
のルールセットのブレイスが欠けています。

.btn_yahoo:hover {
border: solid 1px #410093;
background: #fff;
color: #410093;
}/* この記号の欠損 */

このエラーで続く内容がパースエラーになっています。これまではこれが最終の内容だったために気が付かなかったのではないかとおもいます。

一つだけの表示にするには既に記載したコードの

@media screen and (min-width: 720px) {
.tertiary {
grid-template-columns: repeat(var(--grid-item-2), 1fr);
}
}

も削除してください。2つ並びにする場合は必要です。

-----

要素セレクタについての記事を書きましたのでごらんください。
参考記事: 要素セレクタ、ダメ、ゼッタイ
https://vanillaice000.blog.fc2.com/blog-entry-1189.html

.内容の部分が同じ場合にh2、h3を記載しなくても良いということでしょうか？〜

クラス名というのはスタイルの対象を決めることが目的ですから、別のスタイルをあてたいのであれば別の名称を使います。

【同じスタイル】
<h2 class="aaa">h2見出し</h2>
<h3 class="aaa">h3見出し</h3>

.aaa { color: red }
}

【別のスタイル】
<h2 class="aaa">h2見出し</h2>
<h3 class="bbb">h3見出し</h3>

.aaa { color: red }
.bbb { color: blue }

* 本日が本年最後のログインです。あとは来年の10日前後までお返事できないと思います。すみません。

管理人のみ閲覧できます

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

To 地図だけをプラグイン3に設定 内緒さん

.tertiary {
width: var(--width-whole_pct);
max-width: var(--width-whole);
margin: 40px auto;
}
@media screen and (min-width: 720px) {
.tertiary {
grid-template-columns: repeat(var(--grid-item-1), 1fr);
}
}
.tertiary .sidemenu {
max-width: initial;
}

ではこの内容に変更してみてください。内緒さんも良いお年を :)

地図のサイズ

Akiraさん、あけましておめでとうございます
今年もよろしくお願いします。

年末に記載していただいたコードで大きく表示できるようになりました。
ありがとうございます。
ただ、あまりにも大き過ぎるので、サイズの調整はどのようにすればよいでしょうか？
できれば今のサイズの70～80％くらいにしたいと思いますが、その場合はセンタリングではなく左寄せになってしまうでしょうか。
また、プラグイン説明(上部)を中央寄せにするにはどのようにすればよいでしょうか？
プラグインの説明文の文字位置を中央寄せにしていますが、左寄せのままで変更できません。

Swollenは、個別記事前後ページサムネイルには対応していないようですが、やはり移植になり教えていただくことはできないでしょうか？

右下に導入させていただいた、MENUが画像の多いページではワンクリックではMENUに飛びません。
教えていただいた#chapter01などのページ内リンクも上部は問題ありませんが、下部のリンクには飛びません。
例えば
https://maakojapan.blog.fc2.com/blog-entry-4.html
のKyoto/京都やOsaka/大阪へのリンクが途中で止まってしまいます。
ただし、ページを読み込んでしばらくしてクリックするとリンク先へ飛ぶこともあります。
画像の遅延読み込みが原因でしょうか？

年末年始に
html
<div class="open-menu" id="toc">

<a href="#toc" class="back-to-toc">Back to Contents↑</a>

css
.back-to-toc {
display: inline-block; /* リンクをインラインブロック要素として表示 */
padding: 5px 10px; /* 内部の余白を上下5px、左右10pxに設定 */
background-color: #323232; /* 背景色をブラック系に設定 */
color: #ffffff; /* テキストの色を白に設定 */
text-decoration: none; /* テキストの下線を削除 */
border-radius: 5px; /* 角を5pxの半径で丸くする */
margin-top: 20px; /* 上部のマージンを20pxに設定 */
font-size: 14px; /* フォントサイズを14pxに設定 */
font-weight: bold; /* 文字を太くする */
}
で目次に戻るリンクを導入しましたが、何か関係しているのでしょうか？
ただ、今日、質問させていただく前に上記、目次に戻るリンクのhtml、cssを取り除いてみましたが、状況は同様でした。

お忙しいとは思いますが、お教えいただけないでしょうか？
よろしくお願いします。

To まあこさん

あけましておめでとうございます :)

> あまりにも大き過ぎるので、サイズの調整はどのようにすればよいでしょうか？できれば今のサイズの70～80％くらいにしたい〜

対象の要素は .js_map というクラスを持っているのでそれを利用してスタイリングしてください。今見ている画面だけで『70〜80%』と判断するのは危険です。この方法を取ればスマートフォンなど狭いデバイスでもデバイス幅に対して 70〜80%の極小表示になります。このような場合は max-width を利用して最大横幅を制御すると良いでしょう。

.js_map {
max-width: 700px;/* 希望の数値 */
margin: auto;/* 中央寄せ */
}

-----
> プラグイン説明(上部)を中央寄せにするにはどのようにすればよいでしょうか？〜

この部位は全プラグイン共通セレクタなので、個別対応で行うと良いですね。HTMLの

<!--plugin_third_description-->
<div class="sidemenu-style"><%plugin_third_description></div>
<!--/plugin_third_description-->

の部位を

<!--plugin_third_description-->
<div class="sidemenu-style" style="text-align: center;"><%plugin_third_description></div>
<!--/plugin_third_description-->

に変更。

-----
> 個別記事前後ページサムネイルには対応していないようですが、やはり移植になり教えていただくことはできないでしょうか？〜

はい。致しません。理由はお伝えした通りです。

-----
> MENUが画像の多いページではワンクリックではMENUに飛びません。〜

こちらはテンプレートの問題ではなく画像掲載時のwidth, height 両属性をちゃんと記載しているかどうかです。

参考記事: 画像のwidth, height属性の重要性はアスペクト比にあり
https://vanillaice000.blog.fc2.com/blog-entry-1091.html

参考記事: 【smooth scroll】JSとCSSの挙動の違い
https://vanillaice000.blog.fc2.com/blog-entry-1177.html
(レイアウトシフトに関する内容を参照のこと)

特に height="auto" はレイアウトシフトに対して効力がありませんし、そもそもheight属性にauto値は許可されていませんので、画像掲載時はしっかりと画像の横幅と高さを記すようにします。
またもちろん画像の遅延読み込みも関係ありますが、内緒さんの場合はブラウザネイティブのlazyloadで遅延を行っているのでwidth, height属性を書くことでシフトを完璧とは言えないまでも極力抑えられるはずです。

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

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

サイトをオープンしましたので、内緒さんでなくて結構です。お気遣いさせてすみません。

> .js_map
横幅の調整はできました。縦幅の調整はできますでしょうか。
max-height: 1000px;を加えればいいのかな？と思いましたが、調整できませんでした。
margin: auto;/* 中央寄せ */と記載していただいているのでそのままCSSに追加しましたが、左寄せになってしまいます。

> プラグイン説明(上部)を中央寄せ
ご指示いただいたように変更し、中央寄せになりました。ありがとうございます。

> 個別記事前後ページサムネイル
わかりました。ありがとうございます。

> MENUが画像の多いページ
height="auto"を数値記載することで改善されました。ありがとうございます。
ただ、https://maakojapan.blog.fc2.com/blog-entry-4.html
のKyoto/京都やOsaka/大阪へのリンクが、ページを開いてすぐにクリックすると若干（1～2行分）通り過ぎてしまいます。
これは何故なのか、よろしければ教えていただけないでしょうか。

新年早々すみません。
よろしくお願いします。

To まあこさん

> 横幅の調整はできました。縦幅の調整はできますでしょうか〜

この地図は画像ではありませんので、縦横比が一定というわけにはいきません。なのでheightはautoです。一定の見た目を維持するには各所(各都道府県のパーツ)で縦横比を固定する必要がありものすごく大変なのと、横幅に合わせてしまえばリンクが潰れてクリックできなくなります。つまり高さを固定するべきではないですし、もとよりそのような作りにはなっていません。

-----
> margin: auto;/* 中央寄せ */と記載していただいているのでそのままCSSに追加しましたが、左寄せになってしまいます。〜

まず、セレクタを見間違っていました。js_map ではなく jp_map でした。すみません。

現在の内容は

ul.jp_map {
max-width: 880px;/* 希望の数値 */
margin: auto;/* 中央寄せ */
position: relative;
list-style-type: none;
margin: 0;/* 上書きされている */
padding: 0;
box-sizing: border-box;
}

先日説明した通り、CSSの原則は『上書き』です、同じセレクタに同じプロパティ指定がある場合は後に書いたものが先の指定を上書きします。なので margin: auto が効いておらず margin: 0 が適用されています。そのため左に寄っています。

某かの指南をする際には 新規ルールセットを作成し、スタイルシート最終への記載 をおすすめしています。既存の内容にマージすると「いつ」「何故」「どのような目的で」が不明になってしまいます。今回は既にマージされていますので margin: 0 を削除することで対応してください。

また、こちらも先日お伝えしましたが、優先度を無意味に高くしない ことも大事です。
ul.jp_map
というセレクタは
.jp_map
よりも優先度が高い指定です。例えば

<ul class="jp_map"><li></li></ul>
<div class="jp_map"></div>

このように要素名違い同クラスが存在しており、HTML変更不可、という場合は ul.jp_map あるいは div.jp_map と要素名を付けて識別するしかありませんが、jp_map が他の要素を被っていないならば
.jp_map で十分です。ulをつけることで無意味に優先度を高めているので、上書きが困難になりカスタマイズ難易度が上がってしまいます。さきほど「スタイルシート最終に記載」をおすすめしましたが、仮にそれをやっていたとして、より優先度の高い指定が存在しているので「変化が無い, 反映されない」と悩むことになります。

-----
> ページを開いてすぐにクリックすると若干（1～2行分）通り過ぎてしまいます。〜

頭出しの調整を行っていますが何かしらのJSと競合(干渉)しているようです。そのためナビゲーションの高さが考慮されず見出しに被っています。デフォルトのJSで対策済みなので本来こういったことは起こりません。可能性としては
・FC2アクセス解析(ページ内移動のみのa要素もカウントしてしまう, 動きがカクつくようになる, 既知の問題)
・TOCの開閉スクリプト
・その他開閉スクリプト

まあこさんのページの場合は『初期状態で高さ不明の要素』が多く含まれており、これらが要素の高さが関係するJSの妨げになっているのは事実です。

どうしようもないのでスクロールをJSからCSSに変更されてはいかがでしょうか。

https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/swollen.js
を開くと終盤に

/* moveTo - 1.8.3 (45)*/
という目印がありますのでこれを含み最後までを削除、新規JSファイルとしてアップロードし、元のJSファイルと差し替え。

スタイルシート最終に

html {
scroll-behavior: smooth;
scroll-padding-top: 45px;
}

を追加。これで改善が無い場合は既存のJS(ご自身で追加したJS)の修正が必須(抜本的な改善が必要)、ということになります。

-----
バリデートエラーが多く存在しているようです(80前後あります)その中でもクリティカル(致命的)なものは修正を。

【空のid属性】
id属性はclass属性と違い、一意の識別子 でなければいけません。現在のように

<h4 id="" class="custom-h4">ある見出し</h4>
<h4 id="" class="custom-h4">別の見出し</h4>

この id="" はある見出しと別の見出しで同一のid属性とみなされます。classの値なしは構いませんが、idの値なしはエラーです。値が存在しないということは不要だということですから削除を。

<h4 class="custom-h4">ある見出し</h4>
<h4 class="custom-h4">別の見出し</h4>

【開始タグと終了タグの不整合】

<p><a href="https://maakojapan.blog.fc2.com/blog-entry-1.html">Privacy Policy</span></a></p>

span終了タグに対応する開始タグがありません。特にスタイリングの必要がなければ終了タグ</span>を削除。

【プラグイン】

InformationのプラグインHTML(及びJS)が壊れています。このプラグインのデフォルト内容は綺麗なものだったと記憶していますので、再DLしてチェックされてはいかがでしょうか。
(内容の改変に関するお手伝いは致しませんので事前にご承知おきください)

スクロールをJSからCSS

Akiraさん、お世話をおかけします。

> 縦横比が一定というわけにはいきません。なのでheightはautoです。
height: auto;にしましたが、見た感じあまり変わりませんでした。

> margin: 0
すみません、margin: 0が下部にあることに気づきませんでした。削除することで中央寄せになりました。

> 優先度を無意味に高くしない
この地図はこちらのサイトからお借りしているものです。
https://www.inqsite.net/weblog/4417/
導入するとこちらで表示されているようになるものだと思っていました。
ul.jp_mapを.jp_mapにすると都道府県の文字のバックグラウンドの白い部分がなくなり、少し読みにくくなるようです。

> 頭出しの調整を行っていますが何かしらのJSと競合(干渉)しているようです。
代替のスクロール変更案までお調べいただきありがとうございます。
スクロールというのが、どのスクロールのことをおっしゃっているのかよくわからなかったので、可能性としてあげていただいていたものをひとつひとつチェックしてみました。
すると、TOCの開閉スクリプトに該当するのでしょうか、「目次開閉」のCSSを外すと正常に作動しました。
しかし、この現象が起こるのは画像の多いページだけなので、できれば残したいと思いますが改善点があれば、教えていただけないでしょうか。

関連するhtml、cssは次のとおりです。
html
<div class="open-menu" id="toc">
<input id="open-1" type="checkbox">
<label for="open-1">≡table of contents</label>
<div class="open-menu-inside">
<ol class="numbering">
<li><a href="#chapter01">What is the Golden Route?/ゴールデンルートとは？</a></li>
<li><a href="#chapter02">Major Attractions/主要観光スポット</a>
<ol>
<li><a href="#chapter03">Tokyo/東京</a></li>
<li><a href="#chapter04">Mount Fuji Area/富士山周辺</a></li>
<li><a href="#chapter05">Kyoto/京都</a></li>
<li><a href="#chapter06">Osaka/大阪</a></li>
</ol>
</li>
</ol>
</div>
</div>

/*=================================================
目次開閉
==================================================*/
.open-menu input {
display: none;
}
.open-menu label {
width: 320px;
color: #ffffff; /* 文字色 */
font-size: 20px; /* 文字サイズ */
line-height: 2; /* 行間 */
font-weight: bold; /* 文字を太く */
text-align: left;
margin: 20px; /* 文字を左からの距離 */
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */
padding: 20px; /* 内側の余白 */
cursor: pointer;
position: relative;
display: block;
}
/* ここから追加 */
.open-menu label {
border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */
border-radius: 20px; /* 角を丸く */
}
.open-menu label:hover {
background: #ffb8b3; /* マウスを乗せた時の背景色 */
opacity: 0.5; /* マウスを乗せた時に背景色が薄くなる */
}
.open-menu label:after {
position: absolute;
right: 10px; /* 右からの距離 */
top: 50%; /* 上下中央配置 */
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
content: "［Open］"; /* アイコン */
}
.open-menu input:checked ~ label::after {
content: "［Close］"; /* クリック後のアイコン */
}
.open-menu div {
height: 0;
overflow: hidden;
opacity: 0;
transition: 0.3s; /* 開閉スピード */
}
.open-menu input:checked ~ div {
height: auto;
max-width: 80%;
opacity: 1;
padding: 20px; /* 中身の枠内の余白 */
background: #ffeff9;/* 中身の背景色 */
border: 2px solid #ff95d5; /* 線の太さ 線のタイプ 線の色 */
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
border-radius: 20px; /* 角を丸く */
overflow: hidden; /* メニューがはみ出ない*/
}
.open-menu-inside {
color: #333333; /* 中身の文字色 */
font-size: 15px; /* 中身の文字サイズ */
line-height: 2; /* 行間 */
}
/*=================================================
目次開閉終わり
==================================================*/

/*=================================================
目次ナンバリング入れ子
==================================================*/
ol.numbering,
ol.numbering ol{
counter-reset: list;
list-style: none;
padding: 0;
max-width: 100%;
font: 16px/1.6 'arial narrow', sans-serif;
}
ol.numbering ol{
margin: 0 0 0 35px;
max-width: 100%;
}

.numbering a{
position: relative;
display: block;
padding: 4px 4px 4px 31px;
margin: 7px 0;
background: #ffeff9;
color: #333;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

.numbering a:hover{
background: #ff95d5;
}

.numbering a:hover:before{
left: -10px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.numbering a:before{
content: counter(list);
counter-increment: list;
position: absolute;
top: 50%;
left: -15px;
height: 35px;
width: 35px;
margin-top: -15px;
background: #ff95d5;
color: #fff;
line-height: 26px;
border: 3px solid #fff;
text-align: center;
font-weight: bold;
border-radius: 26px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/*=================================================
目次ナンバリング入れ子終わり
==================================================*/

/*=================================================
目次に戻るリンク
==================================================*/
.back-to-toc {
display: inline-block; /* リンクをインラインブロック要素として表示 */
padding: 5px 10px; /* 内部の余白を上下5px、左右10pxに設定 */
background-color: #323232; /* 背景色をブラック系に設定 */
color: #ffffff; /* テキストの色を白に設定 */
text-decoration: none; /* テキストの下線を削除 */
border-radius: 5px; /* 角を5pxの半径で丸くする */
margin-top: 20px; /* 上部のマージンを20pxに設定 */
font-size: 14px; /* フォントサイズを14pxに設定 */
font-weight: bold; /* 文字を太くする */
}

.back-to-toc:hover {
background: linear-gradient(-80deg, #f7bbc7, #bfffff); /* マウスホバー時の背景色をグラデーションに変更 */
}
/*=================================================
目次に戻るリンク終わり
==================================================*/

> 『初期状態で高さ不明の要素』が多く含まれており
わたしの場合、Akiraさんもご存知の通りhtml、cssの知識はないに等しいので、テンプレートに追加で入れているものは、コピペOKのサイトからコピペさせていただいたものか、AIチャットで作成したものなので、どのことをおっしゃっているのかわかりません。
サイトもまだオープンしたばかりなので、できることであれば、改善したいと思いますので、該当箇所と改善点を教えていただけないでしょうか。

> バリデートエラー
ご指摘いただきありがとうございます。
3点すべて変更しました。

長々と長文になりすみません。
よろしくお願いします。

To まあこさん

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

> height: auto;にしましたが、見た感じあまり変わりませんでした。〜

私が説明したのは「heightを操作するべきではない」ということです。height: auto というのは何も書かなければ自動でauto値が適用されます。
この地図はインタラクティブな要素であり、リンクを持っていますので、heightを指定してしまうとクリックできなくなったりユーザビリティが低下しますよ、ということです。今のところhref属性が全て空なのでリンクとして機能していませんが恐らく後で設定するのだろう、と判断しています。

どうしてもという場合は ul.jp_map に追加したCSSは削除し、プラグインフリーエリアを開いて

<div style="margin: auto; width: 数値px; max-width: 100%;">
ここに地図のHTML
</div>

とdiv要素で囲ってください。div要素の方に横幅制限を設けてください。その代わり画面が狭くなるにつれテキストが各領域からはみ出したり、クリックしづらい状況が生まれますがこれらは看過するしかありません。

-----
> バックグラウンドの白い部分がなくなり、少し読みにくくなるようです。〜

backgroundが白でありそれが不足していると理解できているのであれば追加すれば良いのではないでしょうか。いずれにしろ提供元からそのままコピペした内容ということなのでそのままご利用ください。カスタマイズの際はコードの特性を理解した上で行うようにしてください。

-----
> スクロールというのが、どのスクロールのことをおっしゃっているのかよくわからなかったので〜

スムーススクロールの頭出しがズレる件のご相談だと思っていましたが違うのでしょうか。

> 「目次開閉」のCSSを外すと正常に作動しました。〜できれば残したいと思いますが改善点があれば〜

初期状態を閉じるのではなく開いておいて任意で閉じてもらうようにすれば良いのではないでしょうか。

-----
原則、個人カスタマイズは自身の責任の元で自力・独力で行ってください。位置調整など多少の調整はアドバイスできるとしても第三者が作成したコード内容を提供者を差し置いて私が改変することはありません。

ありがとうございます。

Akiraさん、ありがとうございます。

> 「heightを操作するべきではない」ということ

すみません、勘違いしていました。

> div要素

ありがとうございます。div要素で囲った方が、わたしのイメージしていた感じになり、すっきりした感じがします。
<div style="margin: auto; width: 数値px; max-width: 100%;">を880px;にしていますが、この大きさなら既にリンクしている都道府県にも飛んでくれます。

> コピペした内容ということなのでそのままご利用ください。

はい、都道府県名を英語表記にしただけで、その他はカスタマイズしていません。

> スムーススクロールの頭出しがズレる件のご相談だと思っていましたが違うのでしょうか。

そのとおりです。

> 初期状態を閉じるのではなく開いておいて任意で閉じてもらうようにすれば良いのではないでしょうか。

はい、その方法も検討してみますが、「第三者が作成したコード内容を提供者を差し置いて私が改変することはありません。」とのことなので、Akiraさんのっしゃることも十分理解できますので、頭出しがズレるのは画像の多いページだけだから、現状のままで行くしか仕方ないかな？とも考えています。

まったく話が逸れてしまいますが、わたしの勤務する病院でも昨年からコロナよりもインフルエンザが猛威を振るっていて、職員も感染してスタッフ不足が続いています。
Akiraさんもお体ご自愛下さいね。

To まあこさん

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

地図の件は終了ということで良いでしょうか。お疲れ様でした。
TOCについてはご自身の判断にお任せします。

年末にひどい風邪をひきました。コロナに続いて今度はインフルエンザ、医療現場の方は本当に大変だな、と思います。お気遣いありがとうございます :)

お体大丈夫ですか？

Akiraさん

地図とTOCについては、現状で様子をみようと思います。
お陰様でわたしの理想に近づきました。
ありがとうございました。

お体大丈夫ですか？風邪と思っていてもインフルエンザの場合もあります。
医療機関を受診されることをお勧めします。
お体大事になさってくださいね。

また、Akiraさんの新作テンプレート楽しみにしています。

グローバルナビゲーションについて

Akiraさんへ、お世話になっています。

グローバルナビゲーションについて
独力で、何とかグローバルナビゲーションをドロップダウンできるようになったのですが、何度やってもこの3点がうまく行きません。
次の3点だけ教えてもらうことはできないでしょうか？

1，デフォルトのようにブログタイトルとグローバルナビゲーションを同列に表示。
display: flexやjustify-content: space-between
などで何度、チャレンジしてもブログタイトルがグローバルナビゲーションの上、もしくは下に表示されます。
現状は、ブログタイトルを上に表示するとスクロールした時にグローバルナビゲーションが中途半端な位置に固定表示されるので、やむなくブログタイトルを下に表示しています。
グローバルナビゲーションの固定表示をやめれば、ブログタイトルを上に表示しても良いのですが、できれば固定表示しておきたいと思います。

2，デフォルトのようにブログの横幅を超えない右寄りに表示。
こちらも
:root {
--width-whole_pct: 92%;
}
などを使って試してみたのですが、設定が間違っているのか、どうしてもブログの横幅を超えて右寄りに表示されてしまいます。
変数で調整するのは無理なのでしょうか。

3，デフォルトと同じ縦幅のグローバルナビゲーション。
作業を行っている間にいつの間にか縦幅が広がってしまっています。
paddingなどで調整し、若干デフォルトに近づいたのですが、見比べるとまだ広いです。

現在のHTML、CSSのみで、JavaScriptは使用していません。
Akiraさんの眼から見ると間違い点が多いかもしれませんが、ご容赦ください。

HTML、CSSを記載したのですが、「文字数が多くスパムと判定される」というメッセージが出るので削除しました。

> テンプレートの仕様を大きく変更するカスタマイズの指南は行えません

とのことでしたので、この3点だけ教えていただけないでしょうか。
よろしくお願いします。