FC2ブログでオリジナルファビコンを設定する方法2020年版

できました～(^^)/

Akiraさん、こんにちは～。
いつも勉強させていただいておりますm(__)m。

これも早速試させていただきました。
アタイにできるかな～と恐る恐るやってみましたが、
懇切丁寧なご説明のおかげでなんとかできました！(^^)/

お忙しいところ、いつも本当にありがとうございます♡。
（お返事はいりませんよ～念のため）

Akiraさん、こんばんは。
私もファビコン設定できましたのでご報告です。
また、過去記事で発見してブログカードにも挑戦、こちらもできました！
で、できた…！という達成感があり、FC2ブログってこんなに楽しかったのかと思いました。それもこれもAkiraさんのおかげです。
（私もお返事不要です）

To bonさん

こんばんは ('0')/
お返事不要とのことなんですがひとつお伝えしたいので返信させてくださいね。

ちょっと状況がわからないとはいえ
> いちいちログアウトしてログインして…と想像するだに超めんどくせぇ〜

という複数ブログ管理についての内容を拝見したので。
ブラウザを変更するだけで解決できますよ。AブログはChrome、BブログはFirefox、みたいに。それぞれ単独でログイン判定されますのでログイン&アウトの手間は要りません。
Chromeの類似ブラウザをインストールするのも良いと思います。そしたらどのブログでもほぼ同じ使い勝手になるでしょうし。
もう既にご存知かもしれませんが老婆心で ^^;
えと、お返事不要です(笑)

Akiraさん

独り言のぼやき記事をご覧下さり恐縮です。

FC2からWordPressへ移って半年ほどで不正アクセスに遭い、自分で補修を試みたところ画像の多くが消えたりその他不具合が生じ、このような話題で周囲に相談できる相手もおらず、ブログでブツブツこぼしておりました。
現在はFC2に戻るつもりで少しずつ作業しており、その中でAkiraさんのテンプレートとブログに出会いました。

複数IDの管理についてアドバイスありがとうございました。まったく思いつかなかったことなので、そんな方法があったのかぁと膝を打ちました。
Chromeを使用しておりますので、類似ブラウザを探してみようと思います。
ご親切にありがとうございます、感謝です。さらにお返事不要ですm(__)m
後日、テンプレートの記事へご質問に上がりますので、その節は恐れ入りますがご対応お願いいたします。では、おやすみなさい。

やってみました

こんにちわ。
いつもいつも、とてもお世話になっています。
皆様のコメントに影響され、こちらの記事の丁寧な説明のとおりにと注意しながら、ファビコン設置できました。
ありがとうございました。私めもご報告のみなので、お返事不要です。

ご無沙汰しております。
以前、ブラックSEOで悩んでいた時に相談させていただきましたまりもです。
今回Akiraさんがファビコンについて投稿していただいたおかげで、ようやく設定することができました。
何度かチャレンジしたのですが、私がたどり着いたのは昔の設定方法で、表示されるはずもなく諦めていました。
無料会員は設定できないんだと思っていましたが、そうではなかったんですね。
実は一発で設定できなくて、再度元のテンプレートを複製して一から始めたところ設定できました。
結局何が原因でダメだったのかはわからずじまいですが、嬉しかったのでご報告させていただきました。
改めてありがとうございました。今後ともよろしくお願いいたします。

To まりもさん

こんにちは。
* 私のミスで自分のコメントをうっかり削除してしまいましたので再投稿です。内容は同じものです。

まず、設定できたということで良かったです。現在の状態でやはり修正必須の部位(クリティカルエラー)がいくつかありますので説明しますね。

> 結局何が原因でダメだったのかはわからずじまい〜

これはもうhead要素内にミスがあった、ということで確定です。そして今回もhead要素内のカスタマイズをされているはずで、やはり一部ミスがあります。

【meta descriptionの重複】
テンプレート内に
<meta name="description"
から始まるものを追加されていると思います。meta descriptionについては テンプレートユーザーは何もする必要はありません ので、追加したり内容の変更を行わないようにしてくださいね。
例外はありますので、その例外と対処法は以下の記事をご参照ください。以下の記事に当てはまらない場合には何も触らないように注意してください。

参考記事: 閲覧者にメッセージを表示したい方へ
https://vanillaice000.blog.fc2.com/blog-entry-410.html

