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のコードは必ず半角英数字で記述してください。このヒント集では、表示の都合上、一部をわざと全角にしておりますので、コピー&ペーストするとうまく動かない場合があります。ご注意ください。
BusinessのCSS
1724行あたり
text-decolation: none;
正しくはこう↓(スペルミス)
text-decoration: none;
Clinic2のHTML
HTMLの681行目あたり
<!-- END minne_gallery -->
</main>
</div>
正しくはこう↓(ちょっと順番が違う)
</main>
</div>
<!-- END minne_gallery -->
Clinic2のCSS
1348行あたり
pointer: cursor;
正しくはこう↓(pointerというプロパティは存在しません)
cursor: pointer;
SceneのCSS
CSSの1595、2455、2780行目あたり
border-color: none;
none は border-color で利用できる値ではないので、この行を削除するか、 ボーダーのカラーを無し(透明)にしたい時はこう書きます↓
border-color: transparent;
SpoonのCSS
CSSの784行目あたり
background: fff;
正しくはこう↓(16進数のカラーコードには、頭に#を付けます)
background: #fff;
SliderのHTML
HTMLの593行目あたり。
Sliderの他にも、比較的古いテンプレートで同様のバグがあります。
<!-- サブナビここから // -->
<ul class="sub_navi_side">
<!-- BEGIN navi_sub_list -->
{navi_sub_list}
<!-- END navi_sub_list -->
</ul>
<!-- サブナビここまで // -->
正しくはこう↓(ul を div に変更する)
という独自タグはulタグを含むので、ダブるのを避けるため)
<!-- サブナビここから // -->
<div class="sub_navi_side">
<!-- BEGIN navi_sub_list -->
{navi_sub_list}
<!-- END navi_sub_list -->
</div>
<!-- サブナビここまで // -->
SliderのCSS
CSSの1069行目あたり
margin-bottom: 0 0 40px;
正しくはこう↓
margin-bottom: 40px
CSSの1420行目あたり
font-family: Arial #6a6a6a;
正しくはこう↓(フォントの指定にカラーコードは入れられません)
font-family: Arial;
CSSの1995行目あたり
.gnav li:hover > div {
display: block !important;
} -right: 0;
正しくはこう↓(閉じた後に書くことはできません)
.gnav li:hover > div {
display: block !important;
}
今後の投稿予定
- スライドショーの仕様の違いについて
- フリーページは分かりやすい名前がオススメ
- フリーページの下書き活用法
- 実はフリーページだった!グーペの機能
- メニューページだけページネーションを消すには?
- お知らせの日付表示を変えるには?
- フッターにもナビを表示させるには?
- CSS応用編:bodyタグを使いこなす
- h1の場所を変更する(重要なSEO対策)
- 更新のコツ(コピー&ペーストの注意点)