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

「ウェルカムメッセージ」の小見出しを変更するには

テンプレートによっては(特に古いテンプレート)、トップページのウェルカムメッセージの前に「Welcome」や「ごあいさつ」などの小見出しが付いていることがあります。

この文言を変えたい(消したい)場合は、トップページに関することなので、トップページのブロック内を編集します。

HTML
<!-- BEGIN top -->
この部分に注目します!
<!-- END top -->
  1. グーペの管理メニューから、各種設定>デザイン>デザイン一覧を開きます。
  2. カスタマイズしたいテンプレートを選び、編集をクリックします。
  3. HTML&CSSの編集画面になるので、「Welcome」または「ごあいさつ」の文字を検索して、場所を特定します。
  4. 自分好みの名称に変更します。
  5. 「保存」をクリックすれば、変更完了です。
2023-01-08 14:00:00

「お知らせ」の小見出しを変更するには

テンプレートによっては(特に古いテンプレート)、トップページのお知らせの前に「Information」や「お知らせ」などの小見出しが付いていることがあります。

この文言を変えたい場合は、トップページに関することなので、トップページのブロック内を編集します。

HTML
<!-- BEGIN top -->
この部分に注目します!
<!-- END top -->
  1. グーペの管理メニューから、各種設定>デザイン>デザイン一覧を開きます。
  2. カスタマイズしたいテンプレートを選び、編集をクリックします。
  3. HTML&CSSの編集画面になるので、「Information」や「お知らせ」の文字列を検索して、場所を特定します。
  4. 自分好みの名称に変更します。
  5. 「保存」をクリックすれば、変更完了です。

上級編:ナビゲーションの名称と連動させたい場合は

小見出しの文字列部分を独自タグ{top_info_page_title}にします。この独自タグは、トップページのお知らせページのタイトルに使用できます。

独自タグ{top_info_page_title}は、トップページのブロック内のみでしか使用できないのでご注意ください。

 

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

2023-01-08 13:00:00

日付の表示形式(日付フォーマット)を変更するには

「お知らせ」投稿の日付フォーマットは、使用しているテンプレートによって異なります。

たいてい、「2023/01/30」または「2023-01-30」になっていると思います。

実はこの日付フォーマットは、グーペの独自タグを使うことで変更できるのです!

独自タグについてはこちら

 「2023年01月30日」や「2023.01.30」のような表記にしたり、さらには曜日を追加することもできます。

「2023年01月30日(月)」「2023.01.30 [Mon]」にもできるということです。

トップページに関することなので、トップページのブロック内、お知らせの最新リストが表示されるエリアを編集します。

HTML
<!-- BEGIN top -->

<!-- BEGIN top_info_list --> この部分に注目します!
<!-- END top_info_list -->

<!-- END top -->

例えば次のように独自タグを組み合わせることで

{top_info_year}年{top_info_month}月{top_info_day}日({{top_info_week_ja})

2023年01月30日(月)と表示できます。

応用編:お知らせページの日付フォーマットを変えたい場合は

上記の方法は、あくまでトップページのお知らせエリアでの変更方法です。

お知らせページの日付フォーマットを変更するには、また別の独自タグを指定する必要があります。ここまでできた貴方にはもう簡単ですね!

 

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

2023-01-07 12:00:00

お知らせページの編集について

ただいま準備中です

2023-01-06 12:00:00

メニューのページネーション(ページャー)を非表示にするには

グーペの投稿型ページ(お知らせ・メニュー・フォトアルバム・日記)には、自動的にページネーションが設定される仕組みになっています。

ページネーションとは、ページ分割のこと、またはページ送りをするためのページ番号(ページャー)のことです。

投稿型のページでは、1ページにすべての内容を掲載してしまうとどんどんページが下に長くなってしまうので、5投稿ごとにページが自動で区切られるようになっています。

(そしてこの5投稿ごと、という区切りは、現在のところ変更する術はありません

メニュー機能にはページネーションが無い?!

ただし、メニュー機能だけは例外で、すべての投稿が1ページにすべて掲載される仕組みになっています。(執筆時点での仕様です)

ですから、メニューページのページ番号は、常に「1」が表示されています。

でもこの数字、ページネーションが無いなら不要とも考えられますよね。実際、これは何のために付いているんですか?という質問をいただくこともあります。

紛らわしいものは無い方がいいと思うのですが、メニューページだけページ番号を無くすことはできるのでしょうか?

はい、できます!

メニューページだけ、ページ番号を消す(非表示にする)には

ページ送りのためのページ番号は、{pager}という独自タグで制御されていますが、この独自タグを消してしまうと他のページのページ番号も消えてしまいますので、決して消さないように注意してください。

メニューページのみページ番号を非表示にするには、CSSの中に以下を追記します。

CSS
body#menu .pager{display: none;}

この1行を書くだけで、メニューページのみ、ページ番号を非表示にすることができるはずです。お試しあれ!

 

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

1 2 3 4

このページのトップへ
sample