WordPressカスタマイズ環境が出来たことで、早速気になっていた部分を変更しました。
WordPressカスタマイズ環境の構築に関しては、前回の記事をご参照ください。
当ブログで使用しているテーマ『賢威』から先日、『賢威8』のスタンダード版が公開されました。 『賢威』を導入した…
気になっていたこと その① ~投稿下のレクタングル広告が表示されない~
移行前は撮り忘れてしまって戻すのが面倒だったので、移行後の画像です。
本来なら表示されている場所でしたが、『賢威』のアップデートに伴いディレクトリ構造が変化したために移行の対象外となっているようです。
これまでなら『single.php』にタグを入れていたのですが、『賢威8』からは『content-post.php』に記述する必要があります。
『content-post.php』は、【wp-content\themes\(賢威テーマフォルダ)\template-parts】配下にあります。
記述する箇所はこちら。
<?php the_content();
?>
<!-- ここに広告表示用のタグを入れる -->
</div><!-- .article-body -->
一応レクタングルを横並びにするコードも載せておきます。
<!-- 本文記事下の横並びアドセンス(スマホ/PC切り替え) -->
<p class="ad-bottom-label">スポンサーリンク</p>
<?php if (wp_is_mobile()) :?>
<div class="sm-ad-bottom">
<!-- スマホ用の広告ユニット配置 -->
</div>
<?php else: ?>
<div class="ad-bottom-main">
<div class="ad-bottom-left">
<!-- 左側のレクタングル -->
</div>
<div class="ad-bottom-right">
<!-- 右側のレクタングル -->
</div>
</div><?php endif; ?>
<!-- アドセンス終了 -->
上記に加えて、CSS(base.css)にも追記が必要になります。
/* ラベル部分 */
.ad-bottom-label {
text-align:center; /* ラベルを中央寄せ */
margin-top:30px; /* 上に余白 */
}
/* 全体部分 */
.ad-bottom-main {
margin-top:20px; /* 上に余白(ラベルとの距離) */
margin-bottom:50px; /* 下に余白(下のコンテンツとの距離) */
}
/* モバイル表示部分 */
.sm-ad-bottom {
margin-top:20px; /* 上に余白(ラベルとの距離) */
margin-bottom:30px; /* 下に余白(下のコンテンツとの距離) */
text-align:center; /* 広告を中央寄せ */
}
/* 広告左 */
.ad-bottom-left{
float:left; /* 広告を左寄せ */
margin-left:50px; /* 右に余白(2つの広告の間の余白) */
margin-right:10px; /* 右に余白(2つの広告の間の余白) */
}
/* 広告右 */
.ad-bottom-right{
float:left; /* これも広告の左寄せ */
}
/* 最後に左寄せを解除するための記述 */
.ad-bottom-main:after {
content:"";
display:block;
clear:both;
}
『content-post.php』に記述するコードのうち、<div>のclassプロパティに設定した値が、CSSの定義名と一致しますので、カスタマイズの際はその辺を見てください。
無事、表示されるようになりました。
気になっていたこと その② ~投稿下の関連記事の表示数がイマイチ~
移行後、こんな感じになっていました。
リスト形式での表示であれば記事数をあまり意識しませんが、カード形式だとどうしても空いているスペースが気になります。
こちらはググってみても解決策を見つけられなかったので、おとなしくグレップ掛けました。
ローラー作戦がやはり最強ですね。該当箇所には下記のコードがありました。
// 関連記事数
$keni_related_post_count = apply_filters( 'keni_related_post_count', 6 );
$keni_related_post_count = apply_filters( 'keni_relation_link_count', $keni_related_post_count ); // 賢威7.1対応
「6」と直書きされているところを「8」に変更。
無事綺麗に表示されるようになりました。それにしても、アイキャッチ画像って大事ですね。NoImageはやはりダサい。
気になっていたこと その③ ~ブログタイトルが折り返されてしまうのがイマイチ~
移行当初の表示はこんな感じでした。
折り返されてしまうのがなんとも気持ち悪かったのですが、設定箇所が分からずブラウザから解析しました。
修正箇所はこちら。
CSSの中に横幅を割合で指定している箇所がありました。
ハイライトされている箇所の横幅を指定するプロパティを変更。
.keni-header .site-title,
.keni-header_col1 .site-title{
float: left;
max-width: 80%;
font-size: 3.0rem;
}
とりあえず8割程度に変更してみたところ…
無事折り返されずに表示できるようになりました。
おまけ
移行を機に投稿ページだけではなく、メインページやアーカイブにもレクタングル広告を置いてみることにしました。
早速コードを使いまわしてみたところ…
若干左寄りになってしまいました。線を引いた辺りに持っていくにはどうやらCSSへの変更が必要のようです。
/* 広告左 */
.ad-bottom-left-ex{
float:left; /* 広告を左寄せ */
margin-left:100px; /* 右に余白(2つの広告の間の余白) */
margin-right:10px; /* 右に余白(2つの広告の間の余白) */
}
既存に影響が出るのは嫌だったので、別スタイルを定義し、メインページとアーカイブの<div>のclassだけを変えてみました。
結果は…遷移してみてみてください。どうやら左側だけ余白を増やすだけで行けるようです。
今後も変更した部分をご紹介できればと思います。
以上です。
スポンサーリンク