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

管理人のみ閲覧できます

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

To Halo スピードテストの件 内緒さん

こんにちは。
まず点数を落としている原因を上げます。

・アフィリエイト
・FC2が挿入するJSファイル --- 不可避
・FC2が挿入するCSSファイル --- 不可避
・画像の拡張子が適切でない(webpを採用していない) --- 不可避

あとHaloではページ遷移を速くするための処理を行っています。全記事一覧を開いてもらうと最も効果がわかりやすいはずです(このページは記事数が少ない方でも通常3〜10秒かかりますがHaloでは1秒かかりません)
これはリンク先をバックグラウンドで先読みする(prefetch)という方法ですから、先読みした画像なども検査対象になります。そしてFC2はwebp拡張子が使えませんので、全ての画像に同じ警告が積み重なります。

テストツールは純粋なスピードを計測するのではなく、「修正可能な項目の指摘」であって、警告対象がいくつあるかで減算しています。実際の表示スピードは概ね1秒台ですから速度として決して遅くはありません。寧ろ速い方です。

どうしても点数を上げたいという場合は
・prefetchを外す(遷移スピードは遅くなります)
・広告を諦める
・Google analyticsを外す(これがあると必ず点数が下がります)
・削除可能なJSは全て削除する(カウンター, コメント装飾ツールなど)
・トップページのサムネイルをFC2独自変数<%topentry_image_w300>に変更する(解像度が落ち、バリデートエラーになります)

などでしょうか。広告とanalyticsとカウンターなどを排除すれば100点が取れますよ。ただし内緒さんの場合はドメイン関連のJSが強制で入りますので恐らく100点は実現できません。

参考記事: スピードスコアテストの考察
https://vanillaice000.blog.fc2.com/blog-entry-738.html

Haloの元々のスペックはサンプルDEMOでご確認頂けます。DEMOは実際に提供している内容と異なり
・prefetchを省いている
・必要の無いJSを省いている(FC2検索バー対策など)
が特徴です。その他は一般に配布しているものと変わり有りません。そちらを比較してもらうことでできることが見えてくるかもしれません。

----- 追記
これまでご利用になっていたテンプレートはこれかな？と思うものがありましたので拝見しました。
トップページのサムネイルは先程書いた<%topentry_image_w300>を利用していますので、それだけでも点数は上がりますよ。ただしバリデートエラー(htmlが正確でない)は多いですね。
いずれにしても信頼できるものをご利用になるのが一番だと思います。不信感がある場合は利用を避ける、というのが一番ですので差し戻し(以前のものへ変更)も視野に入れてはいかがでしょうか。

管理人のみ閲覧できます

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

To Halo スピードテストの件 内緒さん(終了のご報告)

こんばんは。
そちらも大変なご様子ですね。早く収まると良いのですが (∵`)
ちなみにそちらより9時間遅い地域出身です。

スピードテストは極端な話、画像の並び順が違うだけでもスコアが変わります(lazyloadを導入している場合)ので、あまり気を取られすぎないことも大切です。
お疲れ様でした :)

目次機能について

度々お邪魔します。
今回は目次機能について質問させていただきます。

目次をどうやって表示させているんでしょうか？
ページのソース表示をみて真似ができないかトライしたのですが、わかりません。
お答えいただける範囲の事なのかどうかわかりませんが、可能なら教えていただきたいです。
よろしくお願いします。

To Satoshi Nakamotoさん

こんにちは ('0')/
TOCの件について

以下のページをご覧ください。
参考記事: 見出し目次を生成するTOCスクリプト
https://vanillaice000.blog.fc2.com/blog-entry-826.html

Haloのscopeは
.inner-contents
です。よろしくお願いします。

To Akiraさん

ありがとうございます。
早速勉強させていただきます。
：）

To Satoshi Nakamotoさん

Akira さん

目次無事導入できました。ありがとうございます。

で、次なるご質問があります。汗
このページで質問するべきなのかまようところなのですが、、。

このテンプレートに目次機能を入れてiphoneなどでダークモードに切り替わった場合、目次部分のバックグラウンド色が明るすぎるのですが、どう対応するべきなのでしょうか？

一応、目次部分を薄いグレー色に変更を試みたのですが、目次などの文字色が被ってしまい、消えてしまいます。
アドバイスをいただけるとありがたいです。
m(__)m

To Satoshi Nakamotoさん

Akira さん

追加で質問させていただきます。すいません。

このテンプレート "Halo" を常にダークモードで表示する事はできるのでしょうか？
そして、PC画面でもダークモードに変更できますでしょうか？

最近、通常の白い画面を見ると目がいたくなるのでダークモードを非常に気に入ってしまいまして、もし可能なら教えていただきたいです。
m(__)m

To Satoshi Nakamotoさん

こんばんは ('0')/
まず、TOCの導入が上手く行ったということでお疲れ様でした :)

ダークモードの件は結局どうされますか？
暗色をデフォルトにする場合はダークモード自体が不要になりますので、TOCについても対処法が変わります。
方針を決定してお伝えくださいね。よろしくお願いします。

> PC画面でもダークモードに変更できますでしょうか？〜

ご利用のPCに依存します。OSが対応していれば切り替えられますし、非対応ならば使えません。詳細は記事をお読みください。

To Akiraさん

Akira さん

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

暗色デフォルトでやってみたいです。
ご指導よろしくお願いします。　٩(^‿^)۶

To Satoshi Nakamotoさん

了解です。今回はhtmlは触りませんのでスタイルシートに集中してください。

【ダークモード解除 + 暗色デフォルト】

非常にややこしいので注意深く作業してください。事前に複製を取ってくださいね。

まず
:root
で検索すると全部で5つ出てきます。最初の一つ目のルールセットが「デフォルト」です。
2つ目のルールセットがダークモードopt in時のスタイル指定で、近接に
/* darkmode 1/2 */
の目印が付いていますのですぐにわかると思います。2つ目の:rootのルールセットの最初の行は
--bgcolor-body: rgb(31,31,31);
で、最後の行は
--shadow_color: rgba(0,0,0,.6);
です。まだ下にも続いていますが今は気にせず1つ目と2つ目のルールセットだけに集中してください。

デフォルトのルールセットとダークモードのルールセット、それぞれ
--bgcolor-body: rgb(31,31,31);
上記のような形でスタイルが指定されており、左側の赤い部位(プロパティ)がデフォルトとダークモードで共通しています(右側の値(value)は異なります)

デフォルトとダークモードで 共通しているものはデフォルト側を行単位で削除。
デフォルトとダークモードで 共通していないものはそのまま残します。、
間違ってダークモード側を消さないようにしてください。

消すべき行を全て消したら
/* darkmode 1/2 */
のすぐ下にある
@media (prefers-color-scheme: dark) {
という一行と、
/* end */
のすぐ上にある
}
という一行を消してください。

続いて
/* darkmode 2/2 */
で検索すると出てきますので、そのすぐ上にある
#comment_form input:-webkit-autofill
のルールセットを削除。続いて先程の
/* darkmode 2/2 */
のすぐ下にある
@media (prefers-color-scheme: dark) {
という一行と
/* end */
のすぐ上にある
}
という一行を消します。

以上がダークモードスタイルのデフォルト化です。

-----
TOCについてはTOC用のCSSにコメントが付いていますので、

/* 全体を囲うボーダー */
/* 全体背景色 */
/* 各リンク上部のボーダー */
/* リンク色 */

がカスタマイズ対象です。
私では求める答えはわかりませんので、ご自身で色調の調整を行ってください。
よろしくお願いします。

-----
* 念の為「ルールセット」の意味の説明

.xxx {
内容
}

このまとまりのことです。

To AkiraさんTo Akiraさん

Akira さん

長文に渡るご指導恐縮です。
ありがとうございます。

でっ残念ながら、私のミスだと思うのですが、ブログが透明化されてしまいました。
もう一度テンプレート複製してトライしてみます。

かなり難しい作業の説明をお願いしていたことに気づきました。
申し訳ありませんでした。
ダーク固定設定の方が、目次内をデフォルト＆ダーク仕様にするよりもシンプルであろう的な打算もありました。
汗・汗・汗。

何度かトライしてみます。

To Satoshi Nakamotoさん

こんにちは ('0')/

消すべき行を示したスクリーンショットです ↓
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser_2020_4_21.png

必ず「行」で削除してください。
それから一つ作業内容が間違っていましたので、上のスクリーンショットに従って削除ができましたら、次は
/* darkmode 2/2 */
の目印を見つけてください。
この目印のすぐ上にある

#comment_form input:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--bgcolor-input) inset;
}

このルールセットを削除し、続いて目印の下にある

@media (prefers-color-scheme: dark) {
#comment_form input:-webkit-autofill {
-webkit-text-fill-color: var(--color-base) !important;
}
}

のルールセットも削除します。上記ルールセットを削除した箇所に、以下の内容を追加。

#comment_form input:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--bgcolor-input) inset;
-webkit-text-fill-color: var(--color-base) !important;
}

ダークモード解除 + 暗色デフォルトの作業は以上です。
よろしくお願いします。

Akira さん

ありがとうございます。
ダークモード固定、でっできました〜〜！　嬉涙
m(__)m


。。。。少し真面目な話になるんですが、
Akiraさんはどうして無料でパブリックに素晴らしいテンプレートを提供し続けておられるんですか？
しかも、利用者のお世話もかなり本気でされているし、でもお金をとるわけでもなく。。。。。

新型コロナの影響もかなり長引きそうですが、お体には気をつけてください。

とにかく、感謝の気持ちをお伝えしたいです。
ありがとうございます。

♪( ´θ｀)ノ

To Satoshi Nakamotoさん(完了のご報告)

こんにちは ('0')/
完了したということで安心しました。

> Akiraさんはどうして〜

私の趣味は色々ありますが、これが一番お金のかからない趣味です(笑)
ただで楽しめているのでお金を頂こうとは思いません。それだけのことです(笑)

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

Twitter OGP画像が表示されない？！

Akira さん

お疲れ様です。
報告？　質問？　なのですが、ブログ更新をツイッターでツイートする際にOPG?画像が数日前まではきちんと表示されていたのですが、表示されなくなりました。Twitterバリデートで何度かトライしたのですがエラーが出ます。

テンプレートのダーク化は関係ないと思います。
もし何かお知りでしたらご教授ください。
すんません。m(__)m

同じ現象が起きているようです

Akiraさん、こんにちは～。
いつも大変お世話になっておりますm(__)m。

今朝から新しいテンプレート－BigGirlNoCry－を試していたところ（憧れでした・笑）、
やはりTwitterでアイキャッチ画像が表示されなくなりました。
昨日までは何の問題もなかったのですが。
ちなみにその昨日までの画像は今も表示されています。
（私のブログにTwitterのタイムラインが貼ってありますのでご確認いただけます）

それはないだろ、と思いながら、一応元のテンプレート－CommonSense－に戻して
新たな指定も試みてみましたが、やはりテンプレートのせいではないようです(笑。

何か見落としがあるかもしれないと覗きに来たところ、
同じ現象を訴えていらっしゃる方がおられたので、
これは運営さんかTwitter側の問題かな～などと疑っている次第です。

ひっそり去ろうとしましたが、同じ現象の方がいらしたので
とりあえずお知らせいたしまするね。ではでは。

To Satoshi Nakamotoさん, To こんさん

こんばんは ('0')/

まとめてのお返事でごめんなさいね。
今から見てみますね。情報のご協力大変助かります。ありがとうございます :)
何かわかれば改めてコメントします。よろしくお願いします。

すいません　とても失礼な質問になるかと思いますが、解決策があるのかもしれないと思い　質問させてください。
Akiraさんが　IE非対応のものが多く、　今回僕もお借りしたテンプレートもIE非対応だと言う事は知っていてお借りしました。
私の　ポカで・・・　Edgeで検証し問題ないと思っていました。

しかし当然ですが、　IEを使っている（と予想される）方々から　おかしいというコメントをいくつかもらう事になりました。
また　yahooで開くとおかしいと？？？　これは　携帯のアプリの事かとは思いますがよくわかりません。

Akiraさんの　テンプレートの中でも　IEでも見れるものがあると　ある方から教えていただき　
変更しようかと思っていましたが、　このテンプレートとても気に入っているので　もし対応できる方法があるのなら　教えていただけないかと　連絡しました

長文で、　しかも　自分勝手な質問で申し訳ありません。

　　駐在おやじ

To 駐在おやじさん

こんばんは。
* IE非対応テンプレートの件

> IEでも見れるものがあると　ある方から教えていただき〜

のテンプレートのIE対応・非対応の別は以下のページをご覧くださいね。
記事: FC2共有テンプレート一覧
https://vanillaice000.blog.fc2.com/blog-entry-283.html

-----
> IEを使っている（と予想される）方々から　おかしい〜また　yahooで開くとおかしいと？？？〜

この「Yahoo!で開くと」「Yahoo!から入ると」「Googleから見ると」というのはひとつのキーワードになっていてですね、このキーワードを口にする方に「IEを利用してはいけない理由」を説いても恐らく受け止めてもらえません。
* Yahoo!やGoogleというのはブラウザ起動時のトップページであって、ブラウザそのものではありません。IE利用者さんはこのような誤解をされている(あるいは「ブラウザ」などweb一般用語を知らない)方が多いです。

Haloテンプレートを気に入って頂けたのはとても嬉しいんですが、駐在おやじさんの読者層を考えるとIE対応に変更した方が良い、というよりも変更必須のように思います。

参考記事: IEの対応・非対応の選択に悩んでいる方へ
https://vanillaice000.blog.fc2.com/blog-entry-930.html

私の上記記事リンクを紹介頂いたとしてもIE利用者さんは私のブログを読むことができません(ブロックしています)ので、駐在おやじさんの方で啓蒙してもらう形になり、そしてそれは相当難しいと思います。

-----
> もし対応できる方法があるのなら　教えていただけないかと〜

ありますが、こちらもやはりかなり困難な作業になると思います。もちろん駐在おやじさんのhtml, CSS習得度によります。

・ display: grid に関連するレイアウトを全て flex あるいは float に変更 --- IEはgridの正しい解釈ができません
・ カスタムプロパティを全て排除 --- varの文字列を含むCSSを全て削除し、然るべきCSSを然るべきセレクタに適用
・ object-fitに関するポリフィルを導入
・ const, promise を利用しているJSを全て修正
・ IE用CSSフォールバックの記述

などです。Yahoo!やヤプログユーザーさんでFC2へ移転された方向け限定配布のテンプレートは比較的楽に修正できた(カスタムプロパティの修正のみ)んですが、Haloの場合はかなり困難を極めると思います。
事前の説明通り私がIE対応を行うことはありませんので、「IEを使わないよう啓蒙する」か「IE対応テンプレートに変更する」かのいずれかでお願いします。申し訳ないです (*_ _)

-----
啓蒙される場合には以下の記事を紹介されると良いかもしれません。

参考記事(外部): Internet Explorerは“ヤバい”ブラウザ。今すぐ使用をやめよう！ [HATAFULL様]
https://hatafull.co.jp/blog/6049

参考記事(外部): IEを使い続けるのは危険 マイクロソフトが企業に使用中止を要請 [livedoor NEWS]
https://news.livedoor.com/article/detail/15997210/

また、「IEを使ってはいけない理由」で検索しても類似記事がたくさん出てきます。(ただし中にはIE非対応サイトで読めないこともあるかもしれません)

To Akiraさん

早速の返事ありがとうございます。
Akiraさんの言われる通りだと思います。　読者層の方が結構年配の方が多いと思っています。
IEと書いても何が何だか・・・・　の方にどう説明しても理解していただけないと思います。
もちろんIEを使わない方がいいといわれる理由も、今回初めて読ませていただき納得がいきました。

私が、勝手に選んで（お借りして）、しかもやらないと明言されていることに関して質問までして
大変失礼しました。
それなのに、　丁寧に教えていただいただけでなく、アドバイスまでいただき本当にありがとうございました。

とても素敵で、僕が初めて変更したテンプレートでしたが、　
私の確認不足のため　Akiraさんにはお手数ばかりをおかけしました。
重ね重ね　お詫び申し上げます

　　駐在おやじ

To 駐在おやじさん(重要追記あり)

こんばんは ('0')/

そうですね。賢明な選択だと思います。
最後に2つばかりアドバイスさせてくださいね。

① 青い文字の使用はできれば避けた方が良い
② 記事下の「お店情報」のhtmlにテキスト色を指定した方が良い

① Halo適用時にお伝えしようと思ったんですが、青い文字は背景が暗色に反転すると視認性が著しく低下します。

参考記事: 視認性の落ちたテキストから色指定を取り除く
https://vanillaice000.blog.fc2.com/blog-entry-1030.html

ブログというのは管理人のものでもあり、閲覧者のためのものでもあります。Haloテンプレートのように「ダークモード対応」が取られているテンプレートを採用されたときには、管理人の意思に関わらずユーザーの個人設定によっては背景が暗色に切り替わります。
ダークモード対応は今後増えていくと思われますので、できれば今のうちに対策された方が良いでしょう。
(もちろんダークモード対応を取り除くことはできます)

② 「お店情報」はtable要素で構成されており、セルには薄桃色の背景色を指定していますよね。
仮に今後暗色背景テンプレートに変更したり、先にお伝えしたダークモード対応テンプレートに変更された場合には基本文字色は現在と逆の「白」になりますので、中のテキストが見えなくなってしまいます。
なので文字色を「黒系」に固定されることをおすすめします。そうすればテンプレートの色調に左右されることが無くなります。

「背景色を指定したら必ず文字色も同時に指定する」と覚えておかれると良いと思います。
あとtableの書き方が古い ^^;
(現在の書き方はhtml4.01で現在の水準以下の内容です。現在のweb標準はhtml5.2)

<div style="max-width: 300px; border: 2px ridge rgb(0,128,128); background: rgb(255,228,225); color: rgb(51,51,51); padding: .6em;">ここにテキスト内容</div>

これで十分だと思いますよ。tableの入れ子は特におすすめしません。tableというのはレンダリング(描画)が遅いのが特徴です。部品(trやtd)が多く、全ての部品を解析しなければ描画が始まらないためです。入れ子が多ければ倍々で処理が遅くなります。
このような簡単なボックスであればtableではなくdivの利用が適しています。

また、現在の書き方では廃止属性が多く含まれており、html的には「エラー」です。常にエラーを抱えていると致命的なエラーが生じた際に検証の邪魔になり、原因の特定が困難になります。

上記のhtmlを一度お試しください(エラーなし, 文字色指定あり, 現在のものと見た目はほぼ同じでボックス内側の余白を足しています)

以上です。お疲れ様でした :)

To Akiraさん

アドバイスいただき　本当にありがとうございました
昨晩、またいろいろテンプレートを変えながらどれにしようか選んでいたんですが、
青字が見にくいと言う事に、僕も気が付きました。

本当は黒っぽい背景で、良いのを見つけたんですが、　僕が少し色弱があり　赤系が見にくいため
普段から青系をよく使っていました。　ブログで強調したい字などが青いのはそのためです。

今後この辺りも考えてみないといけないなって思っています。
今回　僕としては本当にいい勉強になりました。
デザインや、ソフト系は全くの素人なので　これから少しずつ勉強していきます。

本当にありがとうございました

　　駐在おやじ

To 駐在おやじさん(終了のご報告)

こんばんは。

うちの長男・次男も色弱です。黒背景に青文字はほとんど見えないようです。黒背景の場合は水色で私からはっきり見える文字でも「何が書いてあるのか」と聞いてくることが多いので、白背景以外の青文字は辛いようです。
赤は白背景でも黒背景でもはっきり読めるそうで、やはり個人差があるのでしょうかね。

> 本当は黒っぽい背景で、良いのを見つけた〜

既に黒背景にする可能性が若干でもあるのならばtableの文字色指定は必須です。私が書いたhtmlを利用する・しないはどちらでも構いませんが、何らかの対策は必要ですね。
修正数が少ないうちに行っておくが吉。

後は駐在おやじさんの選択にお任せします。お疲れ様でした :)

ありがとうございます

文字色のコメントにも　返事いただいてありがとうございました。
以前教えていただいた、　枠についても変更しました。

今まで　記事を書くだけで、　レイアウトも字も色もそれほど気にしていなかったのですが
今回の事で　いろいろ気になりだしました。
全くの素人ですが、　少しずつ　つついて行こうと思います

ほんとうにありがとうございました。

　　駐在おやじ

To 駐在おやじさん(重要追記あり)

こんばんは ('0')/

> 枠についても変更しました〜

ということなんですが、ソースが間違っているので以前よりもひどいエラーになっています。最新記事「東大門〜」しか見ていませんので他のページがどうなっているかはご自身で確認をお願いします。
そして現在記載されているソースをそのまま載せますが、不都合があればその旨お伝え頂ければ削除しますね。

×
<div style="max-width: 360px; border: 2px ridge rgb(0,128,128); background: rgb(255,228,225); color: rgb(51,51,51); padding: .6em;"><td bgcolor="#FFE4E1">お店情報　<span style="font-size:large;"><strong>アグランコッケラン「xxxxx」</strong></span>
住所　：　xxxxxxxx 35-7
Tel　：　xx-xx-xxxx</div>

✔
<div style="max-width: 360px; border: 2px ridge rgb(0,128,128); background: rgb(255,228,225); color: rgb(51,51,51); padding: .6em;">お店情報　<span style="font-size:large; font-weight: bold;">アグランコッケラン「xxxxx」</span>
住所　：　xxxxxxxx 35-7
Tel　：　xx-xx-xxxx</div>

1箇所目の赤字部位は完全に構文エラーです(td要素を単独で用いる(table要素から切り離して利用する)ことはできません。
2箇所目、strongタグは文字を太くするために用いるものではなく、挟まれたテキスト内容を「意味を強く強調する(強意)」ために利用します。太くするだけならば上記の内容をどうぞ。

2箇所目については意味的には間違いですが構文的には間違いではありません。
1箇所目は構文間違いですから修正必須です。
よろしくお願いします。

* 構文(syntax)と意味(semantics)の違いについては以下の記事をご参照ください。
参考記事: 問題解決能力とは「理解力」と「意識力」と「実行力」
https://vanillaice000.blog.fc2.com/blog-entry-1023.html

管理人のみ閲覧できます

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

To とらいぶさん

こんばんは。ありがとうございます :)
* ヘッダークロスフェイドの件

できますが、html, CSS共に大きな修正が必要です。弊テンプレート間であればCSSやJSの流用を許可していますので、Francescaの内容を移植して頂いても構いませんが、大規模な個人カスタマイズ、元の仕様を大きく変更する類のカスタマイズのお手伝いは致しませんのでご自身で行ってもらう形になります。
よろしくお願いします。

サイドカラムのスクロール

こんにちは。いつもお世話になっております。
ずっとBelongテンプレをカスタマイズのご指導もいただきながら使っていて満足してるのですが、
ちょっと気分をかえてみたくて、こちらHaloを今日から展開しています。
が、なぜかサイドカラムの表示がスムーズにつながりません。
途中でストップして、そこから今度は下からスクロールされてくるんです。
どこに問題がありますでしょうか。
Ｂｅｌｏｎｇでけっこういじったのですが、
その時のものが影響していたりしますでしょうか。
いつまでも初心者質問で恐縮ですが、
ご対応の程、よろしくお願いいたします。

To ぱんとらさん

こんにちは ('0')/

原因はサイドメニューのプラグイン(フリーエリア)の構文エラーです。
で、その構文エラーが非常に多くてですね、ざっと見ただけでも200近くあります。その一部が動作に悪影響を及ぼしています。
クリティカルなものだけ先にお伝えします。

-----
【不要なfont終了タグ】
「Blog Manager」の文章末尾
たまに猫も出ますぜ(Ф∀Ф)</font>

赤字部位は不要ですから削除。また、fontタグは廃止されており「使ってはいけない」とされる要素なのでこの機会に正しいhtmlに修正されることをおすすめします。img要素の末尾のスラッシュも不要です。
(〜 は文章の省略を意味しています)

<div style="color: maroon;">管理人〜</div>
<div>
<img src="画像アドレス" alt="" border="0" width="157" height="148"><br>
友人に勧められて〜おばさん。
</div>
<div style="margin: 1em 0 0; font-weight: bold;">●ベランダー〜</div>
<div>
<a href="アドレス" target="_blank"><img src="画像アドレス" alt="" border="0" width="186" height="137"></a><div>
<div>
たまに猫も出ますぜ(Ф∀Ф)
</div>

【fontタグのミス多数】
「うちの猫たち」のhtml内容ですが、これはえっと、ひどいと言わざるを得ない(笑)
恐らくご自分で見てもぱっと理解できないのではないでしょうか。全て書き換えをおすすめします。部分修正の方が却って大変だと思います。
(不要な属性(border=0など)やimg要素末尾スラッシュなど削除しています)

<div>
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000; font-weight: bold;">ロック王子：ロックン</span><br>
正式名＊<span style="font-weight: bold;">Lucky7〜</span><br>
♂白黒牛柄／2007.9 生（推定)<br>
<span style="color: green; font-weight: bold;">2007.12.2</span>：大熊猫とら〜<br>
<span style="color: green; font-weight: bold;">2015. 6. 6</span>：肺がんのため〜<br>
享年７歳。<br>
プロフィール(途中)は<a href="アドレス" target="_blank">こちら</a>
</div>
<div style="margin: 1em 0 0;">
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000; font-weight: bold;">嘉利太后：カリたん,カリンヌ,バカリン</span><br>
正式名＊<span style="font-weight: bold;">Camellia〜</span><br>
♀キジトラ／2002.2 生（推定）<br>
<span style="color: green; font-weight: bold;">2004.5.15</span>：大熊猫とら〜<br>
<span style="color: green; font-weight: bold;">2013. 3. 2</span>：１年超の〜<br>
享年11歳。今なお〜<br>
プロフィール(途中)は<a href="アドレス" target="_blank">こちら</a>
</div>
<div style="margin: 1em 0 0;">
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000; font-weight: bold;">ビブ姫：ビブ子,ビブち</span><br>
正式名＊<span style="font-weight: bold;">Hannya〜</span><br>
♀三毛／2004.10 生（推定）<br>
<span style="color: green; font-weight: bold;">2005.1.23</span>：大熊猫とら〜<br>
2016.3月に慢性腎不全の診断を受け、<br>
現在食事療法中。<br>
プロフィールは<a href="アドレス" target="_blank">こちら</a>
</div>
<div style="margin: 1em 0 0;">
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000; font-weight: bold;">キング金四郎：キンちゃん,キン坊</span><br>
正式名＊<span style="font-weight: bold;">Bomber〜</span><br>
♂黒ペルシャmix／'05-'06生（推定)<br>
<span style="color: green; font-weight: bold;">2008.8.23</span>：大熊猫とら〜<span style="font-weight: bold;">預かり</span>で来た日<br>
３匹から〜<br>
多頭飼育〜<br>
まったく〜<br>
今も〜<br>
詳細プロフィールの〜
</div>
<div style="margin: 1em 0 0;">
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000;"><span style="font-weight: bold;">ラック坊主：ラックん,楽(ラク)べー,<br>
楽ち,らくぶー,ぶーたん,若大将</span>etc..</span><br>
正式名＊<span style="font-weight: bold;">LUCK〜</span><br>
♂サバトラ／2015.5 生（推定)<br>
<span style="color: green; font-weight: bold;">2015.9.19</span>：捕獲〜<br>
<span style="color: green; font-weight: bold;">2015.10.4</span>：大熊猫とら〜<br>
シマシマ〜<br>
捕獲器に〜<br>
シマシマ〜<br>
ややこしい関係〜<br>
詳細プロフィールは〜
</div>

-----
font size="2" の指定は省いています。この指定の意味がちょっとわからなかったのですが、サイズ2は13pxのことなので、サイドメニューの文字大きさが仮に15pxや14pxの場合にはこの文字はそれよりも小さくなりますし、サイドメニューが12pxならばこの文字は逆にそれよりも大きくなります。
他の文字と比べて「大きくしたいのか小さくしたいのか」で決めるのであれば絶対指定ではなく相対指定を行いましょう。
小さくしたい --- font-size: .9em など
大きくしたい --- font-size: 1.1em など

「代替テキスト」は画像の被写体を示す文言を適切に入れてください。特に意味を持たない画像の場合には alt="" と空指定でもOKです。

-----
【Link】
書き出しが全て
<li style="text-align:left" style="margin-top:5px;">

style属性が重複していますので全て
<li style="text-align:left; margin-top:5px;">
に修正する必要がありますが、これはもしかして公式プラグインですかね。ちょっと今時間が無くて出かけなきゃいけないので、このプラグインが公式なのかフリーエリアなのか、そしてカスタマイズを行っているかどうかを教えてください。

とりあえずクリティカルなものを修正してみてサイドメニューの様子を見てくださいね。
以降のお返事は遅くなると思います。すみません。よろしくお願いします。

To Akiraさん

早々の、しかもここまで細かくご教示くださって、
なんてお礼を申し上げてよいか・・。
かなり昔に、よくわかってもいないのにテキトーにやったものが、
ここまでひどいとは・・・お恥ずかしい限りです。(´>ω<｀)
取り急ぎ、丁寧にご教示いただいた「うちの猫たち」のご指摘箇所を修正しましたところ、
サイドカラムは問題なく表示されてました。本当にありがとうございます。

まだ、
>【Link】
>書き出しが全て
><li style="text-align:left" style="margin-top:5px;">

という点については、修正はもちろん、ちゃんと確認もできておりませんが(-∀-`; )
とりあえず、書き出していただいた箇所の修正で、
正常に表示されていますので、おいおいチェックしてまいります。

