コメント一覧のツールボタン形状が崩れている方へ

コメント一覧のツールボタン形状が崩れている方へ

割と重要なお知らせ
2022/09/16
0
vanillaice (Akira)
vanillaice (Akira)
トラブル対処初心者向け

弊テンプレートをご利用の方へ向けての記事です。

私が最近提供させて頂いているテンプレートでは、コメント一覧にツールボタンを設けているものが多いです。

こういうのが受信コメント内容の下部分にくっついてます。これは私が独自につけているもので、各々「コメント編集(パスワード設定されている場合)」「返信(タイトルに『To xxxさん』と記載しつつコメントフォームへ移動)」「コメント一覧最上部へ移動」「コメントフォームへ移動」などの動作が割り当てられています。

この部位の見た目があきらかに壊れている という方へ向けた記事です。大抵の場合以下のような感じです。

装飾をつけたことで生じるレイアウト崩れ

コメントの独自ツールはどちらかというと管理人のためではなく訪問者のためのものです。管理人は管理画面から返信ができますが、訪問者は閲覧ページ上でコメントを行うため、その動作・導線の補助的役割です。

管理人が 管理画面から文字装飾を利用してコメントを送信した場合 に起こるレイアウト崩れだったのですが、2019/07/28 に全て修正済みです。

【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

なので現時点で崩れているという方は以下のいずれかです。
  1. 2019年7月28日以降 テンプレートのアップデートをしていない
  2. カスタマイズ時にhtml内容にミスが生じている

1に該当する方はテンプレートの再DLをおすすめします。2に該当する方は、追加または変更したhtml内容にミスがある という状態なので、確認をお願いします。多くの場合は 全角スペースによるインデント です。そしてさらに head要素内に記載したもの に起因していることが多いですね。headに記載する代表的なものは

  • Google site verification --- Search Consoleのサイト所有権確認コード
  • Google analytics --- Googleのアクセス解析
  • Twitterカード
  • その他第三サービスのscriptなど

これらを記載する際に インデントを半角スペースではなく全角スペースで入力してしまった というミスがもうホントにホントにホントにホントに全然減らないのです(笑)
で、このhead内でのhtmlエラーというのはものすごく気づきにくいんです。気付けるとすれば「Search Console(通称 サチコ)から異常を知らせるメールがやたらと届く」とか、同じくサチコで「クロール済ページが異常に少ない」など。サチコでこういった現象が出ている場合は 重大なエラーが出ている ということを知ってください。直ちに修正すべき問題です。

head情報に何かを追加する際は細心の注意を

head情報に何かを追加する際は細心の注意を

head element (へっど えれめんと) 日本ではしばしば ヘッダ情報 という呼称が使われます。 htmlの中のこの部位はページを構成する基本的な文書の種類ですとか、htmlをきちんとhtmlとして正しく伝えるための情報を記しますのでとても重要です。 一般的にヘッダ情報内の要素は「目に見えるもの」「可視化されるもの」ではありませんので、人間のためというよりもむしろコンピュータのためのものとも言えるかと思います。 が...

テンプレートをカスタマイズしたら必ずバリデートを行いましょう

テンプレートをカスタマイズしたら必ずバリデートを行いましょう

お馴染みの啓蒙・注意喚起記事でございます (´・ω・`) 何度も同じ内容をUPしていますので既読の方はスルーで(笑)...

ただこれも管理人がサチコに登録していなければ知り得ないものです。

おかしいと思ったら
ご利用中テンプレートの名称を確認し、当ブログ内の該当テンプレート専用記事で、サンプルページと比較をする。

サンプルとご自身のページとを比較して頂いて、サンプルと相違があれば何かしらの問題がある「かもしれない」と察知できます。

The other way round

The other way round 配布中テンプレートカテゴリ

配布中テンプレートの専用記事探しはこちら

最後に、なんというかいよいよ「初心者さんのご利用を踏まえ、インデント無しhtml(及びスタイルシート)で提供」を本気で考えざるを得ない状況のような気がします。理由はやはり html, スタイルシートでの全角スペースの不正使用 なんだけども。これはですねーーー、ホント日本の方へのご提供のみで発生する事態で、個人的にも「わぁ、こんなことあるのか」と(笑)
海外向け(英語圏向け)の畑からのこのこやって来た身なので、ものすごく大きな気付きであり大きな問題でもある(笑)
英語圏では「全角スペース」という概念自体がほとんど認識されていないもので、結果そういったミスも起こり得ないというか。

ただ、私のテンプレートの場合は初心者の方はもちろんのこと、htmlに非常に詳しい方・精通している方にもご利用頂いている状況なので、インデントを無くすというのは暴挙のようにも思えるんです。こうして折を見て「全角ダメ!絶対!」の記事を重ねていくか、「テンプレート内インデント排除」を実行するか悩むところです。

マジでどうしようか… ( ̄∀ ̄;)
これだけユーザーカスタマイズによるエラーが多いとなると、うーん、どうしたものか(汗)
といってもやはり個人的にはカスみたいなもんですが「ソースコードはできるだけ美しく、できるだけ整然と」の美学を持っているものでできればやりたくない ^^;

またしばし様子を見て最終決定しようかな、と今は考えています (o'д`o)ゝ

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)