弊テンプレートと相性の良い共有プラグインの紹介

カスタマイズ

2019/09/22

2021/10/23 0

vanillaice (Akira)

「弊テンプレートと相性が良い」というのはつまり「HTML5」「レスポンシブデザイン」と相性が良い、ということになります。個人的に「これは良い」と思ったものを厳選してご紹介します。

ご紹介するのは「基本プラグイン」なので、カレンダーや時計やゲームなど、ブログ運営に必ず必要とは言えないものについては除外しています。「コメント」「カテゴリ表示」「アーカイブ」「タグ」に絞りました。しかしタグクラウドについては該当なしという結果です。

選定の基準

公式・共有を問わずFC2で提供されるプラグインは、2006年から現在の2019年9月下旬まで全く整理されていないような状況なので、選び方が非常に難しいと思います。今回私が基準としたのは以下のような点です。

html5に準拠しており、かつ構文が正確
文字列が画面や本来あるべき場所から超過しない
jQueryファイルを内包していない
デザインに問題が無いもの(テキストがボーダーと接触していない, ボックスの辺とテキストの間に余白設定が有るなど)
2010年以前のものは全て対象外

上記がプラグインを選ぶ際のコツや指針でもあります。その中でも特に html5準拠について具体例を上げておきます。比較的旧式の展開(開閉)型プラグインによく見られる内容です。

ダミーリンクの #

html4では a要素の href属性が必須でした。

必須属性のhrefの値が空

<a href="">クリック</a>

必須属性のhrefが無い

<a>クリック</a>

「クリック」と書いてありますね。a要素といえば「クリック」の動作に結びつく要素ですから、開閉のボタンによく利用されることがありました。この場合の目的は「ユーザーにクリックさせて展開をさせる」ことです。ですがhref属性の本来は「移動や遷移」を司るものです。

クリック展開の場合「移動や遷移」は不要なんですね。ですからそもそもhref属性自体が不要ということになりますが、必須属性ですから書かないわけにはいかない。というわけで以下のようなことをするわけです。

△エラーを避けるためのダミーリンク

<a href="#">クリック</a>

フラグメントを代入することで「値が空」「href属性が無い」の両方を避ける、と。ですがこれはhtml5ではやってはいけない。

html5ではhref属性の値に # が指定されると滞在ページ最上部へ移動します。いわゆるページ内移動と呼ばれるものです。

html4でのページ内移動は主に rel属性を用いて値に移動先のid名を指定するという方法で行いましたが、html5では rel属性の値の独自拡張は認められないという仕様に変わりました。id名(id属性)というのはユーザーが任意で付ける名称です。ですがrel属性の値にはその「独自名称」を指定できなくなりました。

html5で「ページ内移動」を行うには href属性の値にid名を指定します。

<a href="#id名">クリック移動</a>

# はidであることを示します。例えばid名 xxx を持つ要素の頭に移動するには href="#xxx" といった具合。# の後ろに文字列が内場合はページの最上部に移動することになっています。この動作が完全に旧htmlの展開用ダミーリンクと被ってしまうわけですね。

ダミーのつもりの # がhtml5では「ページ最上部までのページ内移動」に意味が変わってしまう、ということで、展開プラグインの展開用ボタンをクリックしたときにページの一番上まで勝手に移動してしまう、という場合はこれが原因です。要するに html5の仕様に準拠していないということですから残念ではあっても利用は控える。

実際このパターンが非常に多く「テンプレートがおかしい」という問い合わせも多いです。ですがそれはもう「html5でそのやり方はダメ」ということなんで、テンプレートの方をプラグインに合わせるのではなくプラグインの方をテンプレートに合わせてください、という感じで (´・ω・｀)

ちなみにhtml5で展開用ボタンを設置する場合 a要素を利用する必要そのものがなく、button要素というのがありますのでそちらを利用すれば良い話です。htmlは装飾や動作のためではなく「定義・意味論」なのですから、「開閉するためのボタン」ならばbutton要素を利用するのが最も良い形。button要素自体はhtml4時代から有ったんですけどね。

jQueryファイルの件については以下の記事を参照のこと。

安心して利用できるであろうプラグイン5選

コメントリスト

名称	Comments+Trackback
作者	Paroday[paro2day] 様
特徴	コメントとトラックバックをツリー表示一括開閉も可能
構成	JS(外部ファイルあり) + CSS
画像	使用あり
備考	* バリデートが気になる方は <script type="text/javascript" src="ファイルURL" charset="utf-8"> と <script type="text/javascript"> を <script> に変更すると良いでしょう。 * バリデートが気になる方は <style type="text/css"> から </style> までの内容をスタイルシートに移すか、以下のページを参照してJSでhead内に差し込むと良いでしょう。 body内のstyle要素が一定条件下で再びエラーに

カテゴリリスト

名称	Category Bar Graph
作者	EDI[editlife] 様
特徴	カテゴリ投稿数でグラフ変化
構成	CSSのみ
画像	使用なし
備考	* バリデートが気になる方は <style type="text/css"> から </style> までの内容をスタイルシートに移すか、以下のページを参照してJSでhead内に差し込むと良いでしょう。 body内のstyle要素が一定条件下で再びエラーに

展開型カテゴリリスト

名称	開閉式カテゴリ一覧
作者	細野ゆとり[hosonoyutori] 様
特徴	展開型
構成	CSSのみ
画像	使用なし
備考	* IE非対応(CSSレベル4使用) * バリデートが気になる方は <style type="text/css"> から </style> までの内容をスタイルシートに移すか、以下のページを参照してJSでhead内に差し込むと良いでしょう。 body内のstyle要素が一定条件下で再びエラーに

名称	Categories...B
作者	Paroday[paro2day] 様
特徴	展開型
構成	JS(外部ファイルあり) + CSS
画像	使用あり
備考	* バリデートが気になる方は <script type="text/javascript" src="ファイルURL" charset="utf-8"> と <script type="text/javascript"> を <script> に変更すると良いでしょう。 * バリデートが気になる方は <style type="text/css"> から </style> までの内容をスタイルシートに移すか、以下のページを参照してJSでhead内に差し込むと良いでしょう。 body内のstyle要素が一定条件下で再びエラーに

月間アーカイブ

名称	コンパクト月別アーカイブ
作者	customtemplate[customtemplate] 様
特徴	年毎に分類しコンパクト化
構成	JSのみ
画像	使用なし
備考	* バリデートが気になる方は <script type="text/javascript"> を <script> に変更すると良いでしょう。

まとめ

プラグインだけでなくテンプレートの方でもそろそろ運営によるテコ入れを期待したいところではありますが、一向にその気配は無し。FC2ブログ全体のSSL化もいつになることか(現時点では選択性です)
もしかするとAdobeのフラッシュが完全終了する2020年末になんらかの動きがあるかもしれません。最悪を想定するとInternet Explorer11のセキュリティサポートが切れる2023年まで何もしない可能性も。もっと言えば永遠に何もしない可能性(笑)

htmlやCSSの世界というのは日々進化しており、節目になるのは「html, CSS勧告」だろうと思うのでその都度運営が整備していくというのが理想とはいえ、カスタマイズ自由度や選択性の高さが足を引っ張っている印象も受けますね。でもいずれやらんとな。

今のままでは知識に乏しいユーザーさんがわけもわからず選んで割を食うといった形になってますので、運営陣の大英断に期待 (∵`)

Comments 0

コメントに関する注意事項

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

管理者にだけ表示を許可する