それにしても、ここまでしていただくなんて、なんとお礼申し上げればよいものか....
本当にありがとうございました！

To ぱんとらさん

こんばんは。

修正ミス1点の再修正
×
<span style="font-weight: bold;"ラック坊主：ラックん,楽(ラク)べー,<br>
✔
<span style="font-weight: bold;">ラック坊主：ラックん,楽(ラク)べー,<br>

これ私のミスです。ごめんなさい。構文エラーですから必ず修正してくださいね。

-----
他の部位については「おいおい」ということで強制はしませんが、現在抱えているエラーによって今後何かしらの問題が起きた時に すぐに原因を特定することが非常に困難 です。私が検証してもとても時間がかかってしまいます。
なので少しづつで良いのでコツコツを修正されることをおすすめします。

参考記事: 問題解決能力とは「理解力」と「意識力」と「実行力」
https://vanillaice000.blog.fc2.com/blog-entry-1023.html

サイドメニューの件は修正できているようで安心しました。
お疲れ様でした :)

To Akiraさん

こんばんは。
またもや早々に追加修正箇所も教えてくださって、ありがとうございます。
参考記事を拝読いたしましたが、今の私のレベルですと、
問題解決能力の前提となるそもそもの基礎知識がおそろしく低いってことで、
つまりは、わかってないヤツが適当にカスタマイズに手を出すなんて
ウン年早いってことのようです。目が醒めました。(^ω^;)

ちなみに、ご指摘いただいてました【Link】の書き出しに見られる重複....とのことですが、
こちらは、公式ではなく共通プラグインを使用していました。

理解力の衰えは否めませんが、
ぼちぼち学習しながら、コツコツ修正してまいります。

お忙しいところ、ほんとにありがとうございました。
今後ともよろしくお願いします。

To ぱんとらさん(終了のご報告)

こんにちは ('0')/

そうなんですよねぇ。修正しろって言われてもどこをどうやってやるんだよ、みたいな(笑)
一度にやろうと思えば相当大変ですから、時間がある時に少しづつ、ということで良いと思います。少しづつでもやりましょうね、という意味でもあります(笑)

とりあえず大きなトラブルは回避できていますので、お疲れ様でした :)

初歩的なご質問で失礼します。

初めまして、こんばんは。FC2の素材からお借りして使っております、イツキ　コトナと申します。
少々分からない、ことがございまして…作者様に尋ねる為にHPを訪れました。

自分で何とかしようとタグを見て見たのですが……問題点を発見することが出来ず；
初歩的な質問で失礼します。

記事を出しても、下にある紹介文で【Admin: albicocca34】と言うのが消えず困っております。
どの様にしたら、消すこと(表示できないように)は出来ますでしょうか？
アドバイスを頂けたら幸いです。

イツキ

To コトナさん

>【Admin: albicocca34】と言うのが消えず困っております。
【Admin】は管理者（ブログの執筆者）という意味なので消さなくても良いと思いますよ。むしろ消さないことをお奨めします。
【albicocca34】ではなくハンドルネームを表示させたいということでしたら、『環境設定』から『ユーザー情報の設定』へと進み『あなたのお名前』の項目にハンドルネーム【イツキ コトナ】を入力すれば【Admin: イツキ コトナ】と表示されます。

【Admin】ではなく他の単語を表示させたいのであれば、HTMLの編集で下記の構文のAdminの部分を任意の単語に変更することで表示が変わると思います。
↓↓↓
<span id=admin_name>Admin: <%author_name></span>

【author_name】の部分には、ユーザー情報の『あなたのお名前』に記入した内容が反映されます。

To 神谷 幸彩さん

神谷様
とても分かりやすい、回答をありがとうございます。
そうだったのですね！どうしても、自分のハンドルネームを入れたく困っておりました；
さっそく試して見たいと、思います。

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

To コトナさん

神谷様
度々、申し訳ございません。
先ほどのアドバイスを試したところ、ちゃんと名前を表示することが出来ました！
適格のアドバイスをありがとうございました。

To コトナさん

解決されたようで何よりです。

To コトナさん, 神谷 幸彩さん

まとめてのお返事でごめんなさい。

修正できたようで安心しました。神谷 幸彩さん、いつもご協力をありがとうございます！

-----
ところで、神谷 幸彩さん、タブレットでChoir導入されたんですね。すっごい驚く(笑)
それはある意味「技」の粋です （￣∀￣；）

To Akiraさん（お返事不要）

差し出がましいかと思いましたが、Akiraさんが暫くご不在とのことでしたのでアドバイスさせていただきました。

>タブレットでChoir導入
はい、タブレットOnlyで作業しました。根性というか執念で成し遂げました。これも「技」になるんですかね。達成感と妙な自信がついたのは確かです(笑)

こんにちは

これまで使ってきたブログのデザインが そろそろ世間から遅れてきたように感じ、Halo を利用させてもらうことにしました。
Halo に限らず、管理人さんの作品は圧倒的にクオリティが高いですね。
fc2 の共有テンプレートを見て選んだのはほとんど全て管理人さんが作ったものでした。


さて、まず初めにお聞きしたいのは、各記事を執筆する際に、HTML 編集で <p> や <div> 内に設定した padding などの設定が、どうやらブログ自体の設定に打ち消されている ということについてです。
私は従来、段落 ≒ <p> 要素を書く時は、以下のように style を付け加えていました。

　<p style="padding-top: 0em; padding-bottom:0em; ">　...　</p>

例えば、画像を挿入する場合や、<h1> といった見出し要素の前後では、空白を大きく取ります。
微調整はかなり頻繁にするので、この padding 指定はほぼ全ての段落要素に記述されている状況です。

しかし、管理人さんの制作したブログデザインでは、どうもこの指定は効果を発揮していないようです。
これを従来通り、都度調整の指定が生きるようにすることはできますか。
あるいは、そうするとレスポンシブデザインが崩れるなどの不都合が生じるでしょうか。


次に、各記事の本文を表示した際に、その記事タイトルの横へ表示される 執筆者アイコン についてです。
いえ、実際には、記事タイトルの部分よりもむしろ、ページ最下部に表示される「前後投稿記事」の画像の方が気になっています。
これはおそらく、同じブログに複数の執筆者がいる場合にたいへん有効な機能なのではないかと推察しますが、私自身は一人でブログを書いており、すべての記事に私のプロフィールアイコンが表示されます。
すると、投稿日付順の「Newer Entry」と「Older Entry」で左右に2つ･･･　さらに同一カテゴリの「Newer Entry」と「Older Entry」さらに2つ･･･　合計4つの全く同じアイコンがどどどっと並んでいる状況になります。

くどい感じがするのはもちろんのこと、ともすれば、全く同じ画像が並ぶ構図は「No Image」の代替画像が並んでいるのと似たような印象も与えます。
この画像を表示しないようにするか、トップページと同様に、それぞれの記事のアイキャッチ画像をかわりに表示するように変えることはできませんか。
（「ブログの構成を根底から変えるような要望はしないこと」という注意に触れる内容でしたら申し訳ありません）


最後は2つまとめてになりますが、この画像（https://bit.ly/36Keqyu）で矢印を使って示すところの
① オレンジの矢印（ユーザータグ部分）の文字色・背景色を指定するのはスタイルシートのどこに記述がありますか
② 黄緑の矢印（pinterest へのシェアボタン）だけが、わずかに、1px 程度頭が上がっているように見えるのですが、気のせいでしょうか？

To Mimizkさん

お返事をいただく前で勝手に恐縮ですが、その後変更を加えるうちに誤認に気づきました。

まず「<p> 要素に指定した padding が効かない」件は、うまくゆきました。
スタイルシートで line-height を調整したところで改善されたように感じたのですが、気のせいでしょうか。

それから、「Newer Entry」や「Older Entry」の画像の件は、完全に勘違いでした。
これは本当に、プロフィール画像が「No Image」の代替画像として表示される仕様だったのですね。

これは管理人さんの仕事とは全く関係がありませんが、「見やすいな」と思いつつも今まで要約表示タイプのデザインを選ぶことができなかったのは、FC2 の仕様で、FC2 のサーバーにアップロードされた画像だけしかアイキャッチ画像として抽出・表示できない不都合があったからでした。
私の記事は、基本的に全ての画像が外部サイトにアップロードしたものを掲載しており、今のままでは「No Image」だらけです。
（全記事のアイキャッチ画像を手動で登録しなおすことを覚悟して、今回ブログデザインの変更を決心しました）
それで今、試しにアイキャッチ画像を登録したことで、本件の状況が理解できました。


