FC2ブログで気をつけた方が良いシステムいろいろ

FC2ブログで気をつけた方が良いシステムいろいろ

カスタマイズ
2019/03/11 11
vanillaice (Akira)
vanillaice (Akira)
初心者向け トラブル対処 FC2 Validation

システム・仕様の面で少し注意が必要かなぁ、と思われる件のまとめです。

管理画面からのコメント返信

FC2ブログでは受信したコメントに返信を行うのに、該当ページ上 または 管理画面上 のいずれかを選べます。で、注意したいのは 管理画面で返信を行う場合 です。

以下がサンプルです。検証は公式テンプレート「white_card_resp」を使用しています。

コメント一覧での様子
公式プラグイン「最新コメント」での様子

管理画面から返信を行うとコメント一覧だけでなくプラグインの方にも影響します。これを「ダメ」と感じるか逆に「却って便利」と感じるかは人それぞれですが、テンプレートを白背景から黒背景に変更(またはその逆)した際に文字が太くなるのは良いとして、色指定によって文字の可読性がどうなるか、とそこまで考えている方は稀ではないかと思います。

管理画面で返信を行うと、管理人を識別するために fc2_owner_comment というクラス名が自動で付与されます。このクラス名付与のシステムは公式プラグインの「最新コメント」と連動しており、それ故にプラグイン側の管理人コメントにも同じ装飾が適用される仕組みです。

さらに私のテンプレートではこうなります ↓

私の製作したテンプレートでの様子

なんだか変なことになってますよね。ボタンのデザインが崩れてテキストが表示されています。これは管理画面の返信に > の記号が追加されるために起こります。サンプルの③と④を見て頂くとわかりますが、返信内容の前に記号が付いてますよね。

<> の記号というのは htmlを構成する重要な記号 でブラケットと言います。このブラケットが エスケープ されずにそのまま記号として書かれた場合、htmlのシステムとして「htmlタグではないか」と誤認識を起こしてしまいます。エスケープというのは > ならばこれをそのまま打つのではなく &gt; のようにマークアップ文字として打つことを言います。誤認識を避けるための処置です。管理画面返信はエスケープを行ってくれません。

私のテンプレートで崩れている部位は「簡単返信」とでも言えば良いでしょうか。返信したいお相手のコメントの下にあるreplyボタンをクリックすると、自動でコメントフォームまでスクロールを行い、と同時にコメントフォームのタイトル欄に「To xxxさん」と記入されます。これはJSで行っていますが、この管理画面のシステムと簡単返信の動作が衝突してしまうんですね。

で、方針なんですけども、コメント返信は「どんな内容の記事に」書かれたのか確認しながら行うのが当たり前だと思っていますし、管理人が楽をするよりも訪問者に楽をして頂く方が有益だと思いますし、管理人コメントに予め色を付けたり太くしたりといった装飾はテンプレートのCSS側で簡単にできるもんですから、修正はしません (ごめんなさい ^^;)

管理画面からの返信を有効にしたい方は該当JSを削除してもらう形で今後もお願いしたいと思います。その代り簡単返信の機能は失われます。

gif. png拡張子のサムネイル化

便宜上アニメーションgifに焦点を絞って説明します。png画像もほぼ同じことが当てはまります。

FC2ブログテンプレートのトップページなどで表示される「サムネイル画像」なんですが、画像表示の際に 原画 をそのまま掲載する場合と サムネイル化画像 を掲載する場合とがあります。これはテンプレートの仕様によります。

原画というのはオリジナル画像をそっくりそのまま表示させます。サムネイル化画像というのは、オリジナルとは別でFC2ブログが自動で生成してくれるサムネイル特化画像のことです。容量の削減サイズ縮小縦横サイズ整形 が行われています。

オリジナルかそうでないかが一番わかりやすいのが アニメーションgif です。サムネイル化されたものはアニメーションが取り除かれます(拡張子はgifのままです)

オリジナル
サムネイル化

サムネイル化された方はチカチカと動いていないですよね。で、まぁアニメーションgifは人によっては「鬱陶しい」と感じる方もいらっしゃいますので、動きが止まるのは仕方がないとして。問題は オリジナルよりもサムネイル化の方が容量が増えてしまう場合が多い 点です。

これ確かFC2ブロガーの mochiさん も同じことを指摘されてたと思いますのでmochiさんこの記事に気づかれましたらURLをください(笑)
業務連絡。すみません ^^;

* mochiさんの記事はコチラ emoji

