【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

関連記事

Crayon Syntax Highlighter icon

WordPress記事内にソースコードを表示させるプラグイン [Crayon Syntax Highlighter]使用方法

Crayon Syntax Highlighterは、WordPress記事内にhtmlやcssなど

記事を読む

【WordPress】.htaccessを使ってURLをwwwありに統一する方法と注意点

WordPressで構築したサイトのURLを「wwwあり」に統一する方法と注意点についてまとめました

記事を読む

【大阪・日本橋】 32GBのフラッシュメモリーが2,000円以下で買えた件

良い時代になったなぁとつくづく思います。 今日はかなり久しぶりに日本橋に出かけました。 約8

記事を読む

wp_upgrade_icon

WordPressを最新のバージョンに更新(アップグレード)する方法

WordPressはセキュリティの改善などの理由から、高頻度でバージョンアップが行われていま

記事を読む

商品リスト広告

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

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

記事を読む

Google AdSense icon

AdSenseのアカウントを別のGoogleアカウントに移行してみた

本ブログではGoogle AdSense広告を掲載しております。 今回、一番最初にAdSenseの

記事を読む

ハチドリ

Googleの新アルゴリズム「ハミングバード(Hummingbird)」って結局何?

ちまたで話題(?)のハミングバードについて先日詳細を耳にする機会がありましたので、そこで得た内容を書

記事を読む

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

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

記事を読む

【便利機能】 メモ帳の1行目に「.LOG」と記載して保存すると日時が自動で記録される

Windwsに標準でインストールされているテキストエディタ「メモ帳」。その名の通りちょっとした覚え書

記事を読む

Google Chromeから無料でFAX送信ができるGoogle Driveの拡張アプリ「HelloFax」を使ってみた

シロクグロースハックブログで紹介されていたツールですが、実際に使ってみて本当に簡単・便利だったのでご

記事を読む

PC

Message

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

PC

英語検定1級 アイコン
将来につながる資格、英検1級のレベルと試験内容、合格に向けた英語の勉強方法

英検(実用英語技能検定)は、1963年に始まったもっとも有名な

【英語学習法】 英検3級はTOEIC何点のレベル? 合格までの勉強方法をご紹介

東京オリンピックが開催予定の日本では、外国人旅行者の数が増加傾

ビットコイン アイコン
【仮想通貨】 ビットコインが流行ってるらしいけどよくわからないのでしくみを調べてみた

あけましておめでとうございます、しんこー(@yakudatsu

いしだ壱成
【クギズケ】 いしだ壱成離婚の原因のひとつとされる「7種類のドレッシング」がテレビ番組で明らかとなる

こんにちは、しんこー(@yakudatsujoho)です。

コナン ニヤけ アイコン
【名探偵コナン】 原作より先にアニメでネタバレした回3つ

今やサザエさん、ドラえもん、ポケモンなどと並んで国民的作品とな

→もっと見る

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

  • follow us in feedly





    Macintosh ブログランキングへ

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

PAGE TOP ↑