当サイトには広告が含まれております

twentyfourteenの blockquote引用 スタイルをカスタマイズする!

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

Image

他のサイトの情報を見てblogに書くときなどは「引用」として、自分のサイトの情報ではないのですよ~、という感じにしないと、あれ、というかえーといけませんよね(>_<)!

記事をざっと見る

blockquoteタグで囲む方法

で、そういうときは

blockquoteタグ

で囲むことになります。WordPressの編集画面からblockquoteにするときは、

ビジュアルの時

Image

テキストの時

Image

こんな感じで指定します。

すると、

Image

こんな感じで、文字が大きくなっているのと文字の色が薄くなっています。これが twentyfourteen での blockquote の表現のようです。

Image

↑この赤い枠で囲ったところが引用部分です。…ううう、うーん、ちょっとわかりにくい。

のでカスタマイズしてみたいなぁと思います。

fontawesomeを使う場合は、

Image

fontawesomeはインストールしないよ、という場合は文字だけで表現すると、こんな感じ

Image

CSSfunctions.phpでカスタマイズしたいと思います。

* ちなみにこの文言はこれからblogに書こうと思って参考にさせていただく予定の、

検索クエリ?クローラー?知っておきたいウェブマスターツールの使い方

からのものです!

blockquoteの文字部分のCSSをカスタマイズする

まずは文字の表現部分を変更したいと思います。文字は普通の部分と同じ大きさと色にした上で、バックカラーに薄い灰色を指定して、ドットの罫線で囲もうと思います。

子テーマの style.css に以下を追加します。

blockquote {
     color: #2b2b2b;
     font-size: 100%;
     font-style: italic;
     font-weight: 300;
     line-height: 1.5;
     margin-bottom: 0px;
     position:relative;
     padding:10px 10px 0px 10px;;
     border:1px dotted #333;
     background:#f5f5f5;
     margin-bottom:20px;
}

細かいところはそれぞれ違うと思いますのであとで気に入るように調整してみてください。

これで、

Image

このように文字、バックカラー、罫線部分がカスタマイズできます。

fontawesomeを使って引用の表現を分かりやすくする

あとは上下にfontawesomeの引用符を付けたいと思います。fontawesomeをまだ使っていなくて使ってみたいという方は、linkするだけで使えるようになりますので、

fontawesomeで簡単にかっこいいアイコンを使おう!

こちらを参考にしてみてください。

前回(twentyfourteenのh2スタイルにfontawesomeのアイコンを追加する方法)と同じ方法でfontawesomeのアイコンを追加します。

子テーマの functions.php に以下のfunctionフィルターを追加します

// blockquoteにfontawesomeで“”を追加する
function ryus_blockquote_add($text) {
     $text = str_replace('<blockquote>', '<blockquote><div style="width:100%;text-align:left;"><i class="fa  fa-quote-left" style="font-size:24px;"></i></div>', $text);
     $text = str_replace('</blockquote>', '<div style="width:100%;position:relative;margin-top:-24px;text-align:right;"><i class="fa  fa-quote-right" style="font-size:24px;"></i></div></blockquote>', $text);
     return $text;
}
add_filter( 'the_content', 'ryus_blockquote_add' );

この状態で再度、同じページを表示すると、

Image

このように引用符のfontawesomeアイコンが追加された形で表示されました。

普通の文字だけで引用符を表示するようにカスタマイズする

fontawesomeは特に使わないので、という場合は普通の文字だけで引用符を表示してみましょう。

子テーマの functions.php に以下のfunctionフィルターを追加します

// blockquoteに文字でで“”を追加する
function ryus_blockquote_moji_add($text) {
     $text = str_replace('<blockquote>', '<blockquote><div style="width:100%;text-align:left;font-size:30px;font-weight:bold;line-height:1em;">“</div>', $text);
     $text = str_replace('</blockquote>', '<div style="width:100%;position:relative;margin-top:-24px;text-align:right;font-size:30px;font-weight:bold;line-height:1em;">”</div></blockquote>', $text);
     return $text;
}
add_filter( 'the_content', 'ryus_blockquote_moji_add' );

*functionを2つ同時に存在させたかったので違う名前にしましたが、1つしか入れない場合はryus_blockquote_addとかでいいかと思います。

これで表示してみると、

Image

このように文字だけでも引用符を表現することが出来ます。

*豆知識ですが引用符(開始と終了)ってどう出すのかしら~?と思って試しに だぶるこーてーしょん と入力したらセットで出てきました(^_^;

functions.phpで修正すると色々できそうですね

functions.phpで修正すると色々できそうです。かといってあまりいっぱい入れちゃうと表示が重くなる、、んだろうけれども。やっぱり色々試して自分なりに便利で分かりやすいページにして行けたらなぁと思っています♪

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (4件)

記事をざっと見る