WordPressの著者情報「Simple Author Box」をスマホ表示で文字を左寄せする際はCSSの設定が必要です!

浜田紙業ではホームページでの集客を行なっています。

ここ最近色々な記事を見たお客様から問い合わせがありありがたい限りです。

記事の著者情報の文字がスマホで見た場合に中央寄せになってしまう問題を解決しました。

下の画像は浜田紙業の著者情報をスマホで見た場合です。

2023年7月にテーマを変更したので追記しています。

CSSで変更

左寄せにしたくていろいろと試した結果CSSの書き換えで見事に解決しました。

今回は金沢市にあるホームページ制作会社の株式会社AMS古倉氏にご助言を頂きました。

記事の著者情報とは?

著者情報

これですね。

グーグルでは誰がどんな情報を書いたかを非常に重要視しており、記事の信ぴょう性というのがますます大切になってきます。

浜田紙業では、ワードプレスのテーマ「ライトニング」を使用しています。

著者情報を入れるプラグインは「Simple Author Box」を使っており非常に使い勝手の良いプラグインです。

しかしスマホで著者情報を見ると文字が中央揃えになってしまうのです。

解決方法はこれだ!

ワードプレスにログインしダッシュボードから

外観⇒テーマファイルエディター

をクリックします。

するとCSSが出てくるので右にあるテーマファイルの

header.phpをクリックします。右下の赤い丸の部分です。

header.phpです

その中の一部分に追加します。

<?php wp_head(); ?>
↓↓
<?php wp_head(); ?>

<style type=”text/css”>@media screen and (max-width: 480px)
{.saboxplugin-wrap .saboxplugin-desc {text-align: start
!important;”}}</style>

追加したコード

これで完成です。

実際に作動している確認したところ

作動している

しっかりと左寄せになっていました。

細かい事なのですがホームページ集客ではこういった作業が非常に大切です。

また一つお客様にとって見やすいホームページになったような気がします。

ワードプレスのテーマがコクーンの場合

最近浜田紙業のHPをワードプレスのテーマ「コクーン」にリニューアルしました。

リニューアルしたところ、スマホで見たときに著者情報が中央揃えになっていたので左寄せにします。

ダッシュボード→外観→カスタマイズ→追加CSS

とクリックしていき

@media screen and (max-width: 480px)
{.saboxplugin-wrap .saboxplugin-desc {text-align: start
!important;”}}

こちらを追加CSSに挿入します。

著者情報を左寄せに

こちらを追加することで無事に左寄せになりました。

タイトルとURLをコピーしました