「からあげ棒、ありったけ」では有料ワードプレステーマ【 THE THOR 】を使用しています。THE THOR を自分好みに少しずつカスタマイズを行っています。
今回は、PrevNext をスマホでコンパクトに表示するカスタマイズです。
出来上がりは以下のようにります。
- PrevNext設定
- CSSコード
- THE THOR
- 追加CSS
- 上手くいかなくても癇癪をおこさない広い心
- 自分なりに変更を試みる勇気
- バックアップしとこかなと思う気持ち
↑おやっと思った人にはこちら↓
※カスタマイズは自己責任でお願いします。
THE THOR PrevNext とは?
PrevNext は記事の終わりに「次の(ひとつ新しい)記事、前の(ひとつ古い)記事」を紹介する機能。
PrevNext を表示することで読者が興味ありそうな記事を提示し、回遊率のアップ、PVアップを目指します。
えーそんな機能あったの？？？
どこで設定するんや
という方は、こちらをご覧ください↓
このサイトでは WordPressテーマ THE THOR を使用しています。サイトの レイアウト 変更で曖昧だった部分をまとめました。 THE THOR をまだ使用していない方はこちらをご覧く[…]
THE THOR もう少しさり気なく PrevNext をコンパクトにスマホで表示する方法
今回のカスタマイズは基本的にスマホ用になっています。PC表示に関しては特に不満がなかったので変更していません。
スマホ表示時に全体的に大きすぎると感じたのでコンパクトに変更しました。
ではカスタマイズしていきましょう。
カスタマイズは追加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文字は少しだけ目立たせたくて飛び出しています。必要ない部分はまるっと削除してください。
サンプル画像がスッキリみえんぞ！
簡単な解説もつけてあるので必要ない箇所などは変更してください。
※カスタマイズは自己責任でお願いします。
あとがき
いままで「PVなんて関係ない、ワシは一国一城一ブログの主だ！」とばかりに適当に改築していました。
でも「からあげ棒」は心を入れ替えました。
少しでもPVの足しになるカスタマイズをしよう！
次回は「広告設定[THE]の背景スタイルの真ん中にキチンと広告を表示する方法」を予定しています。