スマホ表示で [PCモード] ボタンをタップしたい場合、ページの一番下までスクロールしないといけません。
記事の長さにもよりますが結構面倒です。
これに対処する方法を解説します。
まず初めに思いつくのは下記のようなページ内リンクをページの上部に置く事です。
<a href="#blog-change-pc">[PCモード] ボタンへ移動</a>
しかしスマホのブログ設定ではページ内リンクを禁止していて簡単に置く事ができません。
そこでトップページの場合と個別記事の場合の2パターンについて上のリンクを置く方法を解説します。
【トップページ】
トップページの場合はURLが固定ですので、「{トップページのURL}#blog-change-pc」というリンクを置きます。
【個別記事】
個別記事はURLが固定ではありませんので工夫が必要です。
ページ内リンクを置ける場所は記事だけなので下記を記事の一番上に置きます。
※ [HTMLタグ編集] にしてから記入して下さい。記入後は通常に戻して記事作成を行って下さい。
<p class="cax-pc-mode-link"><a href="#blog-change-pc">[PCモード] ボタンへ移動</a></p>
このままではPC表示、PCモードでも表示されるのでCSSで非表示にします。
『 [ブログ設定] > [PC] > [カスタマイズ] > [CSS] 』を開き一番下に下記の設定を追加します。
/* PCモードへのリンクを非表示 */
.cax-pc-mode-link { display: none; }
全ての記事にこの設定を入れるのは面倒ですが現状この方法しか無さそうです。
他に良い方法がありましたらコメント下さい。
記事の長さにもよりますが結構面倒です。
これに対処する方法を解説します。
まず初めに思いつくのは下記のようなページ内リンクをページの上部に置く事です。
<a href="#blog-change-pc">[PCモード] ボタンへ移動</a>
しかしスマホのブログ設定ではページ内リンクを禁止していて簡単に置く事ができません。
そこでトップページの場合と個別記事の場合の2パターンについて上のリンクを置く方法を解説します。
【トップページ】
トップページの場合はURLが固定ですので、「{トップページのURL}#blog-change-pc」というリンクを置きます。
- [ブログ設定] > [スマートフォン] > [レイアウト]
- [リンク集] をブログタイトルの下に追加します。
- [設定] を開き下記のように設定します。
ラベル 「表示する」のチェックを外す。 タイトル PCモードボタンへ移動 URL {トップページのURL}#blog-change-pc
【個別記事】
個別記事はURLが固定ではありませんので工夫が必要です。
ページ内リンクを置ける場所は記事だけなので下記を記事の一番上に置きます。
※ [HTMLタグ編集] にしてから記入して下さい。記入後は通常に戻して記事作成を行って下さい。
<p class="cax-pc-mode-link"><a href="#blog-change-pc">[PCモード] ボタンへ移動</a></p>
このままではPC表示、PCモードでも表示されるのでCSSで非表示にします。
『 [ブログ設定] > [PC] > [カスタマイズ] > [CSS] 』を開き一番下に下記の設定を追加します。
/* PCモードへのリンクを非表示 */
.cax-pc-mode-link { display: none; }
全ての記事にこの設定を入れるのは面倒ですが現状この方法しか無さそうです。
他に良い方法がありましたらコメント下さい。