テーマMinimalのblockquoteに引用符を付けたい

HTML/CSS プログラミング 初心者 日記 言語

私はワードプレスを始めるにあたってテーマ「Minimal」を使用しています。
 
HTML/CSSに関してド素人な私が、引用符を付けようと四苦八苦した軌跡を備忘録的に残しておこうと思います。

テーマMinimalのblockquoteに引用符を付けたい

このMinimalの初期設定では、記事内で引用しようとすると引用符が表示されないデザインに設定されています。
 
↓こんな感じ
b-quote
SEO的に別にこれはこれで問題ないのだけれど、引用符があった方が見栄えがいいのかなって思ったりしています。↓引用符あり
引用符
しかしながら、先に結論を申し上げておくとド素人の自分が少し調べた程度では解決できませんでした。
 
とはいえ、いずれ解決するための備忘録や、同じ問題に当たった人の調べる時間を短縮するために、手に入れた情報を掲載していきたいと思います。

手に入れた情報開示

超ド素人がググり倒して手に入れた情報を載せていきます。わかる方からすればチョロイんでしょうけど(´・ω・`)

引用は「blockquote」タグを使用する

記事内で引用を使う場合はblockquoteタグを使って引用部分を囲みます。そうすることで、Googleにもそこは引用部分だと提示できるためコピーコンテンツ扱いされずに済むわけですね。

「blockquote」のデザインはスタイルシートの::beforeで設定

引用箇所のデザインはスタイルシートでblockquote::beforeのデザインを設定すると変更できるようです。
 
::beforeは疑似要素と言われるもので、blockquote::beforeのデザインを設定しておけばblockquoteタグの直前部分に設定した内容が反映される仕組みのようです。詳しくは調べてみてください。
 
ということで、CSSにblockquote::beforeの部分に引用符を表示させる設定を書いてしまえばいいわけですね。

引用符はFontAwesomeを使う

じゃあ引用符ってどう表示させるのって話ですが、FontAwesomeのという無料で使えるWebサービスがあるので、その中の「f10d」のアイコンが引用符になります。
 
これをスタイルシート内に書き込めばいいわけですが、contentにf10dを入れるとか色々あるわけですが、この辺りは気になる方はそれぞれの意味をググって頂くとして、とりあえず

これらの情報を元にコード作成

.single blockquote:before {
position: absolute;
top: 13px;
content: "\f10d";
font-family: FontAwesome;
color: #b0b0b0;
font-size: 28px;
line-height: 1;
}

引用元:マナブログ

素人のくせにそれっぽいじゃんとか思ったあなた、これ丸パクリですので(´・ω・`)Minimalの作者様のページから拾ってきたコードです。

いざCSSに張り付け

本
で、先ほどのコードをスタイルシートに意気揚々と張り付けたところ!(ちなみに張り付けた場所は適当)

何も変わりませんでしたッッ!!

悔しい( `ー´)ノ


「タグって何?スタイルシートって何?CSSは一緒?何?」ってレベルの素人だからここまで来るためにめちゃ頑張ったんですけど、解決には至らず。

考えられる原因

素人なのでよくわかりませんが、そもそもfont awesomeを読み込むための設定とかしてないので、そこかなぁとか思ってます。作者のコードがこれで動いてるんだからイケるだろとか思って段階飛ばしたのが悪かったんでしょうか(´・ω・`)
 
もうひとつ考えられるのはコードを張り付ける場所ですね。スタイルシートのどこに貼ればいいかわからないので、blockquoteの文字が並んでいる適当な場所に張り付けたのが悪かったでしょうか(´・ω・`)

思い当たる節がありすぎて辛い…。解決したら続きも書きます。でも後回しかなぁ(;´Д`)


そもそもやり方違うかもしれませんしね(´・ω・`)空き時間に自己解決を狙うものの優先度はどうしても低めなのでわかる人はTwitterで教えてくれたら嬉しいでございます、、。

スポンサーリンク