超初心者でも分かる引用文の書き方

はじめに

引用文の書き方

1. 「サルワカ」で、好みの引用文のデザインを選びましょう。
2. 引用文のデザインの上に「FontAwesome版のみ」と書いてあるものがあります。詳しいことは、「Webアイコンフォント」をご覧ください。まずは、お好みのを選んでみましょう。
3. デザインの下の「＋CSSを表示」をクリックして、CSSのコードを表示させます。「FontAwesomeを使用する場合」と「使用しない場合」がありますが、とりあえず、「使用する」方を選んでみましょう。
4. CSSファイルに、それを追加します。※今は、CSSファイルの中身については、言及しません。とりあえず、そのままコピー＆ペーストしましょう。
5. 一方、HTMLファイルには、以下の記載を加えます。

<blockquote>
        <p>CSS Block Quotation Examples</p>
        <p>ここに引用する文を書きます。</p>
</blockquote>

6. これで、表示させてみましょう。下記の表示が出れば、成功です。

上手くいかない場合

• 「FontAwesomeを使用する場合」でも、「font-family: Font Awesome;」という部分を「font-family: "Font Awesome 5 Free";」に変えてみましょう。
• 「FontAwesomeを使用しない場合」のCSSコードを選択してみましょう。見栄えは、少し違いますが、一応、引用文の書き方になっています。
• それでもダメなら、「文字の打ち間違い」や「ファイルの上書き保存をしていない」などを確認してみてください。

豆知識

• 引用を明記するのは、引用先への配慮もありますが、検索エンジンの順位にも影響します。引用であることを隠すことはできません。引用は引用として、上記の方法で、本文とは分けましょう。
• ちなみに「cite」は、出典を記載するタグで、四角の右下に表示されます。
• この引用文をスマホで見ると、横幅が狭くて、とても読み辛くなります。その時は、CSSファイルの中の「blockquote {}」のところに、「margin: 3px;」とでも書いておけば、だいぶ幅広になります。

引用サイト

• 「サルワカ」：サイトのデザインを装飾する時に、とても頼りになるサイトです。

免責事項・著作権表示