ひとつ新たな疑問が出ました。
スタイルシートで上記の通り行間の調整をした後、文字と文字の間隔も指定しようとしました。

　--letter_spacing-entry: 10px;

このように書き加えたのですが、数値を様々変更してみても、文字間隔を変えられませんでした。
書き方に問題がありましたらぜひ指摘をお願いします。

To Mimizkさん

こんにちは。

まず確認ですが、テンプレートのp要素のへの指定はMimizkさんが行われているstyle属性指定によって上書きされていますので、テンプレートの内容が反映されているわけではありません。
(style要素による指定の方が優先度(強制力)が高いため)

で、気になるのはこういった内容が多く見受けられます。

<br>
<br>
<p style="margin-top: -2em;">内容</p>

これはどういうことかというと、<br>で作成した空白行を後続のp要素で引き戻している、という状態です。

br要素で空白を2行空ける → brで空けた「ほぼ」2行をp要素のネガティブマージンで無くす

こういうことですね。本来はbr要素「または」p要素の上マージンで空白をつけますので、この状態は二度手間というか、あまり意味が無いというか。「ほぼ」というのが重要なので後述します。
仮に今<br>を削除してしまうと、後続のpのマージンはネガティブ(マイナス)ですから先行の要素と重なってしまいます(文字が重なる、という意味です)
まずこの点を把握されているかどうかご確認をお願いします。
テンプレート内の指定は打ち消されていますので、空白行のサイズが「おかしい」と思われる場合にはおっしゃるとおり line-height の調整になるかと思います。

注意点は brで作成した空白行とp要素の単位emで指定したmarginは高さが違います ので、line-height調整によっては非常にまずいことになります。特にネガティブマージンを用いる時には先行要素と後続要素が重なる危険が常にありますので、できれば避けた方が良いと思います。

--------------
ここまでご自身が記事を書かれる際の注意点と見直しを行って欲しい点です。
ちょっとこれから外しますので、申し訳ないんですがまた後ほどお返事させてくださいね。よろしくお願いします。

To Mimizkさん

Mimizkさんに行って頂きたいのは

【1】line-heightの調整

/* 基本行間 */
で検索するとスタイルシート内に1箇所あります。デフォルトは 1.8 になっていますので、ここを 1.5 程度に修正してみてください。
1.8は1.8emと同義で、フォントサイズの1.8倍、という意味です。文字を含みその上下に空きをつくり、その高さがフォントサイズの1.8倍になる、ということですね。この値が大きければ大きいほど上下の文字間隔は広くなります。
1.8だとちょっと広めかな、という感じです。紙面だと1.5が多いですが、webではちょっとつまり過ぎに感じるかもしれません(個人の感覚によります)。SNSなどは1.7ぐらいでしょうか。

ここは好みの問題やどんな文章を書くかにもよりますので、数値を変更して目視確認を行ってください。
px単位を付けないよう注意 してくださいね。単位は「なし」で指定するようにしてください。

【2】ネガティブマージンの使用をやめる

作業に分岐になります。仮に今後もネガティブ指定を行うとなると、テンプレートを変更するたびに問題が生じる可能性があります。先にお伝えしたように、<br>の高さとline-heightの指定とemの単位はそれぞれ絡み合っていますので、予期せぬ事態に陥る可能性があります。
なので

・ネガティブマージンは指定しない
・空白行はp要素の上下marginで行う　「or または」 <br>で行う

「or」であり「または」であって、併用しない方が良いですね。せっかくp要素をご利用なのですから<br>は使わずに上下marginで統一されることをおすすめします。
そしてできればテンプレートの方で指定を行い、style属性の利用は極力避けておくと後々困る場面を減らせるかもしれません。

参考記事: どんな時にスタイルシートを使い、どんな時にインラインCSS(style属性)を使うのか
https://vanillaice000.blog.fc2.com/blog-entry-938.html

参考記事: pタグとbrタグについて考えてみる
https://vanillaice000.blog.fc2.com/blog-entry-518.html

-------
テンプレートでp要素の上下marginをあらかじめ決めておくことを選択される場合は
/* 注)段落間上下余白 */
で検索するとスタイルシート内に1箇所ありますので、
1.7em
赤字の数値で指定・調整してください。

テンプレートで指定しない、記事を書く都度style属性を利用する(つまり現状維持)場合はこのルールセット

.inner-contents p {
margin: 1.7em 0;/* 注)段落間上下余白 */
}

を削除してください(現時点でこの指定は活きていません)
style属性を利用する「インラインCSS」という方法は優先度が非常に高いので上書き・打ち消しが容易ではありません。修正するとなれば対象記事を全て手打ちで直すことになってしまいます。p要素のように利用頻度が高いものについてはできるだけスタイルシートでの指定をおすすめします。修正も1度で済みます。
強制ではありませんので、ご自身にとって最も都合の良い方法及びそれに関する作業を選択してくださいね。

---------
> スタイルシートで上記の通り行間の調整をした後、文字と文字の間隔も指定しようとしました。
　--letter_spacing-entry: 10px;
このように書き加えたのですが〜

この --letter_spacing-entry: 10px;

というのは「カスタムプロパティ」といって、CSSの「変数」です。あらかじめ名称と値を決めておき、例えば

.xxx {
letter-spacing: var(--letter_spacing-entry);
font-size: 1.2rem;
}

.yyy {
color: white;
letter-spacing: var(--letter_spacing-entry);

こういった使い方をします。
利用する場合は

・カスタムプロパティはスタイルシートの上部に書く(カスタム〜がまとまっている部位に追加する)
・作成したプロパティを利用するセレクタ(対象要素)に

.xxx: var(--カスタムプロパティ);

という形で書きます。これが絶対条件なので無理に使う必要はなく、特に繰り返し用いることが無い場合にもあまり有益ではありません。例えば異なる5箇所に同じ指定をしたい、という場合は有効です。ただ一箇所に指定したい、という場合はカスタム〜は利用せず、そのセレクタに素直に
letter-spacing: 値;
と書くようにしてくださいね。
また、letter-spacingを用いると各文字の「前」に空きができますので、センタリングの際に中央からずれている印象になったり、letter-spacing指定の無いテキストと上下に並んだ時に文頭が若干揃っていないように感じたりすることがありますので事前に特徴を知っておいてください(左右ネガティブマージン指定で修正することは可能ですが、繰り返しますがネガティブ値はなるべく避けたほうが良いと思います)

--------------
Pinterestについては他のSNSアイコンと並ぶと頭が大きくて不格好になりますね。目の錯覚でもあるんですが、それがPinterestアイコンの特徴と言えます。
揃え自体は合っていますので、どうしても気になるようでしたら個別で調整する形になります(style属性を用いますがこの程度は問題ないと思います)

<use xlink:href="#inline-pinterest-p">

で検索するとhtml内に出てきますので、直前にある
<svg class="svg-inline" viewBox="0 0 384 512" role="img">
に
<svg class="svg-inline" viewBox="0 0 384 512" role="img" style="margin-top: 値px;">
と、赤字のstyle属性を追加してください。スタイルシートでやろうと思うとclass あるいは id属性を追加したりなど煩雑になりますのでここはstyle属性で良いと思います。style属性はこういった場合に利用すると有効ですね。

---------
> それぞれの記事のアイキャッチ画像をかわりに表示するように変えることはできませんか。〜

Mimizkさんの仰る「アイキャッチ画像」が「FC2ブログ公式機能の『アイキャッチ画像』」を指すのであれば自動でそれが表示されるようになっています。外部直リンク画像はアイキャッチ画像として採用されませんので、No imageになります。
私も以前は直リンクでホスティングを利用していたんですが、現在のwebの流れを考えると「同サービスが提供しているサーバーとの連携」をしておいた方が得策です。そうでなくとも「ドメインが揃っているか」を厳しく審査される時代です ^^;

この部位は「OGP」を参照しています。現状FC2ブログでOGP画像を指定するには
・「本文」内最初の画像(外部直リンク不可)
・アイキャッチ画像機能を利用して指定した画像(外部直リンク不可)
このいずれかのみ有効ですから、この条件を満たせない場合にサムネイルを表示させることはできませんのでご了承くださいね。

---------
あとはHaloのスペックを最大限に活かすには SSL化 をおすすめします。

参考記事分類: https://vanillaice000.blog.fc2.com/?tag=AOSSL

To Akiraさん

ブログを書く時に、解決するためだけの知識を調べて終わらせるのですが、その際知識ある方々の書き方を拝見するだけでも「ああ本当は望ましくない・気持ちの悪い書き方をしているんだろうなぁ」と感じています。
ご迷惑をおかけします。

さて、話に出ました「<br> 2連続の後で、その空白を手動で詰める “二度手間” が行われている。認識しているか」という点についてですが、「承知のうえでやっている」という意味では半分理解していると回答できます。
なぜ半分かというと、「どんな時ひどい結果につながるか、具体的にどうなってしまう可能性があるか、よくわかっていない」という意味で、真に理解しているとは言えません。

実際には「<br>」という文字列を入力しているのではなく、単純に改行入力をしています。

　<p>あいうえお</p><br><br><p padding-top: -2em; >あいうえお</p>

･･･ではなく、私が HTML 編集しているブラウザ上での表示が


　<p>あいうえお</p>
　
　<p padding-top: -2em; >あいうえお</p>


このようになり、見やすい状態でブログ記事の入力・編集作業ができるように、という素人の浅知恵でやっていることなんです。

比較的文章量の多いブログを続けており、もし改行を挟まず <p>...</p><p>... と書き続けていくと、書いている私の方が途中で参ってしまうんです･･･。
3000文字くらいが全部ひとつながりになっていると、どこがどうやら、わからなくなってしまいます。
その記事を書き上げている・書き上げた　その瞬間ならまだがんばれそうですが、しばらく経過してから加筆修正の必要が出たりしたら完全に私の能力を超えてしまいます。

実はテーブル要素についても、本当はそんな書き方がしたいと常々思っています。
でもテーブルの要素全てに改行と手動マイナスパディングなんてもっと面倒です。
結果的に、<table>...</table> 間は全部ひとつなぎになっています。
もし私がここでも素人の浅知恵を絞り、さらに輪をかけてとんでもない書き方を編み出していたら、管理人さんに完全に怒られていたと思います。

この書き方はやはりやめておいた方がよいでしょうか。
というか、私もやめられるものなら遠慮したいのですが･･･。

To Mimizkさん

確認なんですけども、

> 単純に改行入力をしています〜

「改行入力」というのは「手打ちで<br>と書いている」のではなく「Enter/ Returnキーを押下している」という解釈で合ってますでしょうか。そしてご利用中の投稿画面は「旧投稿画面」であり設定が「改行の扱い『自動』」でしょうか。
恐らくそうだと思いますが念の為確認です。

旧投稿画面の「改行自動」設定というのは、本来のテキストエディター(FC2での名称は「投稿画面」)というのは<br>と書かなければ改行されないんですが、直感的に扱えるよう「Enter/Returnキー押下を<br>とみなす」という設定です。
ですからMimizkさんがおっしゃるように「視認性のためにキーを連打している」のだとしても内部的には<br>が連続してしまうんですね。そしてもちろん見た目にも反映されます。

これはFC2ブログの良い点でもあり悪い点でもあるなぁ、と思っているんですが、
キー連打 = <br>連打
とはっきり意識されている方は非常に少ないんですね。なのでMimizkさんだけではありません。どうかその点はご心配なさらず。

で、結局どうするか、という話なんですが、2つの方法があります。

・旧投稿画面「改行の扱い『HTMLタグのみ』」
・新投稿画面「HTMLモード」

このいずれかです。前者の場合は旧投稿画面ですが
<br>
と明記しない限り改行は行われません。ですから作業上の「空白を入れておかないとなにがなんだか」を解消できます。例えば

~~~~
あいうえお




かきくけこ
~~~~

と打ったとしても、ブラウザの描画は

~~~~あいうえおかきくけこ~~~~

になります。

~~~~<br>
あいうえお<br>
かきくけこ<br>
~~~~

と打った場合は

~~~~
あいうえお
かきくけこ
~~~~

となります。

改行したい文末に逐次 <br> と記す手間は生じますがこれが一番確実な方法です。
<br>は頻出になると思いますので(実際はp要素を正しく使い始めると<br>の使用回数は限りなくゼロに近くなります)、辞書登録をして1キー押下で出力させられるようにしておくと良いですね。

参考記事: 旧投稿画面を楽に操るために「辞書登録の活用
https://vanillaice000.blog.fc2.com/blog-entry-937.html

もう一つは「新投稿画面『HTMLモード』」を利用する方法です。こちらは上級者向けかなぁ、と感じます。リアルタイムプレビューが使えませんし、使用できるツールに大きな制限が入ります。
なので「旧投稿画面『改行の扱い HTMLタグのみ』」とおすすめします。

参考として今table要素のサンプルを書きました。恐らくこういうことだろうと思います。
(作業上の空白が実際の描画に影響しない様子, サンプルは新投稿画面HTMLモードですが旧投稿画面改行HTMLタグのみでも同様の結果が得られます)

table要素
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/tablesamp----1000.png
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/tableresult----1000.png

p要素
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/parasamp----1000.png
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/pararesult----1000.png


で、やめた方が良いかどうか、なんですが、辞めたほうが良いですね(笑)
これは別に「HTMLを正しく書けッ！」とかそういうことではなくて、あとあと困ったことになる可能性が高いよ、その時に放り出したくなるかもしれないよ、直せるなら記事数の少ないうちに直した方があなたにとってきっと良い結果につながるよ、という意味ですすめています。とはいえ選択の権利と自由はMimizkさんにあるわけですから、私が強制するようなことはないですよ :)

なんか割とよく誤解されるんですが、私自身はみなさんに「HTMLを使う以上はしっかりやれ」だとか「そんなカスタマイズをほどこすとは言語道断」なんてことを思ったりはしません。ブログは気軽に手軽に簡単に楽しく書ければそれが一番だと思っています。
学びたい方へは知りうる限りの情報を、と思いますが、ブログ書くのにhtmlやCSSなんて知らなくたって全然構わないんですよ (o'ω')ﾉ

ただ、問題になるかもしれないなぁ、困るかもしれないなぁ、という場合には指摘させて頂く、という感じです。

To Akiraさん

改行･･･　「HTML タグのみ」･･･

･･･。

できるじゃないですか！
見やすいまま、<br> なしに、編集時の視覚上は改行が使えるじゃないですか！

はぁ～


記録上、どうやら私は FC2 ブログを使い始めて12年経つようなんですが、今初めてこの存在を認識しましたよ。
これならテーブルだって楽勝じゃないですか！

はぁ～


本当に質問してよかったです。
失礼ですが管理人さんは投げ銭システムみたいなものに登録されておられないのですか？
感謝の気持ちが消化できればこちらも幸せなのですが。

当たり前ですが、改行がこういった状況になれば、<br><br><p style="padding-top: -...> なんてする必要ありません。
即刻やめますよ！


今のところで不思議に思っていることがもう1つあります。
それは、トップページに表示される記事の数についてです。

FC2 ブログの設定で、トップページに表示する最新記事の数を「5」に設定していますが、すると、実際には6本の記事がトップページに表示されます。
「8」なら「9」。
「3」なら「4」。
設定した数より必ず1つ多い記事が表示されるようです。

これは、最新の1つはその数に入っていないということなのでしょうか。
もしかすると、最新の1つだけ設定を変えて、以降の記事の2つ分の横幅で表示するレイアウトも選べたりするでしょうか。
私は、長く使い続けるのにはシンプルなデザインであることが必要不可欠と考えるので、Halo が断突の優勝でしたが、そこのレイアウトについては他が羨ましいと思っているところです。

To Mimizkさん

ネガティブマージンが危険になり得るのはなぜか、というのをスクリーンショットで示しましたので、たぶんご理解頂けると思います。ちょっと極端な例ですが、こういう特徴があるよ、ということでごらんください。
基本html内容は

<p>あいうえお</p>
<br>
<br>
<br>
<p style="margin-top: -3em;">ネガティブマージン -3em</p>

です。1つ目のp要素の上下にマージン指定はありません。つまりゼロ値で余白はできないようになっています。

【2つ目p要素にネガティブマージンが無い場合】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam2----1000.png

今ある余白は3つの<br>によるものです。

【2つ目p要素にネガティブマージン -3em】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam1----1000.png

余白が小さくなったのがわかります。

【1つ目p要素のフォントサイズを1emから2emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam3----1000.png

文字は大きくなりましたが特に問題はありません。

【1つ目p要素のフォントサイズを1emから3emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam4----1000.png

さらに文字が大きくなりましたが問題はありません。

【2つ目p要素のフォントサイズを1emから2emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam5----1000.png

今後は2つ目の方のフォントサイズを大きくしました。余白が随分と削られたのがわかります。

【2つ目p要素のフォントサイズを1emから3emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam6----1000.png

1つめのp要素と重なってしまいました。

【2つ目p要素のフォントサイズを1emから8emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam7----1000.png

1つ目のp要素はおろか、記事からもはみ出てしまいました。

-----------

これがネガティブマージンの特徴なんですね。font-sizeやline-heightの指定の如何、先行要素がどうなっているのかの如何によってはこういうことが起こってしまう。あくまでも極端な例ですよ。これが仕組みの理解に一番明解かな、と思います。

To Mimizkさん

お返事が行き違いになりました。

えっと、記事数が指定を守っていない、ということですよね。だとしたらFC2のシステムエラーだと思います。確か今年に入って2度目ではないかと(笑)
私の方ではそういった症状は確認できないんですが、サーバーによるんでしょうかね。
ちょっと現時点で不明です。ごめんなさい。

--------
> 最新の1つだけ設定を変えて、以降の記事の2つ分の横幅で表示する〜

できますがHaloでは厳しいかな、と思います。縦長を意識したデザインなので1つ目の記事だけCSSを大きく変更する必要が生じます。もちろん今のサイズのまま縦長というわけにいきませんので横にしないといけませんし、あまりおすすめはできないです (´・ω・｀)
ご希望でしたら初めからそういったデザインもありますよ。

--------
投げ銭とかは無いです。どうぞ無償でご利用ください(笑)
お気持ちだけ受け取りますね。ありがとうございます。

FC2ブログは隠しているわけではないのに「隠し機能」みたいになってしまっているものがたくさんあるんです。ブログ歴が長い方でもご存知なかったりで、そういったものが解消されると良いな、ブログ初心者さん・新規開設者さんでも最低限の設定がすぐにできるようになれば良いな、と思います ^^;

To Akiraさん

色やフォントの設定がほとんど終わり、いよいよ記事の書き直しが始められる状況になりました。

私が Halo の前に使っていたブログデザインでは、以下のような記述がスタイルシートに見られ、私はそれを変更していました。

　h1 {
　font-size: 15pt;
　font-weight: bold;
　margin-top: 4em;
　margin-bottom: 0em;
　padding: 0;
　}

