AFFINGER

AFFINGER5&6【プロフィールのテキストを中央寄せ→左寄せに】改行も

2021年9月23日

AFFINGER背景画像A

AFFINGER5&6で、プロフィールのテキストを「左寄せ」にする方法の紹介です。

スタイルシートの編集等の難しい作業は、一切なし!

簡単に、デフォルトの「中央寄せ」を解除できます。

 

こんな人のお役に立てる記事です。

小豆
プロフィールの文章が勝手に中央寄せされて、見た目が悪い。
これって、左寄せにしたり改行できないの?

【AFFINGER5&6】プロフィールのテキストを左寄せ・改行する

AFFINGERなら、記事内にユーザーの目を惹くプロフィールカードを設置することができます。

AFFINGERプロフィールカード

関連プロフィールカードの設置方法はこちら

見た目もよく、多くのAFFINGERブログで使われていますよね。

ただ一つ残念なのは、テキストが勝手に中央寄せになってしまう上に、改行もできないこと。

 

実際の表示がこちらです。

プロフィールの文章が中央寄せ

大福
「知りです」って・・。
この中途半端な見た目がすごく嫌だ。
改行が無視されて、詰め詰めの状態になっているのも気に入らない。
小豆

 

で、今回紹介する方法を使用した場合の見え方がこちら。

左寄せと改行をしたプロフィール

中央寄せを解除して、「左寄せ」と「改行」を行いました。

デフォルトの状態と比較して、断然見た目が自然になりましたね。

プロフィールの文章を左寄せ・改行する方法

難しい操作は、一切なし!

AFFINGERなら、簡単にプロフィールの文章を左寄せ・改行することができます。

手順

  1. プロフィール内でHTMLタグを使えるようにする
  2. 左寄せタグを挿入
  3. 改行タグを挿入
  4. プロフィールを更新

 

step
1
プロフィール内でHTMLタグを使えるようにする

プロフィール情報の設定

AFFINGER5管理 → 投稿・固定記事 → この記事を書いた人

保存をクリック

プロフィール情報にhtmlタグを許可する にチェック → save

この設定を行うことで、プロフィール内の文章を記事装飾することができるようになります。

 

step
2
左寄せタグを挿入

左寄せHTMLタグを挿入

  1. WordPressメニー → ユーザー → プロフィール → プロフィール情報
  2. <p style="text-align: left">テキスト</p>を挿入

htmlタグ<p style="text-align: left">テキスト</p>で挟んだテキストが左寄せになります。

 

タグ参考例

デフォルトの状態 左寄せに変更
中央寄せのデフォルトの場合 左寄せHTMLタグを挿入した場合
サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト <p style="text-align: left">サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト</p>

画像はクリックで拡大できます

 

step
3
改行タグを挿入

改行タグを挿入

</br>を挿入

htmlタグ</br>を挿入した箇所で改行がされます。

 

タグ参考例

デフォルトの状態 改行タグを挿入
中央寄せのデフォルトの場合 改行HTMLタグを挿入した場合
サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト</br>サンプルテキスト サンプルテキスト</br> サンプルテキスト

画像はクリックで拡大できます

 

step
4
プロフィールを更新

プロフィール情報を更新

プロフィール編集後は、忘れずに プロフィールを更新 をクリックします。

中央寄せや改行以外の記事装飾

今回紹介した方法を使用すれば、以下のようなプロフィールも作成できます。

記事装飾

小豆
おぉ!だいぶ見た目が華やかになるね。
でも、記事装飾用のHTMLタグがわからない。
そんな時は、以下の方法が便利だよ。
大福

 

記事編集画面でプロフィール文章を作成

プロフィール文章の作成に「記事編集画面」を使えば、HTMLタグをわざわざ手入力する必要はありません。


  • 記事編集画面でプロフィール文章を作成

    記事編集画面

    プロフィールに使用したい文章を作成


  • 記事装飾

    記事装飾を行う

    通常の記事のように装飾


  • HTMLをコピー

    テキストエディタ

    テキストエディター → 表示されたHTMLをコピー


  • プロフィールに貼り付け

    プロフィールに貼り付け

    コピーしたHTMLをプロフィールに貼り付け


大福
できる記事装飾は、太字やマーカーなどの基本的なものだよ。
ふきだしや見出しなどは、入力してもプロフィールには表示されないよ。

 

まとめ:プロフィールのテキストをカスタマイズしよう

プロフィールの文章は、デフォルトでは強制的に中央寄せになってしまいます。

文章の見た目にこだわりたい人は、ぜひ今回紹介した方法を試してみてください。

ちなみに、やっている人が少ないので、ライバルブログとの差別化におすすめです。

 

AFFINGER利用者向けオリジナル特典の販売

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ&役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

特典詳細ページへ移動する

 

こちらの記事もよく読まれています

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER

© 2021 大福日記