グーペでは、HTMLとCSSを編集することができます（もちろんグーペ独自ルールなどの制約はありますが、かなりの部分を自由に編集できます）。

各種設定＞デザイン＞デザイン一覧を開き、編集ボタンをクリックすると、HTMLとCSSとを編集できる画面が現れます。（最初だけ、HTML・CSS編集ボタンをクリック）

難しそうな文字列がズラ〜ッと現れるので、初めて見るとびっくりするかもしれませんね。HTMLもCSSもホームページを作るための基本となる言語ですが、それぞれに大切な役割があります。

HTMLを編集すると・・

HTMLを編集するとホームページに表示している要素（構成要素）を操作することができます。

具体的には、表示の順序を変えたり、文言を追加したり・・ということができます。

このとき、重要な目印となるのが <xxxxx>●●●●●</xxxxx> という部分です。●●●●●を要素、<xxxxx>をタグと言います。

要素をタグで囲んであげることで、「ここは文章ですよ」「ここは見出しですよ」と明示的に意味を持たせることができるのです。

<h1>この部分が見出しとなります</h1>
<p>この部分が段落となります</p>

タグの種類はたくさんありますが、検索すればすぐ出てきますよ！

h1のhは「heading（見出し）」のh、pは「paragraph（段落）」のp、というように、覚えやすいようになっています。

CSSを編集すると・・

一方、CSS編集では、主にホームページの見た目（見栄えや装飾）を操作することができます。

具体的には、背景色を変えたり、文字の大きさを変えたり、レイアウトを変更したり・・ということができます。

例えば見出しh1の文字色を赤にしたい場合にはこのように記述します。

h1｛color: red;｝

こちらも、書き方などは検索すればすぐわかると思います！

HTMLのタグもCSSのコードも、必ず半角英数字で記述してください。このヒント集では、表示の都合上、一部をわざと全角にしておりますので、コピー＆ペーストするとうまく動かない場合があります。ご注意ください。

あくまで自己責任でお願いします

HTMLやCSSの編集は、グーペのサポートの対象外となりますので、何かトラブルがあった場合にグーペのサポートを受けることができません。カスタマイズを行われる際は、自己責任にてお願いいたします。

ご自身での編集に自身の無い方は、お気軽にシシデザインまでご相談ください。

グーペにおけるHTMLの編集エリアは、保有しているデザインテンプレートにつき1箇所となります。

この1箇所の中に、すべてのページの元となる要素を記述するようになっています。

このとき、重要な目印となるのが <!-- BEGIN xxxxx --> <!-- END xxxxx --> という部分です。これはグーペ独自の記述ルールで、各ページを示すブロックとなっています。

<!-- BEGIN top -->
この部分がトップページに相当する記述となります
<!-- END top -->

<!-- BEGIN info -->
この部分がお知らせページに相当する記述となります
<!-- END info -->

独自タグは、ページブロック以外で使用できる共通タグと、特定のページブロック内でしか使えないものがあるので注意してください。

また、各ページを示すブロック以外に、特定の要素を表示するためのブロックがあります。例えば、ナビゲーションを表示する部分には次のようなブロックが使われています。

<!-- BEGIN navi_list -->
この部分はナビゲーションを表示するためのエリアになります
<!-- END navi_list -->

メモ書きに使われるコメントアウトと同じ表記なので、うっかり消してしまわないように注意してくださいね！

ブロックが無いページもある！！

いくつかのページは、HTML内にブロックが存在しません。詳しくはまた改めてご紹介しますが、例えば比較的新しい機能である「日記」などは、HTML内のどこを見ても見つからないと思います。

このような場合でもある程度のカスタマイズは可能です。ただ、ここでご紹介するには少々複雑（裏技すぎる）ので、ご希望の方はお気軽にシシデザインまでご相談ください。

グーペには、独自タグと呼ばれる、特殊なタグがあります。

→独自タグの一覧はこちら

独自タグは、グーペのデザインテンプレートを編集する時に利用する文字コードで、グーペのカスタマイズには欠かせない大切な要素です。

具体的には{●●●●●}のように波カッコで囲まれた部分になります。

例えば｛tel｝は電話番号に、｛site_address｝は住所に、それぞれ対応しています。

もちろん、電話番号や住所をHTMLに直接記述してもよいのですが、独自タグで入れておけば入力ミスが防げますし、電話番号や住所が変更になった場合でも、グーペの管理メニュー側で変更するだけでOK！これは便利！

ちなみに、電話番号や住所は、グーペの管理メニューから、コンテンツ＞店舗情報で変更できます。

独自タグは必ず半角英数字で入力しましょう。このヒント集では、表示の都合上、一部をわざと全角にしておりますので、コピー＆ペーストするとうまく動かない場合があります。ご注意ください。

独自タグは少しずつ増えています

グーペの独自タグはとても便利なのですが、一方で、すべての要素について独自タグが用意されているわけではありません。

独自タグが無い要素は、変更しずらい箇所と言えます。

でも、独自タグは少しずつ増えています。あきらめず、時々一覧をチェックしてみましょう！

独自タグを消すときは慎重に！

独自タグの中には、グーペのホームページレイアウトを構築する上で、非常に重要なタグもあります。うっかり消してしまうと、レイアウトが崩れてしまうことも・・！！

要素が不要な場合は、まずはCSSで｛display: none;｝などと記述して、非表示にしてみましょう。

.info_date {display:none;}

独自タグが無いこともある！！

ごくまれに独自タグが存在しない要素があります。詳しくはまた改めてご紹介しますが、例えば比較的新しい機能である「日記」などがそれに当たります。

このような場合にもCSSの記述は有効です。例えば次のように記述すると、日記の日付は非表示になりますよ。

.p-diary__date {display:none;}

ちなみに、このヒント集は「日記」機能を使って更新していますが、日付は必要無いという判断からやはり非表示にしています。

※独自タグは必ず半角英数字で記述してください。このヒント集では、表示の都合上、一部をわざと全角にしておりますので、コピー＆ペーストするとうまく動かない場合があります。ご注意ください。

ホームページ内に表示される要素の場所を変更（移動、削除など）する場合には、HTML編集画面をいじります。

例えば、トップページには、どのテンプレートにもデフォルトでスライドショー・ウェルカムメッセージ・お知らせが表示されるようになっていますので、ウェルカムメッセージの場所を変えたい思ったら｛message｝という独自タグを移動すれば良いことになります。

ただし、｛message｝は、トップページでしか使用できない独自タグなので、<!-- BEGIN top -->～ <!-- END top --> のブロック内以外では使用できません。

※独自タグは必ず半角英数字で記述してください。このヒント集では、表示の都合上、一部をわざと全角にしておりますので、コピー＆ペーストするとうまく動かない場合があります。ご注意ください。