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

公開日: : 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

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

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

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



関連記事



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

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

関連記事

ブロガー必須ツール 画像を一括でリサイズしてくれる「Bulk Resize Photos」

もうすでにいくつかのブログで紹介されているツールですが、ほんとうに便利だったので使ってみた感想を書い

記事を読む

springforward_icon

Appleの新製品イベント「Spring forward」発表内容まとめ

Appleの新製品発表イベント「Spring forward」が2015年3月9日(日本時間3月10

記事を読む

【Mac初心者向け】覚えておくと便利なショートカットキー9つ

まだまだMac初心者の私。ショートカットを使うときに「ctrl」が「command」に変わることぐら

記事を読む

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

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

記事を読む

【体験談】 クレジットカード(アプラス クレジット機能付きTカード)が不正利用された時の対処方法について

先日、三ヶ月半におよぶ長い長い対応が終わりました。 もし不幸にも同じ経験をされた方がいたら、また今

記事を読む

小保方正面写真

【STAP細胞】 小保方騒動と自身の経験から分かった「理系・女子校出身」の女はクズだという事実

理化学研究所は先日、STAP細胞の検証実験の中間報告を行いました。それによって「STAPはな

記事を読む

糸引き アイコン

セーターの引っ掛けた糸を直す方法

※こちらの内容はほつれなおし用の針でセーターの糸引きを直した件という記事でさらに追記しております。

記事を読む

商品リスト広告

【ベンダー・EC事業者向け情報】 10月からGoogle商品データフィード仕様変更について

10月1日よりGoogle商品リスト広告のデータ元である商品データフィードの仕様が変更となります。

記事を読む

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

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

記事を読む

はてなブックマーク アイコン

はてなブックマークの新着エントリーに掲載されました!

苦節2年、はじめてはてなブックマークの新着エントリーに掲載されました。 先週土曜にアップしたこちら

記事を読む

PC

Message

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

PC

法改正
働き方改革って何? 働き方改革関連法案をふまえて労使が取り組むべき5つのポイント

2019年4月1日から働き方が変わります。 2018年6

キャンパスライフ
採用担当者からアドバイス、楽しい大学生活を送るために必要な11のこと

こんにちは、しんこー(@yakudatsujoho)と申します

社会人になった今だから断言できる、大学生におすすめのアルバイト12選

こんにちは、社会人○○目のしんこー(@yakudatsujoh

もしもし ポリスメン
【最大報酬10万円】 身バレもなく安心、警察への匿名タレコミができる「匿名通報ダイヤル」

犯罪もしくは犯罪の可能性がありそうなシーンに出くわしたが、逆恨みが怖く

公的保障 アイコン
【公的保障】 取りっぱぐれは大損! 届け出をするだけでもらえるお金

自治体によっては届け出だけでもらえるお見舞い金や支援金などが存

→もっと見る

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