ant2マガジン

こんにちは。
アントアントのメルマガ担当です。

いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回はBootstrapを使ったアイコンの設定方法についてご紹介します。

BootstrapとはHTML／CSS／JavaScriptから構成される世界で最も有名なCSSフレームワークの1つです。CSSフレームワークとは、Webサイトの制作においてページのレイアウトやパーツの装飾、フォームのデザインなどを簡単にスピーディーに作成できるCSSコードがまとまったもののことを指します。

そのため、Bootstrapに用意されているクラスなどを指定することで簡単にWebサイトのデザインを作成することができます。

ant2CMSとBootstrap

ant2 CMSの最新のテンプレートはBootstrapを実装済みです。
アイコンやボタンを簡単に設置できたり、パララックス機能を使って奥行きのある表現も可能です。Bootstrapで無料配布のテンプレートを容易にカスタマイズできるので、短時間での納品が可能となります。

Bootstrapを使って簡単アイコン設定

Bootstrap Iconsでは、1500以上のアイコンを用意しています。
今回はそのアイコンを使ってメニューリストにアイコンを表示させる設定方法をご紹介します。
Bootstrap Iconsはこちらhttps://icons.getbootstrap.jp/

1．まずはじめにBootstrap Iconsのアイコンを選択します。

 　

3．アイコンを設定したいサイトにログインして編集画面に入ります

【編集画面】

 　

4．アイコンを設定するメニューを決めて右クリック→ショートカットメニューからメニューの編集をクリックしてください

 　

５．メニューの編集ダイアログが表示されるのでメニュー名を編集します

 　

メニュー名に先ほどコピーしたHTMLテキストをメニュー名の前に貼付けて【OK】ボタンをクリックして設定完了です。

 

　 

↓入力例

設定完了後はこのように表示されます

勿論Bootstrap Iconsは他の場所にも使っていただけます！

アイコンに悩んだ時は是非、Bootstrap Iconsのアイコンをチェックしてみてください。
1500個以上のアイコンが用意されているので、サイトにあったアイコンがきっと見つかるはずです。

今回はBootstrapのアイコンを使ったアイコンの設定方法についてご紹介しました。

簡単に設定することができるためアイコンを画像を用意することが難しいといった場合や
少しメニューリストをわかりやすくしたいとき、文章にアイコンを入れたいときに活用していただけます。是非この機会にお試しください。