みなさんこんにちは。
旅ブロガーのJonyとAi(@10to1_travel)です。
THE THORのアイキャッチ上に付いてる記事情報って気になったことありますか？
私たちは他の人のサイトを見るときいつも気になるんです。
この記事いつ書いたんだろう？
どれくらい PV数があるのかな？
カテゴリーやタグは何だろう？
だから、この記事情報って意外と見られてるんじゃないかと思うんです。
↓この部分ですね↓
上にある更新日・投稿日・カテゴリー・タグを表記してる部分です。
こいつをもっと見やすくおしゃれに表記させたいのです。
そこで本日は、THE THORの記事 情報をもっとおしゃれにカスタマイズします！
↓完成図は以下の通り↓
どうです？
見やすくなりましたよね。
今回行ったカスタマイズ内容
- 背景を黒色でクラシックに
- テキストをセンター揃え
- 文字を少し太く
- 配置をアイキャッチの下に
カスタマイズをする前に、THE THORのアイキャッチの設定をする必要があります。
そちらを説明してから本題に移りますね。
ちなみに記事情報のカスタマイズは他にもありますので、そちらもご覧ください。
みなさんこんにちは。 THE THORカスタマイズ大好き JonyとAi(@10to1_travel)です。 今回は、THE THOR(ザ・トール)の記事トップにあるデータリストを縦並びにするカスタマイズを紹介します。[…]
THE THOR アイキャッチ 上の記事情報をおしゃれにカスタマイズ 下準備
THE THORのアイキャッチをカスタマイズする前に、まずは下準備をします。
今回はアイキャッチの表示ノーマル(default)のカスタマイズです。
なので、まずはアイキャッチをノーマル(default)に設定してください。
と進んで、「ページタイトルデザイン設定」でノーマル(default)を選んでください。
これで設定は完了です。
THE THOR アイキャッチ 上の記事情報をおしゃれにカスタマイズ
それでは THE THORのアイキャッチの記事情報をおしゃれにカスタマイズしていきます！
カスタマイズは追加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ユーザーの Jonyと Ai(@ […]
THE THOR アイキャッチ 上の記事情報をおしゃれにカスタマイズ まとめ
本日は THE THORの記事情報をカスタマイズしました。
地味なカスタマイズかもしれませんが、私たちが気になったと言うことは他の人も気になってる部分だと思うんです。
つまり重要なコンテンツってことですよね！
こういう細かいデザインがサイト滞在時間に大きく関係してくると信じてこれからも THE THORのカスタマイズ案を紹介していきます！
※カスタマイズは自己責任でお願いします。
おわり
- 2021年6月16日
- THE THORのカスタマイズ
- CSSカスタマイズ, THE THOR