Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

ライブドアブログ、スマートフォン版ブログカスタマイズ機能 フリーエリアはタグ制限

スマートフォン版ブログカスタマイズ機能リリースのお知らせ

 ライブドアブログは7月14日、スマートフォン版のブログデザインをカスタマイズできる機能をリリースした。「HTMLやCSSの専門的な知識がない方も利用できる機能」と説明している通り、文字色やレイアウトなどの大まかな設定を変更できるだけで、HTMLマークアップを直接編集できるようになったわけではない

 あらかじめ用意されたテンプレートデザイン(色違いなど100種類以上)の「背景画像」「背景色」「テキスト色」「枠線」をカスタマイズでき、「月別アーカイブ」や「カテゴリ」などのアイテム(ブログパーツ)を入れ替えてレイアウトを変更できるというものだ。

 アイテムに「フリーエリア」が用意されているが、使用できるタグは制限されており、script要素やstyle要素、終了タグを伴う要素(span、strong、p、div...)などは使うことができず、使えるのは、<img>と<a>、<br>くらいのようだ。
 したがって、スマートフォン版ブログのテンプレートには、スクリプトを使用する広告やアクセス解析を設置することはできない。img要素を使った解析やa要素による広告のみ設置できる。

テンプレートデザイン

 デザインは「シンプル」「クール」「かわいい」「パターン」「自然」「ユニーク」の6つのジャンルに分類されており、色違いを含めて100種類以上ある。残念なことにFC2ブログは2種類だ。

カスタマイズ

 カスタマイズでは、背景の設定やテキストの文字色などを設定できる。背景の画像をアップロードすることも可能だ。

 設定可能項目は、「背景画像」「背景色」「テキスト色(通常文字、通常リンク、アイテム内文字、記事日付、アイテムの見出し)」「アイテム枠(線色、背景色、背景色の透明度、角丸、影」「カレンダーアイコン色、区切り線」となっている。

レイアウト

 レイアウトでは、ライブドアの広告とフッターを覗いたメイン部分を入れ替えることができる。HTMLの編集はできない

 トップページ、アーカイブページ、個別記事ページごとにアイテムの並び替えや入れ替えを行うことができる。

■トップページとアーカイブページで選択可能
・ブログタイトル
・記事一覧 (概要付き/画像付き)
・カテゴリメニュー
・月メニュー
・プロフィール
・メンバー一覧
・区切り線
・画像
・ソーシャルボタン
・フリーエリア

■個別記事ページで選択可能
・ブログタイトル
・記事タイトル
・記事本文
・記事コメント
・記事トラックバック
・カテゴリメニュー
・月メニュー
・プロフィール
・メンバー一覧
・区切り線
・画像
・ソーシャルボタン
・フリーエリア

 「記事一覧」は最新記事一覧を表示するのではなく、そのページの記事を表示する。例えば、トップページでは指定件数分の記事タイトルを表示し、2011年8月のページであれば、2011年8月の記事タイトルを並べて表示する(FC2ブログの<!--topentry-->エリアに相当)。よって、個別ページでは「記事一覧」を選択することはできない
 「月メニュー」や「カテゴリ」はプルダウン仕様となっている。残念なことにFC2ブログは、プラグイン(アイテム)の位置は固定で、月別プラグイン表示ページやカテゴリプラグイン表示ページに移動しなければ、各リンク先に飛ぶことができない(ワンクッション必要)。

フリーエリア

 フリーエリアには任意のテキストを入れることができるが、使用できるタグは制限されている。
 script要素やstyle要素、終了タグを伴う要素(span、strong、p、div...)などは使うことができない。使えるのは<img>と<a>、<br>くらいのようだ。
 スクリプトを使用する広告やアクセス解析を設置することはできない。img要素を使った解析やa要素による広告のみ設置できる。

 また、titleやclass、nameなどの属性も制限されている。もちろん、onclick属性などのイベントハンドラも無視される。
 img要素のalt、width、height属性やa要素のtarget属性については許可されている。

 a要素のhref属性には絶対パス(https?://)を指定しなければ、リンクは機能しない。フラグメント識別子(#)も「http://」から指定する必要がある。当然、冒頭に「javascript:」を付加することはできない。

<script type="text/javascript">
alert('a');
</script>
<div>ここはDIV要素です。</div>
<span style="color:#f00;">赤い文字。</span>
<img src="http://hoge.gif" alt="image" width="100" height="100">
<a href="archives/201009.html">2011年9月の記事</a>
<a href="http://archives/201009.html" target="_blank" title="201109">2011-09</a>

 例えば、上記コードをフリーエリアに入れると、次のように出力される。

ここはDIV要素です。
赤い文字。
<img src="http://hoge.gif" alt="image" width="100" height="100">
<a>2011年9月の記事</a>
<a href="http://archives/201009.html" target="_blank">2011-09</a>

フリーエリアの補足

 img要素のalt属性に日本語を指定すると、その代替テキストが文字化けするようだ。a要素のhref属性に日本語を指定しても文字化けするため、フリーエリア内にある要素の属性値に日本語を入れることは想定していないものと思われる。

 フリーエリア内で日本語JPドメイン(http://日本語.jp/)にリンクしても、開くことはできない。

 フリーエリアではない、アイテムの「画像」では代替テキストに日本語を指定することができる。

 また、フリーエリアの入力フォーム(textarea)には、『height: 100px; overflow: hidden;』が指定されているため、縦のスクロールバーは表示されない。100pxを超えた行数を確認する際は、エリア内にカーソルを移して、矢印キーで移動させるか、ブラウザのエリア拡張機能などで対応する必要がある。

関連記事
  1. comment

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/785-b726203f

  1. trackback