プロフィールは“何を書くか”と同じくらい、“どう見せるか”が大切です。
せっかく良い内容を書いていても、改行がなく文字がぎっしり詰まっていると読みにくくなってしまいます。
本記事では、誰でもコピペで再現できる「最小HTML」だけで、読みやすく・伝わりやすい自己紹介を整える方法をまとめました。
テキストが詰まって読みにくい、行間がない、リンクの置き方に迷う…といった悩みを、今日ここで解決しましょう。
HTMLタグでプロフィールを読みやすく整える方法
プロフィールカードの「紹介文」は、そのまま入力すると改行が効かず、文字が詰まって読みにくくなってしまいます。
そんなときは、HTMLタグを少し使うだけで、ぐっと見やすくなります。
基本で覚えておきたいHTMLタグ
プロフィールの紹介文でよく使うのは、次の8つです。
| 機能 | HTMLタグ / CSSプロパティ | 使い方（例） | 解説 |
|---|---|---|---|
| 改行 | <br> (タグ) | 文章の途中<br>ここで改行 | テキストを途中で強制的に改行します。（段落を区切る<p>とは異なります） |
| 段落 | <p> (タグ) | <p>一つの段落です。</p> | テキストを一つの段落として区切り、通常は上下に余白（スペース）が入ります。 |
| 太字 | <strong> または <b> (タグ) | <strong>強調したい文字</strong> | テキストを太字にします。<strong>は「重要な文字」という意味合いがあります。 |
| 左寄せ | text-align: left; (CSS) | <p style="text-align: left;">テキスト</p> | テキストを左揃えにします。（多くの場合、デフォルト設定なので不要です） |
| 右寄せ | text-align: right; (CSS) | <p style="text-align: right;">テキスト</p> | テキストを右揃えにします。 |
| フォントサイズ | font-size: 90%; (CSS) | <p style="font-size: 90%;">テキスト</p> | フォントのサイズを変更します（px、em、remなどの単位も使えます）。 |
| 下マージン | margin-bottom: 30px; (CSS) | <p style="margin-bottom: 30px;">テキスト</p> | 段落の下側に空きスペース（余白）を設定します。 |
| リンク挿入 | <a> (タグ) | <a href="URL">テキスト</a> | 他のページやファイルへのハイパーリンクを設定します。href属性に行き先URLを指定します。 |
※ 箇条書き（<ul><li>）は現状プロフィールカードでは反映されません。
将来的にAFFINGERのアップデートで使えるようになる可能性はありますが、今は非推奨です。
プロフィールでよく使うレイアウト例
文字サイズを少し小さくする
<p style="font-size:90%;">自己紹介の補足テキストを少し小さめに表示します。</p>→ 読みやすさを保ちながら情報量を増やせます。
段落と余白をつける
<p style="margin-bottom:30px;">
一つ目の段落です。
</p>
<p>
二つ目の段落です。
</p>→ 段落ごとに余白をつけると、読みやすさが格段にアップします。
「詳しいプロフィールを見る」リンク
本文の締めに“次の行き先”を示します。
<p style="text-align:right; font-size:90%;">
<a href="/profile/" target="_blank" rel="noopener">→ 詳しいプロフィールを見る</a>
</p>右寄せにすると本文と視線がぶつかりにくいです。
よくある組み合わせパターン
単体のタグだけでも使えますが、組み合わせることでより自然に整えられます。
ここでは代表的な組み合わせを紹介します。
左寄せ＋小さめ文字
全体をスッキリ見せたいときに便利です。
<p style="text-align:left; font-size:90%;">
2017年からAFFINGERを愛用。<br>
検証→手順化→テンプレ配布を心がけています。
</p>
左寄せ＋余白あり
段落を区切って読みやすくするための定番パターンです。
<p style="text-align:left; margin-bottom:30px;">
プロフィール文を区切るときに使います。
</p>
<p>
次の段落です。
</p>
右寄せ＋「詳しいプロフィール」リンク
本文をまとめたあとに、次の導線を配置します。
<p style="text-align:right; font-size:90%;">
<a href="/profile/" target="_blank" rel="noopener">→ 詳しいプロフィールを見る</a>
</p>
完成イメージ
ここまでの要素をまとめた完成形です。
余白を入れるかどうかで雰囲気が変わるので、好みに合わせて選んでください。
余白ありVer
「左寄せ」＋「フォント80%・85%・90%」＋「下の余白30px」＋「リンク挿入」
<p style="text-align: left; font-size: 90%; margin-bottom: 30px;">
2017年からAFFINGERを愛用。<br>
色んなテーマを試してきたけど、結局AFFINGERが一番使いやすい！
</p>
<p style="text-align: left; font-size: 85%; margin-bottom: 30px;">
★…AFFINGER利用歴8年超<br>
★…テーマ比較実績 10種類以上<br>
★…生成AIを使った実験と検証数え切れず
</p>
<p style="text-align: left; font-size: 90%; margin-bottom: 30px;">
現在は、AFFINGER×AIを使えば誰でも稼げる、そんな仕組みを検証中。
</p>
<p style="text-align: right; font-size: 80%;">
<a href="#">→ 詳しいプロフィールを見る</a>
</p>余白なしVer
「左寄せ」＋「フォント80%・85%・90%」＋「リンク挿入」
<p style="text-align: left; font-size: 90%;">
2017年からAFFINGERを愛用。<br>
色んなテーマを試してきたけど、結局AFFINGERが一番使いやすい！
</p>
<p style="text-align: left; font-size: 85%;">
★…AFFINGER利用歴8年超<br>
★…テーマ比較実績 10種類以上<br>
★…生成AIを使った実験と検証数え切れず
</p>
<p style="text-align: left; font-size: 90%;">
現在は、AFFINGER×AIを使えば誰でも稼げる、そんな仕組みを検証中。
</p>
<p style="text-align: right; font-size: 80%;">
<a href="#">→ 詳しいプロフィールを見る</a>
</p>
margin-bottom: 30px 無しでもそこそこ余白ができるので、余白に拘りがない人はそのままでもOK！
注意点とまとめ
- 使うタグは最小限で十分
改行<br>、段落<p>、強調<strong>、リンク<a>を押さえればOKです。 - 箇条書きは非対応
プロフィールカードでは<ul><li>が反映されません。将来的にアップデートで使える可能性はありますが、現状は避けましょう。 - 余白の入れすぎに注意
margin-bottom を多用すると間延びした印象になります。基本は「30px」を基準に調整。 - 導線を忘れない
最後に「詳しいプロフィールを見る」や「お問い合わせはこちら」などのリンクを入れると、プロフィールが次の行動につながります。
これでプロフィールの紹介文を、シンプルなHTMLだけで見やすく整える方法がまとまりました。
まずは1パターンをコピペして使ってみて、必要に応じて調整してみてください。
