attention admin about comments trackbacks you may also like

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

2019年09月22日
カスタマイズ
0
初心者向け Plugin Education

「弊テンプレートと相性が良い」というのはつまり「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ファイルの件については以下の記事を参照のこと。

FC2ブログ プラグインは厳選して利用しましょう

web一般の「プラグイン」ではなく、FC2ブログの「プロフィール」や「最新コメント」など主にサイドメニューとして掲載する「プラグイン」のことです。 これらの利用は 必要最小限に留めましょう のススメ。...

ページの読み込み不能に陥った時はJSファイルを調べましょう

今後こういうケースは徐々に多くなっていくのではないかと予想されます。 ページのローディングが完了せず、描画も途中で止まってしまう という場合の多くは JSファイル に起因しています。...

安心して利用できるであろうプラグイン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勧告」だろうと思うのでその都度運営が整備していくというのが理想とはいえ、カスタマイズ自由度や選択性の高さが足を引っ張っている印象も受けますね。でもいずれやらんとな。

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(0)

There are no comments yet.

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

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