【ブログタイトル画像のaltなし】
元々画像(img要素)のalt属性は必須属性なので必ず記述が要るんですが、特にまりもさんの場合は h1タグの内容をテキストから画像に変更 されていますよね。h1というのは「大見出し」ですから、ページ内で「非常に重要なタイトル」です。
で、Googleのクローラー(検索ロボット)は人間ではないので画像に何が描かれているのか判断することができません。そのためにalt属性でロボットに内容を伝えます。現在の状態は

<img src="画像アドレス" >
になっていますので
<img src="画像アドレス" alt="ブログの正式名称">
に変更します。現在の内容は末尾に半角スラッシュが入っていますがこれは不要です。また、スラッシュも追加しないようにしてください。「ブログの正式名称」の部位はまりもさんのブログ名に書き換えてください。
ここを修正しないと「大見出しが空」とみなされるエラーになります。

恐らく先回も類似エラーがあったためファビコンが表示されなかったのだろうと思います。
それからできればhymnテンプレートは最新版をDLし直されると良いですね。FC2ブログの新機能追加への対応やテンプレート機能改善なども行われていますので、可能であれば切り替えをおすすめします。

Akiraさんこんばんは。
大変お世話になっております。

ブラウザの件アドバイスいただきましてありがとうございました。おかげ様でFC2のブログを２つ、同時進行で管理できるようになりました。

新IDのブログを作るうえで、更新時間表示など欲しい機能を考えまして、新ブログ
https://bon3te.fc2.net
ではMystyleを使わせて頂きました。
Mystyleでも代替画像の置き換えについて質問させていただこうと思っておりましたが、Akiraさんが「記事に画像一つはアップロードしたほうが良い」とどこかで書いておられたので、今後はそうすれば良いかと思っております。

旧ブログ
https://bon3te.blog.fc2.com/
ではグローバルナビゲーションを削除しておりましたが、Akiraさんのブログを拝見しているうちに必要だと思い、Akiraさんからいただいたアドバイスをもとに削除した部分を戻しました。お手数をお掛けしました。

さて、前置きが長くなりましたがファビコンです。うまくいったと思ったのですが、ブログカードの左下の小さなマークがユニコーンのまま変わりません。一緒に並べたAkiraさんのブログ記事引用カードはちゃんとロゴになっていて、テンプレート試験されている間はユニコーンに戻ったりしています。
ファビコンの設定を間違えてしまったか、ブログカードのほうを間違えたかと思うのですが、おわかりになりますでしょうか。
お忙しいところお邪魔して申し訳ありませんが、よろしくお願い致します。

To bonさん

bonさん、こんばんは ('0')/
まずブログカード及びファビコン設定にミスはありません。htmlの方は少しありますので後ほどお伝えします。

ブログカードのファビコンはGoogleを通していて、反映は一定ではありません。Googleに認識されるのに大体1週間前後かかります。また、ファビコンは「ページ単位」で識別されるのでページによってばらつきが発生することがあります。
なぜ一旦Googleを経由させるかというと、ファビコンの記載内容はユーザーによってバラバラです。ある方は古いコードのまま、有る方は最新の書き方、など。なので標準仕様化の意味でGoogle経由にしています。

あと、ブログカードの取得は正規ページで行うようにしてください。例えば
(以下はリンクにならないよう相対アドレスで記載しています)

//xxx.html#comment_form
//xxx.html#comment数字
などハッシュが付いているもの(ページ遷移後にページ内移動が行われる)

//xxx.html?q=検索ワード
などクエリが付いているもの

ページ内移動つきのURLは正規URLではないので言わずもがなとして、月日別と検索結果なんですが、月日別はブログ開設日よりも「前」「過去」やまだ記事を書いていない「未来」のページも存在しています(コンテンツは空でもページ自体はあります)
今回テスト記事の私のページへのブログカードは検索クエリつきのURLですから正規ページではありません。検索クエリはユーザー任意文字列ですからいわば無制限にページができてしまいます。
そういう場合にはブログカードとしてあまり良い成り立ちではないので避けるようにしてくださいね。

----- html構文エラーについて
ちょっとその前に公式プラグインについて調べたいことがあるので、後ほど改めてエントリーしますね。
とりあえずブログカードについてのお返事だけ送信します。

To bonさん②

htmlの方です。
ちょっと確認したいと思いますのでお返事をお願いします。

・プラグイン「タグ」は公式のものをDLされましたか？(YES or NO)
・プラグイン「タグ」のhtml編集で style="text-align: left" を追加されましたか？(YES or NO)

公式プラグイン「タグ」のhtml内容に変更が入ったのは間違いないんですが、もしかしたら段階的にシステムが変わった可能性があります。そしてもしbonさんが「html編集はしていない」ということであれば、その段階にひっかかってエラーが発生している可能性があります。
これはbonさんだけの問題ではないので解明にご協力頂けると助かります(笑)

