関連記事のPC表示の変更

関連記事ユニットの表示が小さいのが、収益低下の原因かと思い関連記事の表示を大きく変更することに。

今までは記事幅約500ピクセル、サイドバー300ピクセルのうち、500ピクセル分が関連記事だったのに対し、関連記事を約800ピクセルで表示させるために、記事内からフッターに移動させた。

上が変更前の幅、下が変更後の幅。

フッターに移動させたことで、簡単に大きい表示に出来た。

余白の関係でスマホでも若干大きい表示になった。

 

処理1

型崩れしないために、

<div style=”clear:both;”></div>

をフッターの最上部に設定。

 

フッターに関連記事を置いた際の問題点

しかし、単純フッターに関連記事を置くと、スマホで表示した時の表示順序が、

記事→サイドバー(このブログでは伝言板)→フッター(関連記事)となってしまう。

ここで、フッターが、スマホでは上、パソコンでは下に来るようにした。

 

処理2

single.phpの下部をif else文で書き換え。

変更前

<?php get_sidebar(); ?>
<?php get_footer(); ?>

変更後

<?php if(wp_is_mobile()): ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>
<?php else: ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php endif; ?>

 

最後の問題点

記事がサイドバーより大きい時は大して問題ないが、

 

サイドバーが記事より大きい時は型崩れしてしまう。

具体的には、サイドバーの下にフッター(関連記事)がくるため、

記事と関連記事の間に隙間が出来てしまう。

 

こればかりはどうしょうもなく、

アトセンス的には、アトセンス(サイドバー)を固定表示させるのはNGなので、

記事の方が極力長くなるよう、仕方なくサイドバーそのものを削ることに。

今までは伝言板と人気記事を両方入れていたが、今回は伝言板のみにした。

また伝言板が息してないなと思えたら、伝言板をやめて人気記事に変更するかもしれない。

前の

次の

コメントを残す