サムネイル表示させる時の事を考えるとアイキャッチ画像はPNGよりJPEG形式の方が良さそう。

お、大きければ良いってものではないよな。 サムネイル画像のワナ? 先日、サムネイル画像表示についていろいろ試している時に気づいたことなのですが、PNG形式のアイキャッチ画像を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やブログで利用するプロフィール画像は正方形が最適解 というお話。...

 11

There are no comments yet.
mochi
これかな?

こんばんは。Akiraさん。

下記記事でpng形式のサムネイル画像容量について検証しています。
https://mochi1999.blog.fc2.com/blog-entry-1629.html

png形式でも画像アップロード時に横幅・縦幅指定で作成できるサムネイル(ファイル名末尾にsが付くやつ)は画像容量も小さくなっているようなんですよね。
でもFC2サムネイル画像変数用に自動生成されるサムネイル画像だと大きくなっちゃう。どないなっとんねん。(;・∀・)

2019/03/11 (Mon) 23:52
vanillaice (Akira)
Akira
To mochiさん

mochiさん、こんにちは ('0')/

ご協力ありがとうございます。追記しました。
私いつも大ざっぱにしか説明できないので、深く掘り下げてくれるmochiさんやぼっちんさんのような方が居てくれるとすごく助かる(笑)

ところでその「sがつくやつ」なんですけど、これにチェックを入れていると指定サイズと近いサイズの画像のアップロードに失敗することがあると気づきました。私だけ? (∵`)
チェックは今外してますが、指定が400pxになっていたようで。380pxの画像が頻繁にアップロード失敗になるんですよ。
え。私だけ?(笑)

2019/03/12 (Tue) 15:36
mochi
僕のところではアップロード失敗にはなりませんでしたが…

こんばんは。Akiraさん。

記事紹介ありがとうございます。
深く掘り下げることはできるんですが僕の場合説明が下手なので…(;・∀・)
今回のようにAkiraさんの方で補足的な参考記事として取り上げてもらえればと都合よく考えています。ニャハハ(*^▽^*)

「sがつくやつ」試してみました。
元画像よりも大きなサイズを設定してチェックしたとき、元画像のアップロード自体はできているんですが「sがつくやつ」は作られませんでした。(アクセスしてもエラーになる。)

FC2サムネイル画像変数についても元画像サイズとの関係が気になったので確認してみました。
元画像よりもサイズが大きくなるパターンでのFC2サムネイル画像変数では一応画像は自動生成されますが、元画像が拡大されたものが作られるわけではなく、元画像と同じサイズのものが作られるだけでした。
以上。ご報告まで。

2019/03/12 (Tue) 22:19
vanillaice (Akira)
Akira
To mochiさん

mochiさん、こんにちは (●'0'●)/

私だけかー (・ε・)
失敗というか、存在しているように見える(アップロード画面にはあるけどサムネ部分は空白)けどアクセスすると404なんですよね。
そして削除もできないんです(笑)
CDNのキャッシュの関係だろうとは思うんですが、削除できないって何なのさ(笑)
私のブログをスマホで見るとところどころサムネイルが欠けているものがあります。それがそうなってるやつ。
画像の404があると混在コンテンツになるんだけどもう放置してる ^^;

2019/03/13 (Wed) 18:32
mochi
ちょっと時間が経ってしまいましたが…

こんにちは。Akiraさん。

ちょっと時間が経ってしまいましたが画像アップロード不良の件を調べてみているんですが、残念ながら症状再現や原因解明にまでは至っておりません。
ひとまず現時点で分かっていることを報告しておきます。

== 症状確認 ==
●Akiraさんのこのブログでサムネイル画像が表示されていない記事(記事番号445/301/300/299)があることを確認。
●縮小画像として横380pxと横150pxの2種類が指定されていますが、いずれも画像URLにアクセスすると404エラーが返ってきた。
●いずれの元画像も縦横比率は異なっており、ある特定の縦横比率で発生しているというわけではなさそう。


== 調査してみたこと ==
●障害記事番号の元画像をそれぞれ横380pxに縮小したものを用意する。
 幅400px・高さ400pxでサムネイル作成チェックしてアップロード。
 記事445:blog-imgs-102.fc2.com/v/a/n/vanillaice000/arrivalsorryop20.jpg
 記事301:blog-imgs-93.fc2.com/v/a/n/vanillaice000/error-63628_1280th_.jpg
 記事300:blog-imgs-88.fc2.com/v/a/n/vanillaice000/aba97117e2544c81a87fd9b85518cdde.jpg
 記事299:blog-imgs-88.fc2.com/v/a/n/vanillaice000/facebook-260818_1280.jpg
 ⇒縮尺拡大となるため末尾sのサムネイル画像は作成されないが、アップロードした画像自体は問題なく表示される。

●障害記事301元画像error-63628_1280th_.jpgの画像サイズ情報【横1000px・高さ749px】をバイナリエディタで横380px・高さ285pxに書き換えたもの(絵としてはデタラメだが画像としては表示される)を用意する。
 幅400px・高さ400pxでサムネイル作成チェックしてアップロード。
 ⇒縮尺拡大となるため末尾sのサムネイル画像は作成されないが、アップロードした画像自体は問題なく表示される。

●まず障害記事301元画像error-63628_1280th_.jpgを縮小する。
 その画像サイズ情報【横380px・高さ285px】をバイナリエディタで元画像と同じ横1000px・高さ749pxに書き換えたもの(絵としてはデタラメだが画像としては表示される)を用意する。
 幅400px・高さ400pxでサムネイル作成チェックしてアップロード。
 ⇒アップロードした画像ならびに末尾sのサムネイル自体も問題なく表示される。

●障害記事301元画像error-63628_1280th_.jpgの画像サイズ情報【横1000px・高さ749px】をバイナリエディタで横0pxに書き換えたもの(既に画像として表示できない)を用意する。
 幅400px・高さ400pxでサムネイル作成チェックしてアップロード。
 ⇒アップロードした画像にアクセスすると豆腐(□)が表示される。末尾sのサムネイル画像は作成されない。


== 想像… ==
 障害記事において横380pxと横150pxの両縮小画像が表示されないことから、たまたまアップロードに失敗したというには偶然が過ぎると思われ、再現性はあるように考えています。

 障害記事縮小画像ファイルになんらかの異常があり、本来縮尺拡大として無視されるサムネイル作成プログラムが起動するが内部エラーを起こし、画像ファイル実体はサーバー保存されないままファイル名インデックスだけが残ってしまったとか?(ただ前述検証のように画像サイズ情報をいじったぐらいでは同様の症状は起きなかった。)

 今回の障害となっている下記縮小画像ファイルのいずれかをFC2有料ブログ機能のFTPアップロードなどでアクセスできるところに保存してもらえれば、僕の方でアップロードしてみるなど再現検証をしてみたいと思います。
 445----380.jpg(445----150.jpg)
 300----380.jpg(300----150.jpg)
 301----380.jpg(301----150.jpg)
 299----380.jpg(299----150.jpg)

 というかこれらの画像ファイルがスゲー気になるので入手したいです。ネタ的に。ニャハハ(*^▽^*)

2019/03/24 (Sun) 20:46
vanillaice (Akira)
Akira
To mochiさん

mochiさん、こんばんは。

検証してくださったんですね。わー!ありがとうございます (*_ _)
> 画像ファイル実体はサーバー保存されないままファイル名インデックスだけが残ってしまったとか?〜
私もたぶんこれじゃないかとは思ってるんです。

で、mochiさんが障害記事番号を書いてくれたので今気づいたんですが、表示されない画像が前と変わってます(笑)
mochiさんにこの件をお伝えしたときには「829」belong修正と「809」liltingテンプレの380画像は出ていなかったはずなんです。これはもう絶対。覚えてる。でも今は表示されている(笑)
何故ゆえ … ( ̄∀ ̄;)

mochiさんにご指摘頂いたのは比較的古い記事ですよね。私チェックしてなかったので以前の状態がわかりませんが、現時点で出ていないことは確認しました。
どゆこと? ( ̄∀ ̄;)

とりあえず300とか見たら画像無くなってるんですけど。だから何故(笑)
ちょっとアップロードし直してみてまたお知らせします。ごめんなさいね ^^;

2019/03/24 (Sun) 23:58
vanillaice (Akira)
Akira
To mochiさん②

今アップロードしてみました。消失している380の記事番号は「652」と「653」です。
で、ふと思いました。ファイル名のハイフンってあんま良くないんじゃなかったっけ?… と(笑)
結果

https://file.blog.fc2.com/vanillaice000/capture3/capvanish----1000.jpg

652も653もハイフン4連ではアップロードできてない(んですよね?これって)
試しに652を最も安全な記号と言われるアンダースコアに変えてみました。オリジナル画像の編集は一切していません。ハイフン4連だったのをアンダースコアに名称変更しただけ。そしたら画像出た。名称が違うだけで拡張子から何から全く同じ画像なのに。

ハイフン?ってこと? (´・ェ・`)
FC2のアップローダーでハイフン連続は良くないのかも。FTPの方は今の所遭遇したことは無いのだけれど。
割と頻発という感じなので今後は避けるようにします。ただこれが原因かどうかははっきりわかんないなぁ。
ハイフン良くない、というかアンダースコア以外は良くない、というのは頭に有ったんだけど、やっぱり基本に忠実であろうと思いました。反省 ^^;
サーバー番号変わったらアンダースコア一本に絞ろうと思います。現時点ではどうしようもない (∵`)
ってゆーか380前後のサムネイル変数欲しいよぅ (;ωq`)

