【THE THOR】データリスト(記事情報)を縦に並べるカスタマイズ

みなさんこんにちは。

THE THORカスタマイズ大好き JonyとAi(@10to1_travel)です。

今回は、THE THOR(ザ・トール)の記事トップにあるデータリストを縦並びにするカスタマイズを紹介します。

このカスタマイズは当ブログの読者さんからいただいた、カスタマイズのリクエストです。

いつも素敵なリクエストありがとうございます!

カスタマイズの完成図は以下の通り。

 THE THOR(ザ・トール)の記事トップにある記事情報(データリスト)を縦並びにしたい
 
Jony
なるほど THE THORの記事情報って縦に積むとオシャレやな!THE THOR 1年使ってるけどその発想はなかった!
 
Ai
こういう読者さんからのリクエストって自分たちの気付きにもなるからすごくありがたいよね!あなたからのカスタマイズリクエストもお問い合わせください!お待ちしております!

さっそくカスタマイズをしていきましょう!その前に THE THOR(ザ・トール)の記事トップ上に記事情報(データリスト)を表示させる設定をしておきます。

THE THOR設定:記事にデータリストを表示する

まずは THE THOR(ザ・トール)の記事上に記事情報(データリスト)を表示する設定をしておきます。

デフォルトではカテゴリーとタグのみ表示されているので、それだけで十分と言う人はスキップしてください!

外観 → カスタマイズ → 投稿ページ設定[THE] → スタイル設定

と進み、一番下にある《ページタイトルデザイン設定》を編集します。

THE THOR設定:記事にデータリストを表示する
  • アイキャッチ上のカテゴリを非表示にする:希望の方で OK!
  • 投稿日を表示する:記事の投稿日
  • 更新日を表示する:記事の更新日
  • 閲覧数を表示する:記事の閲覧数
  • コメント数を表示する:記事のコメント

上記でオススメは更新日です。更新日は表示しておいた方がその記事がいつ更新されたかと言う新鮮度の目安になるからです。

あと噂ですが、更新日が表示されてる方がアドセンス審査に受かりやすいらしいです。

 
Ai
ちなみに今回のカスタマイズではデフォルトのまま(カテゴリーとタグのみ)がオススメです!縦に積むからデータが多すぎると幅取っちゃうんだよね。

THE THORのデータリストを縦に並べるカスタマイズ

それでは THE THOR(ザ・トール)の記事上にある記事情報(データリスト)を縦並びにするカスタマイズをしていきましょう!

っと言っても手順は 2つだけ!
とても簡単です!

※カスタマイズは自己責任でお願いします。

手順1. CSSをコピーする

手順 1では記事情報(データリスト)を縦に並べるための CSSコードをコピーします。

/*データリストを縦並び*/
.dateList-main{
display: flex;
flex-direction: column;
}
.dateList__item{
line-height:1.8em;
}

手順2. 追加CSSに貼り付ける

手順 2ではさっきコピーした CSSコードを THE THOR(ザ・トール)の《追加CS》に貼り付けます。

外観 → カスタマイズ → 追加CSS

と進み、枠内に CSSコードを貼り付けてください。

追加 CSSに関してもっと詳しく知りたいと言う人は以下の記事をご覧ください。

関連記事

みなさんこんにちは。 THE THORのデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって何?どうやって[…]

以上で完成です。とても簡単でしたね!

でも、これだけだと少し見にくいのでアイコンやテキストの色を変えて見やすくしましょう。

データリストの色とサイズを変更する

記事情報(データリスト)の色を変更するカスタマイズを紹介していきます。

  1. アイコンの色を変更する
  2. 文字の色を変更する
  3. データリストのサイズを変更する
  4. ホバーエフェクトでオシャレにする

色を変更する時は、カラー番号と言うものを使用します。カラー番号は #から始まる 6桁の番号のことです。

カラー番号は原色大辞典さんが大変詳しく、豊富なカラーを紹介してるのでオススメです。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

アイコンの色を変更する

記事情報(データリスト)のアイコンの色を変更する

アイコンの色を変更する CSSコードです。以下を追記してください。

/*データリスト(アイコン色)*/
.dateList__item::before{
color: #a83f3f;
}

