ポケモンブログ考察記事(構築紹介記事@FC2ブログ)

未分類
12 /13 2012
 ポケモンの構築紹介記事は今や数多くのものが存在するが、「ポケモン6匹の画像」 「技構成」 「配分と解説」の3段階で書かれているものをよく目にする。
例1
紹介記事例 
長所:テーブル(表)が見やすい
短所:構成と配分を同時に見れない(スクロール回数が増える)


一見すると綺麗にまとまった形式のようだが、個人的にこの書き方は非常に見づらい。何が問題かというと、6匹全ての構成と配分をいっぺんに見れず、構築全容を把握するために画面スクロールの回数が増えて煩わしいのがまずい。

理想とするのは、やはり6匹全ての構成を一度に見ることができる形式であり、その方が全体を俯瞰しやすいし、試しに構築をコピーして使ってみようとする際にも見やすくて便利なはずだ。

例2
構築紹介例2
長所:配分と構成を全て同時に見れる
短所:セルを使ってないので見栄えで劣る


しかし、このようにテキスト形式だとレイアウトとしての見やすさが例1のテーブル(表)を利用したものに劣る。セルで区切ったテーブルを使った方が見栄えが格段に良くなるのだ。そんなときに秀逸なレイアウトの記事と出会う。

WS000031.jpg
長所:セルに構成だけでなく配分も収められている、更に画像まで添えてあるので非常に見栄えがいい
短所:6匹全体を一度に見れない(スクロール回数が増える)


配分、そして構成がテーブルに収められている上、何とポケモンの画像まで添えてあって非常に美しいレイアウトである。このように横に長い配分と技構成等をセルに綺麗に収容するためには、セルの結合を駆使しなければならないのでサックリとは出来ない(ブログサービスの種類によっては特に難しい)。

目から鱗の記事を見つけられたが、しかしこれでもまだ物足りない。問題は、やはり6匹全ての構成配分を一度に見ることが出来ない点である。とにかくスクロールをしたくないのだ。

・セルに配分、構成、画像を全て綺麗に収めたい
・全体を一度に見ることができる

これらを両立するためにはセルの配置、結合を駆使して・・・

(長かったので割愛)

そして出来あがったのがこちら(デデーン

WS000032.jpg
長所:画像、配分、構成がテーブル(表)に収まっているので見栄えがよい、全体を一度に見れる
短所:同じものを作るのがぶっちゃけメンドイ


個人的にまさに理想通りの(自分で考えたので当然なのだが)掲載方法なので広く普及して欲しいが、同じものを作るのはぶっちゃけメンドイに違いないだろう。

しかし、そこはHTMLの便利な所。何と以下のテキストをFC2ブログの記事編集画面に貼りつけるだけで同じものが出来上がる(サンプルにバンギラスを載せてある、またセルが潰れないようにaが挿入されている)。

<table width="528" border="1" cellpadding="1" cellspacing="1"><tbody><tr><td bgcolor="#66ff33" style="text-align: center; "><strong>バンギラス</strong></td><td style="text-align: center; ">ヨプの実</td><td colspan="4" style="text-align: center; ">勇敢 207(252)-204(252)-131(4)-x-120-59</td></tr><tr><td rowspan="3" style="text-align: center; ">画像</td><td style="text-align: center; ">すなおこし</td><td style="text-align: center; ">かみくだく</td><td style="text-align: center; ">いわなだれ</td><td style="text-align: center; ">けたぐり</td><td style="text-align: center; ">だいもんじ</td></tr><tr><td colspan="5">解説</td></tr><tr><td colspan="5">解説</td></tr><tr><td style="text-align: center; " bgcolor="#66ff33"><b>a</b></td><td style="text-align: center; "></td><td colspan="4" style="text-align: center; "></td></tr><tr><td rowspan="3" style="text-align: center; "></td><td style="text-align: center; ">a</td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "> </td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td style="text-align: center; " bgcolor="#66ff33"><b>a</b></td><td style="text-align: center; "></td><td colspan="4" style="text-align: center; "></td></tr><tr><td rowspan="3" style="text-align: center; "></td><td style="text-align: center; ">a</td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "> </td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td style="text-align: center; " bgcolor="#66ff33"><b>a</b></td><td style="text-align: center; "></td><td style="text-align: center; " colspan="4"></td></tr><tr><td rowspan="3" style="text-align: center; "></td><td style="text-align: center; ">a</td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "></td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td style="text-align: center; " bgcolor="#66ff33"><b>a</b></td><td style="text-align: center; "></td><td style="text-align: center; " colspan="4"></td></tr><tr><td rowspan="3" style="text-align: center; "></td><td style="text-align: center; ">a</td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "></td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td style="text-align: center; " bgcolor="#66ff33"><b>a</b></td><td style="text-align: center; "></td><td style="text-align: center; " colspan="4"></td></tr><tr><td rowspan="3" style="text-align: center; "></td><td style="text-align: center; ">a&#160;</td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "></td><td style="text-align: center; "></td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr><tr><td colspan="5"><span style="text-align: center;">a</span></td></tr></tbody></table>

↓ このように表示される
バンギラスヨプの実勇敢 207(252)-204(252)-131(4)-x-120-59
画像すなおこしかみくだくいわなだれけたぐりだいもんじ
解説
解説
a
a 
a
a
a
a 
a
a
a
a
a
a
a
a
a
a
a
a
a

備考
・FC2ブログ以外では入力で不具合が生じる可能性が高い(はてなブログで試しましたが上手く行きませんでした)
・通常の編集画面に貼りつけ、「高機能テキストエディタ」で続きの編集を行うこと
・貼りつける画像の大きさは、高さの尺を 50 にすると合う(高機能テキストエディタ>テーブルを右クリック>イメージプロパティ>高さ)
・セルの大きさはテーブル全体の大きさに合わせて自動調整される。テーブル全体の大きさを変えるにはtable width="528" の数字を変えるか、高機能テキストエディタ>テーブルを右クリック>テーブルプロパティ>テーブル幅
・ポケモン名は太字になっている
・文章(画像)は基本的に中央揃えで、解説だけ左揃えになっている


もっと簡潔に書くべきだったが、試行錯誤の過程も記したかったので長くなってしまった。
気に入った方は上のHTMLをコピペして使って貰えると嬉しい。

ちなみに、FC2ブログなら 高機能テキストエディタ>テーブル挿入/編集 からセルの結合を駆使すれば自分好みのテーブルを作成することが可能。このように便利な機能が多く、またアクセス解析も無料で出来るFC2ブログは、まさに使いやすさNo.1のブログサービス!更にお引越しツールがあるので他サービスから移転するのも楽チン!(露骨な宣伝)
ブログお引越しツール

おわり


参考及び引用元
d.hatena.ne.jp/hanzo_taker/20121010/1349859140
qasys.blog115.fc2.com/blog-entry-187.html
スポンサーサイト

コメント

非公開コメント

利用させてもらいます。

とても見やすいと思います。
使わせて頂きます。

Re: タイトルなし

> 便利ですね。
> 使わせていただきます。

色付けとか弄れるのでお好みに変えてもどうぞ~

便利ですね。
使わせていただきます。

ゴロー

ポケモンサンムーンでローテーションバトルが無くなったため、Unityを使ってローテアプリを作ることにしました。