2019/03/25 (Mon) 00:41
mochi
ファイル名が怪しいことは怪しいのですが…

こんにちは。Akiraさん。

僕もファイル名の4連ハイフンが気になって同じように「〇〇----380.jpg」で試してはいたんですよね。でも縮小ソフトも違うもの使ってるので同じ状態というわけではなかったと思います。

今回Akiraさんがアップロードしてくれた「652____380.jpg」をダウンロードして、再度ファイル名を「652----380.jpg」に戻してアップロードしてみたんですが。

https://blog-imgs-125.fc2.com/m/o/c/mochi1999/upload20190325.png

まぁ問題なくアップロードできてしまったわけでして…

とはいえ確かに連続ハイフンは何か特別な意味合いがありそうな印象を受けますし、そういう意味では連続アンダースコアも避けておいた方が無難なように思います。

個人的にはファイル名に単発でハイフンを用いることは問題ないと考えています。なお根拠はありません。(`・ω・´)キリッ
僕自身ファイル名に単発ハイフンをバシバシ使っていますし。
今ではどうか分かりませんが、Google先生は画像等ファイル名も画像内容を補足する要素として認識していて、前後の単語をハイフンで区切るとそれぞれ別の単語として認識し、アンダースコアで区切ると連続した単語として認識するとかいう記事を見たような覚えがあります。

それはさておき、さすがに「652_380.jpg」では味気ないので「652_thum_w380」といった感じのファイル名を付けていってはいかがかと思います。

>ってゆーか380前後のサムネイル変数欲しいよぅ (;ωq`)
ですよねぇ~。今回サムネイル表示のHTML見てて、その苦労を想像して涙が出そうになりました。 ( ;∀;)
まさか爆速テンプレであんなデカいサムネイル変数作ってくるとは思いませんでしたしね。
ソレじゃない感が半端なかったです。(>_<)

