システム・仕様の面で少し注意が必要かなぁ、と思われる件のまとめです。
管理画面からのコメント返信
FC2ブログでは受信したコメントに返信を行うのに、該当ページ上 または 管理画面上 のいずれかを選べます。で、注意したいのは 管理画面で返信を行う場合 です。
以下がサンプルです。検証は公式テンプレート「white_card_resp」を使用しています。
管理画面から返信を行うとコメント一覧だけでなくプラグインの方にも影響します。これを「ダメ」と感じるか逆に「却って便利」と感じるかは人それぞれですが、テンプレートを白背景から黒背景に変更(またはその逆)した際に文字が太くなるのは良いとして、色指定によって文字の可読性がどうなるか、とそこまで考えている方は稀ではないかと思います。
管理画面で返信を行うと、管理人を識別するために fc2_owner_comment というクラス名が自動で付与されます。このクラス名付与のシステムは公式プラグインの「最新コメント」と連動しており、それ故にプラグイン側の管理人コメントにも同じ装飾が適用される仕組みです。
さらに私のテンプレートではこうなります ↓
なんだか変なことになってますよね。ボタンのデザインが崩れてテキストが表示されています。これは管理画面の返信に > の記号が追加されるために起こります。サンプルの③と④を見て頂くとわかりますが、返信内容の前に記号が付いてますよね。
< と > の記号というのは htmlを構成する重要な記号 でブラケットと言います。このブラケットが エスケープ されずにそのまま記号として書かれた場合、htmlのシステムとして「htmlタグではないか」と誤認識を起こしてしまいます。エスケープというのは > ならばこれをそのまま打つのではなく > のようにマークアップ文字として打つことを言います。誤認識を避けるための処置です。管理画面返信はエスケープを行ってくれません。
私のテンプレートで崩れている部位は「簡単返信」とでも言えば良いでしょうか。返信したいお相手のコメントの下にあるreplyボタンをクリックすると、自動でコメントフォームまでスクロールを行い、と同時にコメントフォームのタイトル欄に「To xxxさん」と記入されます。これはJSで行っていますが、この管理画面のシステムと簡単返信の動作が衝突してしまうんですね。
で、方針なんですけども、コメント返信は「どんな内容の記事に」書かれたのか確認しながら行うのが当たり前だと思っていますし、管理人が楽をするよりも訪問者に楽をして頂く方が有益だと思いますし、管理人コメントに予め色を付けたり太くしたりといった装飾はテンプレートのCSS側で簡単にできるもんですから、修正はしません (ごめんなさい ^^;)
管理画面からの返信を有効にしたい方は該当JSを削除してもらう形で今後もお願いしたいと思います。その代り簡単返信の機能は失われます。
gif. png拡張子のサムネイル化
便宜上アニメーションgifに焦点を絞って説明します。png画像もほぼ同じことが当てはまります。
FC2ブログテンプレートのトップページなどで表示される「サムネイル画像」なんですが、画像表示の際に 原画 をそのまま掲載する場合と サムネイル化画像 を掲載する場合とがあります。これはテンプレートの仕様によります。
原画というのはオリジナル画像をそっくりそのまま表示させます。サムネイル化画像というのは、オリジナルとは別でFC2ブログが自動で生成してくれるサムネイル特化画像のことです。容量の削減 と サイズ縮小 と 縦横サイズ整形 が行われています。
オリジナルかそうでないかが一番わかりやすいのが アニメーションgif です。サムネイル化されたものはアニメーションが取り除かれます(拡張子はgifのままです)
サムネイル化された方はチカチカと動いていないですよね。で、まぁアニメーションgifは人によっては「鬱陶しい」と感じる方もいらっしゃいますので、動きが止まるのは仕方がないとして。問題は オリジナルよりもサムネイル化の方が容量が増えてしまう場合が多い 点です。
これ確かFC2ブロガーの mochiさん も同じことを指摘されてたと思いますのでmochiさんこの記事に気づかれましたらURLをください(笑)
業務連絡。すみません ^^;
* mochiさんの記事はコチラ 
サムネイル表示させる時の事を考えるとアイキャッチ画像はPNGよりJPEG形式の方が良さそう。
お、大きければ良いってものではないよな。 サムネイル画像のワナ？ 先日、サムネイル画像表示についていろいろ試している時に気づいたことなのですが、PNG形式のアイキャッチ画像をFC2サムネイル画像変数を使って表示した時に、その画像データ容量が元画像よりも大きくなってしまうことがあるようです。 リサイズAPIやFC2変数を利用してサムネイル画像表示についていろいろ試してみた。 ｜ 富士宮で貯蓄と資産運用とっと...
サムネイル化画像の利点というのは一番は 容量の削減 なんですよね。今はスピード優先時代ですからページスピードに大きく影響する「画像の容量」というのはできるだけ小さくしておきたいところです。でも場合によっては逆に増えてしまう(笑)
サンプル画像のオリジナルは 9.22KB です。サムネイル化されると 107.24KB 10倍以上に膨れ上がってます。
で、根本的にアニメーションgifをサムネイル対象に据えない方が良いと思います。トップページで画像がチラチラ動いていると気が散りますしね。サムネイル対象となる条件を念の為挙げておきます。
- 「本文」に掲載されている一番最初の画像(「追記」画像はページ内で一番最初であっても対象外)
- 「アイキャッチ画像」に指定した画像は本文画像よりも優先される
- ファイル名称に半角カッコが付いているものは対象から外される
- エディターから挿入した絵文字は対象外
本文最初の画像がアニメgifになりそうな時はjpg静止画をアイキャッチに指定するなどして避けた方が良いかもしれません。pngのサムネイル化も同じ特徴がありますので、ズバリ言えば サムネイル対象画像はjpgで ということになりますかね。
余談ですがYahoo!からのお引越し組さん、絵文字がサムネイルになってしまっている方が多いですね。これはFC2のシステム「本文最初の画像」に該当するからです。FC2ブログエディターから挿入する絵文字も画像なんですが、サムネイルに選出されないように処理されています。でもYahoo!の場合はその処理が効きませんので… お気の毒なことです (´・ω・｀)
コメント欄にhtmlを記載した場合
これはバリデート関連ですから気にされない方はスルーで。通常はコメント欄にhtmlやJSなどのソースコードが記載されることは稀ですから気にする必要はありません。がしかし私のようなブログでは結構問題が （￣∀￣；）
私の例で説明しますと、多くの方がカスマイズの相談に訪れます。なにか問題がある場合にはコメント欄にhtmlを書いてもらうことになります。コメント欄に書かれたhtmlがレンダリングにより実体化されることはありませんが、バリデート対象にはなるんですね。なので書かれたソースコードが間違っていると「エラー」として計上されてしまうんです。でまぁ、助けを求めてお越しになっているのだから大抵間違ってますわね。ちなみに私はこの件を気にしていませんのでどうぞお気になさらず(笑)
最近テンプレートのユーザーさんで積極的にバリデートを行う方も増えてきたようで喜ばしいことです。ただ例えば私のページを参考にしようというつもりでバリデートされますと、場合によってはすごい数のエラーが出てくることも。また、コメント欄で用いられる「コメント装飾用ツールバー」はhtml5対応ではありませんので廃止要素の <font> などが出力されてしまいます。これもエラー対象ですね。
要はページ全体のバリデートは第三者のコメントも影響してしまいますので、純粋に自身が書いた内容にミスが無いかどうか確認をしたい場合には公開されているページではなく プレビュー画面 で行うと良いでしょう。コメント欄の内容が出てきませんので記事内容に集中できます(ただしプラグインは対象になります)
プレビューでは「記事更新日」「記事編集日」の正しい値を取得できませんので、日付に関連するエラーは出ます。
Bad value --T18:00:24+09:00 for attribute datetime on element time: The literal did not satisfy the time-datetime format.
というのがその指摘で、html新要素のtime要素が使用されている場合に発生します。これは記事を保存すれば消えるエラーですから気にしなくて大丈夫です。
FC2検索バー
ページ上部に鎮座まします検索バー
「サイト内検索」が右の方にありますね。検索結果は 別タブ表示 です。まずこれどうなんだ (´・ω・｀)
私個人としては外部サイト遷移の場合は「別タブ」同サイト遷移の場合は「同タブ」にしています。で、一応検索もできるようになっているとはいえ、広告の一環 です。それ故にテンプレートがこの検索バーを隠してしまうなど、何かしらの干渉が見られる場合は共有審査を通過しません。いや。審査担当者による(笑)
比較的厳しい審査をされる方は通過させないようです。通過している場合は審査が緩いかちゃんと動作検証していない担当者ではないかと思います(スクロールするとナビが出てきて隠れるとか見逃されがち)
審査はなるべく厳正な方が良いですね。
この検索バーの問題点について。検索バーは レスポンシブではない という点。
検索バーが表示されるのはPC版のみなので、スマホ版の場合には自動で非表示になります。FC2ブログの場合 タブレットではPC版で表示 されます。そのタブレットではレスポンシブデザインテンプレートであっても検索バーが右にはみ出してしまいます。
右側にはみ出しによる余白が生じ、スクロールする度に画面が右へ左へと不安定な状態に。これではせっかくのレスポンシブデザインが台無しですね。また、検索バーは上部に固定されると同時にテンプレートのbody部位を下へ押し下げますのでスムーススクロールの頭出しなども狂ってしまいます。というわけで非表示をおすすめします。
検索バーの設定
まとめ
他にも気をつけたい特徴がまだあります。既に記事にしていますのでそちらをご参照ください。
FC2ブログのプロフィール文にhtmlを使わない方が良い理由
環境設定 プロフィール の あなたの紹介文 のことです。全てとは言いませんが、htmlはなるべく使わない方が良い、という理由と仕組みの説明です。...
FC2ブログでコメントトリップを使わない方が良い理由
同じようなキーワードで検索すると既に先人の方が良記事をUPされていますので参考にされると良いと思います。 「なりすまし防止にコメントトリップを導入したいのですが」というお問い合わせがありましたのでお答えします。私の方針としては コメントトリップは利用しない 方向で、カスタマイズについてもFC2ブログ変数を調べて頂きまして、自己責任での導入をお願いします。...
顔文字がレイアウトに悪影響を与えることがあります【FC2ブログ旧投稿画面】
「FC2ブログの旧投稿画面では」という括りつき。 2017年10月現在、FC2ブログで記事を書くには2種類のエディターを選べます。 旧投稿画面 新投稿画面 旧投稿画面(旧エディター)というのは htmlタグを直接受け付けるエディター です。 つまり「htmlエディター」なんですね (´・ω・｀) 一方、新投稿画面の方は htmlを直接は受け付けないエディター。 こういうのを「WYSIWYG(ウィジウィグ)」と言います。...
プロフィール画像に正方形を勧める2つの理由
以前にも一度書いたんですけども。 SNSやブログで利用するプロフィール画像は正方形が最適解 というお話。...
There are no comments yet.