お役立ち情報

みなさまは、Bootstrap(ブートストラップ)というワードをご存知でしょうか？
Bootstrap(ブートストラップ)とは、Twitter社が開発したCSSの「フレームワーク」で、簡単にご説明するとHTML/CSSの知識がなくても、ちょっとした設定で様々なデザインが表現できるというものです。

弊社CMSも、このBootstrap(ブートストラップ)を使用することが可能です。

例えば下記のような画像の表示です。

このように画像を加工しなくとも、丸く表示させたり枠付きにして表示させることができます。

表示方法を変えたい画像のページで[右クリック]→[フリーページ]→[フルエディタ編集]と進みます。

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

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

スタイルシートクラスに、下記の記述を入力し、[OK]と進みます。

記述例

• img-rounded
• img-circle
• img-thumbnail

ここでは[img-circle]…画像丸を記述しています。

画像が丸くなりました！

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

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

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