Cancellation Policy
Do Goope, as you like!
About ShiShiDesign
How to Customize
Goope（グーペ）では、HTMLとCSSを編集することができるので、ある程度の知識があれば、デザインのアレンジ（カスタマイズ）も可能です。
このページでは、「かんたん編集だけでは物足りない！」「自力でカスタマイズしてみたい！」と思う方に向けて、HTML&CSS編集のヒントをご紹介します。 興味がある方はぜひチャレンジを！
ただし、あくまでご自身の責任のもとで行ってくださいね。自信の無い方は、お気軽にご相談・ご依頼ください。
このサイトは、『シシデザイン』がグーペを使って制作しています。
シシデザインは、東京の下町（東京都墨田区）を拠点にする、
個人事業/SOHOスタイルの小さなデザイン工房です。
※2023年11月に苫小牧市へ移転いたしました。
グーペでの制作実績は50社以上！（リニューアル含む）→制作実績はこちら
当工房独自のノウハウを駆使し、グーペの良さを最大限に引き出した、
オリジナリティのあるホームページを制作させていただきます。
その他、ロゴ制作や印刷物のデザイン実績も豊富です。→詳しくはこちら
コブリなデザイナーと、キマグレなアシスタントだけの小さな工房ですが、
「獅子」のようにプライドを持ってお仕事させていただきます。
どうぞお気軽にお問い合わせください。
※シシデザインでは、収益金の一部を動物保護に尽力されている団体へ寄付しています。
テンプレートの選び方
グーペにはカスタマイズ用のテンプレートというものは存在しません。「誰でも簡単にホームページが作れる」のがウリのサービスなのですから、それも当然と言えば当然ですね。
その代わり、どのテンプレートでも、カスタマイズは可能なのですよ！
テンプレート選びで迷ったときは・・
グーペには魅力的なテンプレートが揃っています。でもいざ、１つのテンプレートを選ぶ段になると、どのテンプレートを選べば良いのか迷うかもしれませんね。
カスタマイズすることを前提にするならば、「スライドショーの見え方」や「スマートフォン表示でのナビゲーションの見え方」を基準にすると良いでしょう。 この２つは、カスタマイズするにはかなり敷居が高い部分なのです。逆に言えば、これ以外の部分は、比較的カスタマイズしやすいので、多少気に入らない箇所があっても「がんばれば変更できる」はず？！自分好みに改変するのも夢ではありません。
ですから、まずは「スライドショーの見え方」と「スマートフォン表示でのナビゲーションの見え方」の２つにポイントをおいて、これらが自分の好みやイメージと合っているテンプレートを選ぶと良いでしょう。
スライドショーの仕様もチェック！
「スライドショーの仕様について」でもご紹介していますが、テンプレートによって、スライドショーの仕様がかなり異なります。
画像は全部見せたいのか、一部がカットされてもよいのか・・。どんな画像を使うのかによっても違ってくると思います。
スライドショーを使う場合はホームページの顔となる部分ですので、妥協せず入念に検討してくださいね。
モバイルビューの仕様もチェック！
「スマートフォンやタブレットでの見え方」でもご紹介していますが、テンプレートによって、スマートフォンで見たときの印象がかなり異なります。
特にナビゲーションの見え方は、好みが分かれるところ。これが正解というものはありませんので、ご自身で「これが使いやすそう」と思うものを選んでみてくださいね。
テンプレートは最新のものを使いましょう
カスタマイズを施すテンプレートは、最新のものを使うようにしましょう。
（軽微なバグ解消などで）マイナーチェンジされていることがあるからです。また、古いテンプレートでは、まれに、新しく追加された機能が使えないこともあります。
カスタマイズ（HTMLやCSSの編集）を行う前には、テンプレートを新しくダウンロードする（同じテンプレートであっても、最新のものを使う）ことをオススメいたします。
HTML・CSS編集を行う前に、必ず「複製」しましょう
グーペのテンプレートデザインを一定レベル以上にカスタマイズするためには、「テンプレートのHTMLやCSSを直接編集」する必要があります。
ここでまず重要なことは、編集を行う前には必ずテンプレートをコピー（複製）しておくいうことです。
「HTML・CSS編集」を行ったあとに「かんたん編集」に戻してしまうと、「HTML・CSS編集」で変更した内容は破棄され、テンプレートの初期デザインに戻ってしまうからです。
また、慣れないうちはミスも付きものです。編集履歴は最大10件まで自動保存されますが、複製があるのと無いのとでは安心感が段違い！
必ずテンプレートをコピー（複製）してから編集するようにしましょう。
テンプレートの複製
- グーペの管理メニューから、各種設定＞デザイン＞デザイン一覧を開きます。
- カスタマイズしたいテンプレートを選び、コピーをクリックします。
- 「テンプレート名（コピー）」という名前のテンプレートが複製されますので、編集をクリックします。
- デザイン名変更の欄から、自分でわかりやすい名前に変更しておくとよいでしょう。
テンプレートは最大50個まで保持できます！
テンプレートは、複製したものを含め、最大50個まで保有することができます。そして保有しているテンプレートは、すべてプレビューすることができます。
つまり、現在使っているデザインはそのままに、テンプレートを変更した場合のシミュレーションができるのです。
テンプレートの複製をうまく利用して、カスタマイズにお役立てくださいね。
スライドショーの仕様について
「テンプレートの選び方」でご紹介したように、「スライドショーの見え方」は、テンプレート選びで重要なポイントとなります。
グーペの公式マニュアルにも紹介されていますが、テンプレートによって、スライドショーの見え方（仕様）がかなり異なります。
テンプレートによる仕様の違いを理解していないと、意図しないスライドショーになってしまうことがあるので要注意です。
グーペにおけるスライドショーのタイプ
詳細は上記のマニュアルページをご覧いただくとして、ざっくりご紹介すると、次の４つのタイプに分かれます。
- 画像がカットされないタイプ
スライドショーのエリア（主に高さ）が画像のサイズによって変化し、画像の比率がそのまま表示できます。どこもカットされないので、文字を重ねた画像を使う場合などにオススメです。
Spoonなど - 画像の一部がカットされるタイプ（画像の中央が表示される）
スライドショーのエリアがPCとスマホで異なり、画像の上下左右がカットされるので、雰囲気重視の写真向きです。
Aromaなど - 画像の一部がカットされるタイプ（画像の上部が表示される）
スライドショーのエリアがPCとスマホで異なり、画像の左右や下部分がされるので、雰囲気重視の写真向きです。
Linenなど - 比率が固定のタイプ（スライドショーの画像が収まるように比率を保って縮小）
どこもカットされないので、画像全体を見せたい場合に向いています。
Clinic2など
上記の公式マニュアルページには、推奨サイズなども掲載されていますので、参考になさってくださいね。
スライドショー部分のカスタマイズは難易度が高めで、ここではご紹介しきれませんので、よろしければご相談くださいませ！
スマートフォンやタブレットでの見え方
「テンプレートの選び方」でご紹介したように、「スマートフォン表示でのナビゲーションの見え方」は、テンプレート選びで重要なポイントとなります。
テンプレートによって、ナビゲーションの見え方がかなり異なるからです。
グーペにおけるスマートフォン表示時のナビゲーションタイプ
ざっくりご紹介すると、次の４つのタイプに分かれます。
- リスト型：
画面の下部に常時表示しておくタイプ
Simple2など - スライド型：
三本線のアイコンをタップすると、横からスライドして出てくるタイプ
Clinic2など - プルダウン型：
「Menu」「メニュー」などのボタンをタップするとペロンと出てくるタイプ
Spoonなど - モーダル型：
アイコンをタップすると、オーバーレイで表示されるタイプ
Organicなど
確認方法
PCからでも簡単に確認することができます。
グーペのテンプレート一覧から、各テンプレートのプレビュー画面を開いて
テンプレートによっては、タブレット表示も用意されているものがあります。
ナビゲーション部分のカスタマイズは難易度が高めで、ここではご紹介しきれませんので、よろしければご相談くださいませ！
