【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

関連記事

【簡単・無料】 スマホのブラウザチェック用FireFoxアドオン「User Agent Switcher」

先日下記記事 蛍光灯が点きにくくなったらグローランプを交換しよう をリライトするときに使用した便

記事を読む

コナンの追跡メガネが現実に! iPhoneやAndroidから見つけたいものを捜索できる新ガジェット「Stick N FIND」が登場

名探偵コナンに登場する追跡メガネは、シール型の発信器の行方を追跡できるアイテムとして物語初期から

記事を読む

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

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

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

記事を読む

商品リスト広告

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

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

記事を読む

feedly_icon

今更だけどWordPress4.0にfeedlyのRSS登録用ボタンを設置してみた

基本めんどくさいことは後回しの男、transamです。 本当に今更ですが、当ブログにf

記事を読む

【STINGER3】 Excel to HTMLでテーブルがきれいに表示されるようcssを編集してみた

先日下記の記事をリライトしました。 蛍光灯が点きにくくなったらグローランプを交換しよう その

記事を読む

Yahoo!ニュースアプリ 木下彩音 アイコン

Yahoo!ニュースアプリのCMの関西弁がうそくさい件

まいど。社畜ブロガー、しんこー(@yakudatsujoho)です。 今回、大阪風のあいさ

記事を読む

十六茶 アイコン

韓国から持ち帰ったおもしろいもの

先日韓国に行ったときに見つけたおもしろいものをいくつかご紹介します。 17茶 日本で

記事を読む

Crayon Syntax Highlighter icon

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

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

記事を読む

出る アイコン

Googleの検索結果にサイト内検索フォームが出現

何気なくGoogleで検索していたところ、昨日までなかった機能が追加されていました。 (私が気が付

記事を読む

PC

Message

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

PC

タイヤホイール
【タイヤサイズの見方】 車のホイールカバーを自分で取り替えてみたよ

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

ドラえもん 涙
ドラえもんのダンナ様、砂川啓介さん死去、80歳 認知症の妻・大山のぶ代さんを残して

俳優の砂川啓介(さがわけいすけ/本名・山下啓一)さんが7月11

いつの間にかできていた「海の日」。その由来がなにか調べてみた

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

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

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

自転車 マナー
大阪のマナーの悪さは車・バイクではなく、歩行者と自転車である

まいど。関西に住んで10数年になるしんこー(@yakudats

→もっと見る

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

  • follow us in feedly





    Macintosh ブログランキングへ

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

PAGE TOP ↑