記事内に広告を含みます

Xeory Baseカスタマイズ|ウィジェットの隙間を詰め、1stビュー改善

こんにちは、節税サラリーマンです。

本ブログでは、バズ部さんが作成されたWordPressテーマ、「Xeory Base」を利用しています。

過去運用しいてたレンタルサーバでは別のWordPressテーマを利用していたのですが、従来型WEBページの見た目であった事から、SEO対策の強化、表示速度を向上させるため等の目的で、ウィジェットを多数導入したこともあり、サーバ負荷を理由としたトラブルが多く、レンタルサーバ変更と共に、WordPressテーマも変更いたしました。

選定に際しては、なるべくウィジェットを減らしたく、SEOに関する機能がある程度組み込まれていること、見た目(デザインとフォント)がシンプルですばらしい、「Xeory Base」を採用させていただいた次第です。

こちらの経緯は、下記記事ご参照ください。

Googleアドセンス、再申請から8時間で承認が出た話

ブログ運営に慣れてくると、「Xeory Base」を採用した一番大事なポイントをすっかり忘れ、細かいところばかり気になってきます。今回、そんな細かいところをひとつカスタマイズしましたので、ご案内させていただくと共に、皆様参考になれば幸いです。

【不満点】サイドバーのウィジェット間の隙間が広い

上記の画像と、この記事をPCでご覧の方は右のウィジェット欄を見ていただければ一目瞭然ですが、ウィジェットの隙間が気になります。スマホの方は記事の下になるので少々見づらいですが、ご容赦ください。

「人気のページ」欄や、「最近の投稿」欄は、それぞれのエリアにある程度ボリュームがあることから、少し離れていたほうがそれぞれのエリアの区切りがわかり易いかと思います。

しかしながら、SNSリンクボタンは、そのひとつひとつが小さいため隙間が非常に気になります。しかもPCのファーストビューに表示される事からスカスカ感がすさまじいです。

【対策】サイドバーのウィジェット表示間隔を詰めます。

いつもどおり対策をググりますが、対策は大きく2種類ですね。

(1)functions.phpにタグを書き込む方法

実際に本ブログに起きたわけではないですが、functions.phpn編集でミスをすると、テキストエディタにコピーしていた内容を戻すだけでは復活できないケース、ダッシュボードにログインできなくなるなどの問題発生があるらしく、なるべくならいじらずに済ませたいものです。

(2)プラグインを導入する方法

ウィジェットには余白を追加できるものがあり、その余白はピクセル単位で指定できます。こちらにマイナス数値を設定することとで、余白を減らすことが出来るようです。

今回こちらを試してみようと思います。

【方針】余白を減らすプラグインを導入

まずは、よつば手帖さんのサイトから、目的のウィジェットをダウンロードします。ダウンロードしたファイルは解凍せず、そのままWordPressへアップロード(プラグインのアップロードから実行)、有効化します。するとウィジェットの一覧に「余白」が新たに現れます。

 

隙間を調整したいウィジェットの隙間に、この余白ウィジェットを設置します。

ウィジェットを開き、数値を入力していきます。
余白を狭くする場合は、マイナスの数値を入力すればOKです。

節税サラリーマンの場合、マイナス50ピクセル程度だと理想の間隔になりました。

こちら参考にしました。

ウィジェット間の隙間を無くしたい狭くしたい広くしたい場合の設定方法

まとめ

いかがだったでしょうか?

「Xeory Base」は非常に良いWordPressテーマだと思うのですが、
今回、細かなところが気になりカスタマイズしました。

また、直帰率改善のため、
・人気のページにサムネイルを追加
・カテゴリー欄の親子表示化、記事数の追加
・関連記事の表示
に取り組んだ過去記事もご参照ください

Xeory Baseカスタマイズ|直帰率低下へたった3つの取組

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です