color:#a83f3f;のカラー番号 (#の部分)を好きな色に変更してください。

※アイコンごとに別々に色を変更することもできるのですが、それだと記事内で使用されてる全てのアイコンの色が統一されてしまう可能性があるので、ここではあえて紹介しません。

希望の方はお問い合わせTwitterで DMください!

文字の色を変更する

記事情報(データリスト)の文字の色を変える

文字の色を変更します。ちなみに文字はデフォルトで太文字(bold)になっています。

/*データリスト(文字色)*/
.dateList__item a{
color:#a83f3f;
}

上記のアイコンの時と同様、colorの部分を希望のカラー番号に変更してご使用ください。

→ 原色大辞典へアクセスする

データリストのサイズを変更する

データリストのサイズを変更します。以下の CSSコードを追記してください。

/*データリストのサイズ*/
.dateList__item{
font-size:15px;
}

font-size:15px;の数字を大きくするとサイズが大きくなります。

ホバーエフェクトで少しオシャレに

最後にホバーエフェクトで少しオシャレにしてみましょう!

/*データリストのホバーエフェクト*/
.dateList__item a{
padding: 3px;
transition:0.4s;
}
.dateList__item a:hover{
transition:0.4s;
background: #a83f3f;/*背景の色*/
color:#fff;/*文字の色*/
}

上記のカスタマイズでは以下のエフェクトをしています。

  • エフェクトの変化をフワッとする
  • 背景色を変える
  • 文字色を変える

transition:0.4s;の数字を大きくすると変化が遅く、小さくすると変化が速くなります。

色は上記で紹介したカラー番号を変更してご使用ください。

→ 原色大辞典へアクセスする

アイコンを文字に変更する(※フォルダとタブのみ)

アイコンを文字に変更する(※フォルダとタブのみ)

次に今回の読者さんからのリクエストで「アイコンを文字」に変更するカスタマイズを紹介します。

変更できたのはフォルダーとタグのみで、更新日やコメント数などのアイコンは変更不可でした。

以下が CSSコードです。

/*データリストのアイコンをテキストに変更*/
/*カテゴリー*/
.icon-folder.dateList__item:before{
content:"カテゴリー:";/*任意のテキスト*/
font-weight:bold;
}
/*タグ*/
.icon-tag.dateList__item:before{
content:"タグ:";/*任意のテキスト*/
font-weight:bold;
}

content:”任意のテキスト:”;の任意のテキストの部分を希望のテキストに変更してください。

文字の色を変更したい場合はcolor:#fff;をカテゴリー、タグそれぞれに追記し、好きなカラー番号を入力してください。

上記のままだと少し味気ないのでデザインを少しオシャレにしてみました。

デザイン1:背景あり

まずは背景を付けただけのデザインです。シンプルですが一番見やすいですね。

CSSをコピペ
.dateList__item{
line-height:2.5em;
position:relative;
}
/*データリストのアイコンをテキストに変更*/
/*カテゴリー*/
.icon-folder.dateList__item:before{
content:"Category";/*任意のテキスト*/
font-weight:bold;/*太文字*/
color:white;/*文字色*/
background:#a83f3f;/*背景色*/
padding:5px 5px 9px 5px;
}
/*タグ*/
.icon-tag.dateList__item:before{
content:"Tag";/*任意のテキスト*/
font-weight:bold;/*太文字*/
color:white;/*文字色*/
background:#0066cc;/*背景色*/
padding:5px 5px 9px 5px;
}

デザイン2:背景&角丸

角丸にしました。少しマイルドで可愛いイメージになりましたね。

CSSをコピペ
.dateList__item{
line-height:2.5em;
position:relative;
}
/*データリストのアイコンをテキストに変更*/
/*カテゴリー*/
.icon-folder.dateList__item:before{
content:"Category";/*任意のテキスト*/
font-weight:bold;/*太文字*/
color:white;/*文字色*/
background:#a83f3f;/*背景色*/
border-radius:5px;/*角丸*/
padding:5px 5px 9px 5px;
}
/*タグ*/
.icon-tag.dateList__item:before{
content:"Tag";/*任意のテキスト*/
font-weight:bold;/*太文字*/
color:white;/*文字色*/
background:#0066cc;/*背景色*/
border-radius:5px;/*角丸*/
padding:5px 5px 9px 5px;
}

