弊テンプレートは必ず専用記事を設けており、DEMOページも設置しています。DEMOページ内では「この機能を使うにはこのhtmlを書いてね」という見本・雛形を記しています。その雛形に間違いがありました。ごめんなさい。
テンプレート自体に誤りがあったわけではありません。念の為。DEMOページの雛形が間違っているので、そのままコピペで使うと一部のスタイルが適用されない、というものです。
対象html
blockquote要素 (引用)に関するものです。DEMOページの雛形htmlは
①
<blockquote><p>引用テキスト内容</p></blockquote><cite><a href="引用元URL" target="_blank">引用元サイト名</a></cite>
上記になっているんですけども、正しいのは以下の通りです。
②
<blockquote><p>引用テキスト内容</p><cite><a href="引用元URL" target="_blank">引用元サイト名</a></cite></blockquote>
どちらのhtmlも正しいものではありますが、ちょっと意味は違います。cite要素 はそれ自体が 引用元 を示すもので、blockquote要素 内の内容と強く結びつけるにはこの要素の「中」に入っているのが望ましい形です。雛形では外に出ちゃってる ^^;
で、構文が違いますので、DEMOの雛形を利用しても「あれ?なんか装飾違うくね?」となってしまいます。サンプルの実物は②になっており、雛形コードだけが違うので正しいスタイルで表示されています。すみません。
DEMOページの内容については順次訂正します。ご迷惑おかけします。そして現状だと別タブで開くリンクには rel属性 を追加して
<blockquote><p>引用テキスト内容</p><cite><a href="引用元URL" target="_blank" rel="noopener noreferrer">引用元サイト名</a></cite></blockquote>
とした方が良いと思いますので(セキュリティに関係しています)、この形に直しておきます。
* 同サイト内のリンク(内部リンク)にこの属性をつける必要はありません。
間違えておいてなんですが、DEMOには「どう書くとどうなるか、何が使えるのか」など詳細が載っていますので、テンプレートの使いこなしのためにご一読くださいね。よろしくお願いします。
本件をご報告頂いた bonさん にお礼申し上げます。
There are no comments yet.