スタイルシートでこのような指定をすれば、個々のブロック要素にいちいちパディングの指定をする必要がなくなる・手間が省ける、という考え方で記述されていたものだと考えられます。

しかし、ここまで教えていただいた「なるべくマイナスパディングは使わない方がよい」という方針を重んじれば、<p> <div> <h1> といったブロック要素に逐一 style:padding を書き加えて指定するのがベターと考えられます。

実際に管理人さんは普段どちらの・どのような方法で書いておられるのでしょうか？

To Mimizkさん

こんにちは ('0')/

どこまで説明するべきか悩むところですが、なるべく詳細に説明したいと思います。長くなります ^^;

まず、 padding にマイナスの値を指定することはできませんので margin の書き間違いだろうと思います。
確認しておきたいのは「marginとpaddingは違う」という点です。ここを混同してしまうと後々害が出ますので念の為説明します。

padding --- 対象要素自身の「内側」の余白
margin --- 対象要素自身の「外側」の余白

paddingは自身にしか影響しないんですが、marginというのは 必ず相手が存在します。
相手というのは「上にある要素」「下にある要素」「左にある要素」「右にある要素」ですね。
昨晩掲載したスクリーンショットは別の言い方をすると「ネガティブmarginが他の要素に影響を及ぼしている例」でもあります。

サンプル①
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010----1000.png

比較しやすいよう横に並べて表示しています。後続要素の方に注目してください。
このサンプルではどちらも全く同じに見えます。
左は「padding」が付いており、右は「margin」が付いています。
両者は全く同じに見えますが、実際は全然違うのだ、というのが次のサンプルで、対象要素に border をつけることで一目瞭然になります。

サンプル②
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010-2----1000.png

paddingは「自身の内側」に
marginは「自身の外側」つまり自身と先行要素(margin-top)の間に
それぞれ余白が生じるわけです。
この違いを理解しておかないと、今後例えばこの対象要素に background-color などの装飾を当てたいと思った場合、paddingの方はひどく不格好になりますよね。
ならば margin を使おう、と考えたくなるところですが、marginには以下のような特徴もあります。

サンプル③
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010-3----1000.png

左右の高さが揃わなくなりました。
左は
先行要素の下margin 30px + 対象要素の上padding 30px = 先行要素と対象要素の間隔は 60px
になります。
一方右は
先行要素の下margin 30px + 対象要素の上margin 30px = 先行要素と対象要素の間隔は 60px
には なりません。
上下のmarginというのは相殺(offset)というのが起こり、大きい方が小さい方を吸収しますので、この場合は同じ30pxですからプラスマイナスゼロで 30px という計算になります。

------------
marginを使う場合は自身だけでなく周り(左右上下)にある要素のpaddingやmarginを考慮する必要がありますので、paddingよりも使い方は難しいかもしれません。CSSで一番むずかしいのはmarginだ、と個人的に思っています。ネガティブ値を利用する場合はなおさら難易度は高くなります。

一旦投稿しますね。

To Mimizkさん②

なぜMimizkさんがネガティブマージンを利用しなければいけない状況にあるかというと
元々のスタイリングが自分の好みではないから です。
そして
頻出要素に対して決められたスタイルが確立されていない ためでもあります。

例えば頻出の「見出し」ですが、たいていの場合は例えば「見出しの上下は2emのmargin」と予め決めておくものなんですが、ある時は「見出しを使って下marginをここでは3em」「また見出しを使ってここでは上marginを-2em」
なんてことをやってしまうと、読み手も混乱しますし、それ以前にMimizkさんご自身が混乱されるのではないかと思います。

昨晩説明した通り、style属性による指定というのは「ここぞの決め打ち」というんでしょうかね。予め決めたスタイルを一時的・単発的に変更したい時などに用いるのであって、常に使う性質ものではないんですね。
常にstyle属性が必要、ということは言い換えれば「デフォルトのスタイリングが常に気に入らない」という意味でもありますから、ならばそのデフォルトを好みに変更しておけば良い、ということになります。

そして頻出html要素に関しては「これだ」というスタイリングを決断されると良いですね。その方が見る側も直感で処理できます。文書のスタイルというのは一定の形式に則っているのが望ましいと思います。

Haloでは

・記事内で利用したp要素(段落)の上下margin
・記事内で利用したh要素(見出し)の上下margin(h2〜h4まで)

はデフォルトスタイリングを行っていますので、まずはsytle属性を利用せずに書いてみて(投稿する必要はありません。プレビューで目視確認を行ってください)、フォントサイズが希望に沿っているか、上下の要素との間隔が希望に沿っているか、等を確認してください。希望に沿っていない、と判断できる場合は
/* back to default */
で検索するとp要素とh要素に関する予めの指定が記されていますので、調整を行ってください(!ネガティブ値は使わないよう注意)
元のスタイルを好みに整えておけば、その都度style属性で変更する、といった手間は生じないはずです。それにはまず「規則性」をご自身で確立されることも大切です。

-----------
> スタイルシートでこのような指定をすれば、個々のブロック要素にいちいちパディングの指定をする必要がなくなる・手間が省ける、という考え方で記述されていたものだと考えられます〜

これはですね、元のテンプレートも作者さんも存じませんので一般的な回答としてお読み頂きたいと思います。
Haloテンプレートはhtml5です。htmlのバージョンが「5」ということですね。
そして以前ご利用になっていたテンプレートが、もしかするとhtml4、htmlのバージョンが「4.0」だった可能性があります。

html5以前は「h1はページ内に1つだけ」という決まりがありましたので、そのルールを遵守すれば同一ページの他の部位にh1が存在することはありえない、という理屈になります(実際は記事を書くのは各ユーザーなのでルールが守られるかどうかは別)
なのでh1に対して直接スタイルを当てていたのだろうと思います。そして対象は恐らく「ブログタイトル」だと思います。

私の場合は要素名に直接スタイルを指定することはまずありません。不可抗力、っていうんでしょうかね。ルールがあるとしても守られるとは限りませんので

<h1>ブログタイトル</h1>

h1 {
margin: 3em 0;
}

とするのではなく

<h1 id="heading">ブログタイトル</h1>

#heading {
margin: 3em 0;
}

と、classやidセレクタを設け、そこにスタイルを当てるようにしています。そうすれば仮に他の部位にh1が登場したとしても勝手に同じスタイルが適用されることはありません。

で、h1の例を出されていますのでちょっと心配というか、ただサンプルに出しただけ、というならば流し読みで構わないんですが、記事内で利用できる見出しの位というのは決まりがあってですね、厳格なものではないけれども守ったほうが良い、という点ですね。
私のテンプレートでは記事内で利用できる見出しの最上位は h2 です。
他製作者さんの場合はほとんどが h3 からのはずです。なぜかというと、FC2エディターのツールで使える位が h3 からですし、公式テンプレートも全て h3 からになっています。

webに限らず使い勝手や見た目というのは「マジョリティに合わせる」、というのが正解である場合が多いんですが、私のテンプレートでは敢えて h2 から ^^;
記事のタイトルをh1にしたい、というご要望が増えたための決断です。web全体では今割とそういう流れになっています。
昔だと
・ブログタイトル --- h1
・記事タイトル --- h2
・記事内 --- h3から

今だと
・ブログタイトル --- 見出しなし(div)
・記事タイトル --- h1
・記事内 --- h2から

という感じですかね。なので仮にMimizkさんがh1の例を出したのが「記事を書くときに使うから」というのであれば、h2にした方が良いと思います。見出しの位は「SEOにめちゃくちゃ影響がある」とは言いませんが「SEOに全く影響は無い」とも言いません(笑)

ただしhtml5ではh1の複数利用は許可されていますので、使いたいという場合は以下のような書き方をされると良いと思います。

<section>
<h1>見出し</h1>
<p>内容</>
</section>

section要素としてマークアップして、その中にh1、という形ですね。セクショニング(構造の区分け)が正しければ複数回利用してもOKです。
ただしgoogleは「h1何度も使うのやめろ」という方針のようですね。

話が前後しますけれども、私のテンプレートでも「記事内で利用する」見出し、については要素に直接スタイルを当てています。記事を書く際に頻出のhtmlタグにclass名・id名を書け、というのは無理筋なので、「記事内にある」という条件をつけた上で要素直接のスタイリング(タイプセレクタ と言います)を行っています。

一旦投稿します。

To Mimizkさん③

> 実際に管理人さんは普段どちらの・どのような方法で書いておられるのでしょうか？〜

まず、marginのネガティブ値はまず利用しません。どうしても必要にかられた場合、これまでに1・2度はあるかもしれませんが、通常そういうことはしない (´・ω・｀)
例えば

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

p要素の上下marginがスタイルシートで3emとなっていた場合で、どうしてもこの上下テキストの余白を小さくしたい、仮に1emにしたいのであれば

×
<p>あいうえお</p>
<p style="margin-top: -2em;">かきくけこ</p>

ではなく

✔
<p style="margin-bottom: 1em;">あいうえお</p>
<p style="margin-top: 1em;">かきくけこ</p>

あるいは先行要素のmargin-bottomを0、逆に後続要素のmargin-topを0、としても構いません。描画の結果は同じです。
こうして双方で調整します。後続要素だけで処理しようと思うとネガティブ値の利用、となってしまいますので、それは避けます。面倒だけれども双方に調整を入れます。

あとはデフォルトスタイルに逆らいたい場面が割とよく巡ってくる + その逆らう場面のスタイルはほぼ決まっている
ということもあると思います。例えば先のサンプルを利用して基本はデフォルトの margin: 3em で行けるけど、3割り程度の確率で margin: 1em にしたい時がある、など。
その場合はクラス属性を利用し、そのスタイルをスタイルシートに追加します。

<p class="m_small">あいうえお</p>
<p class="m_small">かきくけこ</p>

スタイルシート側に記載
.m_small {
margin: 1em;
}

私のテンプレートの場合は「記事内の」という縛り・条件づけがありますので優先度が高くなっていますので、Haloならば

.inner-contents .m_small {
margin: 1em;
}

という書き方になります(.inner-contents の部位が「記事内の」を示しています)
こういうやり方もありますよ、という参考まで。
ただしclassやidでの制御はテンプレート変更時にスタイルの移植をしないと失われてしまいますので、その点だけ注意が必要です。
詳細は昨日記した参考記事(style属性かclass, id属性かの選択について)をごらんくださいね。

To Akiraさん

【 Heading（見出し）について】

結論から言うと、h1 を相当数使って文章を書いています。
管理人さんが h2 ＞ h3 ＞ h4 の順で使っているところを、私は h1 ＞ h2 ＞ h3 にして執筆してきました。
私も以前気になって調べたことがあるのですが、HTML5 になって h1 の使用解禁！ 好きに使えばヨシ！ みたいな解説が多かったと記憶しています。
アフィリエイトとか一切考慮しないので、大して不都合も違いもないなら、自分がわかりやすければよいという考えです。
とはいえ私自身、先日からこの halo の説明を見て「h2 からだよ」と書かれていたのが気になっていました。
無理に h1 を使う必要はないので、これからは文中最上位の見出しを h2 に変えようと思います。



【見出し要素にはスタイルを指定しない】

だんだんブログデザインそのものから話が逸れてきて、ここまでくるとかなり明確に「書き方」になってしまって申し訳ないので、そろそろ切り上げなければいけませんね。

ひとまずスタイルシートに

　.heading_2 {
　 font-size: 3rem;
　 margin-top: 0em;
　 margin-bottom: 0em;
　}

　.heading_3 {
　 font-size: 2.8rem;
　 margin-top: 0em;
　 margin-bottom: 0em;
　}
　
　.heading_4 {
　 font-size: 2.5rem;
　 margin-top: 0em;
　 margin-bottom: 0em;
　}

･･･とか書き加えてみました。
場所は /***= article =***/ の下にしましたが、おかしくないでしょうか。

私はこういった #id とか .class を指定する方法を初めて行いました。
たしかに、スイッチの集約化というか、配電盤みたいなかたちで全ての記事を調整できるようにしておくのが一番 “強い” のは間違いないことですね。
このうえ

　<div class="XXX" style="margin: △em; ...">

みたいな重ねが書きは･･･　しなそうですね笑
なるべく指定だけで乗り切れるように、工夫してみます。
でも、空白の接する先が文章なのか・画像なのか？
あるいは同じく文章だとしても、同じ章立ての前段なのか・異なる章立てとの境なのか？
例えば <h4> から <h2> に戻るところの空白なのか　･･･によって、ちょっとずつ空白を変えたくなってしまう、そういう主観的な感覚があるんですよね。



【繰り出し式のカテゴリツリーについて】

Halo 備え付けのものでなく、サイドメニューに加えるカテゴリツリーを入れたのですが、子カテゴリを呼び出すクリックをすると、画面が最上部まで戻る挙動になっています。
静止した状態でクリックできるようにできるでしょうか？

To Mimizkさん

こんばんは ('0')/

> とか書き加えてみました。〜

残念ながらこれだと効力が無いですね。
CSSのセレクタ指定は優先度があって、書き方によって打ち消し(上書き)ができる場合とできない場合とがあります。

作業前に確認すべきは テンプレートデフォルトスタイルは残すのかどうか です。まずこれを決めてください。
例えば h2〜h4 の指定はデフォルトでは

.inner-contents h2 {
margin: 3em auto 2em;
line-height: 1.5;
font-size: 1.2em;
}
.inner-contents h3 {
margin: 3em auto 2em;
line-height: 1.5;
font-size: 1.1em;
}
.inner-contents h4 {
margin: 3em auto 2em;
line-height: 1.5;
font-size: 1em;
}

こうなってます。上に3emのmargin、下に2emのmargin、という指定ですね。まずこれが必要なのかどうかです。
不要な場合には消してください。

問題はデフォルトはそのまま残してスタイルを追加する場合です。以下のルールがありますので守らないと意図した内容が反映されませんので注意してください。

・CSSの基本は「上書き」
.xxx {color: red}
.xxx {color: blue}
と、同じ対象に対し異なる指定が行われている場合に適用されるのは 記述順が後の方(この場合は blue) です

・セレクタには優先度があります

<div class="inner-contents">
<p class="yyy">あいうえお</p>
</div>

.inner-contents はHaloテンプレートの記事部分を囲う要素に与えられているクラス名です。これはユーザーが書く内容ではありませんので、記事を書く際には自動的にこのinner-contensの「中」にMimizkさんが任意の文章やhtmlを書くことになります。
で、実際に記事内にclass名「yyy」を持つp要素を書いた場合ですね。

例えばスタイルシートがこうなっているとします ↓

.inner-contents p {margin: 0}
p{margin: 1em}
.yyy {margin: 2em}
これらは全て同じ対象を指しています。この場合に適用されるのは margin: 0 です。
CSSの基本は上書きなんですが、優先度が異なる場合には書き順に関係なく優先度が高い方が適用されます。

.xxx p --- (クラスセレクタ + タイプセレクタ)優先度 高
.yyy --- (クラスセレクタ)優先度 中
p --- (タイプセレクタ)優先度 弱

他にもidセレクタ, 疑似要素, ユニバーサルセレクタ など色々あって、それぞれ優先度が違います。
今これら全てを解説してもアレなんで割愛して、テンプレートカスタマイズでつまずく場合のほとんどは例に出した3種です。

で、結論として

1. 追加内容はデフォルト内容よりも「後」に書く
2. クラスセレクタの前に .inner-contents を追加する

この2つが必須です。今回の場合は実際は1は守らなくて良いんですが、「CSSは上書き」の基本ルールを覚えて頂きたいので、今後なにかしらカスタマイズされる際にも「スタイルシートの末尾に書く」を基本にされると良いと思います。

追加する内容は
.inner-contents .heading_2 {
内容
}

と、赤字部位を追加してください。3種全てに追加です。
.inner-contents と .heading_x の間には必ず半角スペースが必要です(!全角スペースは絶対的NGです)

------------
> 子カテゴリを呼び出すクリックをすると、画面が最上部まで戻る挙動になっています。
静止した状態でクリックできるようにできるでしょうか？〜

これはプラグインのhtmlバージョンの問題なので、テンプレートでどうこう、という性質ものではありません。
ご面倒ですが以下のコメント欄をご参照ください。同じ要件への説明が記されています。

https://vanillaice000.blog.fc2.com/blog-entry-724.html#comment10036

よろしくお願いします。

管理人のみ閲覧できます

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

フォントの件 内緒さん

こんにちは。
感想楽しみにしていますね :)

以前交わした会話が役に立ちました(笑) ご協力感謝します。
見出しの件なんですが、すごく難しいですよねぇ (´・ω・｀)
方針次第で場合によっては全部書き換えなければいけなくなる、それが見出し順位 （￣∀￣；）
記事タイトルをh1にするにあたり、ものすごく悩んだんですけどね。「スタンダードに合わせる」の観点から言うとこれはもう外れてしまうわけなので。

例えばlazyload系のプラグインを使っていて、あるものは .lazy またあるものは .lazyloading またあるものは .lazyload とバラけていると、結局切り替えしたいユーザーの手間が増えてしまう。なのでそこらに気を使う作者さんだと先行リリースされている一番メジャーなものとクラス名をあわせる選択をする、という気遣いをされていますね。大抵は .lazyload でしょうか。衝突するか融和するか、という点もすごく難しいけれど。

、スマホでよく見る「ハンバーガーアイコン」なんかもそうですね。あの形がメジャーなので多くの人が直感で理解できる、と。
そういう意味で見出しの位変更は相当悩みました ^^;
TOCなんかを使い出すと順位をはっきり決めないといけませんしね。見出しって結構厄介なんですよー (´・ω・｀)

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To 見出し装飾の件 内緒さん

こんばんは。

そうですね。id/ class属性は対象の特定に使います。idはルールが厳しいので主にclassを使うことになるんですが、

・他の名称とバッティングしないように気をつける
・最初の文字はアルファベットのみ(数字や記号はダメ)
・スペースの利用はダメ(スペースはクラス名の区切りなので名称内では使えない)

などなどのルールに則って独自名称をつけてください。ご自身がわかりやすい名称でOKです。
対象特定を行うだけなので、例えば

.xxx {
color: red;
}

とあるとして、例えば

<div class="xxx">あいうえお</div>

<ul class="xxx">
<li>リスト</li>
<li>リスト</li>
</ul>

<h2 class="xxx">見出し</h2>

<h4 class="xxx">見出し</h4>

<span class="xxx">あいうえお</span>

こういうことですね。どの要素のテキストも「赤」になります。同ページ内、同記事内に上記全て入っていても大丈夫です。特にhtmlの定義に影響が出るものではなく「装飾の対象にする」というだけです。
こういうのはダメですけどね。

div.xxx {
color: red;
}

<div class="xxx">あいうえお</div> --- 赤くなる
<span class="xxx">あいうえお</span> --- 赤くならない(divではないから)

-----------
そうなんですー。数ヶ月前の一時期は「店売りたい病辞めたい病」でした(笑)
収益とかもそうだけど、役所へ提出する書類とかそういうのがもう私ホント嫌でしかたがない (´・ω・｀)
どうせ税金の申告時期に毎回発症しますけれども(笑)