デザイン3:ボーダーライン

ボーダーラインを付けました。少しカジュアルになりますね。

CSSをコピペ
.dateList__item{
line-height:2.5em;
position:relative;
}
/*データリストのアイコンをテキストに変更*/
/*カテゴリー*/
.icon-folder.dateList__item:before{
content:"Category";/*任意のテキスト*/
font-weight:bold;/*太文字*/
color:#a83f3f;/*文字色*/
border: solid 2px #a83f3f;/*ボーダー*/
border-radius:5px;/*角丸*/
padding:5px 5px 9px 5px;
}
/*タグ*/
.icon-tag.dateList__item:before{
content:"Tag";/*任意のテキスト*/
font-weight:bold;/*太文字*/
color:#0066cc;/*文字色*/
border: solid 2px #0066cc;/*ボーダー*/
border-radius:5px;/*角丸*/
padding:5px 5px 9px 5px;
}

デザイン4:アンダーライン

最後はアンダーラインです。もう少し線を細くしてもオシャレかもですね!

CSSをコピペ
.dateList__item{
line-height:2.5em;
position:relative;
}
/*データリストのアイコンをテキストに変更*/
/*カテゴリー*/
.icon-folder.dateList__item:before{
content:"Category";/*任意のテキスト*/
font-weight:bold;/*太文字*/
color:#a83f3f;/*文字色*/
border-bottom:solid 3px #a83f3f;/*下線*/
padding:5px 5px 9px 5px;
}
/*タグ*/
.icon-tag.dateList__item:before{
content:"Tag";/*任意のテキスト*/
font-weight:bold;/*太文字*/
color:#0066cc;/*文字色*/
border-bottom:solid 3px #0066cc;/*下線*/
padding:5px 5px 9px 5px;
}

THE THORのデータリストを縦に並べるカスタマイズ:まとめ

今回は読者さんからのリクエストで THE THOR(ザ・トール)の記事情報(データリスト)を縦に並べるカスタマイズを紹介しました。

もう一度、全てのカスタマイズをまとめておきます。

■ 記事情報(データリスト)を縦に並べるカスタマイズです。

/*データリストを縦並び*/
.dateList-main{
display: flex;
flex-direction: column;
}
.dateList__item{
line-height:1.8em;
}

■ 記事情報(データリスト)のアイコンを変更するカスタマイズです。

/*データリスト(アイコン色)*/
.dateList__item::before{
color: #a83f3f;
}

■ 記事情報(データリスト)の文字色を変更するカスタマイズです。

/*データリスト(文字色)*/
.dateList__item a{
color:#a83f3f;
}

■ 記事情報(データリスト)にホバーエフェクトを付けるカスタマイズです。

/*データリストのホバーエフェクト*/
.dateList__item a{
padding: 3px;
transition:0.4s;
}
.dateList__item a:hover{
transition:0.4s;
background: #a83f3f;/*背景の色*/
color:#fff;/*文字の色*/
}

■ 記事情報(データリスト)のアイコンをテキストに変更するカスタマイズです。

/*データリストのアイコンをテキストに変更*/
/*カテゴリー*/
.icon-folder.dateList__item:before{
content:"カテゴリー:";/*任意のテキスト*/
font-weight:bold;
}
/*タグ*/
.icon-tag.dateList__item:before{
content:"タグ:";/*任意のテキスト*/
font-weight:bold;
}

ちなみにデータリスト(記事情報)のカスタマイズは他にもあるのでそちらもご覧ください。

関連記事

みなさんこんにちは。 THE THORのアイキャッチ上に付いてる記事情報って気になったことありますか? 私たちは他の人のサイトを見るときいつも気になるんです。 この記事いつ書いたんだろう?どれくらい […]

カスタマイズについて気になったこと、分からないこと、質問、リクエストありましたらお問い合わせいただくか Twitterで DMください!ご連絡お待ちしております!

最後までご覧いただきありがとうございます。

おわり