2019/03/25 (Mon) 23:23
vanillaice (Akira)
Akira
To mochiさん

面倒かけちゃってすみません ( ̄∀ ̄;)

ハイフンとアンダースコアのその件は私も記事にしてますね。折り返しの説明記事だったかな。確か。

出てなかったサムネが勝手に出るようになったのも変ですし、どうしても削除できないファイルもあるんですよ。
もう何度やってもどうやっても消えてくれないの(笑)
昨日のスクショにあるような白抜きになってるやつなんだけど (∵`)

CDNとoriginの関係もあるかもしれない。
格納データそのものに異常があるような気が。

ソレジャナイ感ありますよね(笑)
作ってくれると良いんだけどなぁ。

2019/03/25 (Mon) 23:54
ぼっちん
To Akiraさん

Akiraさん、おはようございます~ ^^

どうしても削除できないファイルもあるんですよ。
もう何度やってもどうやっても消えてくれないの(笑)


これの件なんですけど、ファイル名がハイフンで始まるのは、サーバーによってはオプション扱いになってしまうことがあるんですよね。
私も自前サーバーでよく削除出来なくなることがありまして(笑)コマンドで直接 rm -- ----abc.png って具合にハイフン前に -- を2個付け足して削除してます (^_^; アハハ…
FC2サーバーだったらリネームでハイフンを除去してからなら削除出来るようです。(リネームは有効)
お試しあれ~(笑)



2019/03/27 (Wed) 09:10
vanillaice (Akira)
Akira
To ぼっちんさん

ぼっちんさん、こんばんは ('0')/

削除できたっ!(笑)
ありがとうございますぅー!やっとすっきりした(笑)

やっぱハイフン連続はダメと思った方が良いですね。単純に私の都合だけでやってたんですよ。ハイフンにしとくと後ろの数字が変えやすいもので(ダブルクリック文字選択のときに)
サーバー番号が変わったら修正しようと思います。
いつもありがとうございます :)

2019/03/27 (Wed) 21:34

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