【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

関連記事

【悲報】 PCの画面をワイヤレスでテレビに出力可能なデバイス「AIRTAME」は日本に出荷できないことが判明

昨年末にGIGAZINEで取り上げられていた、PC画面をテレビに無線で出力するデバイス「AIRT

記事を読む

Macでのスクリーンショット(画面キャプチャ)の取り方

OSが変わるとちょっとした操作でも戸惑うものです。 このブログを更新する際にも画面のキャプチャ(ス

記事を読む

YouTube

絶対知っておくべきYouTubeの便利なショートカット5つ

YouTubeで動画の再生・停止・早送り・巻き戻しをするとき、マウスを使ってスライドバーで操

記事を読む

ECサイトで指標とするべき7つの項目

世は通販、特にEコマースの戦国時代といわれています。 少し前まではwebサイトを運営していく中でP

記事を読む

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

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

記事を読む

iphone6_plus_icon

意外と知らない? iPhoneの便利な小技6つ

iOS7以降のものになりますが、まとめ記事で見つけたiPhoneの小技6つをご紹介します。ぜひ試して

記事を読む

【MacBook Air・Pro】 キーボードのバックライトをオン・オフにする方法

MacBook AirとMacBook Proにはキーボードを照らすバックライト機能がついています。

記事を読む

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

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

記事を読む

【STINGER3】 ブログタイトルをテキストから画像に変えてみました

先日ハンドル名とサイト名を変更した旨の記事を書きましたが、それに併せてブログに親しみを持ってもらえる

記事を読む

【WordPress】 データベース バックアップ用プラグイン「WP-DBManager」使用方法

WordPressで使用するデータベースを簡単にバックアップしてくれるプラグイン「WP-DBMana

記事を読む

PC

Message

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

PC

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

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

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

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

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

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

【情報流出リスク】 フラグを立てられたら終わり? プライバシーを守るためには「物理的破壊」をするしかない

LINE流出はまさに新時代的事件 一昨年1月に「まだやるか!

ドラえもん in 3COINS
【3COINSとドラえもんがコラボ】 3COINS HEP FIVE店に限定グッズを買いに行ってきました

ドラえもんはもとより、藤子不二雄作品をこよなく愛するしんこー(

→もっと見る

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

  • follow us in feedly





    Macintosh ブログランキングへ

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

PAGE TOP ↑