弊テンプレートサンプルDEMOの雛形htmlに誤りがありました

割と重要なお知らせ
2020/04/06
3
vanillaice (Akira)
vanillaice (Akira)
トラブル対処お詫び

弊テンプレートは必ず専用記事を設けており、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さん にお礼申し上げます。

Related post

Comments  3

ススム
2020/04/06 (Mon) 23:31

納得です

こんばんは。
実はブログの中で使用した時に、この通りにできなくて右寄せしていました (苦笑)
この記事を読んで修正したところ、雛形の通りに表示されました。

私からもbonさんにお礼を申し上げます。

vanillaice (Akira)
Akira
2020/04/07 (Tue) 01:57

To ススムさん

ススムさん、こんばんは ('0')/
わー、そうだったんですか。それは大変失礼致しました ^^;
少しづつ訂正しますね。申し訳ないです (*_ _)

bon
2020/04/07 (Tue) 07:37

To Akiraさん To ススムさん

引用の件、「またどうせ私が何かやらかしたに違いない」と思ってお伺いしたら…というだけで、Akiraさんの間違いを指摘するだなんてとんでもないことでお恥ずかしいです(^^;;

私こそAkiraさんのおかげで、ブログが素敵になったと読者の方にお褒めいただいたり、
それまでは旧投稿画面でエンター連打して行間を開けていたのが、今は新投稿画面のhtmlモードで書いています(Akiraさんが新画面だと書いておられたのでマネしました)。スピードは遅いし、間違いだらけとは思いますが、とても楽しく取り組んでいるので時間を忘れます。Akiraさんには本当に感謝しています。

引用の新しいリンクもありがとうございました。記事を書き換えさせていただきます。
ススムさんもご丁寧にありがとうございました。

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