FC2ブログのプロフィール文にhtmlを使わない方が良い理由

投稿 2018年12月12日

最終更新 2018年12月12日

環境設定プロフィールのあなたの紹介文のことです。全てとは言いませんが、htmlはなるべく使わない方が良い、という理由と仕組みの説明です。

プロフィールを編集する場所

紹介文を書くテキストボックスの下に HTMLを使うことができます。改行は反映されます。と書いてあります。これが非常に重要ですのでこれから説明します。

その前についで。プロフィール用画像については正方形 600×&600 (px)程度をおすすめします。
正方形をすすめる理由はそれがweb一般のセオリーだから。プロフ画像といえばもう正方形と相場が決まっています。セオリーに従っておくとデザイン面の都合にも柔軟に対応できます。

600pxをすすめるのは小さすぎると高dpiディスプレイでひどくぼやけるから。プロフィール画像はサイドメニューに掲載されることが多く、大体サイドメニューの横幅は250〜300pxあたりが多いです。ぼやけ解消には表示サイズの原寸の(最低でも)2倍必要ですから、600px程度が妥当。

特にプロフィール画像をロゴとして利用している方もいらっしゃいますよね。商用利用の方とか、あるいは自作ロゴでも良いんですが。
ロゴがぼやけてると不信感というか胡散臭い印象を与えてしまいますのでご注意を。CHANELで買い物しようと思ってサイトに行ったらロゴがぼやけてる、もしかして詐欺サイト？って思いますよね。フツーは。そしてロゴが円形処理された時に見切れて収まっていない場合など。これも胡散臭いですよね。プロフィール画像が円形処理されるのはもうかなり一般的ですから、ロゴ作成時には円形処理されても丸の中にきっちり収まるようなデザインをしておくと良いですね。そのためにもやはり正方形がベストプラクティス。

プロフィール文は自動改行

これは旧投稿画面の改行の扱い『自動』と同じシステムです。
文章編集時に Enter/ Return キーを押すと自動で <br> が挿入されます。がしかしそのbrタグは目視確認することができません。

これはまさしく旧投稿画面の改行『自動』と同じシステムですね。というわけで注意点も同じです。

FC2ブログで謎の空白行ができるのはソースの途中改行が原因です

FC2ブログの旧投稿画面をお使いの方向け記事です。旧投稿画面には改行の扱いを2種から選択できるようになってます。ひとつは「自動」もうひとつは「HTMLタグのみ」です。...

最重要「pタグ」の利用に注意

これ今回のキモの部分なんですが、htmlが使えるということでセマンティクスに気をつかう方が陥りやすい盲点的な問題について。

東京近郊に住む30代の主婦です。
子育てのことや毎日の食事レシピなどを綴っています。

上記は一定のまとまった文章ですから、段落として扱うのが妥当だと考える。つまり p要素としてマークアップしたくなりますよね。

<p>東京近郊に住む30代の主婦です。
子育てのことや毎日の食事レシピなどを綴っています。</p>

これは至って妥当なhtml構文ですが落とし穴があります。
ところで改行の扱い『自動』ですからこれはダメですよ ↓

<p>
東京近郊に住む30代の主婦です。
子育てのことや毎日の食事レシピなどを綴っています。
</p>

プロフィール編集画面で実際目にするのはこの形ですが、ブラウザが返すレスポンスは以下の通り。

<p>
<br>
東京近郊に住む30代の主婦です。<br>
子育てのことや毎日の食事レシピなどを綴っています。
<br>
</p>

brが一行取っている様子がわかるように上記のような書き方をしています。br要素が空白行を作ってしまいますので「なんか行間すげー空いてね？？？」になってしまいますし、p要素が始まっていきなりbrなんてのはまず無いのでおかしな構文ですよね。

話を戻しまして、

<p>東京近郊に住む30代の主婦です。
子育てのことや毎日の食事レシピなどを綴っています。</p>

このp要素のマークアップが何故ダメなのかの理由です。

プロフィール文はFC2独自変数と連携している

プロフィール文として記載した内容は <%introduction2> という独自変数で出力されます。FC2ブログの独自変数出力はhtmlの正確性などは度外視し、単なるテキストとして内容を書き出します。ですから仮にhtmlに構文的な間違いやエラーがあったとしても、書いてある内容をそっくりそのまま書き出します。

FC2公式プラグインにプロフィールというのがありますよね。こちらはデフォルトで適用されているのではないかと思います。つまりブログを開設したら勝手に付いてくる。ほとんどの方がそのまま利用されるのではないでしょうか。
その「プロフィール」プラグインの内容は以下の通りです。
(ちなみにプラグインは自動改行ではありません)

<!--myimage-->
<p class="plugin-myimage" &align>
  <img src="<%image>" alt="<%author_name>" />
</p>
<!--/myimage-->
<p &align>
  Author:<%author_name><br /><%introduction2>
</p>

<introduction2> の文字列がありますね。ここがプロフィール文に置き換えられます。
赤くした文字列を見ますと開始タグ <p> と終了タグ </p> があります。従ってこれはp要素としてマークアップされていることがわかります(&align はテキストの位置揃えの個人設定連携ですが今回は無視してください)
このp要素の部分にプロフィール文が出力されると以下のようになります。

<p &align>
  Author:<%author_name><br /><p>東京近郊に住む30代の主婦です。
子育てのことや毎日の食事レシピなどを綴っています。</p>
</p>

これは構文エラーです。 p要素の中にp要素を入れ子することはできません。div要素も同様です。p要素というのは子要素にできる要素がかなり限定的ですから実はとても使い方が難しいんですね。一般ブロガーがよく用いそうな div table p は子要素にすることができません。

上記は明らかな構文エラーであることに加え、p要素はブラウザによる補完処理が働きます(終了タグを省略しても良いとされる要素は全て補完が行われます)ので、実際のブラウザのレスポンスは以下の通り。

<p &align>
  Author:<%author_name><br />
</p><p>東京近郊に住む30代の主婦です。<br>
子育てのことや毎日の食事レシピなどを綴っています。</p>
<p></p>

緑がブラウザによる強制補完です。1つのp要素としてマークアップしている「つもり」が実際は3つのp要素になってしまっています。これはもう構文としてはめちゃくちゃ。しかも最終のp要素は空ですからマークアップの意味がありません。空とはいえ存在している以上、CSSは有効です。もしp要素に margin: 1em 0 などが指定されている、あるいは何も指定が無い(その場合にはブラウザのデフォルトスタイルが適用されます)ならば、p要素の上下には1行文の空白ができます。ということは「綴っています」の下に意味不明な空白行ができて悩むことになりますね。

対処法

対処は2つしかありません。

公式プラグイン「プロフィール」のhtmlを書き換える(pをdivに変更)
プロフィール文にp要素を使わない(divとかもダメ, spanやaなどはOK)

これしか無いですね。つまり初心者の方が記すであろう内容がベスト。

東京近郊に住む30代の主婦です。
子育てのことや毎日の食事レシピなどを綴っています。

これが一番良いですね。プロフィールプラグインで出力された際には勝手にp要素内テキストとして表示が行われます。
htmlを覚えてくると使いたくなるんですが、FC2ブログの仕様とバッティングしてしまうことがしばしばあります。<%introduction2> 変数については以下のようなミスの可能性もあります。こちらはクリティカルなエラーです。