Create Auto Gradient Box @ Raindrops School

レインドロップスでは、背景色 前景色を自動配色するグラデーションボックスクラスが自動設定されます。

複雑なスタイルシートを記述することなくベースカラーに基づいたグラデーションボックスをお手軽に作成できます。

 example

準備

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

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

class color5 とか gradient5といった数字の書いたボックスが表示されていると思います。

これらのクラスを、記述する事でグラデーションボックスが出来ます。

例えば、このエントリーの上部のグラデーションボックスは、以下のようなコードになっています。

classにgradient3と記述する事でグラデーションを表示します。

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

現在未解決の問題

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

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

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

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

カスタムフィールドの名前を半角英数で css とします

値に、例えば


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

:!:ただ、この方法も、リスト表示した場合には、リンクが見えなくなる事になるので、style.cssで指定いただくのが、現時点では一番いいと思います。

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

リンクの問題は、次回アップデートで解決出来る見通しがつきましたのでお知らせします。

:!:場合によっては、インラインのstyleアトリビュートがかけないという人もいるかと思います。この問題は、テーマファイルの問題というよりも、ワードプレスそのものの設定になりますので、そのあたりについては、機会を改めて説明させていただきたいと思います。


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