サイト&ブログの作り方

AFFINGER6:プロフィールカードの文章を左寄せにする

2021年8月30日

  1. HOME >
  2. コラム >
  3. サイト&ブログの作り方 >

AFFINGER6:プロフィールカードの文章を左寄せにする

2021年8月30日

株式会社オンスピードが販売している、WordPressの有料テーマ『AFFINGER6』。
このテーマでは、サイドバーに「プロフィールカード」なるものを表示することができます。

※サイドバーは、デフォルト設定だとスマホでは表示されません。
スマホでサイドバーの内容を表示したい場合は、
【AFFINGER管理】>>【全体設定】>>【サイト全体のレイアウト一括設定※ここの設定が最優先されます】>>『スマホのサイドバーを非表示にする』のチェックを外す
ことをおこなってください。

さて、パソコンから見えるサイドバーのプロフィールカードはこれですね↓↓↓

AFFINGER6のプロフィールカード
『AFFINGER6』のプロフィールカード。

このプロフィールカードに表示される自己紹介文は「中央揃え」です。

この中央揃えを解除したい方向けのhtmlコードをご紹介いたします。

<p style="text-align:left;font-size:80%;">
※ここに自己紹介文を入れる※
</p>

このhtmlを使ってプロフィール文を入力すると、プロフィールの文章を左寄せにすることができます。
文章内の改行は、

<br>

でおこなってください。

下準備として、【AFFINGER管理】から【プロフィール情報にhtmlタグを許可する】のもお忘れなく!

以下で、細かい手順をいちおう説明しています。

下準備:プロフィール欄でhtmlタグを使えるようにする

WordPressのデフォルトでは、プロフィールカード内でhtmlタグを使うことはできません。
プロフィールカード内でhtmlタグを使えるようにする方法は二種類あります。

AFFINGER6の場合:【AFFINGER管理】からhtmlタグを使えるように設定する

設定できる場所は以下にあります。

【AFFINGER管理】>>【投稿・固定記事】>>【この記事を書いた人】>>【プロフィール情報にhtmlタグを許可する】にチェックを入れる。

AFFINGER6以外の場合(AFFINGER5など):『function.php』に記述を追加する

以下のコードを『function.php』に追加します。

// プロフィールにタグを反映させる
remove_filter('pre_user_description', 'wp_filter_kses');

『function.php』の在りかはテーマフォルダの中です。
テーマのアップデート時にカスタマイズが消えてしまうのを防ぐため、子テーマの『function.php』を使うのがおすすめ!
↓↓↓『function.php』の在りかはココ↓↓↓
【wp-content】>>【themes】>>【※使用しているテーマ名】>>『function.php』

左寄せを指定するCSS付きでプロフィール文を書く

冒頭で紹介したコードを使い、プロフィール文を書きます。
改行もhtmlタグを使っておこないます。
コードを使ったサンプルを下に載せておきます。

<p style="text-align:left;font-size:80%;">
この文章はサンプルです。<br>
イラストレーターの鍋弓わたです。<br>
イラストや漫画を描くのが好きなので、一児の母になったいまもぼちぼち描いています。<br>
サークル名『極星堂』で同人活動もしています。<br>
おもに描いているのは、歴史とファンタジーのお話です。<br>
</p>

すると、下のように自己紹介文が左寄せになります。
(※画像で例に挙げているわたしの自己紹介文は、ほかのタグも使っています。そのため、サークル名にルビが入っていたり、別ページへのリンクがあったりします)

AFFINGER6のプロフィールカードで自己紹介文を左寄せにしたところ
『AFFINGER6』のプロフィールカードで自己紹介文を左寄せにしたところ。

左寄せ+文字サイズを大きくしたいなら

おおざっぱに大きくするなら

以下のコードを使えば解決です。
「フォントサイズ」に関するCSSを削除してあります。
改行はhtmlタグを使っておこなってくださいね~。

<p style="text-align:left;">
この文章はサンプルです。<br>
イラストレーターの鍋弓わたです。<br>
イラストや漫画を描くのが好きなので、一児の母になったいまもぼちぼち描いています。<br>
サークル名『極星堂』で同人活動もしています。<br>
おもに描いているのは、歴史とファンタジーのお話です。<br>
</p>

以下のようになるはずです。
読みやす~~~い☆

AFFINGER6のプロフィールカードで自己紹介文を左寄せにしてフォントサイズも上げたもの
『AFFINGER6』のプロフィールカードで、自己紹介文を左寄せにしてフォントサイズも上げたもの。

きっちり設定したいなら

以下のコードの「◆」の部分に、100以上の適当な数字を半角で入れてください。
ご自身で読みやすい大きさに調整するとよいと思います。

<p style="text-align:left;font-size:◆%;">
この文章はサンプルです。<br>
イラストレーターの鍋弓わたです。<br>
イラストや漫画を描くのが好きなので、一児の母になったいまもぼちぼち描いています。<br>
サークル名『極星堂』で同人活動もしています。<br>
おもに描いているのは、歴史とファンタジーのお話です。<br>
</p>

たとえばこんな感じですね~↓↓↓

<p style="text-align:left;font-size:120%;">
この文章はサンプルです。<br>
イラストレーターの鍋弓わたです。<br>
イラストや漫画を描くのが好きなので、一児の母になったいまもぼちぼち描いています。<br>
サークル名『極星堂』で同人活動もしています。<br>
おもに描いているのは、歴史とファンタジーのお話です。<br>
</p>

このコードを書いた理由

センタリング(中央揃え)が苦手だから! これに尽きます(好きな人はごめんね……!)。

センタリングは短文でポイントとして使うと効果的です(うちのH2見出しもセンタリング)。
ただ、長文をセンタリングされると読みづらいことこの上ない……。

インターネット上に星の数ほどウェブサイトが存在するいま、自分のブログ(サイト)を読んでもらうのは至難の業。
訪問者の方にとってストレスになる部分は減らしておきたいです。
それがこんなに簡単なことならなおさらですよ……!

イラストレーター 鍋弓わた が表紙を描いた本

イラストレーター 鍋弓わた が描いた漫画(同人誌)

  • あとりえ極星堂 運営者
  • 新しいページ

鍋弓わた

こんにちは。近代史に強いイラストレーターの鍋弓わたです。
イラストや漫画を描くのが好きなので、一児の母になったいまも仕事に趣味にぼちぼち描いています。
サークル名『極星堂きょくせいどう』で同人活動もしています。
大阪生まれの奈良在住。

よりよい作品づくり、より楽しく生きるために自己肯定感を高める方法を模索中。
趣味は2003年からおこなっているウェブ制作。
気がつけば今年で18年目。

⇒もっと自己紹介

pixiv 小説家になろう

⇒お問い合わせ

-サイト&ブログの作り方
-,