スコッチテープが背景と近似色でちょっと見づらいようなので
box-shadow: 0 6px 16px -6px rgba(0,0,0,.2);
あたり追加すると良いかもしれません。

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To 見出し装飾の件 内緒さん

こんにちは。

お役に立てれば幸いです :)
CSSの記述の順序については「ルールセット」の中は特に決まりはありません。

.セレクタ1 {
プロパティ: 値
}

.セレクタ2 {
プロパティ: 値;
プロパティ: 値
}

セレクタ1のまとまり、セレクタ2のまとまりがそれぞれ「ルールセット」です。
ルールセットの記述順序は優先度があるけれども、
{
と
}
に囲まれている内容には無い、という意味です。ただし重複が合った場合

.xxx {
color: red;
font-size: 12px;
color: red;
}

既に書いてある colorプロパティがルールセット内に登場している場合などは後ろの方が適用されます。これ割と私もやってしまうんですが、ルールセット内での重複は単なるミスです ^^;

あと、セレクタ1とセレクタ2の内容をよく見ると、セレクタ1の方は値の末尾に ; が付いていませんよね。
ルールセット内の最終プロパティ(単一の場合含む)はセミコロンを省略して良い、というルールがあります。末尾以外の省略はダメです。
最終セミコロンを省略するとわずかでもファイルサイズの削減になりますが、ミスを誘発しやすいので避けた方が良いと思います。例えば今回内緒さんが悩まれた「どこに追加すれば？」の場合もそうですよね。
末尾セミコロンが省略されていたら追加位置によっては「エラー」になっている場面です。

ルールセット内の書き順については
・アルファベット順に書く
・合理的に書く
・好きなように(自分の決めたルールで)書く
のいずれかだと思います。私の場合は「合理的」というか、ブラウザが先に知りたいであろう内容を先に書く、という感じです。
例えば

opacity
float
display
position

などは先に書くようにしていまが、仮に入れ替わっても問題ありません。
今後何か追加する場合は

・ルールセットの追加はスタイルシート末尾に(重複している場合の上書きを考慮)
・ルールセット内への追加はセミコロンの有無に注意

こういう感じで良いと思います :)

--------------
私「元号」もダメなんです。最近は役所の書類で「西暦でも良い」というのが増えて助かる ^^;
でもその前に書類仕事そのものが無理(笑)

お返事はお気になさらず :)

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To siliconの件 内緒さん

こんにちは。

息子に聞いてみます(笑)
連絡取れ次第、情報取れ次第改めてお返事しますね。

私の素人考えだと、

・intelへの使用料が無くなるので価格が下がる可能性?
・iPhoneとの連携がスムースに?

今こういう方向性が主流になってきているのかなぁ、と思います。
・ブラウザとOSを区別する必要があるのか --- Google chrome book
・スマホとPCのOSを別にする必要があるのか --- Google, Appleは今ココ

リリース直後の購入、となると予測がつかないけれども、ともかく息子に連絡だッ (o'ω')ﾉ

管理人のみ閲覧できます

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

To siliconの件 内緒さん②

連絡取れましたー。

・ソフト互換性重視なら第一世代はスルー
・価格は100〜200ドル程度安くなりそう

だそうです。ただし価格の方は会議などでも全く情報が提供されていない、ということで単に「予想」というだけだそうです。
(いずれにしろ守秘なんとかがあるからアレですが)
ソフトの方はゆくゆく必ず追いついては来ますが、「今すぐ今まで通り」というわけにはいかないので、常時使うソフトが確定しているならば、初回は購入を避けたほうが良い、とのことでした。

つか、全然フツーの情報しかないじゃん (´・ω・｀)

ここからはなんとなくです。なんとなく私が感じたこと。
開発チームはものすごく自信を持っていて、一方息子(開発チームではない)は「intelで良いんじゃないの。信頼度高いし」と思っている、という感じ(笑)
うちの子の場合は動画編集の副業があるので、やっぱソフト使えないと困るとかそういうのもあると思います。
いずれにしろもうすぐkalamata mac(自社プロセッサmac)が発売されるようなので、レビューをチェックしてからの判断で良いと思います :)

管理人のみ閲覧できます

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

お久しぶりです

こんばんは、お久しぶりです。
助言を頂いた後で準備を進めて、ようやく記事の投稿が再開できるようになりました。
これでまた活動できます、ありがとうございました。

さて、今回お伺いしたいのは、プロフィール欄の画像についてです。
なんだか画質が極端に落とされて表示されているように感じるのですが、改善する方法はありますか？
アップロードする画像を、2000px とか大きなサイズにしたり、逆に小さくしたり、色々試してはみたのですが、結局うまくいきませんでした。
スマートフォンで見ると顕著にガサついているのがわかり、気になります。
なにか対処する方法はあるでしょうか。

To Mimizkさん

こんばんは。コメント数が多くMimizkさんを見落としてしまいました。申し訳ございません (*_ _)

> プロフィール欄の画像について〜画質が極端に落とされて表示されているように感じる〜

原因はMimizkさんの環境がわからないので断定はできませんが、画質の低下を感じる多くの原因は 閲覧デバイスが高解像度ディスプレイ(高dpi)であるため です。

> 2000px とか大きなサイズにしたり〜スマートフォンで見ると〜

とありますので、その点はご理解頂いているかと思いますが念の為。
参考記事: スマートフォンで画像がぼやける対策【2倍じゃもう足りない！】
https://vanillaice000.blog.fc2.com/blog-entry-627.html

記事タイトルには「スマートフォンで」とありますが、パソコンでも4K, 5Kといった高解像度の場合は同じです。
で、対象の画像がどれなのか不明ですけれども、現在設定中のネコのものであれば、元より焦点が少しずれているのかなぁ、という印象はあります。なので検証の際はオブジェクトがはっきりと写っているものをご利用になられると良いと思います。

個人的なプロフィール画像推奨サイズは 横 600px 縦 600px の正方形です。
プロフィール画像がブログに表示される際の平均は横300px程度ですので、その倍の600pxですね。そして正方形が最も都合の良い形です。
長方形の画像をHaloのような正円の中や、正方形に当てはめる際、寸足らずが発生しないよういずれか短い方を100%とし、長い方は100%以上にして見切れさせる、というのが主な手法になりますので、つまりは長方形の場合は「拡大が行われる」、という意味です。それ故の正方形推奨です。

Android機種の場合はiPhoneよりもさらに高解像度で、カメラ性能を謳っているデバイスはこの問題が顕著になります。
なので2倍(iPhone、と言ってもいくつか前の世代)を目安にするならばHaloの表示は200px四方弱ですから、画像サイズは400px四方、3倍(Android)目安ならば600px四方をそれぞれおすすめします。
iPhoneでも新機種ではこれまでの「ぼやけ」に加え、ガサつき(目の粗さ)が目立つようになっているなぁ、と感じています。

あまり度が過ぎても今度は負荷の問題が出てきますので、妥協も考えるとやはり600px四方程度が妥当だと思います。
根本的な解消(容量(kb)とサイズ(px))についてはFC2ブログの新拡張子(webP)対応を待つ、ということになるかと思います。
よろしくお願いします。

To Akiraさん

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

思わぬところから解決したといいますか
プロフィール画像の更新フォームで「画像トリムサイズ」というところがありますが、ここに何の注意も払っていませんでした。
確か 220*170 くらいの数字が入っていたようなんですが、これが文字通りのサイズに縮小してアップロードする指定になっていたようで、私がいくら 2000px の画像を投入しようが、Akira さんの助言を受けて 600*600 に加工した画像を投稿しようが、全く無意味な状態になっていました。
600*600 の画像を、当該部分にも「600*600」と入力して更新したところ、完全に解決しました！ｗ
毎度お騒がせして申し訳ありません･･･。

でも、やっぱり見え方は間違った認識じゃなかったわけです。
猫の目にハイライトが戻って本当に満足です、ありがとうございました。

To Mimizkさん

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

そうだったんですね。原因がわかって安心しました。
念の為FC2現行プロフィールアップロードの語弊について説明しますね。
「トリム」というのは「切り出し」の意味が本来ですが、「画像トリムサイズ」とあっても実際はトリムはしておらず、「縮小 シュリンク」しています。つまりオリジナル画像のアスペクト比は変わりません。
これは誤解を生む表現なので運営側には変更を求めています ^^;

なので例えば仮にオリジナルが「横 1000px 縦 600px」のものを「横 600px 縦 600px」と指定してアップロードしたとしても、変換後のサイズは「横 600px 縦 360px」と長方形のままなので注意が必要です。

現在のMimizkさんのプロフィール画像は正方形になっていますのでベストな形状です。
お疲れ様でした :)

記事の引用

もし直接 halo と関係なかったら申し訳ありません。
例えばこのページにもいくつも使用されている、“記事の引用” ウィンドウというのは、halo で私のような利用者が同じように使って表示させることはできるのでしょうか？
いくつも引用箇所がありますが、例として上から2つほど挙げると、「IE 非対応」の項にある『【IE撲滅運動】IE利用者への啓蒙オーバレイ表示』とか、「ダークモード対応について」の項にある『El-zigzag - FC2ブログテンプレート』とかのことです。
このような表示をさせる記述というのが halo にも備えられているならぜひ利用したいと思うのですが･･･。

To Mimizkさん

こんばんは ('0')/

こういうのを一般的に「ブログカード」と言います。
テンプレートにどうこう、というよりも相手方(リンク先)の情報を取得するためにブラウザにブックマークレットを登録する、などの処置が必要です。テンプレートの方は取得した情報に対するスタイリングをスタイルシートに追加します。

導入手順などは以下のページをご参照ください。
参考記事: ブログカードのブックマークレットを作成しました
https://vanillaice000.blog.fc2.com/blog-entry-583.html

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

To Akiraさん

うわっ　うわっ
使ってみましたこれ最高に捗るやつです！

一応最初に「記事　引用」とかで全体検索をして目を通したのですが、「こういうのを『ブログカード』と云う。」というのがわからないので完全にスルーしてしまいました･･･。

テンプレート使用のお礼

Akira様
いつも素晴らしいテンプレートの数々と、とても分かりやすい多岐にわたるご説明をありがとうございます。
質問ではないのですが、どうしても一言お伝えしたくコメントしております。
14年ほど書いているブログですが、2年前に引っ越しを検討した際にAkira様の作られるテンプレートを拝見し、どうしてもこの方のテンプレートが使いたい！と思い、FC2に引っ越しをいたしました。
最初はHymnを使わせていただき、今はHaloを使用しております（ので、こちらに書かせていただきました）

昔はガラケーとPCが多かったですが、昨今のスマホ事情に合わせ、自分もおしゃれでセンス良くて画像を綺麗に入れられるようなブログを書きたいなと思っていた時に拝見したAkira様のテンプレートの数々。理想をこえて本当に素敵で、素晴らしくて。どうしても一度お礼をお伝えしたく、コメントいたしました。
少しずつカスタマイズして、その度にブログを拝見して試行錯誤して、続けております。
素敵なテンプレートを使うことができて本当に楽しいです。本当に、ありがとうございます。

To Mimizkさん

こんばんは ('0')/

導入できたようで良かったです。
お疲れ様でした :)

To 伊野木さん

こんばんは ('0')/

ご丁寧にありがとうございます。励みになります :)

-------
全然関係ないですが、鬼滅のいのすけの声優さんの声がすっごい好きです(笑)

管理人のみ閲覧できます

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

To Halo パンくずの位置 内緒さん

こんにちは。

ヘッダーの下、という解釈で合ってますでしょうか。そうだと仮定して、
① こうするのか ↓
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_09_05.png
② それともこうするのか ↓
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_09_05_2.png

これによって移動させる位置もCSS調整の内容も変わってきます。とりあえず①と仮定しますね。

----- html編集

<!-- パンくずリスト -->
から
<!-- パンくずリストここまで -->
を
<main id=primary>
の直下にカット&ペーストします。

----- CSS編集

まず
#breadcrumbs
で検索するとスタイルシート内に1箇所あります。

#site-desc,
#breadcrumbs {

上記のようなセレクタ指定になっていますので、ここを以下のように修正

#site-desc {

続きまして、スタイルシート末尾に以下の内容を追加。

#breadcrumbs {
margin: 0 0 20px;
color: 指定したいフォント色;
font-size: var(--font_size-blog-info);
}

marginの「20px」はブログ記事タイトルとの距離なので任意で調整してください。

続きまして
.breadcrumns-anchor
で検索すると1箇所あります。このルールセット内

background: rgb(51,51,51);

この背景色指定を適切な色指定に変更してください(カスタマイズで暗色に変更されているため背景色がバッティングします)

続きまして
.current-item
で検索すると1箇所あります。こちらも同じくルールセット内の

background: rgba(20,20,20,.2);

を適切な色指定に変更してください。
また、パンくずが移動しましたので「ブログ説明文」を常にブログタイトル下に表示させたい場合は

<p id=site-desc>

で検索し、この文字列の上にある <!--index_area--> と、下にある <!--/index_area--> を削除してください。

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

管理人のみ閲覧できます

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

To Akiraさん

できました！
＞パンくずが移動しましたので「ブログ説明文」、、、
作業を始めるまで、よく意味がわからなかったのですが、まさにその通りで
行き届いたアドバイス有り難うございました。

パンくずの文字の色、バックグラウンドは、スマホや、別のパソコンでチェックしながら、
まだ他の部分の色も調整したい感じなので、一緒にのんびりやろうと思います。
取り急ぎお礼まで。

cssは何となく見れても（それも新しい表現が増えていて難しいですが）、htmlの編集はハードル高いです。
本当に助かりました。多分時間をかけても自分ではできなかったと思います。

To cham75さん(重要)

こんにちは ('0')/
上手く行ったようで良かったです。htmlの方はFC2独自変数などが混ざっていますので複雑ですよね ^^;
お疲れ様でした :)

別件です。
混在コンテンツ(httpsサイト内にhttp通信が混ざっている状態)がありますので、以下をチェックし修正してください(修正必須)

① 末尾「nya150.jpg」の画像ファイルがhttpです。

To Akiraさん

わざわざ有り難うございます。早速見て見ます。

To Akiraさん

nya150.jpgは、画像の置き場をかえました。
>httpsサイト内にhttp通信が混ざっている状態
が良くないというのは気がつきませんでした。調べてみますと、確かに。
ありがとうございました。

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

こんばんは ('0')/
お疲れ様でした :)

スマホの際ヘッダーバナーについて

お手数おかけします。スマホの際ヘッダーバナーが切り替わらないらしいのですが、どうしても原因がわかりません。
初歩の初歩の質問かと思いますが、ご教授願いますでしょうか？
https://cham75.blog.fc2.com/

To cham75さん

こんにちは ('0')/

原因はCSSの記述ミスです。
#header-banner {
で検索するとスタイルシート内に2箇所あります。最初の方のルールセット最終のプロパティは
background
のはずですが
background-image
に変更されていますので、backgroud に直してください。

----- html構文エラー修正
【① 記事内のエラー】
記事編集ページを開いて、末尾

詳しくはbooks mikkeにて！</a><br><br><br></div></font>

これは正しくは
詳しくはbooks mikkeにて！</a><br><br><br></font></div>

クリティカルエラーなので修正必須。

【② サイドメニュープロフィール文のエラー】
プラグイン編集画面を開き

<span style="font-size:1;color:#889e74line-height: 1.5;">

正しくは

<span style="font-size:希望のサイズpx;color:#889e74;line-height: 1.5;">

font-sizeのpx単位がありません。カラー指定の値(#889e74)の後ろにセミコロンがありません。
img要素にheightの指定がありません。
× height=""
✔ height="数値"

また、cham75さんは以下の記事の該当者です。
参考記事: この際だから公式プラグインのhtmlを書き直してしまうのだ
https://vanillaice000.blog.fc2.com/blog-entry-1086.html

「プロフィール」の章をご覧いただき、アウトラインpからdivへの変更をおすすめします。
(pタグ内にdivタグを入れ子することはできません)
きれいに直すならば以下の内容にまるごと差し替えてください(brなども取り除いてあります)

<div style="text-align: center">
<span style="font-size: small; color: #78a6ac;">●●●こんにちは●●●<br>cham75(チャムなこ)です</span>
<div style="text-align: center;">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="500" height="500" alt style="width: 150px; height: auto; margin: 20px 0;">
</div>
<span style="font-size: small; color: #889e74; line-height: 1.5;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</span>
</div>

-----
あと気になるのはcham75さんのブログでクリティカルなJSエラーが出ています。一つはページ自体の混在コンテンツで、リクエスト段階で生じています。
ちょっと今こちらでは見つけられないので、ご自身で追加したもの、特にscriptで掲載しているものを全てチェックし、新しくコードを取得してください。SSL化以前のコードのまま利用していた場合には混在コンテンツになります。
表示ブロックされているものはこちらでは確認できませんので、自主的なチェック及び修正をお願いします。
(active混在コンテンツ(危険レベル高)なので修正必須です)

有り難うございます。

とりあえず、バナーは見えるようになりました。
たくさんチェックしていただきありがとうございます。追々直していこうと思います。
頂きました文章かなり難しい所もありそうなので、また質問させていただくかもしれません。
よろしくおねがいいたします。

To cham75さん

こんばんは。
表示に影響が出る類の構文エラーなので折を見て修正してくださいね。
そして先程よりもエラー数が増えています。あれこれ一度には大変でしょうから、こちらは既出内容の修正が終了してからお伝えしたいと思います。お疲れ様です :)

To Akiraさん

有り難うございます。
頂いたアドバイスを参考に、
自分でも（わからない語句等）調べながら格闘してみたいと思います。

クリティカルなJSエラーについて

たびたび恐れ入ります。

プロフィール、貼り替えました。助かりました。ありがとうございます。
＞クリティカルなJSエラー　　とは具体的には
リンク先のhttpに置いてある画像をhttpsに置き換えて、リンクを貼り直す。と云う解釈でよろしいでしょうか？
。。。。。。。。。。。。。。。
クリティカルなJSエラーという言葉の意味を検索して
「廃止タグ」と云う恐ろしげなものを見つけて、作業に掛かる前に引き返してきました。

Re: クリティカルなJSエラーについて

こんにちは ('0')/

クリティカルエラー、というのは「致命的なエラー」という意味です。
で、いろいろ見てはいるんですが原因を見つけられません。もしかすると運営に報告をしなければいけない案件もしれない ^^;
active混在コンテンツというのは発生するとブラウザが表示をブロックするのでこちらでは見えない(または動かない)んですね。なので「任意で追加した何か」、例えば第三サービスのウィジェット(twitter埋め込みや本棚ウィジェット等)があるのかな、と簡単に考えて「チェックしてくださいね」としましたが、どうもそういった類も見当たらないですよね (´・ｪ・｀)

