公式プラグイン「フリーエリア」内をリストで区切り視認性を上げる方法

フリーエリアを編集する方法です。fc2blogのすべてのテンプレートに当てはまります。

概要

  1. 公式プラグイン「フリーエリア」内でHTMLを適切に用い、CSSで思い通りの装飾をします。

  2. 「フリーエリア」内の各項目を見やすくすることが目的です。

メリット

  1. 視認性が上がれば読者が読みやすくなります。

  2. 見た目(というかソース)が少しプロっぽくなります。(あくまでも自己満足に過ぎませんが)

プラグインのHTMLを編集

  1. フリーエリア内の各項目を箇条書きにする際のHTMLを比較します。下図は一例です。

    121021-plugin-freearea-1.png
  2. 上図のHTMLをプレビューすると右図のようになります。上図で反転しているリストタグ部分に、公式プラグイン「最新記事」「最新コメント」の各リストの装飾用に編集したのと同じスタイルが適用されているのを確認できます。

    121021-plugin-freearea-2.png
  3. brタグではなくリストタグでマークアップすれば、箇条書き風ではなく正式な箇条書きになります。リストタグのコピペ用サンプルコードを載せておきます。

    <ul>
    <li><a href="URLを入れる">ブラウザで見える文字</a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    </ul>

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)