2019.3.8

ブログ改造 関連記事をフッター部に移動した

関連記事の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なので、

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

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

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

ホーム(新着)へ»

コメントへ»

デブ健康診断の結果 3/30 new 警察コロナ禍で急増している事故現場の一部始終 3/30 new 安倍首相記者会見安倍首相の会見そのものが「3つの密」濃厚接触な件 3/29 new

ワードプレス»へ

人気記事へ»

ゲーム大会コロナの影響で検索流入がかなり増えている 3/17 up あいた1ページに10記事載せる仕様にした デメリット 3/8 up あいたの似顔絵1ページに10記事載せる仕様にした メリット 3/8 up アドセンス疲れブログが定まらないという病気 3/2 up ブログ村 人気度ブログ村のINポイントは「人気度」なのか? 2/22 up パソコン故障当サイトで使用しているプラグインに関して 2/11 up アンカー広告Googleアンカー広告と全画面広告のテスト中 2/1 up なのはdetonation マクスウェルブログ大幅改造 1/19 up 前へ次へ電波を受信して前へ次へを、日付時間表示にした 12/30 up