テンプレートを再DLして頂けないでしょうか。ごく稀にですがデータが壊れている場合があります。たぶん今回は違うと思うけれども、念の為。
スタイルシートをカスタマイズされていますので、今お手元にあるHaloはそのまま保持して名称を変更し、再DLしたHaloのスタイルシートと内容を差し替えればOKです。

それで一度結果を見たいと思います。あと、構文エラーが非常に多く、検証作業の妨げになると思いますので修正をお願いします。再DLでチェックが終了したらお伝えします。よろしくお願いします。

元のhaloを貼ってみました

今何もしていない状態なのですが、グーグルクロームの検証で、×がちょこちょこでているようです。

https://cham75.blog.fc2.com/blog-entry-28.html

このまま先程までのソースを貼り付けてみる前に、お知らせしてみました。

構文エラーは、今ならほぼ記事内と画像リンク近辺ですよね。
直してみます。時間が掛かると思いますが。

思ったより大変な事で、お時間を割かせてしまっている様で申し訳ありません。

To cham75さん

まず、再DLして頂きありがとうございます。
今の状態でエラーが出ているということは、やはりテンプレートには問題がありませんので、cham75さん独自で発生しているエラー、ということで確定です。
(念の為他のHalo利用者さんも探してみましたがエラーが発生している方はいませんでした)

スクリーンショット掲載してくださった内容について
このエラーなんですが何度もお伝えするように「混在コンテンツ(active)」です。activeとpassiveとがあるんですが、activeの場合は
・script要素内にhttp
・スタイルシート内にhttp
という場合がほとんどです。それで、なんとなく原因はわかりました。原因はわかりましたが「理由」の方がまだ不明です。

原因: web font loaderのscriptが何かによって阻害されている

この「何か」がまだわかっていません。これ構文エラーが原因かもしれないなぁ、と思ったので、ちょっと先にそちらをチェックしますね。その中にもしかするとJSの実行を妨げるようなクリティカルなものがあるのかも。
(このfont loaderの仕組として parent node というのを利用しており、要素の不整合がある場合に正しい位置に書き出されません)

html構文エラーが結構たくさんあるので私も後回しにしましたし、修正が大変だと思いますが頑張ってください ^^;
今からチェックするので少しお待ち下さいね。

To cham75さん

この修正作業を終えたら一度拝見しますのでお知らせください。

【サイドメニュー プロフィール】
私が提示した内容が以下です。

<div style="text-align: center">
<span style="font-size: small; color: #78a6ac;">●●●こんにちは●●●<br>cham75(チャムなこ)です</span>
<div style="text-align: center;">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="500" height="500" alt style="width: 150px; height: auto; margin: 20px 0;">
</div>
<span style="font-size: small; color: #889e74; line-height: 1.5;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</span>
</div>

現在記載されている内容は以下です。
<div style="text-align: center">
<span style="font-size: small; color: #78a6ac;"><br><br>●●●こんにちは●●●<br>cham75(チャムなこ)です</span>
<div style="text-align: center;">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="150" height="150" alt style="width: 150px height: auto; margin: 5px 0;">
</div>
<span style="font-size: 10px; color: #72875f;line-hight:12px;display:block;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</span>
</div></div>

で、ごめんなさい。画像下の span に display: block; を指定し忘れていました。自主的に入れて頂いてありがとうございます。

・ bｒでの余白作成は避ける(line-heightの影響を受けるため)
・ line-height の誤字(× line-hight)
・ line-heightの値には単位を付けない(× 12px)(✔ 1.2)(単位をつけてしまうとフォントサイズを変更した際に文字が重なってしまいます)
・ セミコロン欠損

これらを踏まえて以下の内容に再度修正してください。

<div &align>
<div style="font-size: 13px; color: #78a6ac; margin-top: 40px">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="150" height="150" alt style="width: 150px; height: auto; margin: 5px 0;">
<div style="font-size: 10px; color: #72875f; line-height:1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</div>
</div>

最初のdiv要素の &align はプラグイン設定の「コンテンツの文字設定」の位置合わせに従わせるためのものです。

画像を挟んで上下に存在するテキストにそれぞれのline-height、 それぞれのfont-sizeを与えるならばspanマークアップでわざわざdisplay値をblockに変更する、という必要はありません。元々blockであるdiv要素でマークアップしてください。

「こんにちは」が入っているdiv要素に margin-top: 40px を設けていますが、これはあまり上手い方法ではありません。ブログ黒背景に変更し、同時に各コンテンツ(メインの記事)にも同じ背景色を指定してしまったため、背景と各コンテンツとの境目が失われましたが、各コンテンツの上の余白がそのまま残っているため、余白付きのコンテンツとプロフィールの上辺を揃えたいという目的でプロフィールにも上部余白を設けたものだと思います。
これだとテンプレートを変更した際にプロフィールのmargin再設定が必須です。その点を覚えておいてくださいね。
(本来はコンテンツ余白を取り除き、#main-container の上部paddingはデフォルトの40pxに戻す、というのが最も良い方法です。その場合はプロフィールのmargin-top指定は不要です)

「line-heightには単位を付けない」とこの機会に覚えてくださいね。pxは絶対値なので、例えばfont-sizeを15pxなどに変更したら12pxを超過しますので上下に位置する文字が重なります。1.2や1.5という単位なし数値の場合「フォントサイズの1.2倍, 1.5倍」という意味なのでフォントサイズを超過することはありません。

【プロフィール下の画像】

・ height属性にauto値はありません
・ ダブルクオーテーション欠損
・ alt属性必須(値は空で構いません)
・ 属性間スペース無し

現在の内容
<div &align><a href="https://books-mikke.ocnk.net/" target="_blank"><img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/mikke200.jpg"width="150" height=auto border="0" align="" /></a>
</div>

推奨内容
<div &align><a href="https://books-mikke.ocnk.net/" target="_blank" rel="noopener"><img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/mikke200.jpg" width="150" height="159" alt style="width: 150px; height: auto;"></a>
</div>

align属性, border属性は廃止されていますので取り除きました。また、htmlでは末尾のスラッシュは不要です(スラッシュ必須なのはxmlです)

元画像の縮尺表示が必要な場合は style="width: 数値; height: auto;" の部位で行ってください。この場合は height: auto でOKです(html属性ではなくCSSプロパティのため)
原寸と同じ尺なので今は必要ありませんが今後を踏まえ入れておいた方が良いと思います。また、画像の原寸はできれば表示サイズの2〜3倍で準備される方が良いですね(4K, 5Kなど高解像度ディスプレイで見たときに非常にぼやけて不鮮明な画像になってしまいます, テキストが含まれる画像は特に不明瞭です)
また、テキストを含む画像の拡張子は png をおすすめします。

参考記事: スマートフォンで画像がぼやける際の対処と画像容量削減
https://vanillaice000.blog.fc2.com/blog-entry-376.html

【サイドメニュー にゃこニャッ記】
・ 属性間スペースがありません
・ 属性間スペースは1つだけです(スペースを連打しない)
・ 大文字の使用(非推奨 A HREF, 推奨 a href)
・ 意味のないdisplay値指定
・ line-height誤字
・ line-height単位

現在の内容
<div style="text-align:center;line-hight:12px;display:block;"><A HREF="http://pote.sblo.jp/"target="_blank"><span style="font-weight: bold; color:#78a6ac;">にゃこニャッ記 <br></span><img src="https://books-mikke.sakura.ne.jp/nakonap/nya150.jpg" width="150" height="150" border="0" align="" alt="nya150.jpg" />
<span style="font-size:10px;color:#78a6ac;">
<br>
お空の20歳3匹と18歳、まだまだ頑張る19歳<br>「にゃこニャッ記」でまってま～す！<br><br></span></A>
</div></div>

推奨
<div style="text-align: center; line-height: 1.2">
<a href="http://pote.sblo.jp/" target="_blank"><span style="font-weight: bold; color: #78a6ac;">にゃこニャッ記 </span><br>
<img src="https://books-mikke.sakura.ne.jp/nakonap/nya150.jpg" width="150" height="150" alt="nya150.jpg" style="margin: 10px 0;"><br>
<span style="font-size: 10px; color: #78a6ac;">お空の20歳3匹と18歳、まだまだ頑張る19歳<br>「にゃこニャッ記」でまってま～す！</span>
</a>
</div>

【サイドメニュー 机上にて】
・ 属性間スペースがありません
・ height属性に値がありません
・ alt属性必須(値は空で構いません)
・ a終了タグの位置が不正
・ span不整合

現在の内容
<div class="plugin-freearea" style="text-align:left">
<div style="text-align:center;">
<span style="font-weight:bold;color:#78a6ac">机上にて、2006.9～ <br><br><a href="http://kyovi.sblo.jp/"target="_blank"><img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/usa200.jpg" width="150" height="" border="0" align="" />
<span style="font-size:x-small;color:#78a6ac">
<br>
過去のブログ「机上にて、」2006～<br>
一部重複あります。<br></span></a>
</div>

推奨
<div class="plugin-freearea" &align>
<span style="font-weight: bold; color: #78a6ac;">机上にて、2006.9～ </span><br>
<a href="http://kyovi.sblo.jp/" target="_blank" rel="noopener">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/usa200.jpg" width="200" height="212" alt style="width: 150px; height: auto; margin: 10px 0;"><br>
<span style="font-size: 10px; color: #78a6ac;">過去のブログ「机上にて、」2006～<br>一部重複あります。</a></span>
</div>

どこまでをリンクとして扱い、どこまでを太字適用したいのかが私ではわかりませんので上記内容「リンクは画像と『過去のブログ〜』のテキストまで」「太字は「机上にて、2006.9～」の部位」としたマークアップです。全て太字の場合は2つ目のspan要素に font-weight: bold; を追加。



とりあえずトップページに関しては以上が修正必須項目です。
属性間スペースの入れ忘れと、height属性の値の未記入などが多いようなので気をつけてくださいね。個別記事にもこれらが点在しています。あとは要素と属性の関係にも注意してください。

例えば「おしゃれな障子」の記事では

<a href="https://https://youtu.be/n0eLwGCtL10" alt="jidaigeki" border="0" width="" height=""><img src="https://books-mikke.sakura.ne.jp/nakonap/image/shoji.JPG"alt="shoji" border="0" width="550" height=""><br>
新五捕物帖より</a><br><br>
こんな曲線の障子があったんだろうか？いいなあ。

↓ 正しくは

<a href="https://youtu.be/n0eLwGCtL10" target="_blank" rel="noopener"><img src="https://books-mikke.sakura.ne.jp/nakonap/image/shoji.JPG" alt="shoji" border="0" width="776" height="533" style="width: 550px; height: auto;"><br>
新五捕物帖より</a><br><br>
こんな曲線の障子があったんだろうか？いいなあ。


また、youtubeのURLが違いますのでアクセスできません。URLも修正してください。

個別記事にもエラーが多くありますが、ページ全体に影響する内容についてはプラグインが関係していますので、そちらを最優先で修正してください。
私の方では個別記事のチェックを続けます。
本来は全ページを私がチェックすることは致しませんが今回はページ数が少ないのと、放置できないエラーなので特別です (´・ｪ・｀)

To cham75さん(構文エラー続き)

【セリかドクゼリか?】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=24
(記事編集ページへ直接飛べます)
* cham75さん以外は上記リンクをクリックしないよう注意(一般閲覧者さんへ向けて)

・ アドレスが違います
・ a要素にimg要素の属性が付いています

記事冒頭

<a href="https://books-mikke.sakura.ne.jp/nakonap/28/dokuzeri/210730_1.jpg" alt=dokuzeri" border="0" width="" height=""><img src="https://books-mikke.sakura.ne.jp/nakonap/28/dokuzeri/210730_1.jpg"alt="dokuzerinohana" border="0" width="600" height=""><br>拡大すると結構きれいです。</a><br><br>

↓

<a href="https://books-mikke.sakura.ne.jp/nakonap/28/dokuzeri/210730_1.jpg"><img src="https://books-mikke.sakura.ne.jp/nakonap/28/dokuzeri/210730_1.jpg" alt="dokuzeri" width="1068" height="914" style="width: 600px; height: auto;"><br>拡大すると結構きれいです。</a><br><br>

その他画像については
border="0" は不要
width/ height属性の値無しはダメ

width, heightの指定について計算は不要です。widthとheight「属性」には画像の原寸を入れてください。アップロード画面に書いてありますのですぐに記入できると思います。そして実際の表示サイズは style「属性」のwidth, height「プロパティ」で指定

<img src="画像アドレス" width="画像横原寸" height="画像縦原寸" alt="代替テキスト" style="width: 表示横サイズ; height: auto;">

上記を「がぞう」等で辞書登録しておくとすぐに呼び出せます(htmlモードで記事を書いている、と仮定しています)

このページの他の画像についても1点目と同じエラーなので修正。

【人形6〜】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=23

・ a要素のアドレスが違います
・ a要素にimg要素の属性が付いています

【ドトールの常連さん2〜】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=22

記事末尾
</div></font>
↓
</font></div>

font要素は廃止されていますので、今後は使わないようにしましょう。ついでにこの記事でも修正するのなら

記事冒頭
<div style="text-align: center;"><font size="2">
↓
<div style="text-align: center; font-size: 13px;">

記事末尾
</font></div>
↓
</div>

他のページでもfont要素が利用されていますが、ブラウザによる後方互換はまだ有効なので無理に修正する必要はありません。直せるのなら記事数が少ない今のうちに直しておくと良いですね。
文章はセンタリング、という方針のようなので、文頭には
<div style="text-align: center;">
が付いているはずですから、
<div style="text-align: center; font-size: 13px;">
と書き直します。
文章途中での変更は

例)
あいうえお<span style="font-size: 数値px;">かきくけこ</span>さしすせそ

と、span要素を利用してください。カラー指定の場合も同様です。

例)
あいうえお<span style="font-size: 数値px; color: red;">かきくけこ</span>さしすせそ

【チェストをシャビー風に〜】 関連3記事
・ a要素にimg要素の属性
・ width, height属性の値

【希少 生活の絵本創刊号】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=17

・ a要素にimg要素の属性
・ width, height属性の値

【レア！美しい暮しの〜】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=17

・ img要素 height属性の値

【ブヨやムカデに刺された時の】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=10

・ img要素 height属性の値

-------
img要素を修正する際は
border="0"
もついでに取り除きましょう。

管理人のみ閲覧できます

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

To 誤字の件 内緒さん

助かりましたー。急いでやったのバレバレで ^^;
鬼滅の刃の放送があったもので(笑)

altは値無しで構いません、ということで抜いてあります。それとも書き方のことかしら？

✔
alt=""
✔
alt

値無しの場合は alt だけでOKです。
意味が違いますかね ^^;

管理人のみ閲覧できます

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

ご指導痛み入ります。

＞例えば「おしゃれな障子」の記事では
の前までの作業をよく読み返しながら、やってみました。

きめ細かい記述を頂き、間違っていた点、解っていなかった点がかなり見えてきました。

プロフィール部分、
>古本,おみやげこけし人形....　以降の文字が左に寄ってしまったので、
<div &align></div>で挟み直してみたのですが、よかったでしょうか？


今回直した部分は右サイドに配置していたのですが、最下部真ん中に行ったり、微妙に配置がくずれてしまいました。
プラグイン管理→詳細に出ている配置を変えてしまった気もしますが、解らなくなっていまして、
特にカテゴリーの文字が、その上の画像に張り付いて、また<br>を入れたくなって来る前にこのまま見ていただくことにしました。
よろしくおねがいします。

To cham75さん

こんにちは ('0')/

今html構文エラーが生じて「カラム落ち」という典型的な状態になっています。

【プロフィール】
ごめんなさい、私ものすごく根本的な説明を失念していました。
プロフィールのプラグインは 「あなたの紹介文」と連動しています ので、そちらも修正するべきでした。

通常、プロフィール画像は
<%image>
という独自変数で、
紹介文は
<%introduction2>
という独自変数です。

文章についてはひとつのまとまりとして捉えるため、cham75さんの現在の構成

テキスト(●●●こんにちは)
画像
テキスト(古本,おみやげ〜)

の形(テキストの分割)を実現できません。そのために、プロフィール文の中に画像のimg要素を直接打ち込んだ、ということですよね。
これあんまり良くないなぁ (´・ω・｀)
例えばテンプレートで「プロフィール画像」と「プロフィール文」をデザインする際、Haloだとフッター付近の「円形プロフィール + 紹介文」が該当ですが、プロフィール画像が重複掲載になってしまいますよね。
円形部位に <%image> で画像を取得し、その下に <%introduction2> で紹介文、という構造だけれども、cham75さんの場合はその<%introduction2>にプロフィール画像を含めてしまっているのでどうしても重複してしまうわけです。

まずこの構成は良くはない、という点を踏まえ(プロフィール画像と紹介文は区別して扱うべき、という意味です)て、どうするかですけども。おすすめは(おすすめ、と言って良いかわかりませんが)

管理画面TOPの「あなたの基本情報」ハンバーガーアイコンをクリックすると、「あなたの紹介文」を編集できるようになっていますので、そこへ

①
<div style="font-size: 13px; color: #78a6ac; ">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<div style="font-size: 10px; color: #72875f; line-height:1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</div>

あるいは
② こんにちは〜 無し
<div style="font-size: 10px; color: #72875f; line-height:1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</span>
</div>


を記載して更新。これは「紹介文」ですからプロフィール画像は含みません。データ的にはこの形にしておきます。
先にお伝えしたとおり紹介文の分割はできませんので、プラグインの方だけは「装飾」としての分割を行います。②の場合は分割ではなく「追加」です。これも本当はあまり良くはないです。何故なら場合によって(もしかするテンプレートによっても)その都度修正の手間が発生する可能性が高いからです。
それでも今の形を維持したいのであれば、プラグインだけそれを実現する、というのが良いと思います。

現在プラグインの「プロフィール」についてもまだ構文エラーですから以下のように修正。

現在(太字部位不要)
<div style="text-align:center">
<div style="font-size: 13px; color: #78a6ac; margin-top: 40px">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="150" height="150" alt style="width: 150px； height: auto; margin: 5px 0;">
</div></div><div style="text-align:center">
<div style="font-size: 10px; color: #72875f; line-height: 1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。
</div></div>

正しい内容
<div style="text-align: center;">
<div style="font-size: 13px; color: #78a6ac; margin-top: 40px">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="150" height="150" alt style="width: 150px; height: auto; margin: 5px 0;">
<div style="font-size: 10px; color: #72875f; line-height:1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</div>
</div>

①を選択する場合は今のままでOKです。その代わり 独自変数との連動はしません ので、今後紹介文を書き換えたらプラグインの方も書き換え必須です。プロフィール画像についても同様です。
② を選択する場合は以下のように再修正してください。

<div style="text-align: center; margin-top: 40px;">
<div style="font-size: 13px; color: #78a6ac;">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<!--myimage-->
<img src="<%image>" alt="<%author_name>" width="150" height="150" style="width: 150px; height: auto; margin: 5px 0;">
<!--/myimage-->
<%introduction2>
</div>

