obandes

WordPress theme files
 

+menu-

header image

Think speech bubble

この記事は、obandesがサポートするlessphpの機能を使ってスピーチバブルのサンプルを表示して、そのコードを紹介しています。

lessphpを使うメリットとして、

スピーチバブルの足の部分は、beforeやafter 擬似要素を使って、色を塗り分けています。この方法は、いいアイディアですが、汎用性に欠けます。ページの色がちょっとでも変更されると、すぐにぼろが出るからです。

背景色の色を、変数のように扱う事が出来るCSSプリプロセッサーlessphpを使えば、汎用性が向上します。

Bubble with obandes

obandes style.

cleate custom field ‘less’ and paste a value below.

Source code show

このような、吹き出しをCSSで書く事は、すでにお手本になるものがたくさんあるので、どうやって書けばいいのかという事で、悩む事は少なくなってきていると思います。

しかし、ここに吹き出しが欲しいと思った時に、すぐに準備する事は、困難です。

いつまでも、その吹き出しのクラス名を覚えている事は難しいですし、思い出せなくて、cssファイルを探し回ったりした経験のある人もいると思います。

吹き出しの、この足の部分は、before や afterを使って色を重ねて作るため、背景になるページの色をちょっとでも変えると、足が魚の腹びれみたいに見えてしまいます。

obandesは、CSSプリプロセッサーをサポートしました。

背景色などの色や、スタイルセットを 変数のように扱うような事が出来ます。

膨大な行数を追いかけながら、変更していた配色を、一箇所の色を変更する事で、必要なすべての部分の変更を終える事も出来ます。

使ってみませんか?

obandes

カテゴリー: 未分類   パーマリンク

 

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