WordPressでお手軽にBootstrapを使えるプラグイン「Easy Bootstrap Shortcode」

Webデザインの知識がなくても、簡単にレスポンシブなグリッドシステムを使える便利なBootstrap。Twitter社が開発したCSSの「フレームワーク」なのですが、これをWordpressで簡単に使用できるプラグイン「Easy Bootstrap Shortcode」をご紹介致します。

インストール方法

メニューから「プラグイン」>「新規追加」を選択し「Easy Bootstrap Shortcode」を検索し、「インストール」をクリックします。

※インストール後、有効化も忘れずに行ってください。

以上でインストールは完了です。

Bootstrap概要説明

まずはグリッドシステムの概要を説明します。

Bootstrapのグリッドシステムとは

スマートフォンで表示させると
上記グリッドシステムをスマートフォンなどで表示すると、以下の様になります。

具体的な使用方法

上記、例1のケースの段組みの使用方法です。

ポイントはクラス名が「col-sm-6」と「col-sm-6」と合計12となっている点です。

表示例
コンテンツ1
コンテンツ2

↑これだと解りずらいので、図を入れてみますね。

表示例
同様に、例2のケースの段組みの使用方法です。

ポイントはクラス名が「col-sm-4」が3つで合計12となっている点です。

表示例
同様に、例3のケースの段組みの使用方法です。

ポイントはクラス名が「col-sm-8」と「col-sm-4」で合計12となっている点です。

表示例

レスポンシブ対応

なお、これらはレスポンシブ対応しています。上記例2をPCやスマホで表示すると以下の様になります。

レスポンシブ対応表示:PCの場合

レスポンシブ対応表示:スマホの場合

2018/2/25追記:このプラグインは2年間更新されていない模様なので、段組みを使用するだけなら、こちらの「Shortcodes Ultimate」を使用する方が良いかもしれません。筆者は静的HTML生成の方法でセキュリティを確保しているので、このプラグインを今だに愛用しています。)

Print Friendly, PDF & Email