TheWorld 引用 カスタマイズ

WordPressテンプレートの使い方とカスタマイズ

【TheWorldテンプレート】引用タグ部分のカスタマイズ

読了までの目安時間:約 6分

 


The World

TheWorldテンプレートの引用タグをカスタマイズする方法を紹介していきます。

 

 

 

引用タグとは

引用タグは、外部のサイトだったり別のところを参考にして持ってきた文章に対して、引用したよということをわかりやすくするためのタグの事です。

 

 

使い方としては、WordPressのビジュアルエディタのここをクリックすると出てきます。

 

 

引用タグ

 

 

 

実際にこれを利用すると画面上には次のように表示されていきます。

 

 

引用タグ

 

 

この部分をカスタマイズする方法を紹介していきます。

 

 

 

引用タグカスタマイズ

 

引用タグ内の文字色変更

 

次のように文字色を変更できます。

 

引用タグ

 

 

カスタマイズ方法

 

外観⇒テーマ編集⇒style.css

 

 

以下の赤文字部分を変更していきます。

 

 

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* blockquote設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

blockquote {
background: #F7F7F7 url(img/blockquote.png) no-repeat 0 0;
padding: 15px;
border: 1px solid #CCCCCC;
color: #212121;
box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
clear: both;
}

 

 

ボーダーの色と太さ変更

ボーダーの色を黒に、そして太くしてみました。

 

 

引用タグ

 

 

 

カスタマイズ方法

 

外観⇒テーマ編集⇒style.css

 

  • 赤文字部分:ボーダーの色
  • 青文字部分:ボーダーの太さ

 

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* blockquote設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

blockquote {
background: #F7F7F7 url(img/blockquote.png) no-repeat 0 0;
padding: 15px;
border: 1px solid #CCCCCC;
color: #212121;
box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
clear: both;
}

 

 

 

引用タグ背景色

 

背景色も変えることができます。

 

 

引用タグ

 

 

 

カスタマイズ方法

 

外観⇒テーマ編集⇒style.css

 

 

以下の赤文字部分を変更していきます。

 

 

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* blockquote設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

blockquote {
background: #F7F7F7 url(img/blockquote.png) no-repeat 0 0;
padding: 15px;
border: 1px solid #CCCCCC;
color: #212121;
box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
clear: both;
}

 

 

 

The World   コメント:0

この記事に関連する記事一覧

comment closed

トラックバックURL: