THE THOR PREV NEXT 次の記事　前の記事　カスタマイズ

THE THOR ザ・トール 次の記事 / 前の記事 Prev/Nextの表示をシンプルにするカスタマイズ

THE THOR PREV NEXT 次の記事　前の記事　カスタマイズ

THE THOR の記事下で『 前の記事 』『 次の記事 』に誘導する【PrevNext記事】の表示をカスタマイズしました。

出来上がりは下の画像を確認してください。

THE THOR PREV NEXT 次の記事　前の記事　カスタマイズ※このレイアウトは当サイトでは使用していません。画像は試験的に作成したものです。

 

THE THOR の標準デザインはかなり凝った作りになっていますが、今回は一般的でシンプルな表示に変更しました。「タイトルをはっきりとさせたい」「サイト全体をシンプルにしたい」といった場合に有効なカスタマイズだと思います。

トオル
標準も全然悪くないと思うぞ
テツ
好みやサイトのコンセプトはそれぞれだからな
トオル
・標準デザイン
・当サイトのデザイン
・この記事デザイン
選択肢は増えるのは良いことだな！

 

目次

THE THOR 次の記事 / 前の記事 Prev/Nextの表示をシンプルにするカスタマイズ

 

カスタマイズはCSSを「追加CSS」にコピペするだけでOK

操作手順
外観 → カスタマイズ → 追加CSS

 

コードは以下のようになります。

Prev/Nextの表示をシンプルにするカスタマイズのCSS（以下をコピペ）

/*全体の枠*/
.prevNext__item.prevNext__item-prev,.prevNext__item.prevNext__item-next {
	width: 100%;
	padding-left: 0;
}
.prevNext__item.prevNext__item-prev .eyecatch:before,.prevNext__item.prevNext__item-next .eyecatch:before {
    padding-top: initial;
}
/*次の記事に中央のボーダー*/
.prevNext__item.prevNext__item-next {
	padding-top: 20px;
	border-top:solid 1px rgba(0,0,0,.1);
}
/*次の記事の並び逆順*/
.prevNext__item.prevNext__item-next .eyecatch{
	flex-direction : row-reverse;
}
.prevNext__item.prevNext__item-next .eyecatch img{
	order:2;
}
/*各パーツの初期化と位置調整と装飾*/
.prevNext__title ,.prevNext__pop{
    position: static;
}
.prevNext__pop
{
    height:initial;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prevNext__item.prevNext__item-prev .prevNext__pop{
    border-radius:10px 0 0 10px;
}	
.prevNext__item.prevNext__item-next .prevNext__pop{
    border-radius:0 10px 10px 0;
}	
.prevNext,.prevNext__item.prevNext__item-prev{
	border:none;
}
.prevNext .eyecatch__link {
    position: static;
	width:initial;
}
.prevNext .eyecatch__link::before {
    content:none;
}
.prevNext a.eyecatch__link.eyecatch__link-mask {
    display: flex;
}
.prevNext .eyecatch {
    display: flex;
	background:none;
}
.prevNext__item-next .prevNext__title {
    text-align: right;
}
/*画像サイズと文字色*/
.prevNext .eyecatch .eyecatch__link img {
    position: static;
	width:160px;
	height:90px;
	margin-right:10px;
	margin-left:10px;
}
.prevNext__title,.prevNext__title span{
	color:#666666;
}

 

THE THOR の標準では凝ったデザインがされているので、それらを解除する必要がありコードが複雑になっています。ちょっと説明するのが難しいので詳細は割愛させていただきます。

画像サイズの変更

画像サイズはサイトに合わせ変更してください。サンプルコードでは16：9のアイキャッチ画像に比率をあわせ160px×90pxとなっています。

変更箇所は /*画像サイズと文字色*/ の  width:160px; height:90px;です。好みの数値に変更してください。

 

記事タイトル文字色の変更

文字色もサイトに合わせ変更可能です。サンプルコードではグレー(#666666)になっています。

変更箇所は /*画像サイズと文字色*/ の  color:#666666;です。好みの数値に変更してください。

 

その他、THE THOR の基本設定から変更する箇所もあるのでそちらもご確認ください↓

基本設定での変更項目

投稿日に表示/非表示、Prev/Next 部分の文字の変更はこちら

文字は矢印などがわかりやすいかもしれませんね。

操作手順
外観 → カスタマイズ → 投稿ページ設定[THE] → Prev Next記事設定

 

  • Prev Next記事を表示するか選択
  • 投稿日を表示するか選択
  • 次の記事へのタイトルを入力
  • 前の記事へのタイトルを入力
  • 記事がない時のテキストを入力
  • 同一カテゴリのPrev Next記事のみを表示する
  • 除外するカテゴリもしくはタグのIDを入力
  • 表示順の指定

 

Prev/Next 部分の背景色の変更はこちら

テーマカラーが背景色になります。

操作手順
外観 → カスタマイズ → 基本設定[THE] → 基本スタイル設定 → テーマカラーを指定

 

不具合等はコメントよりご連絡ください。

以上で完成です。

※カスタマイズは自己責任で行ってください。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

Mana
2,646円(11/24 05:14時点)

Amazonで購入する楽天市場で探すYahoo!で見る

Amazonの情報を掲載しています

 

あとがき

 

このカスタマイズはリクエストをいただき作成しました。当サイトでは別のカスタマイズを行っています。カスタマイズのご希望はお気軽にどうぞ。Twitterでの連絡が一番レスポンスが良いと思います。フォローもお願いしますw

＼フォロミー／

 

トオル
フォロワーだと採用率が高いらしいぞ
テツ
え、えこひいき？それ都市伝説だろ
当サイトのカスタマイズ
THE THOR ザ・トール もう少しさり気なく PrevNext をコンパクトに表示する方法

「からあげ棒、ありったけ」では有料ワードプレステーマ【 THE THOR 】を使用しています。THE THOR を自分好みに少しずつカスタマイズを行っています。   THE THOR の魅力はこちら  […]

>

THE THOR
テーマの情報を詳しく見る