THE THOR ザ・トール もう少しさり気なく PrevNext をコンパクトに表示する方法

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

 

THE THOR の魅力はこちら

 

今回は、PrevNext をスマホでコンパクトに表示するカスタマイズです。

出来上がりは以下のようにります。

THOR PrevNext カスタマイズ　出来上がり

 

  • PrevNext設定
  • CSSコード
  • THE THOR
  • 追加CSS
  • 上手くいかなくても癇癪をおこさない広い心
  • 自分なりに変更を試みる勇気
  • バックアップしとこかなと思う気持ち

↑おやっと思った人にはこちら↓

・サブタイトルボーダーボックスの色を個別に変える方法

 

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

目次

THE THOR PrevNext とは?

THOR PrevNext とは

 

PrevNext は記事の終わりに「次の(ひとつ新しい)記事、前の(ひとつ古い)記事」を紹介する機能。

PrevNext を表示することで読者が興味ありそうな記事を提示し、回遊率のアップ、PVアップを目指します。

 

 

トオル

えーそんな機能あったの？？？

どこで設定するんや

 

という方は、こちらをご覧ください↓

PrevNextほか
THE THOR ザ・トール どこに何がある？どこで変更する？ レイアウト デザインの基本

このサイトでは WordPressテーマ THE THOR を使用しています。サイトの レイアウト 変更で曖昧だった部分をまとめました。     THE THOR をまだ使用していない方はこちらをご覧く[…]

 

THE THOR もう少しさり気なく PrevNext をコンパクトにスマホで表示する方法

THOR PrevNext PC表示

 

今回のカスタマイズは基本的にスマホ用になっています。PC表示に関しては特に不満がなかったので変更していません。

スマホ表示時に全体的に大きすぎると感じたのでコンパクトに変更しました。

 

「からあげ棒、ありったけ」では、記事終わり ＞ CTA ＞ PrevNext ＞ 関連コンテンツと並んでいるので優先順位的には高くない PrevNext を小さくしたいという思惑もあります。

 

ではカスタマイズしていきましょう。

 

カスタマイズは追加CSSにコードを記述します。

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

 

コードは以下の通り。

/*前後の記事*/
/*スマホで2個並び（1列）*/

/*PrevNext文字の背景色*/
.prevNext__pop {
    background-color: #191919;
}

/*スマホのみ適用*/
@media screen and (max-width : 767px){
    /*横幅半分：余計なボーダー削除*/
    .prevNext__item.prevNext__item-prev,.prevNext__item.prevNext__item-next{
        width:50%;
        border: 0;
    }
    /*高さ160PX：PrevNext文字はみ出ても表示*/
    .prevNext .eyecatch{
        height:160px;
        overflow: visible;
    }
    /*記事タイトルスペース調整*/
    .prevNext__title {
        left: 5px;
        right: 5px;
        bottom: 5px;
    }
    /*記事タイトルサイズ：影：位置*/
    .prevNext .heading-secondary {
        font-size:12px;
        text-shadow:1px 1px 4px #000;
        margin-bottom:0!important;
    }
    /*PrevNext文字サイズ：位置：スペース調整*/
    .prevNext__pop {
        font-size:10px;
        height: 20px;
        line-height: 20px;
        padding:0 5px;
    }
    /*PrevNext文字の位置を少し外に出す*/
    .prevNext__item-prev .prevNext__pop{
        top: -5px!important;
        left: -10px!important;
    }
    .prevNext__item-next .prevNext__pop{
        top: -5px!important;
        right: -10px!important;
    }
    /*PrevNext文字の前（後ろ）に矢印*/
    .prevNext__item-prev .prevNext__pop:before{
        content:"←";
        margin-right:3px;
    }
    .prevNext__item-next .prevNext__pop:after{
        content:"→";
        margin-left:3px;
    }
    /*余計な区切り線を削除*/
    .prevNext{
        border: 0;
    }
    /*コンテンツが無いときの表示の調整*/
    .prevNext__item.prevNext__item-next .prevNext__text{
        padding-right:0;
    }

 

  • 画像サイズは160pxにしているのでサイトに合わせ変更してください。
  • PrevNext文字は少しだけ目立たせたくて飛び出しています。必要ない部分はまるっと削除してください。

THOR PrevNext カスタマイズ　出来上がり

トオル
右側のsnsボタンが邪魔で
サンプル画像がスッキリみえんぞ！
テツ
これか？
この記事はこれだ
「SNS シェアボタンを追尾型に」
トオル
そんなこと聞いてないんだけど・・・

 

 

簡単な解説もつけてあるので必要ない箇所などは変更してください。

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

 

あとがき

 

いままで「PVなんて関係ない、ワシは一国一城一ブログの主だ！」とばかりに適当に改築していました。

 

でも「からあげ棒」は心を入れ替えました。

少しでもPVの足しになるカスタマイズをしよう！

 

次回は「広告設定[THE]の背景スタイルの真ん中にキチンと広告を表示する方法」を予定しています。

 

>

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