【THE THOR】アイキャッチ 上の記事情報をおしゃれに カスタマイズ

みなさんこんにちは。

旅ブロガーのJonyとAi(@10to1_travel)です。

THE THORのアイキャッチ上に付いてる記事情報って気になったことありますか?

私たちは他の人のサイトを見るときいつも気になるんです。

この記事いつ書いたんだろう?
どれくらい PV数があるのかな?
カテゴリーやタグは何だろう?

だから、この記事情報って意外と見られてるんじゃないかと思うんです。

↓この部分ですね↓

THE THORの記事 情報

上にある更新日・投稿日・カテゴリー・タグを表記してる部分です。


こいつをもっと見やすくおしゃれに表記させたいのです。

 
Jony
これまたかなりマニアックなカスタマイズやな。
 
Ai
こだわりがあると言ってもらおう!えっへん!

そこで本日は、THE THORの記事 情報をもっとおしゃれにカスタマイズします!

↓完成図は以下の通り↓

どうです?
見やすくなりましたよね。

今回行ったカスタマイズ内容

  • 背景を黒色でクラシックに
  • テキストをセンター揃え
  • 文字を少し太く
  • 配置をアイキャッチの下に

カスタマイズをする前に、THE THORのアイキャッチの設定をする必要があります。

そちらを説明してから本題に移りますね。

ちなみに記事情報のカスタマイズは他にもありますので、そちらもご覧ください。

関連記事

みなさんこんにちは。 THE THORカスタマイズ大好き JonyとAi(@10to1_travel)です。 今回は、THE THOR(ザ・トール)の記事トップにあるデータリストを縦並びにするカスタマイズを紹介します。[…]

THE THOR アイキャッチ 上の記事情報をおしゃれにカスタマイズ 下準備

THE THORのアイキャッチをカスタマイズする前に、まずは下準備をします。

今回はアイキャッチの表示ノーマル(default)のカスタマイズです。

なので、まずはアイキャッチをノーマル(default)に設定してください。

ダッシュボード → 外観 → カスタマイズ → 投稿ページ設定[THE] → スタイル設定

と進んで、「ページタイトルデザイン設定」でノーマル(default)を選んでください。

これで設定は完了です。

THE THOR アイキャッチ 上の記事情報をおしゃれにカスタマイズ

それでは THE THORのアイキャッチの記事情報をおしゃれにカスタマイズしていきます!

カスタマイズは追加CSSを使って行います。

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

追加 CSSに詳しくない人は以下の記事を参考にしてください。

関連記事

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

記事情報をカスタマイズする CSS

追加 CSSにコピペをすれば完成です。

/*記事情報カスタマイズ*/
.dateList-main{
background-color:#505050;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
text-align:center;
margin-top:-30px;
}
.dateList-main .dateList__item{
color:#fff;
font-size:15px;
font-weight:bold;
}

背景の色を変えたい場合はbackground-color#505050のカラーコードを変更してください。

テキストの中央揃えを止めたい場合はtext-align:center;を消してください。

フォントカラーはcolor#fffのカラーコードを変更してください。

記事 情報をアイキャッチの下に設置するカスタマイズは私たちでは難しすぎるカスタマイズだったので、THE THORのカスタマイズでとても有名なからあげ棒さんの記事を参考にさせていただきました。

からあげ棒、ありったけ

この記事内のコードの「記事日付など」と「アイキャッチ画像」のoederを入れ替えます。

/*記事日付など*/
 .dateList.dateList-main
{ order:3; } 
/*アイキャッチ画像*/
 .eyecatch.eyecatch-main
{ order:2; }

※このからあげ棒さんの記事「THE THOR 記事コンテンツ の順番を変更するカスタマイズ」は当ブログの目的を果たすためのカスタマイズ案ではありません。
このカスタマイズは記事のコンテンツの順番を自由に変えることができる素晴らしいカスタマイズです。
ぜひ参考にしてください。

カスタマイズは以上です。
お疲れ様でした。

THE THORのおすすめ カスタマイズ一覧

私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。

そんな私たちのカスタマイズ案です。

みなさんこんにちは。 THE THOR(ザ・トール)のマーカーはとても […]

みなさんこんにちは。 今回は初心者の方でも簡単にできる、コピペだけで画 […]

みなさんこんにちは。 THE THOR(ザ・トール)のリストデザインは […]

 Ai THE THOR(ザ・トール)のメニューを作成と設定 […]

THE THOR アイキャッチ 上の記事情報をおしゃれにカスタマイズ まとめ

本日は THE THORの記事情報をカスタマイズしました。

地味なカスタマイズかもしれませんが、私たちが気になったと言うことは他の人も気になってる部分だと思うんです。

つまり重要なコンテンツってことですよね!

こういう細かいデザインがサイト滞在時間に大きく関係してくると信じてこれからも THE THORのカスタマイズ案を紹介していきます!

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

 
最後まで読んでいただきありがとうございます!

おわり