お役立ち情報

2017.09.09

レスポンシブデザインを利用したテンプレートを設定しよう

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

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

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

事前に確認しましょう

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

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

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

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

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

ここからデザインテンプレートを変更します

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

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

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

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

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

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

ご注意

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

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

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

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

レスポンシブデザインへの変更依頼も承ります

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

お問い合わせはこちら