この場合はプロフィール画像も紹介文も連動します(ただしwidth, height属性の値変更は確認してください, 正方形を守れば値は気にしなくてOKです)
この方が良いかもしれませんね。文字の位置合わせはプラグイン設定の「コンテンツの文字設定」ではなくhtmlで直接指定しています(恐らくセンタリングをご希望だと思うので)

で、cham75さんの場合プロフィールに限らずプラグインに全般関してかなりイレギュラーなことをしている、という自覚があるかどうか不明ですが、この機会に自覚されますようお願いします(笑)
(タイトルの消去、変数構成の破棄 等)

ここまでの作業は 必須 です。現時点でダブルクォーテーション欠損のクリティカルエラーなので、必ず管理画面TOPで紹介文の修正を行ってください。

一旦投稿します。

To cham75さん

【机上にて】
・ img要素直後の<br>が欠けています。
・ div終了タグが一つ多いです。

現在の内容
<div class="plugin-freearea" &align;>
<span style="font-weight: bold; color: #78a6ac;">机上にて、2006.9～ </span><br>
<a href="http://kyovi.sblo.jp/" target="_blank" rel="noopener">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/usa200.jpg" width="200" height="212" alt style="width: 150px; height: auto; margin: 10px 0;">
<span style="font-size: 10px; color: #78a6ac;">過去のブログ「机上にて、」2006～<br>
一部重複あります。</a></span>
</div>
</div>

正しい内容
<div style="text-align: center;">
<span style="font-weight: bold; color: #78a6ac;">机上にて、2006.9～ </span><br>
<a href="http://kyovi.sblo.jp/" target="_blank" rel="noopener">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/usa200.jpg" width="200" height="212" alt style="width: 150px; height: auto; margin: 10px 0;"><br>
<span style="font-size: 10px; color: #78a6ac;">過去のブログ「机上にて、」2006～<br>
一部重複あります。</a></span>
</div>

* センタリングでしょうから最初の要素を変更しました。

とりあえずここまで頑張ってください。

プロフィール関係なんとかできました。

どうもありがとうございました。
収まりました。
記事内の間違いに移ろうと思います。

＞私の方では個別記事のチェックを続けます。
本来は全ページを私がチェックすることは致しませんが今回はページ数が少ないのと、放置できないエラーなので特別です (´・ｪ・｀)

気になっているのですが、放置できないエラーと云うのは、表示できなくて私が困るだけでない、ということですか？

とても勉強になり、ありがたいのですが、随分時間を取らせてしまい
申し訳なく思っています。何かお礼をお送りしたいのですが、amazonかなにかで。

To cham75さん

こんにちは。お疲れ様です :)

ごめんなさい。私1箇所間違えてしまった (*_ _)
プロフィール文設定の方、

ゆるゆると。。。</span>

これ正しくは

ゆるゆると。。。</div>

です。コード最終の終了タグなのですぐにわかると思います。変更をお願いします。

-----
あとはサイドメニュー
【プロフィール下のリンク画像】
・属性間半角スペースがありません。

target="_blank"rel="noopener"
↓
target="_blank" rel="noopener"

mikke200.jpg"width="150"
↓
mikke200.jpg" width="150"

【机上にて】
これ私の指南ミスです。ごめんなさい。

一部重複あります。</a></span>
↓
一部重複あります。</span></a>

-----
> 表示できなくて私が困るだけでない、ということですか？〜

今回解消しようとしているのは「混在コンテンツ」です。今はその前段階で構文エラーの修正を行っています。
混在コンテンツはセキュリティに関係しているので、表示が崩れるとかそういったことよりも重要な「サイトの安全性が担保されない」というものなので、放置はできないよね、ということです。

で、ここまで作業して頂いてやはり根本的な問題を見つけられずにいます。あといくつか試してもらってから私の判断をお伝えしますね。

To cham75さん(混在コンテンツの件)

こんにちは。まだ修正作業を終えていないと思うんですが、今日ちょっと時間が無いので先に今回の結論というか原因をお伝えしますね。

cham75さんは「カスタムURL(URLエイリアス機能)」をご利用ですよね。その場合「未分類」カテゴリのURLは
https://固有ID.blog.fc2.com/c/%E6%9C%AA%E5%88%86%E9%A1%9E

となるはずなんですが、cham75さんの場合
https://固有ID.blog.fc2.com/c/

と、後ろの「未分類」のエンコード部位が失われているんですね。で、このURLは存在しませんし正規のルートを通らないので
http://
のままでリクエストされています。
Haloテンプレートはページの遷移速度を上げるために、まだ開いていないページに対して prefetch(遷移が予想されるリソースの先読み) というのを行う仕組みになっているんですが、そのために「混在コンテンツ」ということになっています。

未分類カテゴリの名称を変える、あるいは未分類カテゴリに1件投稿してみることで解消される可能性があるような気もします。未分類カテゴリ自体は削除できないので、「名称を変更する」ということになります。
カテゴリの名付けや、そのカテゴリに投稿する・しない はユーザーさん任意なので、私が指図するのは申し訳ないなぁ、という気持ちなんだけども、もうこれ試すしか無いかなぁ、と思って (∵`)

構文エラーの修正が終わりましたら一度ご検討ください。もし不都合がある場合には、根本的な解決にはありませんが「prefetchを辞める」というのが最終手段になります。スペックが落ちますが仕方ないです。
もし未分類カテゴリの編集が可能であれば、それを行って頂いて、それでも改善が無ければ「運営に調査依頼」という形になるかと思います。よろしくお願いします。

有り難うございます

お忙しい中、恐れ入ります。
試したくて、先にやってみました。
検証してみたら、赤い×印が無くなっています！！

未分類は、レトロに変えてみました。ただ選択できない状態のようです。
https://cham75.blog.fc2.com/blog-entry-29.html

只今構文エラーの修正は2/3くらいに来ています。

ところで、混在コンテンツと云うのは、お気に入りリンクに、どなたかのhttpのブログがあってもいけないのでしょうか？　自分の旧ブログも2つリンクしていて、httpなのですが。

To cham75さん

こんばんは。
今拝見したところ解消されていますね。
カテゴリURLの出力は独自変数に頼るしかないのでユーザーサイドではどうしようもないんですよね。
未分類への投稿がゼロの場合に起こるのかもしれませんね。私の方でサンプルが取れないので推測だけで申し訳ないです。
いずれにしろ修正されましたの良かったです。

あとは点在する構文エラーを片付ければ綺麗になります。あともう少し頑張りましょう :)

> お気に入りリンクに、どなたかのhttpのブログがあってもいけないのでしょうか？〜

いえ。a要素でのページ遷移は http:// のスキームでも問題ありません。というかhttpのサイトにhttpsではアクセスできないのでそのままで。相手方がSSL化を済ませていれば(つまりhttpsでアクセスできるのならば)書き直しても良いですね。

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

修正終わりました。

すべての記事の修正を終え、ためしにカスタマイズ後のcss、htmlも貼ってみました。
大丈夫のようです。
あとは追々教えていただいた画像の修正、.png化、特にバナー等、やっていこうと思います。
本当に助かりました。何かお礼をしたいので、amazonのほしいものリストとか
giftも贈れましたよね。お知らせ願えないでしょうか？

To cham75さん

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

お礼の件はお気持ちだけ頂きますね。お気遣いありがとうございます :)
修正の件ですが、dev tools(右クリック「検証」)では構文エラーの発見はできませんので、以下のページを利用してくださいね。

外部ページ: htmlバリデータ
https://validator.w3.org/

または以下のページからブックマーク登録をしておくとすぐにテストできます。

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

FC2ブログの特性上修正できないエラーや警告もありますので

The type attribute is unnecessary for JavaScript resources.
JSリソースにtype属性の記述は不要です --- FC2が追加する必須scriptなど

Element style not allowed as child of element div in this context.
style要素はこの文脈内div要素の子要素にはできません(div要素にstyle要素を入れ子してはいけません) --- 記事下テキスト広告

The charset attribute on the script element is obsolete.
scriptのcharset属性は廃止です(から使うべきではありません) --- コメント装飾ツールバーなど

上記は無視して構いません。それ以外のエラーや警告は修正可能のはずなので、特に「エラー」の方に留意してください。
現時点でまだ

×
ゆるゆると。。。</span>

✔
ゆるゆると。。。</div>

こちらが修正されていませんので行ってくださいね。お疲れ様です :)

To Akiraさん

ゆるゆると。。。</div>に直しました。
htmlバリデータでのチェック、追々していきます。
細かいところまでありがとうございます。

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

こんばんは ('0')/

はい。こちらこそ指南ミスなどもありお手数おかけしました。
お疲れ様でした :)

管理人のみ閲覧できます

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

To Halo 前後ページのサムネイルの件 内緒さん

> メタタグの設定 の OGP設定は「有効」にしていますが、前後ページのサムネイル画像が表示されません。〜

まず、FC2analyzerをhead内(<head>から</head>の間)に掲載することはできません。テンプレートのガイダンスに従って正しい位置に移動させてくださいね。
<!-- アクセス解析はここから(但しgoogle analyticsはhead終了タグ直前) -->
を目印に、このコメントのすぐ下に記載します。

このクリティカル構文エラーが後続の要素に影響を及ぼしています。まずはここを修正して結果を見てみてください。今の状態では検証がままならないので、修正後に再度拝見しますね。あと別件でお伝えしたいこともありますが、集中して頂きたいので次回にします。よろしくお願いします。

管理人のみ閲覧できます

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

class 属性の有効性について

こんにちは、お久しぶりです。
以前もたいへんお世話になって、ブログをカスタマイズして、便利に使わせてもらっています。ありがとうございます。

さて、昨日気づいたのですが、スタイルシートに登録したはずの class 属性がうまく働きません。働いてくれていると思って満足して使っていたのだけど、実際には指定した数値に全く影響されていなかったとわかって笑ってしまいました。具体的にはこういった記述です。



.inner-contents .margin_normal { /* 文章と文章の間 */
margin: 50rem auto 0rem;
}

.inner-contents .margin_cut_small { /* 強制的な区切り(小) */
margin: 3rem auto 0rem;
}

.inner-contents .margin_cut_middle { /* 強制的な区切り(中) */
margin: 7rem auto 0rem;
}

.inner-contents .margin_cut_big { /* 強制的な区切り(大) */
margin: 11rem auto 0rem;
}

.inner-contents .margin_under_pic { /* 画像の下に文章 */
margin: 5rem auto 0rem;
}

.inner-contents .margin_pic { /* 画像をはさむ */
margin: 5rem auto 0rem;
}



この中では、一番上の「/* 文章と文章の間 */」が効きません。今この数字は、「要素の上方に 50 rem を差し挟む」ということになっていますが、もとは 3 rem くらいの設定にしてありました。50 rem などという数字になっているのは、効いていないことを確かめるために極端な数字を入れて検証したからです。

当該 class は、もっぱら文章中で「<p class="margin_start_stc"> ここに文章を書く </p>」などと使うために登録しています。つまり、「段落間の距離・隙間」といってよいものを指定するために、これを使っています。

現在のテンプレートで p と p の間の距離というのは、テンプレート作者様によって指定された下記部分に左右されている状態にあると、昨日の時点で確認しました。




/***==========================================
article
==========================================***/

.inner-contents p {
margin: 1.4rem 0;
}



･･･それはそうですよね。ですから、例えばこの部分を「margin: 0 0;」に変えたり、あるいはいっそ削除したりして、私の class 指定が効くように試行錯誤してみたのですが、ついにダメで、戻しました。

数字だけでなく、「.inner-contents p」という指定をまるごと削除しても、私の class 指定が働くことはありませんでした。つまり、優先するべき記述があるから、劣等な class 指定が無視されているというのでなく、もっと根本的な拒否の対象になっている・禁忌を犯しているのかもしれないと、この時点で考えるようになりました。


これと同様に効いていない class 指定があることを、実は以前から認識してはおりました。例えば以下の部分。



.inner_contents .margin_start_pic { /* 画像で書き始め */
margin: 30rem auto 0rem;
}

.inner-contents .margin_start_stc { /* 文章で書き始め */
margin: 3rem auto 0rem;
}

.inner-contents .margin_restart { /*「続きを読む」の文頭 */
margin: 10rem auto 0rem;
clear: both;
}



この中では「/* 画像で書き始め */」が効果を発揮しません。
この記述は具体的にはこんな塩梅で使っています。



<div class="margin_start_pic grid-container-BIG">
<div class="A">
<a href=" 画像URL " target="_blank"><img src=" 画像URL "></a>
</div>
</div>



このように書いても反映されることはありません。


この、class 属性が効かない状態というのは、やはり class より優先されるクリティカルな記述がスタイルシートの中に存在するために起こるのでしょうか。それとも、書き方の問題でしょうか。

To FC2analyzer位置変更 内緒さん(完了のご報告 + 重要)

ページ送りでのサムネイル表示を確認できました。お疲れ様でした :)

-------- 別件(重要)
Haloテンプレートはダークモードに対応しています。内緒さんの場合、背景色を変更してしまったためにダークモード利用者にはテキストが読めません。

https://blog-imgs-136.fc2.com/v/a/n/vanillaice000/sc_2020_2_17.png

/* darkmode
で検索するとスタイルシートに2箇所ありますので、ガイダンスに従って該当を全て削除するか、
--color-base:
で検索し、2箇所あるうちの2箇所目を1箇所目と同じカラーコードに変更するか

いずれかの対処をおすすめします。ダークモード利用者は少なくありませんので、ご一考くださいね。
(ダークモード適用状態の目視確認が難しい、という場合はダークモード非対応にした方が良いと思います)

To Mimizkさん

こんばんは ('0')/

お願いなんですが、CSSというのはhtmlと深く結びついているため、CSSのチェックだけで判断することはできません。
なので、実際の様子を確認できるサンプルページのURLが必要です。でないと私が全てに該当するクラスが記されているページをひとつひとつ探すことになって労力が大きすぎます ^^;
目視できるURLの提示あるいは、チェックしたい全CSSを利用したサンプルページなどをご用意頂けないでしょうか。

可能性としては
・htmlの書き方が間違っているかもしれない
・効いていないと思っているだけかもしれない

こういった可能性もあります。特にコメントで頂いた内容を拝見すると、単位が em や px ではなく rem なので、もしかするとここで勘違いがあるのかもしれないですし、とにかく見てみないことにはわかりません。
お手数ですがよろしくお願いします。

-----
とりあえずスタイルシートのみを拝見するとクリティカルエラーがあります。

/* ▼親子カテゴリ (折りたたみ) ▼ *

から

* ▲親子カテゴリ (折りたたみ) ▲ */

の間です(それぞれの行含む)
この形だと何を目的としているのかちょっとわからないのでなんとも言えませんが、ともかくこの間にもコメントアウトが入っており、コメントアウトは入れ子できません。
もしかしたら
/* ▼親子カテゴリ (折りたたみ) ▼ */
と
/* ▲親子カテゴリ (折りたたみ) ▲ */
を意図したのかもしれないですし、それとも他の意図があるのか、ご本人にしかわかりませんので、一度チェックしてください。他にも気になる点はいくつかあるんですがエラーというわけではないので次回に少し触れますね。

管理人のみ閲覧できます

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

To vanillaice (Akira)さん

失礼致しました、さっそくサンプルページを投稿しました。

サンプルページ①　　http://diffuseness.blog91.fc2.com/blog-entry-960.html
サンプルページ②　　http://diffuseness.blog91.fc2.com/blog-entry-961.html

記事の先頭が文字であるか画像であるかによって使い分けている class 指定があるため、2つ投稿しました。


また、最初の書き込みで特に相談した class の問題（p-p 要素間の指定が効かないこと）は、そのお返事において Akira 様から指摘のあった、カテゴリの記述を削除したところ、どうやら改善して効くようになったようです！ 件の 親子カテゴリ 記述というのは、以前使っていたテンプレートで一緒に使っていたもので、忘れてしまうのはもったいないから残しておくつもりでああいった状態にしてありました。もう使わないので･･･さっぱり削除しました。

To Mimizkさん

サンプルの作成、お疲れ様です。お手数おかけして申し訳ないです。
サンプルページ② の .margin_start_pic が効いていないのはセレクタの記述ミスです。

×
.inner_contents .margin_start_pic

✔
.inner-contents .margin_start_pic

-----
ちょっと気になるのは、

・ margin調整をrem単位で行っていること
・ 一文字クラスがあること
・ 大文字クラスがあること

です。一文字と大文字については禁止ではないにしろ、あまり利用しない方が良いと思います (∵`)
理由を一応挙げると、クラス名の大文字と小文字は区別されるので、.A と .a は別のクラスとして認識されます。けれども一般的「文字列検索」ではこの区別をしないのが通常なので、メンテナンス面であまり良くはない。
そして一文字だけのクラスは、例えば
.A
で検索すると
.A
.area
.anchor
.alternate
など全部ヒットしてしまうのでメンテナンス性はかなり低いと思います。
ただ、個人の管理なので重たく考える必要は無いです(プロジェクトであれば書き直し要求されるかもしれませんが)
なので「今後は」大文字利用と一文字のみクラスを避ける、という感じで良いと思います。

rem単位でのmargin調整については、remというのは相対的な絶対指定、と言えば良いんでしょうか。remはHaloのデフォルトでは
1rem = 10px
としてありますが、仮に例えば全体の文字サイズを一括で変更しようと思えば
1re = 11px
1rem = 12px
など基準が変わってしまうこともあるわけです。そうなると余白が全然変わってしまいますので、できればem(line-heightを含まない文字の高さ)かpx(絶対単位)をおすすめします :)

----- 追記
一つ伝え忘れがありました。

font-family: Osaka ;;
というのが点在していますので

font-family: Osaka, monospace;

に修正を(セミコロンの重複と余分なスペースの削除、そしてOsakaフォントがバンドルされていないデバイス向けに総称ファミリーも入れた方が良いです)

* 2020.2.20
line-heightを含まない
を
line-heightを含む
と書いているのに気づいたので修正しました。

To ダークモードの件 内緒さん(完了のご報告)

こんにちは ('0')/
ダークモードの削除を確認できました。お疲れ様でした :)

To vanillaice (Akira)さん

指摘された部分を修正したところ、先頭に画像を持ってきた場合の margin も効き始めたようです！ こんな凡ミスだったとは･･･ 長いこともやもやしていたのが晴れました、ありがとうございます。

さて、いくつか追加の質問があります。

まず、class「margin_last」だけは未だ効いていない様子です。正直この部分の空白をこのような手法で指定するのもあんまりまともな感じはしないのですが･･･。

次に、rem について。今は全部 em に変えてみました。これまでの数値のまま em に変えたので、当然現在はちょっと私の意図する感じではなくなっていますが、それはおいおい調整します。ところで、rem を使ったのは、過去の私が「おおこれは rem の方が都合がよさそうだ」と考えたから ･･･だと私は信じてやりたいのですが、なにぶんきちんと学ぶことをしていないので、ぱらぱらーっと見てその時はきっとそう考えたのだと思います。
私が em と rem の機微について正確な理解をしているのかというと、決してしていないだろうと思います。過去の自分の理解と決断を思い出すことはできませんが、先ほど軽く確認した限り、やっぱり rem を選んでしまいそうな感じがします。

