Simplicity内のBootstrap風の案内メッセージにアイコンを追加


こんばんゎー。
3月も始まり会社では新しい動きがありました。
かなり迷うことがあり「くたびれた~」感が満載です。

そんなクタビレ感満載でも色々試してみました。
そんなカスタマイズの覚書です。

SimplicityではBootstrap風の案内メッセージのスタイルが搭載されています。

搭載って便利な機械みたいに言うなー。
そんな風には思ってないけど色々な機能があるのは事実でしょう!

Bootstrapってなんだ?

Bootstrapは最も有名なCSSフレームワークです。
以前は「Twitter Bootstrap」と呼ばれておりTwitter社が開発・提供していました。CSSを指定するだけでサイトをある程度形にできる素材集、ライブラリ集のようなものです。
現在は主な開発者がTwitter退社したため「Bootstrap」に名称を変更した様です。 Bootstrapを利用するにはHTMLとCSSの知識は必要ですが、それが分かれば誰でもそれなりの見栄えのサイトを作ることが出来ます。

引用Bootstrapとは? | 基本 | Bootstrap3の使い方

タグを使って文章を綺麗にみせよう!ってことですね!
すごい活用は出来ていないのにやってみたいって自己満足でしかないですね。
まぁー使う日が来るかも知れないので・・たぶん・・

分からん・・

何がどうしたら表示されるのか理解できていませんが、希望通りの表示にはなりました。

ただ「:before」使いたいだけじゃん。
最近覚えたんだから使ってみたいしょ!

他にもサイドとフッターのウィジェットにも「:before」を使ってカテゴリーや新規記事の文字の前にもいろいろ試したのでメモ書きをゆっくりしています。

他に背景画像で表示してみます。

画像は右下に表示されるようにしました。
あひる可愛いよね!

SimplicityではBootstrap風メッセージのクラスは5種類。

  • .sp-primary
  • .sp-success
  • .sp-info
  • .sp-warning
  • .sp-danger

1行目を変更して画像を変えたらそれぞれ違う背景画像を指定できちゃうってことですね。
アイコン指定するより簡単だったかも?

大きさも簡単に変更できますょー。

編集しなおしして再検索していたら、また知らなかったことが出てきて変更の楽しみが一つ増えた気がします。

この記事をお届けした「WOOD YGG (木の卵)」の最新ニュース情報を、いいねしてチェックしよう!
スポンサーリンク
(336×280)
(336×280)

フォローする

スポンサーリンク
(336×280)