お手数おかけします。よろしくおねがいします。

Akiraさん
こんばんは。お返事をありがとうございます。
ファビコンはGoogleに認識されるのを待てということですね。承知しました。

またブログカードの件、確認したら確かに検索結果でカードにしていました。
ご指摘下さりありがとうございます。修正し、今後はカード取得の際に気を付けます。
（余談となりますが「改行はShift+Enter！」というのもAkiraさんの啓蒙記事のおかげで身に付きそうです）

htmlの件
新ブログ
https://bon3te.fc2.net
のタグは公式のもので、何も手を加えておりません。
（コメントや月別アーカイブに関しては、お分かりかとは思いますがAkiraさんの過去記事を参考にさせていただきました。ありがとうございます。）

旧ブログ
https://bon3te.blog.fc2.com/
のタグも公式のもののはずで、style="text-align: left"の追加はしていないと思います。ただ、時間が経って忘却している可能性があります。曖昧な回答になってしまい申し訳ございません。
（自分では、共有プラグインに手を出すのは今回が初めてだと思っています）

こちらこそ「なぜそれをする！」と言いたくなることだらけのブログだと思います。ご面倒をお掛けして申し訳ございませんが、よろしくお願い致します。

To bonさん③

ご協力ありがとうございます。
これはゆゆしき問題だー （￣∀￣；）
問題ありのシステム変更があったもよう。プラグインタグの件は今から記事にしますのでそちらを御覧くださいね。よろしくおねがいします。

Akiraさん
承知しました。ありがとうございます！
ブログ記事を拝見いたします。

追伸
私も公式のSNSやブログで絵文字や！の多用、「こんにちわ」や「すいません」等があると、そのお店へ行くのをやめるくらい嫌悪しています。似た考えの方がおられて嬉しいです^^

To bonさん

記事を書きましたのでご一読くださいね。

【重要】公式プラグイン「タグ」の仕様変更について
https://vanillaice000.blog.fc2.com/blog-entry-1003.html

この件全く気づいていなかったので助かりました(笑)

！の多用が特に嫌なんですよー。「…ちょっと落ち着けや」 とか思ってしまう ^^;

Akiraさん、この度は修正箇所をチェックしていただきありがとうございます。
通りすがりのユーザーにこんなに親切にしていただき感謝の気持ちでいっぱいです。
アドバイスを受けて、最新版のテンプレートをダウンロードし修正いたしました。
それでは今後ともよろしくお願いいたします。（返信は不要です）

すみません

I really can’t understand this with google translate......
1. What does it mean in「必要な記述」? Should I remove something from html?
2. Where should the “xml” be? It looks like I only need to copy it to my ......notebook? Then how should I upload it? Is there something I should do about the color?(I might get something wrong with google translate)
申し訳ありません

There’s a sentence”site-tile-150x150.pngの画像アドレス”, so the picture can only be 150*150?
And “sizes="180x180" href="apple-touch-icon-180x180.png”?
すみません I am really bad at this.

ああああああああああああああああああすみません！！！！

