モバイルブラウザのモバイルバックボタンナビゲーションに関するトピックがあり、解決策が見つからなかったのですが、見落としたのかもしれません 
私はコーダーではなく、Discourse についても危険なほど熟達していませんが、ChatGPT を使って、この画像にある、私の愛犬と一緒に写っている 青色 の動作するバックボタンを作成しました。
特定のページで非表示にしたいのですが、要素を非表示にする方法がまだわかりません。誰か知っている人がいれば、指示に追加します。
Discourse にフローティングバックボタンを追加する方法（モバイルユーザー向け）
このガイドは、Discourse フォーラムにモバイルデバイス用のフローティング「戻る」ボタンを追加するのに役立ちます。このボタンはモバイルユーザーにのみ表示され、組み込みの戻るボタンがないアプリやブラウザのナビゲーションを改善します。
ステップ 1: 新しいテーマコンポーネントを作成する
- 管理者としてログインする:
- Discourse フォーラムにアクセスし、管理者アカウントでログインします。
- テーマカスタマイズにアクセスする:
Admin > Customize > Themesに移動します。
- テーマコンポーネントを作成する:
- Components をクリックします。
- Install > Create New をクリックします。
- コンポーネントに「Mobile Back Button」という名前を付け、Create をクリックします。
ステップ 2: バックボタンのコードを追加する
- テーマコンポーネントを編集する:
- 新しく作成したテーマコンポーネントをクリックします。
- CSS/HTML セクションに移動します。
- バックボタン用の JavaScript を追加する:
- Mobile タブに切り替えます。
<head>セクションをクリックします。- 次のコードを貼り付けます。
html
Copy code
<script type="text/discourse-plugin" version="0.8">
function addMobileBackButton() {
const isMobileView = api.container.lookup('site:main').mobileView;
if (isMobileView) {
const existingButton = document.querySelector('.floating-back-button');
if (!existingButton) {
const backButton = document.createElement('button');
backButton.className = 'floating-back-button';
backButton.innerHTML = '←'; // 左矢印の Unicode
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// 初期ページ読み込み時にボタンを追加する
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// 後続のページ遷移時に再確認する
api.onPageChange(addMobileBackButton);
</script>
ステップ 3: スタイリング用の CSS を追加する
- バックボタンのスタイルを追加する:
- Mobile タブで、CSS セクションをクリックします。
- 次の CSS を貼り付けます。
css
Copy code
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* 色をカスタマイズする */
color: #fff;
border: none;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
}
ステップ 4: テーマコンポーネントを適用する
- テーマに戻る:
Admin > Customize > Themesに移動します。
- アクティブなテーマを編集する:
- アクティブなテーマをクリックします。
- Theme Components の下にあるドロップダウンから「Mobile Back Button」コンポーネントを追加します。
- Add をクリックし、次に Save をクリックします。
ステップ 5: 変更をテストする
- モバイルでフォーラムを開く:
- モバイルブラウザを使用するか、開発者ツールを使用してモバイルビューをシミュレートします。
- バックボタンを確認する:
- ボタンは画面の左下隅に表示されるはずです。
- ボタンをクリックすると、ブラウザの履歴に戻るはずです。
注意事項:
- モバイルのみ: コードと CSS は Mobile タブにあるため、ボタンはモバイルデバイスにのみ表示されます。
- カスタマイズ:
- フォーラムのデザインに合わせて、CSS でボタンの位置、サイズ、色を調整できます。
- 機能:
- バックボタンは
window.history.back()を使用します。前のページがない場合、どこにも移動しません。
- バックボタンは