お役立ち情報

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

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

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

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

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

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

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

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

記述例

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

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

画像が丸くなりました！

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

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

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

前回は、Googleより発表されました、モバイルファーストインデックス（MFI）の導入についてお話いたしました。

その中でもご紹介しております「レスポンシブデザイン」（レスポンシブウェブデザイン/RWD）は、あらゆるデバイスに最適化したウェブサイトを単一のHTMLで実現できるため、GoogleのMFIの導入にかかわらず、デバイスにとらわれない情報提供を行うことができます。

今回は、弊社CMSでご提供しておりますレスポンシブデザインのテンプレートを設定する手順と、弊社CMSでのレスポンシブデザイン利用の際の注意点をご紹介させていただきます。

2017年1月以前にご契約いただいた方は、PCサイトとモバイルサイトが生成されていますので、まずは下記の手順にて設定を行ってください。

まず、ログイン後コントロールパネルから[システム]→[サイト設定]と進みます。

次に、モバイルURLの項目を、全て/(PCサイト)にチェックを入れてください。

これにより、スマートフォン専用サイトを表示しない設定になりますので、レスポンシブデザインのテンプレートが設定可能となります。

※2017年1月以降にご契約いただいた方は、既にこの設定が適応されています。
※この設定により、モバイルのブロックレイアウト機能は今後設定不要になります。

コントロールパネルより、[管理]→[サイトデザイン]と進みます。

次に、右上[インストール]を押します。

左上二番目[レスポンシブ]のタブをクリックすると、現在ご提供しているレスポンシブデザインのテンプレート一覧が表示されます。※テーマカラーから探すことも可能です

設定したいお好きなデザインテンプレートを選び、インストールをクリックしてください。
(ここでは responsive_type03_red のテンプレートを選びます)

インストールが完了すると、インストール済みデザインの中にテンプレートが登録されますので、チェックボックスにチェックを入れて[OK]を押します。

デザインテンプレートが変更されました！

ご注意

この操作は、右クリックの[元に戻す]操作は適応されませんので、戻したい場合は必ず[サイトデザイン]の中のチェックボックスにて変更を行ってください。

また、状況に応じて、レイアウトの調整を行ってください。
コントロールパネルの[作成]→[ブロックレイアウト]と進みます。

各パーツを表示させたい場所に[ドラッグ＆ドロップ]で移動し、[OK]を押して表示をご確認ください。
(ここでは、メニューがページ下部にあったため、ヘッダー部分に表示させる設定をしています。)

メニューが上部に表示されました！

レスポンシブデザインテンプレートへの変更、最適な表示までお手直しさせていただきます。
お気軽にお問い合わせください。

お問い合わせはこちら