【カスタム】SWELLのプロフィールを中央寄せで表示する方法

  • URLをコピーしました!
この記事はこんな人におすすめ
  • WordPressテーマ「SWELL」を使用している。
  • 「SWELL」のプロフィールウェジットを配置している。
  • プロフィールの本文を中央寄せに変更する方法を知りたい。

WordPressテーマ「SWELL」は簡単にシンプルでおしゃれなサイトが作れると、最近とても人気ですよね。

まめこ

当ブログも「SWELL」を使用しています。

この記事では、WordPressテーマ「SWELL」のプロフィール文を中央寄せで表示する方法について解説します。

簡単に変更可能なので、気になっていた方はチャレンジしてみてくださいね。

タップしてとべる目次

「SWELL」のプロフィールとは?

SWELLの、この記事を書いた人
この記事を書いた人
SWELLのプロフィール
プロフィール

SWELLでは「この記事を書いた人(著作者)」と「プロフィール(サイトの運営者)」をそれぞれ設定することが出来ます。

複数人で記事を書いてる場合は、記事を書いた人の情報と、サイトを運営している人の情報を分けて記載することが出来るので便利ですよね。

ですが、「この記事を書いた人」の本文は中央寄せになっているのに対し、「プロフィール」の方は本文が左寄せになっています。

SWELLのプロフィールは左寄せがデフォルト
SWELLのプロフィールは左寄せがデフォルト
まめこ

ちょっと気になる……。

もともと「SWELL」のプロフィールウェジットはサイドバーに設定する想定で作られているため、本文が左寄せが標準になっていると考えられます。

しかし、プロフィールを配置する場所によっては、本文を中央寄せで表示したい時もありますよね。

SWELLのプロフィール本文を中央寄せにしたい
SWELLのプロフィール本文を中央寄せにしたい

例えば、プロフィールをサイドバーでなく、フッターに配置するとPCで表示した際、かなり気になる感じになってしまいます。

まめこ

かなり気になる……。

これはどうにかしたいですね。

では、「SWELL」のプロフィールを中央寄せで表示する方法を解説していきます。

↑目次に戻る

「SWELL」のプロフィールを中央寄せで表示する方法

カスタマイズを開く

「SWELL」のプロフィールを中央寄せで表示する方法 カスタマイザーを開く
「SWELL」のプロフィールを中央寄せで表示する方法 カスタマイザーを開く

まず、ダッシュボードからカスタマイズを開きます。

ダッシュボード⇒外観⇒カスタマイズの手順でもOKです

追加CSSを開く

「SWELL」のプロフィールを中央寄せで表示する方法 追加CSSを開く
「SWELL」のプロフィールを中央寄せで表示する方法 追加CSSを開く

追加CSSのタブを開きます。

CSS(カスケーディングスタイルシート)はWebページのレイアウトやデザインを整えるための言語

まめこ

WordPressテーマもCSSなどを駆使してデザインを構築してるよ。

まめこ

カスタマイズを行いたい場合は、ここにCSSを記載するとデザインを変更出来る!

プロフィール本文を中央寄せにするCSSを入力

.p-profileBox__text {text-align: center;}

こちらのCSSをコピー&ペーストして追加CSSに入力してください。

入力したら公開し、カスタマイズ内容をサイトに反映させます。

「SWELL」のプロフィールを中央寄せで表示する方法 プロフィール本文を中央寄せにするCSSを入力
「SWELL」のプロフィールを中央寄せで表示する方法 プロフィール本文を中央寄せにするCSSを入力

text-alignはCSSで要素の配置を設定するプロパティ。
p-profileBox__textのクラスが設定されている要素(プロフィール本文)を中央に配置することになります。
centerの部分をrightに変更すれば、右寄せにも変更出来ますよ!

以上で手順は終了です。

↑目次に戻る

さいごに

SWELLのプロフィール本文が中央寄せされた
SWELLのプロフィール本文が中央寄せされた

これで「SWELL」のプロフィール文を中央寄せにすることが出来ました!

SWELLのプロフィール本文が中央寄せされた
SWELLのプロフィール本文が中央寄せされた(PC表示)

フッターに配置した場合のPC版表示も良い感じになりましたね。

とても簡単に設定が出来るので、デザインを変更したい方は是非試してみてくださいね。

まめこ

簡単なので是非やってみてください!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
タップしてとべる目次