特に、私は画像を貼付するにあたって、現在は必ず grid container を使っています。画像が2枚、3枚と連続するような場合は、grid container がいくつか入れ子になっており、「em だと入れ子になるたび親要素を参照するらしいぞ」とか、おそらくそんなことを考慮して rem を選んだ ･･･ような気がします。きっと。

私としては、（特に文字を含む）要素と要素の間の距離であれば、文字の大きさに応じて決めておきたいなと、それが第一印象です。そして、それはブログの設定で基本となる通常フォント「あ」を基準に、行間でも、段落間距離でも、見出し文字の大きさでも、決めておきたいという感覚です。
こういう考えのためには、本来 em を選ぶべきだったのでしょうか。それとも、rem を選ぶ意義はあるのでしょうか。


********************


実は質問をするために久しぶりにこちらを訪れて、アップデートの文字を初めて見ました。一度カスタマイズを始めてしまうと、新たなアップデートがあった場合にかなり気後れしますね･･･。でも、やった方がよいのでしょうね。かなり気合が必要です。

To Mimizkさん

こんばんは ('0')/

http://diffuseness.blog91.fc2.com/blog-entry-960.html
の一番下のサンプル「/* 記事最後の段落 */」で間違いないでしょうか。

この部位についてはhtmlが

<p class="margin_normal margin_last">

と、2つのクラスが指定されています。
.margin_normal {2em auto 0rem}
で、
.margin_last {margin-bottom: 30em}

となっていますよね。そしてbottomについては相反している指定内容です。
記述順は _normal の方が _last よりも後になっていますので、_last のbottomへの30emが _normal のbottomへの0emに上書きされているので効いていません。
スタイルシートには「優先度」というのがあり、後に記した内容が先に記した内容を上書きします。バッティングしている場合は後の方が優先になる、ということです。

結果として、記述順を入れ替えれば済むことなのか、それとも新規でクラスを作るべきなのか、あるいは削除するのか、等についてはMimizkさんにしか実際の希望はわからないので、原因のみお伝えする、ということでお願いします。

---------
emとremの違いについては記事を書きましたのでご覧ください。
https://vanillaice000.blog.fc2.com/blog-entry-1104.html

----------
アップデートはできる限り行って頂いた方が良いです。特にMimizkさんは未だSSL化をしておられませんので、非常にもったいないことです (∵`)
現在httpスキームのサイト(SSL非対応)が検索上位に上がることはまずありませんので、FC2による強制SSL化に先んじて行った方が良いと思います。
あとはwebの技術は刻一刻と進化していますので、より合理的・効率的な内容に変わっていたり、ブラウザやOSのアップデート・アップグレードによって生じたグリッチ潰しなども含まれます。

アップデート時のカスタマイズ再適用については、個人でカスタマイズした内容はコメントアウトを上手く利用してコピペするだけ、という状態にしておくこと、書き換えた部位にはコメントを付けておく、など日頃の対策が必要かもしれません。

To vanillaice (Akira)さん

はわわ 記事を1本書いてまでもらって･･･ ありがとうございます。

読んだ結果、ひとまず現在は rem で余白管理をしてみることにしました。入れ子をよく使っていること、px 指定はどうにもそぐわないと感じるので引き続き相対的な指定を続けたいこと、そして、たしかに rem で余白指定することには rem が本来的に持つうまみを無視するような一面があるものの、ガスや水道の元栓みたいに管理できるよう意図して class 指定を使うようになったのだから、そこは相殺できるだろうという気持ちで、ひとまず rem に戻してみました。
もしこれが、Akira 様に教えを請い始める以前のように、いちいち投稿本文中の style 直書きで余白を指定していたら、簡単に結論を出すことはできないばかりか、おそらく Akira 様の助言通りに em 指定へ変えたと思います。ところが現在はおかげさまで、必要な組み合わせの分だけ class を設定しておき、文章の接続状況に応じた class を忍ばせて記事を書いています。今後、ルートフォントを変更することがあり、結果として余白の大きさにも都合の悪さを感じることがあっても、せいぜい 10 や 20 の余白指定 class にも手を加えてやりさえすればよいのです。こう考えることができるようになったのも Akira 様のおかげでした。本当にありがとうございます。

class「margin_last（/* 記事最後の段落 */）」が効かない件も修正できました。優先と重複が問題とのことで、とりあえず、類似 class の書き方を全て margin-top だけに書き換えました。こうすれば、下部 margin は無指定となり、「margin_last（/* 記事最後の段落 */）」が素直に効きます。
従来の指定方法は「margin: OO em auto XX em;」でしたが、これは、純正スタイルシートの p 要素や h 要素の書き方を踏襲していました。素直に余白だけ指定する書き方に変えました。
現在は「margin_last（/* 記事最後の段落 */）」だけを margin-bottom 指定し、その他は全て margin-top 指定しています。


******

過去の記事を class 指定に修正して投稿するのも、あんまり進んでいませんが、アップデートは推してやってみようと思います。「アクセスを稼ごう」とは思わないのですが、昨今のインターネットは検索結果上位10件全てゴミサイトというのも珍しくない状況であり、そのような努力を怠ると結果的に求める人に届きません。記事を投稿している意味もなくなってしまいます。インターネット老人めいて嫌気がさしますが、10年くらい前の状況に戻ってほしいと願っています･･･。

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

こんばんは ('0')/

Mimizkさんの場合はスタイルシートで管理されていますので、remでもさして問題ないと思います。おっしゃるとおりこれが記事内にベタ打ちしてある、ということだと話は違ってきます。

SSLについて、現代では良い記事なのかためになるのか云々よりも、まずとにかくセキュリティが第一なんだ、という理念になっています。例え最高の記事内容だとしてもセキュリティ面に不安のあるページであれば上位にはしない、という方針ですね。そしてそれは誤った政策ではないと思います。
FC2は無償でSSLを提供してくれているのですから、使わなければ損です(笑)

検索アルゴリズムも日々進化していて、昔だと「滞在時間が短い = 内容が薄いサイト」みたいな感じでしたが、最近は「滞在時間が短い = 最短で知りたい答えにたどり着けた有用なサイト」というパターンもある、ということでそんなアルゴリズムも考えられているようですよ。今ちょうどいろんな過渡期(SSL, モバイルファースト)にあって、ある意味「一度仕切り直す」ぐらいの大きな変革であるように思います :)

To vanillaice (Akira)さん

追加になってしまって申し訳ありません。やる気になって、最新バージョンのテンプレートをダウンロードし、自分の設定を書き写しておったのですが、スタイルシートではなく HTML の方で判断の難しい箇所が見つかりました。


<!--not_permanent_area--><!--not_edit_area--><!--not_titlelist_area-->
<!-- 汎用ページナビ -->
<div id=pager>
<ol id="pager-list"></ol>
</div>
<!-- 汎用ページナビここまで -->
<!--/not_titlelist_area--><!--/not_edit_area--><!--/not_permanent_area-->


･･･この、「いじってよいところじゃないよ」という記述は、以前はあったでしょうか？

旧版にもあったのに、私が削除してしまった可能性もあります。いずれにせよ、私は旧版では、汎用ページナビ・個別記事ページナビ・全記事リストページナビ の html 記述を、そっくり上位へ切り取って移動させ、実際の表示で記事本文の直後にページナビが表示されるように変更しておりました。

同じことを、新板でもやって大丈夫でしょうか？

（そもそも私には「おそらく個別ページナビだと思われるナビ」と「おそらく全記事ページナビと思われるナビ」が見えていて、そうすると「表示されてなさそうな、おそらく汎用ページナビ」はなんなのだろうか、という疑問があったりします･･･）

https://i.imgur.com/bSj81Yk.jpg

To Mimizkさん

こんにちは ('0')/

以前のバージョンでもコメントはありました。

汎用ページナビ --- いくつかのページ種で利用されるもの, トップページ、カテゴリ一覧、タグ一覧
個別記事ページナビ --- 個別記事で利用されるもの, キャプチャのオレンジ色の文字のもの2つ(前後ページとカテゴリ間)
全記事リストページナビ --- 全記事一覧(index)で利用されるもの

です。注意点としては個別記事のページナビは閲覧者による任意スクロールが発生するまでサムネイルの取得を行いませんので、above the fold(ファーストビュー, スクロールせずに画面内に収まっている部分)内に掲載すると空っぽの状態になります(リンクテキストは表記されています)
なので移動場所によっては難あり、上の方すぎるとあまり良くない、という感じです。

管理人のみ閲覧できます

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

To TOCの件 内緒さん

こんにちは ('0')/

Haloの scope は .main-body ではなく #postscript なので、修正してファイルを再度アップロードしてください。
その際、元のファイルとは別のファイル名称をつけるようにして、html内に記すファイルURLも書き換えてくださいね。

管理人のみ閲覧できます

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

To TOCの件(完了のご報告) 内緒さん

こんばんは ('0')/
修正を確認できました。お疲れ様でした :)

トップページの記事表示数

こんにちは。
ブログカードの方でもお世話になりました。

FC2 ブログの基本的な使用方法の範疇だったら誠に申し訳ないのですが･･･ ブログのトップページに表示される最新記事タイル表示の本数を変更したいです。これは CSS 変更で行うという理解で合っているでしょうか？

私のブログを確認すると、現在のトップページには25の記事がタイル表示されています。
この25という数ですが、タイル表示が2列の場合でも3列の場合でも、最終段はタイルが欠けた状態になります。
この見た目は、記事がもうそれ以上ないかのような印象をあたえるので、微妙だなと思っていました。しかしブログの表示幅は訪問した人の閲覧状況に依存するのでどうしようもないかなとも考えていました。
ところが昨日、「2と3（と1）の公約数にすればいいじゃん」と気づきました。

それで昨日のうちに、FC2 ブログの 環境設定 から指定できる記事表示数は全て、カテゴリ別にせよ月別にせよ、「12」に変更しました。ねらい通り、横幅を変えて列の数が変化しても、必ずタイルがぴったり表示されるようになりました。
最新記事一覧 ももちろん12にしたのですが、これだけ変化がみられませんでした。現在も25本の記事が表示されています。
これはどのような操作をすれば変えられるでしょうか？

To Mimizkさん

Mimizkさん、はじめまして。

Mimizkさんの仰る「最新記事一覧 ももちろん12にしたのですが、」とのことですが……
環境設定 → ブログの設定 → 記事の設定の一番上の「記事(PC ページ別)」の設定で変更出来るかと、単純に思います。
私の場合はそのようにしております ＾＾

それともそれでは、私がMimizkさんのご希望を解釈間違いしているようでしたらご容赦ください。

To ぼっちんさん

こんにちは。

「私の場合はそのようにしております＾＾」とのことですが、ぼっちんさんも Halo テンプレートをお使いになっていて、当該操作でトップページの表示件数を変えることができる状況にある、ということでしょうか。
私が Halo をカスタマイズするうちに、変えてはいけない記述を変更してしまっている可能性の方が高いような気がしています。それで、断りおきをしてうえで今回の質問をしました。

現在こういう状況です。　>https://bit.ly/3ixKBsZ
「全て変更した」と書いたとおり、全て変更してあります。その中には「記事（PC ページ別）」も含まれています。
私が Halo 以前に使っていた様々なテンプレートも、やはりこの操作で変えられないということはなかったので、トップページだけは CSS によって固定されているのかな、と考えた次第です。

To Mimizkさん, ぼっちんさん

ぼっちんさん、今回もご協力ありがとうございます :)

掲載数の変更はFC2ブログの個人設定を踏襲するようになっていますので、テンプレート側での操作は不可です。
なので、きちんと個人設定ページで設定し、更新をしっかりと押しており、それでも変更されないという場合はFC2システム側の問題なので運営に問い合わせを行ってください。

確認しますと2ページ目以降はちゃんと12件表示になっているので、最初のページのみですよね。
これまでも「最初の1ページ目だけ掲載数がおかしい」という不具合が何度かありました。いずれも「記事固定機能を利用したときに」という条件つきだったので今回とはまた別の症状ではあります。

https://form1ssl.fc2.com/form/?id=15028

① キャッシュをクリアした状態で再度設定を行ってみる
↓ やはりだめなら問い合わせ
② 自身が行った作業順序を伝える
③ 利用中のOSとブラウザを伝える + キャッシュクリアを既に行ったことも伝える

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

これやっぱFC2のシステム不具合だと思います。ページ送りもおかしいですものね。もしかすると同じ症状が出ている方がいるかもです。
(私の環境では起こりませんでした, 念の為一情報としてお伝えしておきます)

あと、一旦別のテンプレートの変更し、再度Haloに変更、という原始的な方法をやってみても良いかもしれません。詳しい説明は省きますが、ある特定の症状が出た時にFC2ブログでは意外と有効。

To Mimizkさん

最初に「私がMimizkさんのご希望を解釈間違いしているようでしたらご容赦ください。」とお伝えしておりますのに、何やら随分攻撃的なお返事で唖然としてしまいました。

私が現在利用中のテンプレートは「OATH」ですが、それは私のリンクURLを辿って覗いて下さったらお分かりのことと思いますのでツッコミは無用かと思いますが……

また「Halo」のデフォルトにてプレビューなさったら「トップページだけは CSS によって固定されているのかな」のお考えは誤りと確認することが出来ますよ。

う～ん、すみません、Mimizkさんに関わることは辞退させて戴きます。


Akiraちゃん
コメント欄を汚してしまって申し訳ございません、お詫び致します m(_ _)m
あっ 被ってしまいました（笑）

To ぼっちんさん

いえいえとんでもないです。いつもご協力感謝します。
文字での会話は表情や声のトーンなどがわからないので誤解など生じることもありますね ^^;
Mimizkさんは普通に確認として聞き返しただけじゃないかしら。あっ、ところでぼっちんさん今年もよろしくー ( ﾟДﾟ)ﾉ

To vanillaice (Akira)さん

「一時的に別のテンプレートに変更してみる」を試してみたのですが、やはりそちらでも、トップページの表示数は25件でした。
キャッシュもクリアしてみましたが、変化がありませんでした。
やはりこれは公式側の問題のように感じられますね。
さっそく FC2 運営に問い合わせてみることにします。

ちなみにひとつだけ確認させていただきたいのですが、「私の環境では起こりませんでした」というのは、“Akira さんが Halo テンプレートを適用させて Akira さんのブログを観察した場合” という意味で合っているでしょうか。
私の現在のブログを Akira さんの環境で見た場合、やはり25件表示される状態とみてよいですよね？
（私の “閲覧環境” だけがおかしくて、他の人は私のブログのトップページを正しく12件として閲覧できているおそれに対する確認）

管理人のみ閲覧できます

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

To Mimizkさん

こんばんは ('0')/

> Halo テンプレートを適用させて Akira さんのブログを観察した場合” という意味で合っているでしょうか〜

はい。そうです。テスト専用のブログをひとつ持っていますのでそちらで確認しました。
以下がスクリーンショットです。総記事数が336です。ぼかしで見づらいかもしれませんが件数はわかると思います。

15件表示にしたとき
336÷15=22.4
22ページ目まで15件表示で、23ページ目が6件表示

1ページ目
https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_halo_15.png

最終23ページ目
https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_halo_15_last.png

-----
12件表示にしたとき
336÷12=28
全ページ12件表示

1ページ目
https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_halo_12.png

最終28ページ目
https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_halo_12_last.png

-----
> やはり25件表示される状態とみてよいですよね？〜

はい。最初のページ(FC2ブログ独自で言うところの index_area )のみ25件であとは12件です。そのため、ページ送りもおかしくなっています。
今ふと思いましたが、ページ送りのカスタマイズをされていませんでしょうか。もしかするとページ送りが原因になっているのかもしれません。ページ送り部位のJSは独自変数が含まれるため、製作者でも現状のJSコードがどうなっているのか確認ができません(変数がサーバーサイドで処理されて別の文字列に変換されるため)

一度Haloを新規でDLして頂いて、そちらで確認願えないでしょうか。

----- 追記


2022/02/24 (Thu) にページ送りに関するご質問されていますが、結果についてのご報告を頂いていないようです。
この際に何か問題が生じた可能性はあります。
https://vanillaice000.blog.fc2.com/blog-entry-1014.html#comment11214

いずれにしろデフォルトのHaloで一度目視確認を行ってください。デフォルトで問題が無ければ恐らくカスタマイズ時に何かしらのミスがありそれが影響しているのだと思います。
(この場合は面倒ではありますがデフォルトの方へ改めてご自身のカスタマイズを加える、という形をおすすめします)

To vanillaice (Akira)さん

新たに Halo をダウンロードし、まっさらな状態で適用してみました。
トップページは25件のままでした。　>https://bit.ly/3ZmMdXj
改善しなかったという意味では残念で、自分が CSS をめちゃくちゃにしたわけではないという意味ではよかった、複雑な心境です･･･。


>ページ送りに関するご質問されていますが、結果についてのご報告を頂いていない

勝手にフェードアウトしてしまっていたとは･･･。たいへん失礼しました。
しかも、内容を確認してみると、おそらくこの内容を実際には実行せずうやむやにしたのだろうと思います（「ページナビ」という用語を理解できていないのですが、これは「ページ送り」と同じものですか？）。

私は、Akira さんがここ数日のお返事で「ページ送り」と表現なさっている部分の位置を変えたいなと思っています。
2022/2/24 に質問していた内容も、おそらくこのことを言っているのだと思われます。
ページ送りは、並べて表示された記事を眺め終えた周辺にあってほしいと、主観的に感じていました。　>https://bit.ly/3XrHEct

現在の「ページ送り」は、異常のあるトップページでは「1⃣2⃣」の2ページだけしか表示されておらず、本来の利便性の1割くらいしかありません。
せめて「1⃣2⃣3⃣4⃣5⃣」くらい表示されていてほしいものです。
こちらが Akira さんが指摘されていた「ページ送りの異常」ですよね。

昨日づけで FC2 運営に問い合わせをしておきましたので、進展あり次第またご報告します。

To vanillaice (Akira)さん

FC2 運営からお返事があり、「環境設定＞ブログの設定＞拡張表示設定の1ページ内の表示が【日付単位】になっていると不具合を起こす場合がある」「【記事単位】に変更すると改善する」とのことでした。
さっそく試してみたところ、ちゃんと表示されています！

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

こんばんは ('0')/

問い合わせ結果のお知らせありがとうございます。
そういえばありました。【日付単位】という設定。
備忘録に記した記憶があります ^^;
日付単位で1ページ内に最大30件まで表示でき、31日ある月はどうするねん？ と思った記憶もあります(笑)

本件は私も完全に失念していましたので、近いうちに記事にしようかと思います。
現時点で「表示件数」「ページ送り」ともに正しく動作しているのを確認できました。お疲れ様でした :)

*ページ送り = ページネーション, ページナビ, ページング
など呼び方が統一されていませんが、ページを繰るためのもの、という同じものを指します。

管理人のみ閲覧できます

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