Raindrops 0.930以降であれば、ショートコードという記法を利用できます。

強調表示などで使えるダイアログボックスを作ることができます。

ダイアログボックスは、投稿画面で以下のように記述します

Raindrops テーマ　0.930以降をお使いの場合、タブインターフェースをショートコードを使って簡単に記述できます。

• Tab Area

ショートコード　タブ

タブインターフェースの作り方を紹介します。

書き方

タブを書くには、ショートコードという記法を使います

[tab]

[tab_item title="タブのタイトルを書きます"]

ここにコンテンツを書きます

[/tab_item]

[/tab]

tab_itemを増やしていくとそれぞれのタブができます。

制限、html要素、h3はタイトルに使うので、tab_item内では使えません

画像

画像は、サイズが多少大きくてもタブ内に縮小されてはみ出ません

tab その他の属性

タブのコンテンツ部分にクラスを指定できます。
クラスを追加したサンプルを以下に示します。

• Tab Area

ショートコード　タブ

タブインターフェースの作り方を紹介します。

書き方

タブを書くには、ショートコードという記法を使います

[tab]

[tab_item title="タブのタイトルを書きます"]

ここにコンテンツを書きます

[/tab_item]

[/tab]

tab_itemを増やしていくとそれぞれのタブができます。

制限、html要素、h3はタイトルに使うので、tab_item内では使えません

画像

画像は、サイズが多少大きくてもタブ内に縮小されてはみ出ません

Raindrops0.930以降をご利用の方は、ショートコードという記法を使うことができます。

このページでは、クリックするとその内容を表示するトグルショートコードについて解説します

• ここをクリックすると内容を表示する書き方
• [toggle title="test"] ここに本文 [/toggle]

• さらに二つのショートコード属性を記述することができます。
• [toggle title="test" class_title="gradient2″ class_content="gradient4″ ] ここに本文 [/toggle]

• class_title class_contentを使った表示の例
• 

準備

準備は特にありません、どのクラスを指定すれば、どんなグラデーションになるのかを、知っておく必要があると思いますので、確認の方法を覚えてください。

新規投稿の画面を表示したら画面右上にある「ヘルプ」をクリックしてください。

class color5 とか　gradient5といった数字の書いたボックスが表示されていると思います。
これらのクラスを、記述する事でグラデーションボックスが出来ます。
例えば、このエントリーの上部のグラデーションボックスは、以下のようなコードになっています。

<div class="gradient3" style="padding:1em">
レインドロップスでは、背景色　前景色を自動配色するグラデーションボックスクラスが自動設定されます。
複雑なスタイルシートを記述することなくベースカラーに基づいたグラデーションボックスをお手軽に作成できます。
</div>

classにgradient3と記述する事でグラデーションを表示します。
インラインスタイルの、style="padding:1em;"は、グラデーションの利用場面によって必要ないことも、他の値が必要になる事もあるため、スタイルには含めていません。

現在未解決の問題

グラデーションボックス内のリンクの色が、グラデーションの中に溶け込んでしまう事があります。

今後の、バージョンでうまく動作するように調整したいと思いますが、原稿バージョンでは、リンクカラーを指定していただく必要があります。

一つ一つにスタイルを当てるのは大変なので、投稿単位でスタイルを当てる機能を紹介しておきます。

投稿単位でスタイルを割り当てる手順

カスタムフィールドの名前を半角英数で　css　とします
値に、例えば

.gradient3 a{ color:red;}

等としていただければ、グラデーションボックス内のリンクは赤になります。

この問題は、今後のバージョンで解決したいと思いますが、しばらくの間　我慢していただけますよう切にお願いします

準備

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

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

AddQuickTagのインストール

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

AddQuickTagの設定

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

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

<div class="yui-g ">
<div class="yui-u first" >
左
</div>
<div class="yui-u">
右
</div>
</div>
<br class="clear" />

等幅2段組を作ってみる

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

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

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

Example

Aside

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

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

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

カスタマイズの準備

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

どのようなエディタが使えるかについては、WordPressの日本語フォーラムの話題を参照してください

カスタマイズの手順

functions.phpをエディタで開いて、以下のコードを見つけてください。

/**
* If you need original page width
* you can specific pixel page width
* e.g. '$page_width= '776';' is 776px page width.
*
*
*/
$page_width= '';

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

$page_width= '850';

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