弊テンプレートは必ず専用記事を設けており、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さん にお礼申し上げます。
- 【重要なお知らせ】しばらく共有テンプレート制作から離れます2020/06/10
- 【重要】既存弊テンプレート全ての「ページ送りJS」修正を行いました2020/05/30
- 弊ブログでの質疑応答時のヒント2020/05/07
- ギブアップ宣言「管理画面コメント返信」2020/04/10
- テンプレート5点配布終了のお知らせ2020/04/06
- FC2カウンターが表示されなくなる、アクセス解析の画像が出ない、などの不具合が生じた方へ2020/04/03
- 自己解決のための「テンプレあるある」ページに新たな内容を追加しました2019/10/06
- テンプレートメンテナンス終了と全テンプレートIE非対応のお知らせ2019/02/08