メニューを飛ばして本文へ
Contact now!

ヒント集Cancellation Policy

ヒント集Do Goope, as you like!

ヒント集About ShiShiDesign

ヒント集How to Customize

Goope(グーペ)では、HTMLとCSSを編集することができるので、ある程度の知識があれば、デザインのアレンジ(カスタマイズ)も可能です。
このページでは、「かんたん編集だけでは物足りない!」「自力でカスタマイズしてみたい!」と思う方に向けて、HTML&CSS編集のヒントをご紹介します。 興味がある方はぜひチャレンジを!
ただし、あくまでご自身の責任のもとで行ってくださいね。自信の無い方は、お気軽にご相談・ご依頼ください

このサイトは、『シシデザイン』がグーペを使って制作しています。

シシデザインは、東京の下町(東京都墨田区)を拠点にする
個人事業/SOHOスタイルの小さなデザイン工房です。
※2023年11月に苫小牧市へ移転いたしました。

 

グーペでの制作実績は50社以上!(リニューアル含む)→制作実績はこちら

当工房独自のノウハウを駆使し、グーペの良さを最大限に引き出した、
オリジナリティのあるホームページを制作させていただきます。

 

その他、ロゴ制作や印刷物のデザイン実績も豊富です。→詳しくはこちら

 

コブリなデザイナーと、キマグレなアシスタントだけの小さな工房ですが、
「獅子」のようにプライドを持ってお仕事させていただきます。

どうぞお気軽にお問い合わせください。

※シシデザインでは、収益金の一部を動物保護に尽力されている団体へ寄付しています。

※ご覧になりたい記事のタイトルをクリックしてください
2023-01-10 14:59:00

テンプレートの選び方

グーペにはカスタマイズ用のテンプレートというものは存在しません。「誰でも簡単にホームページが作れる」のがウリのサービスなのですから、それも当然と言えば当然ですね。

その代わり、どのテンプレートでも、カスタマイズは可能なのですよ!

テンプレート選びで迷ったときは・・

グーペには魅力的なテンプレートが揃っています。でもいざ、1つのテンプレートを選ぶ段になると、どのテンプレートを選べば良いのか迷うかもしれませんね。

カスタマイズすることを前提にするならば、「スライドショーの見え方」「スマートフォン表示でのナビゲーションの見え方」を基準にすると良いでしょう。 この2つは、カスタマイズするにはかなり敷居が高い部分なのです。逆に言えば、これ以外の部分は、比較的カスタマイズしやすいので、多少気に入らない箇所があっても「がんばれば変更できる」はず?!自分好みに改変するのも夢ではありません。

ですから、まずは「スライドショーの見え方」と「スマートフォン表示でのナビゲーションの見え方」の2つにポイントをおいて、これらが自分の好みやイメージと合っているテンプレートを選ぶと良いでしょう。

スライドショーの仕様もチェック!

スライドショーの仕様について」でもご紹介していますが、テンプレートによって、スライドショーの仕様がかなり異なります。

画像は全部見せたいのか、一部がカットされてもよいのか・・。どんな画像を使うのかによっても違ってくると思います。

スライドショーを使う場合はホームページの顔となる部分ですので、妥協せず入念に検討してくださいね。

モバイルビューの仕様もチェック!

スマートフォンやタブレットでの見え方」でもご紹介していますが、テンプレートによって、スマートフォンで見たときの印象がかなり異なります。

特にナビゲーションの見え方は、好みが分かれるところ。これが正解というものはありませんので、ご自身で「これが使いやすそう」と思うものを選んでみてくださいね。

2023-01-10 14:00:00

テンプレートは最新のものを使いましょう

カスタマイズを施すテンプレートは、最新のものを使うようにしましょう。

(軽微なバグ解消などで)マイナーチェンジされていることがあるからです。また、古いテンプレートでは、まれに、新しく追加された機能が使えないこともあります。

カスタマイズ(HTMLやCSSの編集)を行う前には、テンプレートを新しくダウンロードする(同じテンプレートであっても、最新のものを使う)ことをオススメいたします。

2023-01-10 13:00:00

HTML・CSS編集を行う前に、必ず「複製」しましょう

グーペのテンプレートデザインを一定レベル以上にカスタマイズするためには、「テンプレートのHTMLやCSSを直接編集」する必要があります。

ここでまず重要なことは、編集を行う前には必ずテンプレートをコピー(複製)しておくいうことです。

