ナビゲーションバー設置方法
他のWebサイトと行き来できるように、次の5つのリンクを設置する必要があります。
| リンクの文字（変更可） | URL |
|---|---|
| カプ好きWebリング | https://cp.yorozu-webring.link |
| 前へ | https://cp.yorozu-webring.link/websites/previous |
| ランダム | https://cp.yorozu-webring.link/websites/random |
| リスト | https://cp.yorozu-webring.link/websites |
| 次へ | https://cp.yorozu-webring.link/websites/next |
詳しい設置方法
※ここにないサイト作成ツールでナビゲーションバーの設置方法が分からない場合は、お問い合わせください。
HTMLタグ手打ち
トップページに次のタグを入力する。バナーあり
<!-- カプ好きWebリングナビゲーションバーここから -->
<div style="text-align: center;">
<div>
<a href="https://cp.yorozu-webring.link">
<img src="https://cp.yorozu-webring.link/api/websites/banner.png" alt="カプ好きWebリング" width="200" height="40" />
</a>
</div>
<div>
[<a href="https://cp.yorozu-webring.link/websites/previous">前へ</a>]
[<a href="https://cp.yorozu-webring.link/websites/random">ランダム</a>]
[<a href="https://cp.yorozu-webring.link/websites">リスト</a>]
[<a href="https://cp.yorozu-webring.link/websites/next">次へ</a>]
</div>
</div>
<!-- カプ好きWebリングナビゲーションバーここまで -->このように表示されます（登録完了するまではこの灰色のバナーです。登録状況把握にご利用ください。）
バナーなし
<!-- カプ好きWebリングナビゲーションバーここから -->
<div>
<a href="https://cp.yorozu-webring.link">カプ好きWebリング</a>(<a href="https://cp.yorozu-webring.link/websites/previous">前へ</a> / <a href="https://cp.yorozu-webring.link/websites/random">ランダム</a> / <a href="https://cp.yorozu-webring.link/websites">リスト</a> / <a href="https://cp.yorozu-webring.link/websites/next">次へ</a>)
</div>
<!-- カプ好きWebリングナビゲーションバーここまで -->このように表示されます
サイトを公開し、ナビゲーションバーが正しく設置できたかを確認する。
- 「カプ好きWebリング」のリンクをクリックすると、このサイトのトップページに移動する
- 「前」「ランダム」「リスト」「次」それぞれをクリックしたとき、下記のメッセージが表示される。
ここまで終わったら、フォームから参加申請をしてください。
wpXブログ
固定ページなど、ホームページにあたる画面の編集画面で、「ブロック」の「ウィジェット：カスタムHTML」を追加する
次のタグを貼り付ける。
<!-- カプ好きWebリングナビゲーションバーここから -->
<div>
<a href="https://cp.yorozu-webring.link">カプ好きWebリング</a>(<a href="https://cp.yorozu-webring.link/websites/previous">前へ</a> / <a href="https://cp.yorozu-webring.link/websites/random">ランダム</a> / <a href="https://cp.yorozu-webring.link/websites">リスト</a> / <a href="https://cp.yorozu-webring.link/websites/next">次へ</a>)
</div>
<!-- カプ好きWebリングナビゲーションバーここまで -->サイトを公開し、ナビゲーションバーが正しく設置できたかを確認する。
- 「カプ好きWebリング」のリンクをクリックすると、このサイトのトップページに移動する
- 「前」「ランダム」「リスト」「次」それぞれをクリックしたとき、下記のメッセージが表示される。
ここまで終わったら、フォームから参加申請をしてください。
WordPress
固定ページなど、ホームページにあたる画面の編集画面で、「ブロック」の「ウィジェット：カスタムHTML」を追加する
次のタグを貼り付ける。
<!-- カプ好きWebリングナビゲーションバーここから -->
<div>
<a href="https://cp.yorozu-webring.link">カプ好きWebリング</a>(<a href="https://cp.yorozu-webring.link/websites/previous">前へ</a> / <a href="https://cp.yorozu-webring.link/websites/random">ランダム</a> / <a href="https://cp.yorozu-webring.link/websites">リスト</a> / <a href="https://cp.yorozu-webring.link/websites/next">次へ</a>)
</div>
<!-- カプ好きWebリングナビゲーションバーここまで -->サイトを公開し、ナビゲーションバーが正しく設置できたかを確認する。
- 「カプ好きWebリング」のリンクをクリックすると、このサイトのトップページに移動する
- 「前」「ランダム」「リスト」「次」それぞれをクリックしたとき、下記のメッセージが表示される。
ここまで終わったら、フォームから参加申請をしてください。
WordPress.com
固定ページなど、ホームページにあたる画面の編集画面で、「ブロック」の「ウィジェット：カスタムHTML」を追加する
次のタグを貼り付ける。
<!-- カプ好きWebリングナビゲーションバーここから -->
<div>
<a href="https://cp.yorozu-webring.link">カプ好きWebリング</a>(<a href="https://cp.yorozu-webring.link/websites/previous">前へ</a> / <a href="https://cp.yorozu-webring.link/websites/random">ランダム</a> / <a href="https://cp.yorozu-webring.link/websites">リスト</a> / <a href="https://cp.yorozu-webring.link/websites/next">次へ</a>)
</div>
<!-- カプ好きWebリングナビゲーションバーここまで -->サイトを公開し、ナビゲーションバーが正しく設置できたかを確認する。
- 「カプ好きWebリング」のリンクをクリックすると、このサイトのトップページに移動する
- 「前」「ランダム」「リスト」「次」それぞれをクリックしたとき、下記のメッセージが表示される。
ここまで終わったら、フォームから参加申請をしてください。
Wix
テキストパーツを追加し、次の文言を入力する。
カプ好きWebリング(前へ / ランダム / リスト / 次へ)「カプ好きWebリング」「前」「ランダム」「リスト」「次」のそれぞれの文字にリンクを貼る。この時次のように設定を行う。
- リンク先を選択：「ウェブアドレス」にする
- ウェブアドレス（URL）：URLを貼る
リンクの文字（変更可） URL カプ好きWebリング https://cp.yorozu-webring.link 前へ https://cp.yorozu-webring.link/websites/previous ランダム https://cp.yorozu-webring.link/websites/random リスト https://cp.yorozu-webring.link/websites 次へ https://cp.yorozu-webring.link/websites/next - リンク先ページの表示方法：「同じタブ」にする
- 高度なSEO設定：「noopener」「noreferrer」のチェックを外す（画像の状態にする）
サイトを公開し、ナビゲーションバーが正しく設置できたかを確認する。
- 「カプ好きWebリング」のリンクをクリックすると、このサイトのトップページに移動する
- 「前」「ランダム」「リスト」「次」それぞれをクリックしたとき、下記のメッセージが表示される。
ここまで終わったら、フォームから参加申請をしてください。
Jimdo
文章パーツを追加し、右端の「HTMLを編集」をクリックする。
次のタグを貼り付ける。
<!-- カプ好きWebリングナビゲーションバーここから -->
<div>
<a href="https://cp.yorozu-webring.link">カプ好きWebリング</a>(<a href="https://cp.yorozu-webring.link/websites/previous">前へ</a> / <a href="https://cp.yorozu-webring.link/websites/random">ランダム</a> / <a href="https://cp.yorozu-webring.link/websites">リスト</a> / <a href="https://cp.yorozu-webring.link/websites/next">次へ</a>)
</div>
<!-- カプ好きWebリングナビゲーションバーここまで -->サイトを公開し、ナビゲーションバーが正しく設置できたかを確認する。
- 「カプ好きWebリング」のリンクをクリックすると、このサイトのトップページに移動する
- 「前」「ランダム」「リスト」「次」それぞれをクリックしたとき、下記のメッセージが表示される。
ここまで終わったら、フォームから参加申請をしてください。
Tumblr
説明欄に次のタグを貼り付ける。
<!-- カプ好きWebリングナビゲーションバーここから -->
<div>
<a href="https://cp.yorozu-webring.link">カプ好きWebリング</a>(<a href="https://cp.yorozu-webring.link/websites/previous">前へ</a> / <a href="https://cp.yorozu-webring.link/websites/random">ランダム</a> / <a href="https://cp.yorozu-webring.link/websites">リスト</a> / <a href="https://cp.yorozu-webring.link/websites/next">次へ</a>)
</div>
<!-- カプ好きWebリングナビゲーションバーここまで -->サイトを公開し、ナビゲーションバーが正しく設置できたかを確認する。
- 「カプ好きWebリング」のリンクをクリックすると、このサイトのトップページに移動する
- 「前」「ランダム」「リスト」「次」それぞれをクリックしたとき、下記のメッセージが表示される。
ここまで終わったら、フォームから参加申請をしてください。
STUDIO
リッチテキストパーツを追加し、次の文言を入力する。
カプ好きWebリング(前へ / ランダム / リスト / 次へ)「カプ好きWebリング」「前」「ランダム」「リスト」「次」のそれぞれの文字にリンクを貼る。この時次のように設定を行う。
- リンク：それぞれのURLを貼る
リンクの文字（変更可） URL カプ好きWebリング https://cp.yorozu-webring.link 前へ https://cp.yorozu-webring.link/websites/previous ランダム https://cp.yorozu-webring.link/websites/random リスト https://cp.yorozu-webring.link/websites 次へ https://cp.yorozu-webring.link/websites/next - 「新規タブでリンクを開く」のチェックを外す（画像の状態にする）
サイトを公開し、ナビゲーションバーが正しく設置できたかを確認する。
- 「カプ好きWebリング」のリンクをクリックすると、このサイトのトップページに移動する
- 「前」「ランダム」「リスト」「次」それぞれをクリックしたとき、下記のメッセージが表示される。
ここまで終わったら、フォームから参加申請をしてください。
戻る