【WordPress】 STINGER3のblockquote(引用タグ)の背景を変えてみた

公開日: : 最終更新日:2017/01/08 WordPress, テクノロジー, 小技

ブログで記事を書くときによそのページの本文やニュース記事の一部を引用することがあります。その場合はblockquoteというタグを使用します。

<blockquote>
ここに引用したい文章を入れる
</blockquote>

このブログはSTINGER3というテーマで構築しているのですが、blockquoteの背景デザインが角ばっていてちょっとダサい(開発者の方すみません。。。)

▼デフォルトのblockquoteの背景デザイン
stinger3 blockquote

というわけでcssをいじってデザインを変えてみました。

STINGER3の引用タグ(blockquote)の背景を変更する

やり方はとても簡単。style.cssの208行目あたりとsmart.cssの122行目あたりの

上記cssを、

に書き換えるだけです。

※必ず事前にバックアップを取っておいてください。

角丸で背景色をベージュに、落ち着いたデザインになりました。
stinger3 blockquote
こちらのページで実際に見られます。

ちなみに書き換え後cssの3行目にある

content: “\275D”;

はフォントアイコン「UTF-8 Icon」です。

UTF-8のフォントアイコンとはUTF-8で読み込まれたファイルに対して、UTF-8の文字コードを入力するだけでフォントアイコンとして表示することができます。

参考:
http://start-now.link/100/archives/1992
http://web-tan.forum.impressrd.jp/e/2016/06/07/23018

こちらのサイトにいろんなアイコンのUTF-8コードが掲載されています。
https://www.utf8icons.com/

今回採用したダブルクォーテーション(“)以外にもたくさんありますので、お好みに合わせて選んでみてください。

PC

最後までお読みいただきありがとうございます。

お手数でなければ記事のご紹介をしていただけると嬉しいです。

ブログの情報はこちらでも配信しています。



follow us in feedly








関連記事



個人的に撮影した写真を公開しています。

旅行先や街中で気になったものを撮影・公開しています。
ダウンロード無料、商用利用OKです。写真AC

関連記事

Google Chromeの右上に出てきた名前の消し方(15/07/29追記)

※2015年7月29日時点の情報です。 Google Chromeのアップデートで一度は解決し

記事を読む

【ほんとにできた】iPhoneは本体を振ることで文字入力の「やり直し」ができる

iPhoneって気付かない機能が多すぎですよね。 たまたま見つけたネタでやってみたらほんとうにでき

記事を読む

【セミナーレポート】 スピーカーは携帯の予測変換機能開発者・Gunosy(グノシー)社長

大阪イノベーションハブ・情報処理推進機構主催のセミナー「目覚めよ大阪のIT才能~グノシー、スケルトニ

記事を読む

wordpress アイコン

【WordPress・備忘録】 記事内の文字の色や大きさを変えるときに使うタグをまとめました

こんにちは、しんこー(@yakudatsujoho)です。 このブログがWordPressで構築さ

記事を読む

Macのデフォルトで開くアプリ(ソフト)を変更する方法

以前ご紹介したアプリ「CotEditor」が使い易すぎるので、テキストエディタのデフォルトアプリをこ

記事を読む

Googleが理解していることと本当のSEOについて【13選】

メールを整理していたところ、昨年12月に参加したセミナーのメモが出てきました。 とても濃い内容だっ

記事を読む

wordpress アイコン

【STINGER3】WordPress記事本文中にアドセンスを表示させる最も簡単な方法

コード(タグ)を貼りつけるだけでそのページの内容にマッチした広告を自動的に配信してくれるアドセンス。

記事を読む

【ずっと知りたかった】iPhoneで動画をバックグラウンド再生する方法

PCだと何の問題もなく可能なマルチタスク。 iPhoneも「4」から一応対応はしていますが、PCと

記事を読む

excel to jpg

Excel(エクセル)やWord(ワード)に貼り付けられている画像を抽出する方法

取引先からデータをもらう際、ExcelやWordに画像を貼り付けたものを送られてくることないですか?

記事を読む

surprise woman

自分のサイトが、Googleが好むスマホ対応になっているかを確認する方法

何やらざわついていますね。 Google、「スマホ対応」をランキング要因に利用することを決定。

記事を読む

PC

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PC

WITTAMER(ヴィタメール) ビアゼリー アイコン
ベルギー王室御用達チョコレートブランド、ヴィタメールの限定商品「ビアゼリー」を食べてみた

どーもこんにちは。限定という言葉にめっぽう弱いしんこー(@yakuda

キリンビール神戸工場
【キリンビール工場見学】 発売前の神戸づくりを一足先に試飲してきたよ

今回が2度目の訪問となる、キリンビール 神戸工場へ見学に行ってきました

じゃがいも不足 アイコン
(17/05/10追記)【ポテトチップス 生産中止】 2016年の台風が原因の深刻なじゃがいも不足が発生

※2017年5月10日 追記 こんにちは。おっさんのくせにスナッ

EVANGELION STORE OSAKA
【LUCUA 1100 ルクア イーレ】 エヴァンゲリオンストア 大阪に行ってきた

今日は西暦2017年4月2日ですが、2年前の2015年には使徒襲来もな

ぎゅっと搾って 瞬間パック 厳選みかん ストレートジュース
【濃縮還元とストレートジュースの違い】 関西スーパーに売ってる「瞬間パック 厳選みかん」がうますぎる件

普段はフルーツジュースはほとんど飲まないのですが、近所の関西スーパーで

→もっと見る

  • 名前:しんこー
    仕事:WEB関連を10年ほど。デザインからコーディング、広告出稿、サイト分析、SEOなど幅広く手掛けている為、社内では「何やってる人?」と思われている。俺もわからん。

  • follow us in feedly





    Macintosh ブログランキングへ

    ブログランキング・にほんブログ村へ

PAGE TOP ↑