I tried and figured out those problems now! apologize again for those↑↑↑ now i kinda know how stupid i was((😅
last question: why does it seems not showing my ico when i search the website?
(or maybe it will after a few hours of waiting?)

To H.LYさん

take it easy hon lol
The answer to the last question is - as you say, it takes a while to be recognized by google.(probably a few days or more)
If you think 'why does it take such a long time to appear?', pls let me know :)

よろしくお願いします。

No title

Akiraさん
こんばんは。また質問が発生しました。
ご覧いただき、何かアドバイス頂けることがあればお願いしたいです。。

自分のブログをiPhoneのSafariで検索することがあったのですが、ファビコンが表示されていませんでした。
検索結果のスクショです。
https://blog-imgs-135.fc2.com/b/o/n/bon3ten/IMG_1294.jpg

.netのトップページ…ファビコン非表示
.comのトップページ…ファビコン表示
.comの「当ブログについて」…ファビコン非表示

という結果で不思議に思います。
試しにAkiraさんのサイトを検索してみたら、ファビコンはちゃんと表示されています。

ちなみに、パソコン（Chrome）のタブに、自分のブログのファビコンは表示されています。
パソコン（Chrome）で自分のブログを検索してみましたら、検索結果すべてファビコンが表示されませんでした。

Akiraさんブログのファビコン設置指南を読み直し確認して、設定はできているように（自分は）思いますが、きっとどこかおかしいんだと思います。お手数をお掛けしますが、ご覧いただけますでしょうか。
お忙しい時に申し訳ございません(__)
急ぎませんので、またよろしくお願い致します。
（今日はLuminousについても質問があり、今から該当記事へ移動します）

To bonさん

実はbonさんの直前に英語で質問されている方と同じ案件です。

ブラウザのタブへのファビコン表示というのはhtmlを取得して表示しますので即時実行ですが、Googleなど検索結果というのはクローラーが訪れて初めてその情報が渡り、その情報は再度クロールが行われるまで保持されます。
つまり以下の点について理解が重要です。

・クロールは原則ページ単位である
・一度クロールされた内容は次のクロールまで保持される

新規の記事についてはFC2はpubsubhubbubといってクローラーに情報が素早く伝わるシステムになっていますが、既存記事(ファビコン設置前)の場合は設置後の再クロールが行われるまで反映はありません。タブと違い即時実行ではない、という意味ですね。
といわけでGoogleに伝わるまで時間を要します。再クロールがいつ行われるのかはGoogleの都合なので「何日かかります」という具体的な数値も算出できません。

そして「ページ単位」ですから、例えば100記事を抱えるAサイトがあるとして、トップページを含むすべての記事の検索結果にファビコンが表示されるとは限りません。もしかしたら100記事中30記事は表示されて残り70は表示されていないかもしれない。これはクロール及びインデックスがページ単位で扱われているからです。

Search Consoleに登録されている場合は自主的にクロールの要請をされても良いと思います。でもやりすぎるとGoogleに嫌がられる(笑)

To Akiraさん

Akiraさん
わ、すぐあとに同じ解説を日本語でさせてしまうことになってしまったのですね。英語がわからなくて申し訳ないです…( ᐪᐤᐪ )

ブログカードに表示されるファビコンの時も「Googleを待つべし」でしたが、同じことなんですね…
最近プロフィールアイコンを変更しまして（何も変わっていないようではありますが）、その時に何か誤った操作をしてしまったか？と思ってしまいましたが、Akiraさんのお返事を読み特に問題はなかったようでその点は安心しました。

サーチコンソールに登録はしているのですが、今まで見たの2回くらいで…なんだかよくわかっておりません。でも一度くらい「お越しください」とお願いしてみようと思います(^^;
しつこくしてGoogleに嫌われるのは困りますしほどほどに…

いつもいつも、懇切丁寧なご対応誠にありがとうございますm(__)m

管理人のみ閲覧できます

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

To ファビコン設定の件 内緒さん

ファビコン設定用のhtml自体はこれで合っていますが、広告関連の記載位置が不正です。構文ルールとしてhead内に記載できないものが存在しているためhead自体が正しく動作していません。

参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

<script async src="https://xxxxx/adsbygoogle.js"></script>
<ins class="adsbygoogle" 〜 省略

この内容はhead内ではなく <body>の下に記載してください。

この修正を行った上で一度確認をお願いします。

管理人のみ閲覧できます

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

To ファビコンの件 内緒さん(完了のご報告)

こんにちは。上手く行ったようで安心しました。
Arrivalの方もそのままで良い、ということで了解です。
お返事まとめてごめんなさい。お疲れ様でした :)

管理人のみ閲覧できます

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

To ファビコンが表示されない件 内緒さん

こんばんは。

原因はカスタマイズされた際に紛れ込んだであろうhead要素内の 全角スペース です。

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html
参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

-----
<meta name="robots"
で検索し、この行の先頭に全角スペースがひとつ。
この行のすぐ下の行
<meta name="google-site-verification"
の先頭にもひとつ
またそのすぐ下の
<meta name="referrer"
の行の先頭にもひとつ。

<head>から</head>までに合計3つの全角スペースがありますのでこれを削除してくださいね。

管理人のみ閲覧できます

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

ファビコンの変更が反映されない場合の対処法　

いつも大変お世話になっております。こちらのオリジナルファビコン設定の記事、大変参考になりました。
いくつか質問させていただきたいです。問題が発生しているサイト→（https://krownews.jp/）
お忙しいところ大変恐縮ですが、お手隙の際で構いませんので、ご回答いただけると幸いです。

1.
ファビコンを新しいものに変更して、PCの方では変更がすぐに反映されたのですが、iPhoneのsafariでは半日以上経っても変更する前の古いファビコンのまま（https://imgur.com/a/Tb93B6Z）で、変更が反映されず困っています。
また、safariで「お気に入り」（https://imgur.com/a/v3KbnVT）や「ブックマーク」（https://imgur.com/a/SrioA7S）に追加した時も新しいファビコンにならず…という状態です。
対処法をご存知でしたら、ご教授いただけると幸いです。

2.
これは変更する前のロゴの時からそうだったのですが、iPhoneのsafariで「ホーム画面に追加」するとアイコンが真っ黒に（https://imgur.com/a/0LMly1z）なってしまい、困っています。
対処法をご存知でしたら、ご教授いただけると幸いです。

参考.
FC2ブログにアップロードしたxmlファイルは（https://blog-imgs-147.fc2.com/k/r/o/krownews/browserconfig_20211127125615229.xml）です。

head内に記載したhtmlは（https://imgur.com/a/2kWlbF8）です。
記載したhtml↓
<meta name="msapplication-config" content="https://blog-imgs-147.fc2.com/k/r/o/krownews/browserconfig_20211127125615229.xml"/>
<meta name="msapplication-TileImage" content="https://blog-imgs-147.fc2.com/k/r/o/krownews/icon-144x144_20211127124809750.png">
<meta name="msapplication-TileColor" content="#ffffff">
<link rel="icon" type="image/x-icon" href="https://blog-imgs-147.fc2.com/k/r/o/krownews/favicon_202111271248080fe.ico">
<link rel="apple-touch-icon" sizes="180x180" href="https://blog-imgs-147.fc2.com/k/r/o/krownews/apple-touch-icon-180x180_2021112712480659b.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://blog-imgs-147.fc2.com/k/r/o/krownews/android-chrome-192x192_2021112712480540f.png">

To KrowNewsさん

色々試してみたところほぼ自己解決できました。
safariで「お気に入り」の「ブックマーク」部分は時間の問題だったようで、変更後1日ほどで反映されました。
「ホーム画面に追加」のところは、背景が透過している画像を使ったのがいけなかったようで、背景白のものにしたら解決しました。お騒がせして申し訳ありませんでした。
まだ、safariの（https://imgur.com/a/Tb93B6Z）の部分だけ未反映ですが、もし何か対処法ご存知でしたら、ご教授いただきたいです。ｍ（＿　＿）ｍ

To KrowNewsさん

こんばんは ('0')/

> safariの〜の部分だけ未反映ですが〜

私の環境では新しいファビコン(羽を広げている様子)で表示されています。safariのキャッシュをクリアして再確認してくださいね。
設定 > safari > 履歴とwebサイトデータを消去

----- 別件
構文エラーがたくさんありますので修正をおすすめします。

【1】alt属性の位置が不正
<a id=blog-title-anchor
で検索するとhtml内に1箇所あります。a要素にalt属性をつけることはできませんので削除し、子要素のimgに移動させてください。また、border属性は廃止なので使わないようにしてください。

×
<a id=blog-title-anchor" 〜省略〜 alt="KrowNews">
<img src="省略" border="0">

✔
<a id=blog-title-anchor" 〜省略〜>
<img src="省略" width="横原寸" height="縦原寸" alt="KrowNews">

【2】入れ子の不正
b要素の中にp要素を入れ子することはできません。
対象箇所
・サイドメニュー部「アクセスランキング」
・サイドメニュー部「ピックアップ」
・サイドメニュー部「この人に注目！」
・サイドメニュー部「最新情報はこちらから」

×
<b><p class="p1">〜〜〜</p></b>

✔
<p class="p1"><b>〜〜〜</b></p>

To vanillaice (Akira)さん

お忙しいところ、ありがとうございます。「設定 > safari > 履歴とwebサイトデータを消去」ですが、何回試してもやはりsafariの（https://imgur.com/a/Tb93B6Z）の部分だけは反映されないですね…。iPhone本体を再起動したり、色々試しているのですが…。引き続き色々試してみます。

構文エラーのご指摘もありがとうございます。時間のある時に修正してみます。ｍ（＿　＿）ｍ

To vanillaice (Akira)さん

いつも大変お世話になっております。
ご指摘ただいた【1】alt属性の位置が不正の修正に挑戦してみましたが、うまくいきませんでした。

プログラミングの知識が皆無なので、おそらく僕がどこか間違っていると思うのですが、

元々
<a id=blog-title-anchor href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="https://blog-imgs-147.fc2.com/k/r/o/krownews/KrowNews200.png" border="0" /></a>
だったものを、

<a id=blog-title-anchor href="<%url>" title="<%blog_name>"><img src=“https://blog-imgs-147.fc2.com/k/r/o/krownews/KrowNews200.png” width="200px" height="48px" alt=“<%blog_name>">
と、教えていただいた通りにやってみたつもりでしたが、これだと（https://imgur.com/a/gg4xSKH）のように何も表示されなくなってしまいました。

お忙しいところ恐縮ですが、お手隙の際で構いませんので、間違っている部分があったらご指導お願いいたします。ｍ（＿　＿）ｍ

To KrowNewsさん

こんばんは ('0')/

原因は記号が違うためです。

×
<a id=blog-title-anchor href="<%url>" title="<%blog_name>"><img src=“https://blog-imgs-147.fc2.com/k/r/o/krownews/KrowNews200.png” width="200px" height="48px" alt=“<%blog_name>">

✔
<a id=blog-title-anchor href="<%url>" title="<%blog_name>"><img src="https://blog-imgs-147.fc2.com/k/r/o/krownews/KrowNews200.png" width="200" height="48" alt="<%blog_name>">

”
や
”
と
"
は別の記号なのでお気をつけください。
<img src=
の直後と
KrowNews200.png
の直後と
alt=
の直後の3箇所です。

また、width, heightの両「属性」の値は単位をつけません。

×
<img src="省略" width="300px" height="300px" alt="省略">

✔
<img src="省略" width="300" height="300" alt="省略">

CSSのwidth, heightの両「プロパティ」の値の場合は単位必須です。

×
<img src="省略" width="300" height="300" alt="省略" style="width: 200; height: auto;">

✔
<img src="省略" width="300" height="300" alt="省略" style="width: 200px; height: auto;">

To vanillaice (Akira)さん

できました！ありがとうございました。ｍ（＿　＿）ｍ
何かあったらまた質問させていただきます。

To vanillaice (Akira)さん

先ほど確認したらsafariの方も全てファビコンの変更が反映されていました！どうやら時間の問題だったようです。いろいろ教えていただきありがとうございました。ｍ（＿　＿）ｍ　

https://krownews.jp/

別件で、ご指摘ただいた【2】入れ子の不正、修正に挑戦してみたのですが…

×
<b><p class="p1">〜〜〜</p></b>

✔
<p class="p1"><b>〜〜〜</b></p>

元々
<b><p class="p1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 13px; line-height: normal; font-family: "Hiragino Kaku Gothic ProN"; color: rgb(0, 0, 0);"><a href= "https://twitter.com/krownewsjp" >KrowNewsTwitter</a></p></b>
だったのを

<p class="p1"><b>style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 13px; line-height: normal; font-family: "Hiragino Kaku Gothic ProN"; color: rgb(0, 0, 0);"><a href= "https://twitter.com/krownewsjp" >KrowNewsTwitter</a></b></p>
にしたら（https://imgur.com/a/1mTUnZN）になってしまいました。

お忙しいところ恐縮ですが、お手隙の際で構いませんので、間違っている部分があったらご指導お願いいたします。ｍ（＿　＿）ｍ

To KrowNewsさん

こんばんは ('0')/

ちょっとb要素の件は後回しで説明します。現在発生しているトップページの構文エラーを順に説明します。

【終了タグ欠損】

構文修正したロゴの部分です。
alt="KrowNews">
の後ろには
</a>
が必要なので追加してください。以下のようになっていればOKです。複雑な構成なのでheader要素全体を確認してください。

<header id=header-banner>
<<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->h1<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area--><!--edit_area-->div<!--/edit_area--><!--titlelist_area-->div<!--/titlelist_area--><!--search_area-->div<!--/search_area--><!--permanent_area-->div<!--/permanent_area--> id=blog-title>
<a id=blog-title-anchor href="<%url>" title="<%blog_name>"><img src="https://blog-imgs-147.fc2.com/k/r/o/krownews/KrowNews200.png" width="200" height="48" alt="<%blog_name>"></a>
</<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->h1<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area--><!--edit_area-->div<!--/edit_area--><!--titlelist_area-->div<!--/titlelist_area--><!--search_area-->div<!--/search_area--><!--permanent_area-->div<!--/permanent_area-->>
<p id=site-desc><%introduction>
</header>

-----
b要素についてです。
まず、htmlソースコードであろう文字列がそのまま表記されている場合は9割がた「構文エラー」だと思ってください。
私の説明が不足していましたのでもう一度。要は「p要素をb要素で挟むのはだめなので、入れ替えをしてください」という意味でした。今回この移動対象のp要素にはstyle属性など色々ついていますので、それも含めての入れ替えです。先回はstyle属性が長いので省略して説明しました。主旨としては「入れ子のルールに反しているので入れ子を直してくださいね」という意味でした。

現状では
<p class="p1"
の部位だけがbと入れ替わっているため、もともとp要素についているstyle属性部位
style="style="font-variant-numeric: normal;〜省略〜">
がそのまま置き去りになっています。これはもうhtmlではありえないので構文エラーです。

こういうことです。 ↓(p開始タグとp終了タグを太字にしています。)

<p class="p1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 13px; line-height: normal; font-family: "Hiragino Kaku Gothic ProN"; color: rgb(0, 0, 0);"><b><a href= "https://twitter.com/krownewsjp" >KrowNewsTwitter</a></b></p>

で、この構文なんですが、正直あまり良くはないです。
まずb要素というのは太字にするために用いるものではありません。現在の定義では「他のテキストと区別する必要があるもの」などに利用するにはしますが、極力使ってはいけない、とされているものです。

現状の構文の説明をすると、p要素には p1 というクラス名が付いています。通常クラス名というのはスタイルシートで定義するための識別に利用しますが、p1に関するスタイルは見当たりません。そしてp要素自体にstyle属性を用いて直接スタイル指定していますので無駄と言えば無駄です。ただし今後のことを考えてつけておく、というならば納得できます。

あとは

font-variant-numeric: normal;
これは数字の特殊な表記に用いるプロパティですが、数字自体は見当たりませんし normal がデフォルトなので記載の必要はないと思います。

font-variant-east-asian: normal;
についても、アジア系書式の区別に利用しますが、normalはデフォルトですから不要です。

line-height: normal;
は行間を「ブラウザにおまかせする」という指定で、これが本当に必要かどうか再考を。

font-family: "Hiragino Kaku Gothic ProN";
これは外した方が良いでしょう。なぜならwindows系のパソコンではヒラギノフォントは搭載されていないため表示できません。この場合ブラウザで設定されているフォントで表示されることになり、ms pゴシックなど望まないフォントで表記されてしまう可能性が高いです。
また、macであってもこのフォントは既に排除されており表示できません。

ここまでの説明を全て鑑みて、以下の内容をおすすめします。

<p style="color: rgb(0,0,0); font-weight: bold;">内容</p>

内容、というのは各部位で異なりますが、今回提示していただいているものをサンプルにすれば
<a href= "https://twitter.com/krownewsjp" >KrowNewsTwitter</a>
のa要素です。つまり

<p style="color: rgb(0,0,0); font-weight: bold;">
<a href= "https://twitter.com/krownewsjp" >KrowNewsTwitter</a>
</p>

こうですね。もっと言えばp要素は「段落」が正しい定義なので

<div style="color: rgb(0,0,0); font-weight: bold;">
<a href= "https://twitter.com/krownewsjp" >KrowNewsTwitter</a>
</div>

の方が良いと思います。
あとは color: rgb(0,0,0); の指定がありますけれども、p要素として表記されている文字は全てリンクのa要素なのでこの指定は効いていません。リンクを真っ黒にしたい場合は

<div style="font-weight: bold;">
<a href= "https://twitter.com/krownewsjp" style="color: rgb(0,0,0);" >KrowNewsTwitter</a>
</div>

こうしてa要素の方へstyle属性をつけてください。個人的には真っ黒( rgb(0,0,0) )はコントラストが強すぎるのでおすすめしません。そしてメインコンテンツよりも濃い色なのでサイドメニューの文字の方がメインよりも目立ってしまいます。
最終的に以下の形が最もおすすめです。

<div style="font-weight: bold;">
<a href= "https://twitter.com/krownewsjp">KrowNewsTwitter</a>
</div>

リンクはテンプレートのデフォルトに効います。一度お試しください。あとついでにメインの記事部位のフォントサイズが11pxということで、12px以下だとgoogleから怒られますが大丈夫でしょうか ^^;

To vanillaice (Akira)さん

詳しく教えていただきありがとうございます。大変参考になりました。

サイドメニューは
おすすめしていただいた
<div style="font-weight: bold;">
<a href= "https://twitter.com/krownewsjp">KrowNewsTwitter</a>
</div>
の通りにしてみました。

「メインの記事部位のフォントサイズが11px〜」というご指摘ですが、
11pxで検索するとヒットしたのは（https://imgur.com/a/HAmxHVG）とフッターのフォントサイズの２箇所でした。こちらはどこを変更すれば良いのでしょうか？

お忙しいところ恐縮ですが、お手隙の際で構いませんので、ご指導お願いいたします。ｍ（＿　＿）ｍ

To KrowNewsさん

こんにちは ('0')/

・ロゴ部分
・サイドメニュー部分

の修正を確認できました。お疲れ様でした。

-----
「メインの記事部位」というのは「KrowNewsさんが書いた記事」のことなのでテンプレートは無関係です。
各段落の内容が以下のようになっています。

<p class="p1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 11px; line-height: normal; font-family: "Hiragino Kaku Gothic ProN"; color: rgb(0, 0, 0);">文章</p>

見て分かる通り文字が極小で読みづらいですし、広告の文字サイズよりも小さいというのは問題ではないか、という点をお伝えしています。そしてこの内容もサイドメニューのそれと同じく不要な指定など多く含んでいます。
何か意図があっての11px指定ならば私が指図することではありませんのでその旨お知らせくださいね。

style属性によるCSS指定(インラインCSS)というのはとてもに優先度の高い(強制力の高い)指定方法なので、「今後も絶対にこのスタイルを崩さないのだ」というぐらいの強い意志が必要です(笑)
なぜなら修正が非常に困難だからです。本来style属性の内容修正というのは、例えば全ての記事でこのstyle属性を利用しており、それを変更したい場合、その全ての記事をひとつひとつ開いて編集する、ということになります。1000記事あれば1000ページの修正です。なので安易に利用しないよう気をつけてくださいね。今回の場合せっかく p1 というクラス名が付いているので、

.p1 {
font-variant-numeric: normal;
font-variant-east-asian: normal;
font-stretch: normal;
font-size: 11px;
line-height: normal;
font-family: "Hiragino Kaku Gothic ProN";
color: rgb(0, 0, 0);
}

こうしてスタイルシート側で制御してあれば一括修正が容易にできたところです。
もしフォントサイズを修正したいのであれば(修正不要ならば行う必要はありません)、不幸中の幸いで p1 クラスがありますので、スタイルシート末尾に

.p1 {font-size: 希望の数値px !important;}

例えば
p1 {font-size: 16px !important;}
など。
を追加します。その代わりこの p1 というクラス名は他で流用できません。p1クラスを持つ要素は全てimportant指定したサイズになるのだ、と記憶しておいてください。

また、今後記事を書かれる際はサイドメニューと同じく不要指定は取り除き

<p class="p1">文章</p>

と書かれると良いですね。記事内p要素の文字サイズについてはテンプレート側で指定がありますので

<p>文章</p>

これだけでも十分です。サイズや色を変更したければテンプレートの方を変更するだけの一括作業で済みますよ。
本文の文字サイズは最小でも 13px 、広告を掲載される方は最小でも 15px という感じではないかと思います。

vanillaice (Akira)様

大変お世話になっております。僕はあまり全然詳しくないので、色々教えていただけて大変ありがたいです。
フォントサイズの11pxは特に意図があったわけではなく、というか文字のサイズには特にこだわりがなかったので、これまで全く触っておりませんでした。
ご指摘をいただいて確かに大きくしたほうが良いなと思いました。vanillaice (Akira)様的にベストだと思われるフォントサイズがもしあれば、お考えを頂戴できるとありがたいです。

また、超初歩的な質問で大変申し訳ないのですが、フォントサイズを一括で修正する場合に、p1 {font-size: 16px !important;}をスタイルシート末尾というのは、このあたり（https://imgur.com/a/DrC92Bs）に追加すれば良いのでしょうか…？

To KrowNewsさん

こんばんは ('0')/

まずスタイルシート末尾、というのはそこで合ってます。
.shadow-attachtmentのルールセットの下ですね。
サイズは 16px が良いと思います。ほとんどのブラウザのデフォルトサイズであり推奨サイズでもあります。一度お試しください :)

To vanillaice (Akira)さん

お世話になっております。
このように（https://imgur.com/a/BKuER79）してみたのですが合ってますでしょうか…？
僕が間違っているのか、反映まで時間がかかるのか、今のところ特に変化はないようです…。
お忙しいところ大変恐縮ですが、ご確認いただけると幸いです。ｍ（＿　＿）ｍ
https://krownews.jp/blog-entry-821.html

To KrowNewsさん

こんにちは ('0')/

p1 の前にドット ( . ) をつけてくださいね。

×
p1{省略}

✔
.p1{省略}

To vanillaice (Akira)さん

お世話になっております。無事フォントサイズを変更できました。
諸々、ご指導いただきありがとうございました。ｍ（＿　＿）ｍ
また何かあった際は質問させていただきます。ｍ（＿　＿）ｍ

https://krownews.jp/

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

こんにちは ('0')/

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