「HTML・CSS編集」を行ったあとに「かんたん編集」に戻してしまうと、「HTML・CSS編集」で変更した内容は破棄され、テンプレートの初期デザインに戻ってしまうからです。

また、慣れないうちはミスも付きものです。編集履歴は最大10件まで自動保存されますが、複製があるのと無いのとでは安心感が段違い!

必ずテンプレートをコピー(複製)してから編集するようにしましょう。

テンプレートの複製

  1. グーペの管理メニューから、各種設定>デザイン>デザイン一覧を開きます。
  2. カスタマイズしたいテンプレートを選び、コピーをクリックします。
  3. 「テンプレート名(コピー)」という名前のテンプレートが複製されますので、編集をクリックします。
  4. デザイン名変更の欄から、自分でわかりやすい名前に変更しておくとよいでしょう。

テンプレートは最大50個まで保持できます!

テンプレートは、複製したものを含め、最大50個まで保有することができます。そして保有しているテンプレートは、すべてプレビューすることができます。

つまり、現在使っているデザインはそのままに、テンプレートを変更した場合のシミュレーションができるのです。

テンプレートの複製をうまく利用して、カスタマイズにお役立てくださいね。

2023-01-10 12:00:00

スライドショーの仕様について

テンプレートの選び方」でご紹介したように、「スライドショーの見え方」は、テンプレート選びで重要なポイントとなります。

グーペの公式マニュアルにも紹介されていますが、テンプレートによって、スライドショーの見え方(仕様)がかなり異なります。

テンプレート別スライドショーの仕様について

テンプレートによる仕様の違いを理解していないと、意図しないスライドショーになってしまうことがあるので要注意です。

グーペにおけるスライドショーのタイプ

詳細は上記のマニュアルページをご覧いただくとして、ざっくりご紹介すると、次の4つのタイプに分かれます。

  1. 画像がカットされないタイプ
    スライドショーのエリア(主に高さ)が画像のサイズによって変化し、画像の比率がそのまま表示できます。どこもカットされないので、文字を重ねた画像を使う場合などにオススメです。
    Spoonなど
  2. 画像の一部がカットされるタイプ(画像の中央が表示される)
    スライドショーのエリアがPCとスマホで異なり、画像の上下左右がカットされるので、雰囲気重視の写真向きです。
    Aromaなど
  3. 画像の一部がカットされるタイプ(画像の上部が表示される)
    スライドショーのエリアがPCとスマホで異なり、画像の左右や下部分がされるので、雰囲気重視の写真向きです。
    Linenなど
  4. 比率が固定のタイプ(スライドショーの画像が収まるように比率を保って縮小)
    どこもカットされないので、画像全体を見せたい場合に向いています。
    Clinic2など

上記の公式マニュアルページには、推奨サイズなども掲載されていますので、参考になさってくださいね。

スライドショー部分のカスタマイズは難易度が高めで、ここではご紹介しきれませんので、よろしければご相談くださいませ

2023-01-10 11:00:00

スマートフォンやタブレットでの見え方

テンプレートの選び方」でご紹介したように、「スマートフォン表示でのナビゲーションの見え方」は、テンプレート選びで重要なポイントとなります。

テンプレートによって、ナビゲーションの見え方がかなり異なるからです。

グーペにおけるスマートフォン表示時のナビゲーションタイプ

ざっくりご紹介すると、次の4つのタイプに分かれます。

  1. リスト型:
    画面の下部に常時表示しておくタイプ
    Simple2など
  2. スライド型:
    三本線のアイコンをタップすると、横からスライドして出てくるタイプ
    Clinic2など
  3. プルダウン型:
    「Menu」「メニュー」などのボタンをタップするとペロンと出てくるタイプ
    Spoonなど
  4. モーダル型:
    アイコンをタップすると、オーバーレイで表示されるタイプ
    Organicなど

確認方法

PCからでも簡単に確認することができます。

グーペのテンプレート一覧から、各テンプレートのプレビュー画面を開いていただき、上部の「スマホ」というタブをクリックしていただくと、スマホ表示でのナビゲーションがご確認いただけると思います。

テンプレートによっては、タブレット表示も用意されているものがあります。

ナビゲーション部分のカスタマイズは難易度が高めで、ここではご紹介しきれませんので、よろしければご相談くださいませ

1 2

このページのトップへ
sample