Create Complex Layout @ Raindrops School

レインドロップステーマでは、段組レイアウトが出来ます。

PCの画面は、横長になり、レイアウトによっては、一行の長さが長くなって読みにくいという事がおきます
投稿の中から、簡単に段組レイアウトを作成できるために、手間をかけず、また上級者の方は、投稿にフィルタをかけるだけで、段組を取り外す事も出来ます

このレイアウトは、6パターン作る事が出来ます。どのようなタグでどのようなレイアウトが出来るのかは、http://www.tenman.info/wp3/raindrops/quick-start/(Quick Start )ページを参照してください

ここでは、もっともベーシックな段組を簡単に実現するため他のプラグインも紹介しながら、説明をしています。

*準備
投稿エディタは、htmlモードを選択します
htmlタグを記述する必要がありますので、実際に使うときには、AddQuickTag pluginをインストールすると、とても簡単に、段組を作る事が出来ますから、AddQuickTagを使った段組レイアウトをご説明します。

plugin AddQuickTagをインストールします。
***AddQuickTagのインストール

+メニューから、プラグインのインストールページを開きます
+プラグインの検索ボックスにaddquicktagと入力するとプラグインが表示されるのでインストールというリンクをクリックします。
++http://wordpress.org/extend/plugins/addquicktag/(addquicktag)
+インストールがうまくいくと設定メニューにAddQuickTagというメニューが追加されます
+メニューが表示されればインストールは完了です。

**AddQuickTagの設定
管理画面は、以下のようになっています



ラベルに 50:50
title attribute エントリーを2分割
開始タグに以下のコードを入力してください

[php]
<div class="yui-g ">
<div class="yui-u first" >

</div>
<div class="yui-u">

</div>
</div>
<br class="clear" />
[/php]

*等幅2段組を作ってみる

AddQuickTagの設定を保存すると投稿エディタのhtmlモードに、50:50というボタンが追加されていますので、そのボタンを押すとコードが自動入力されます。

あとは、左と右という部分にそれぞれ、文章などを入力していきます。

実際に芥川龍之介の 蜜柑 から 試作をしてみます
*Example

 それは油気のない髪をひつつめの銀杏返しに結つて、横なでの痕のある皸だらけの両頬を気持の悪い程赤く火照らせた、如何にも田舎者らしい娘だつた。

しかも垢じみた萌黄色の毛糸の襟巻がだらりと垂れ下つた膝の上には、大きな風呂敷包みがあつた。その又包みを抱いた霜焼けの手の中には、三等の赤切符が大事さうにしつかり握られてゐた。

私はこの小娘の下品な顔だちを好まなかつた。それから彼女の服装が不潔なのもやはり不快だつた。最後にその二等と三等との区別さへも弁へない愚鈍な心が腹立たしかつた。だから巻煙草に火をつけた私は、一つにはこの小娘の存在を忘れたいと云ふ心もちもあつて、今度はポツケツトの夕刊を漫然と膝の上へひろげて見た。

すると其時夕刊の紙面に落ちてゐた外光が、突然電燈の光に変つて、刷の悪い何欄かの活字が意外な位鮮に私の眼の前へ浮んで来た。云ふまでもなく汽車は今、横須賀線に多い隧道の最初のそれへはいつたのである。
 

しかしその電燈の光に照らされた夕刊の紙面を見渡しても、やはり私の憂欝を慰むべく、世間は余りに平凡な出来事ばかりで持ち切つてゐた。

講和問題、新婦新郎、涜職事件、死亡広告――私は隧道へはいつた一瞬間、汽車の走つてゐる方向が逆になつたやうな錯覚を感じながら、それらの索漠とした記事から記事へ殆機械的に眼を通した。が、その間も勿論あの小娘が、恰も卑俗な現実を人間にしたやうな面持ちで、私の前に坐つてゐる事を絶えず意識せずにはゐられなかつた。

この隧道の中の汽車と、この田舎者の小娘と、さうして又この平凡な記事に埋つてゐる夕刊と、――これが象徴でなくて何であらう。不可解な、下等な、退屈な人生の象徴でなくて何であらう。私は一切がくだらなくなつて、読みかけた夕刊を抛り出すと、又窓枠に頭を靠せながら、死んだやうに眼をつぶつて、うつらうつらし始めた。



*Aside

「ブログエントリーには、ブロックタグやレイアウト機能を利用しない」というのが、基本的な常識とされてきましたが、長文エントリなどは、可読性の点で問題を抱えていたという事も否定できないと思っています。

:idea:PHPのプログラム技術を持っている方なら、このエントリから yui-u , firstクラスをフィルタするだけで、段組を取り去る事も簡単です。

ユーザーエージェントなどの閲覧環境により、コントロールするなどの拡張機能を持たせる事も出来ると思いますから、うまい使い道をそれぞれのブログでお試しいただければうれしいです。


コメントは受け付けていません。