メニューを飛ばして本文へ
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-04 09:00:00

テンプレートのバグ

ごくまれに、テンプレート内のそもそものHTML&CSSの中にバグがあることがあります。

たいていは軽微なものなので影響は少ないのですが、カスタマイズを施した際に「あれれ?何か動きが変?」となって気がつくレベル。

(もちろん、大きなバグを発見してしまったときは、グーペ さんにご報告するようにしています!)

もうすでに直っているかもしれませんが、念のため共有いたしますね。

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

BusinessのCSS

1724行あたり

CSS(誤)
text-decolation: none;

正しくはこう↓(スペルミス)

CSS(正)
text-decoration: none;

Clinic2のHTML

HTMLの681行目あたり

HTML(誤)
<!-- END minne_gallery -->
</main>
</div>

正しくはこう↓(ちょっと順番が違う)

HTML(正)
</main>
</div>
<!-- END minne_gallery -->

Clinic2のCSS

1348行あたり

CSS(誤)
pointer: cursor;

正しくはこう↓(pointerというプロパティは存在しません)

CSS(正)
cursor: pointer;

SceneのCSS

CSSの1595、2455、2780行目あたり

CSS(誤)
border-color: none;

none は border-color で利用できる値ではないので、この行を削除するか、 ボーダーのカラーを無し(透明)にしたい時はこう書きます↓

CSS(正)
border-color: transparent;

SpoonのCSS

CSSの784行目あたり

CSS(誤)
background: fff;

正しくはこう↓(16進数のカラーコードには、頭に#を付けます)

CSS(正)
background: #fff;

SliderのHTML

HTMLの593行目あたり。

Sliderの他にも、比較的古いテンプレートで同様のバグがあります。

CSS(誤)
<!-- サブナビここから // -->
<ul class="sub_navi_side">
<!-- BEGIN navi_sub_list -->
{navi_sub_list}
<!-- END navi_sub_list -->
</ul>
<!-- サブナビここまで // -->

正しくはこう↓(ul を div に変更する)

という独自タグはulタグを含むので、ダブるのを避けるため)

CSS(正)
<!-- サブナビここから // -->
<div class="sub_navi_side">
<!-- BEGIN navi_sub_list -->
{navi_sub_list}
<!-- END navi_sub_list -->
</div>
<!-- サブナビここまで // -->

SliderのCSS

CSSの1069行目あたり

CSS(誤)
margin-bottom: 0 0 40px;

正しくはこう↓

CSS(正)
margin-bottom: 40px

CSSの1420行目あたり

CSS(誤)
font-family: Arial #6a6a6a;

正しくはこう↓(フォントの指定にカラーコードは入れられません)

CSS(正)
font-family: Arial;

CSSの1995行目あたり

CSS(誤)
.gnav li:hover > div {
  display: block !important;
}  -right: 0;

正しくはこう↓(閉じた後に書くことはできません)

CSS(正)
.gnav li:hover > div {
  display: block !important;
}
2023-01-02 12:46:00

今後の投稿予定

  • スライドショーの仕様の違いについて
  • フリーページは分かりやすい名前がオススメ
  • フリーページの下書き活用法
  • 実はフリーページだった!グーペの機能
  • メニューページだけページネーションを消すには?
  • お知らせの日付表示を変えるには?
  • フッターにもナビを表示させるには?
  • CSS応用編:bodyタグを使いこなす
  • h1の場所を変更する(重要なSEO対策)
  • 更新のコツ(コピー&ペーストの注意点)
1

このページのトップへ
sample