WordPress Theme Raindrops

Raindrops1.415では、投稿本文用に　clear-1, clear-2, clear-3クラスを追加します。

新規追加クラスの追加理由

WordPressでは、投稿にメディアを追加する事が簡単にできますが、これらメディアを追加した場合　多くは左寄せや右寄せ等のfloatスタイルが設定されます。

実際に、画像要素を追加した場合の表示は以下のようなものです。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した　このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。

<div style="overflow:hidden">
<a href="http://example.com"><img src="http://example.com/example.jpg" alt="header-leaf.jpg" width="487" height="196" class="alignleft size-large wp-image-2400" /></a>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>

例1

このようにすると以下のように表示されます。

clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した　このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。

例2

clear クラスにmargin-top:3emを追加したものが以下です

clearクラスを追加して、フロートを解除した場合の左上の画像との位置関係はこのようになります。フロートを解除した　このp要素と画像との位置関係を調整しようとしても、marginの設定は出来ません。これは、おかしな挙動ではなく正常な働きで、marginが有効に働くためには、以下のようなソースが必要になります。

以上のように、フロート要素に続く　clearクラスが追加された要素は、そのままだとマージンの調整をすることが出来ないという問題に対応する事が必要と考えました。

ブロック要素で囲むことで対応する事が基本的な解決ですが、これをクラスを追加するだけで見た目を調整できるようにするというのが今回の変更です。

clear-1の適用例

<div style="overflow:hidden">
<a href="http://example.com"><img src="http://example.com/example.jpg" alt="header-leaf.jpg" width="487" height="196" class="alignleft size-large wp-image-2400" /></a>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<p class="clear-1">Lorem ipsum dolor sit amet, consectetur .....</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

clear-2の適用例

<div style="overflow:hidden">
<a href="http://example.com"><img src="http://example.com/example.jpg" alt="header-leaf.jpg" width="487" height="196" class="alignleft size-large wp-image-2400" /></a>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<p class="clear-2">Lorem ipsum dolor sit amet, consectetur .....</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

clear-3の適用例

<div style="overflow:hidden">
<a href="http://example.com"><img src="http://example.com/example.jpg" alt="header-leaf.jpg" width="487" height="196" class="alignleft size-large wp-image-2400" /></a>
<p>Lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<p class="clear-3">Lorem ipsum dolor sit amet, consectetur .....</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

以上　clearクラスを適用した場合に、上部フロートメディアとの間隔をコントロールする新しいクラス　clear-1,clear-2,clear-3の概略を紹介させていただきました。

活用を検討しただけますようお願いします。

Raindrops1.414では、個別投稿毎のarticle要素の親要素内にCSSクラスを追加できる仕組みを追加します。

この変更によって、投稿をカテゴリーごとに投稿全体のデザインを変更したり、特定の投稿投稿全体にスタイル指定されたに特別なデザインを追加するといった事が可能になります。

このため、raindropsの記法に変更を加えることにしました。

従来は、color_type,とcol属性だけでしたが、

下のようにclass属性を追加可能にします

このクラス属性がある場合 article　の親要素にクラスを追加します。

例えば、こんな感じです。

リスト表示（ループ時）

<ul class="index archives front-page index">
	<li class="loop-1  loop-item-show-allways">
		<div id="post-37122" class="rd-card test">
                  ...

個別投稿

<div id="post-37122" class="rd-card test">
	<article class="clearfix post-37122 post ...

フィルターを使ったクラスの追加を可能にします。

以下は、functions.phpに追加するフィルターの例です。

上記の記法が使われていない投稿にクラスを追加します。

以下のフィルターは、カテゴリースラッグが unit-test である場合にクラス　rd-card testを追加する例です。

コンディショナるタグを使う事で、ある特定の投稿の親要素にクラスを追加して、特別なスタイルで表示可能であることを理解いただけると思います。

他

このようなカスタマイズを行った場合、投稿エディタ（ビジュアルエディタ）の幅がカスタマイズに即したサイズにならないという問題があります。

ビジュアルエディタの幅は、Raindrops内で計算された値で表示されますので、場合によっては　エディタの表示幅を変更する必要が出てくるかもしれません。

raindrops_content_width フックや　editor-style.cssでのスタイルの変更が必要になる場合もあります。

Raindrops1.414では、カスタマイズのサンプルスタイルとして　お試し用に　rd-card　クラスを追加します。以下のスタイルです。

/**
 * Example style
 * raindrops 1.414
 * start
 */
.rd-card{

}
.rd-card article{
    width:600px;
    max-width:100%;
    border:1px solid rgba(127,127,127,.4);
    margin:2em auto;
}
.rd-card .entry-title{
    padding:.6em;
}
.rd-card .posted-on{
    margin:1em;
}
.rd-card .entry-content{
   padding:1em;
}
.rd-card .wp-post-image{
    padding:0;
}
.rd-card .entry-title + .this-posted-in{
    margin-left:1em;
}
.rd-pw-doc5.rd-col-1.single .rd-card{
    margin-top:1em;
}
.rd-pw-doc5.rd-col-1.single .rd-card article{
    padding:0;
}