お役立ち情報
機能紹介
2017.09.19
Bootstrap3で簡単!画像を一工夫してこだわりのサイトに!
みなさまは、Bootstrap(ブートストラップ)というワードをご存知でしょうか?
Bootstrap(ブートストラップ)とは、Twitter社が開発したCSSの「フレームワーク」で、簡単にご説明するとHTML/CSSの知識がなくても、ちょっとした設定で様々なデザインが表現できるというものです。
弊社CMSも、このBootstrap(ブートストラップ)を使用することが可能です。
例えば下記のような画像の表示です。
このように画像を加工しなくとも、丸く表示させたり枠付きにして表示させることができます。
設定方法
表示方法を変えたい画像のページで[右クリック]→[フリーページ]→[フルエディタ編集]と進みます。

表示を変えたい画像パーツを[クリック]して選択し、上部ツールバーにある[イメージ挿入/編集]をクリックします。

[高度な設定]タブを開き、スタイルシートクラスが下記のようになっていることを確認します。

スタイルシートクラスに、下記の記述を入力し、[OK]と進みます。
記述例
- img-rounded
- img-circle
- img-thumbnail
ここでは[img-circle]…画像丸を記述しています。

画像が丸くなりました!

それぞれの記述をすると、下の画像のように表示されます。
表示が変わったことを確認したら、[保存]を押してフルエディタ編集を終了します。

あとはいつものように[ダブルクリック]で写真を挿入すれば完成です!

Bootstrapを活用してみましょう
Bootstrapには、上記のような画像表示の他にも、ボタン・テーブル・ナビゲーション・アイコンなど様々なスタイルがあります。
一工夫でよりオリジナリティ溢れるサイトにしましょう!
Bootstrap3と検索すればスタイルが用意されていますので、ご興味のある方はお試しください。
- 1 / 1