• Create Complex Layout @ Raindrops School

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

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

    このレイアウトは、6パターン作る事が出来ます。どのようなタグでどのようなレイアウトが出来るのかは、https://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クラスをフィルタするだけで、段組を取り去る事も簡単です。

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


  • Create Special Page width @ Raindrops School

    レインドロップステーマは、基本的には、750px 950px 975px 100%リキッドレイアウトを選択できますが、functions.phpの設定をカスタマイズする事で、自分でページ幅を指定することが出来ます。

    *カスタマイズの準備
    **テキストエディタ
    :idea:この作業を行うためには、UTF-8(bomなし)の文字コードを扱う事が出来るテキストエディタが必要になります。

    :!:Windows 付属の ノートパッドや ワード は使えません
    どのようなエディタが使えるかについては、http://ja.forums.wordpress.org/topic/155(WordPressの日本語フォーラムの話題を参照してください)
    *カスタマイズの手順
    functions.phpをエディタで開いて、以下のコードを見つけてください。

    [php]
    /**
    * If you need original page width
    * you can specific pixel page width
    * e.g. ‘$page_width = ‘776’;’ is 776px page width.
    *
    *
    */
    $page_width = ”;
    [/php]

    例えば、850pxしたい時には、以下のように変更します

    [php]
    $page_width = ‘850’;
    [/php]

    :DRaindropsテーマは、あなたの自由なカスタマイズを支援します

    :!:[0.912 より $page_width 変数名は $raindrops_page_width に変更しました]

  • WordPress theme Raindrops

    Theme Preview

    💡Download

    Download (github)

    Raindrops class and functions Document

    Note:
    この、Raindropsテーマのサイトは、ダウンロード初期のテーマと、異なって見えるかもしれませんが、

    これらは、テーマのオプションパネルや、テーマカスタマイザーから、項目を選択して、レイアウトや配色を変更したものです。

    スタイルシートの変更や、PHPのカスタマイズを行う事がなく、配色やレイアウトを変更する事が出来ます。


  • 現在 0.901配布中

    ワードプレス テーマディレクトリからインストール可能な最新バージョンは、0.901です。

    まもなく、0.902公開予定です

    現在配布中のテーマは、ワードプレスのヘッダーや背景メニューなどのオプション設定と違和感なく操作できるような工夫を行いました。

    また、カラースキームを管理パネルから編集できるようにしました。

    アニメーションカラーからというカラースキームを追加しました。


  • Raindrops 0.41 公式審査を通過しました

    長い期間を要しましたが、Raindrops0.41が審査を通過できましたのでご報告申し上げます。

    これまで本テーマをご利用の方も、公式テーマとなりより安心して利用が出来、アップデートも簡単にできるようになりますので、ご期待いただけますようお願い申し上げます。