The World 日付の文字色

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

【The Worldテンプレート】記事上にある日付の文字色変更

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

 


The World

The Worldテンプレートの記事上にある日付の文字色変更方法を解説します。

 

 

まずは、これから変更する「記事上にある日付」とはどの部分を指しているのかを画像でお見せしていきます。

 

 

記事上にある日付とはどの部分を指しているのか?

記事上にある日付は次の赤枠部分です。もし表示されてない場合は、外観⇒詳細オプションより表示・非表示の設定が可能です。

 

日付

 

 

 

カスタマイズ方法

カスタマイズ方法を説明します。今回ははっきりとした色にするために黒にしてみました。

 

カスタマイズ

 

 

 

どの部分をいじったのかというと、

 

修正箇所

外観⇒テーマ編集⇒(あなたの利用している色).css

 

 

以下の部分から、僕であればこのテンプレートでは青を選択しているために、blue.cssを選んでいきます。

 

 

ブルー

 

 

そして、次のコードの赤文字部分を変更していきます。

 

 

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 日付の設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#main_contents .date{
border-bottom:3px #1C4773 solid;
}

#main_contents .date p{
color:#255F99;
}

 

 

 

更に、日付の下にある線(ボーダー)のカスタマイズもお話していきます。

 

 

ボーダーのカスタマイズ

続いて、ボーダーのカスタマイズもしていきます。

 

 

以下の画像はボーダーの色を変更しました。青から赤に変えました。

 

ボーダーの色

 

 

 

カスタマイズ方法

 

外観⇒テーマ編集⇒(あなたの利用しているテンプレート色).css

 

 

赤文字の変更:ボーダーの色

青文字の変更:ボーダーの太さ

 

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 日付の設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#main_contents .date{
border-bottom:3px #1C4773 solid;
}

#main_contents .date p{
color:#000;
}

.read_time{
color:#000;
}

 

 

青文字部分を変更することで線の太さも変えられます。例として示しているので、わかりやすく太くしています。

 

線の太さ

 

 

The World   コメント:0

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

comment closed

トラックバックURL: