WordPressでサイドバーのサイドを変更する方法（4つの方法）

WordPressテーマのカスタマイズを始めた頃、サイドバーを右から左に移動させるのは簡単なはずだと思っていました。

しかし、多くのユーザーがこの基本的なレイアウト変更に苦労していることがわかりました。なぜなら、テーマごとに処理方法が異なり、オプションが分かりにくいテーマもあるからです。

WPBeginner でユーザーを支援してきた経験から、サイドバーの位置が訪問者のコンテンツとのインタラクションに大きく影響することを知りました。

デザインのベストプラクティスに従っている場合でも、視聴者の読書習慣に適応している場合でも、サイドバーの位置を変更する方法を知っていることは貴重なスキルです。

このガイドでは、WordPressでサイドバーの位置を変更する最も簡単な方法を紹介します。

WordPressテーマのサイドバーの位置を変更するにはどうすればよいですか？

WordPressテーマのサイドバーの位置を変更するには、まずクラシックテーマを使用しているかブロックテーマを使用しているかを特定する必要があります。使用する方法は、テーマの種類によって完全に異なります。

クラシックテーマは通常、この変更のためにテーマカスタムizerまたはカスタムCSSを使用します。ブロックテーマは、より新しいフルサイトエディターを使用します。

どちらを持っているかをすばやく確認する方法は次のとおりです。ダッシュボードで、外観に移動します。「エディター」メニューが表示される場合は、ブロックテーマを使用しています。「カスタマイズ」と「ウィジェット」が表示される場合は、クラシックテーマを使用しています。

サイドバーの移動は、さまざまな理由で役立ちます。たとえば、右から左の言語を使用するウェブサイトでは、サイドバーを左側に配置すると、より自然に感じられます。

サイトのユーザーエクスペリエンスを向上させたい場合もあります。eコマースサイトで訪問者が特定のパターンでページをスキャンしていることに気づいた場合、サイドバーを調整することで、買い物がより直感的に感じられるようになります。

これらすべてを踏まえて、WordPressブログまたはウェブサイトでサイドバーの位置を変更する方法を見てみましょう。

4つの簡単な方法があります。以下のクイックリンクを使用して、好みの方法にスキップできます。

• 方法1：WordPressカスタマイザーでサイドバーの位置を変更する方法（クラシックテーマ）
• Method 2: How to Change the Sidebar Side With Code (Classic Themes)
• 方法3：FSE（ブロックテーマ）でサイドバーの位置を変更する方法
• 方法4：CSS Heroでサイドバーの位置を変更する方法（すべてのテーマ）
• 代替案：WordPressページビルダープラグインでカスタムサイドバーを作成する
• WordPressサイドバーに関するよくある質問

方法1：WordPressカスタマイザーでサイドバーの位置を変更する方法（クラシックテーマ）

この方法はクラシックテーマを使用しているユーザー向けです。つまり、WordPressカスタム機能を使用してサイトデザインをスタイル設定でき、WordPress管理画面の「外観」メニューにある「ウィジェット」セクションは引き続き存在します。

WordPressダッシュボードからテーマカスタマイザーが消えている場合、ブロックテーマを使用している可能性が高いため、3番目の方法にスキップしてください。

場合によっては、従来のテーマ開発者が選択できる複数のサイドバー配置を提供しています。WordPressカスタマイザーを使用して、そこで好みのサイドバー位置を選択することで、これが真実であることを確認できます。

まず、外観 » カスタマイズに移動します。例としてHestiaテーマを使用しています。

ここで、左側の列から外観設定 » 一般設定ページに移動します。

ご覧のとおり、Hestiaには3つのサイドバーテンプレートがあります。サイドバーなし、左サイドバーあり、右サイドバーありです。これにより、サイドバーの位置をワンクリックで変更できます。ここでは、サイドバーの位置を左に変更しました。

この設定は、ウェブサイト全体のデフォルトのサイドバーレイアウトを制御します。ただし、Hestiaではブログのサイドバーの位置を個別にカスタマイズすることもできるため、ブログ投稿または投稿ページにのみ影響します。

変更が完了したら、通常の操作で利用可能なウィジェットをサイドバーに追加できます。詳細については、WordPress でウィジェットを追加して使用する方法に関するガイドをご覧ください。

次に、「公開」をクリックするだけです。

これは便利な機能ですが、すべてテーマ次第です。カスタム機能でサイドバーを変更できるかどうか、テーマのドキュメントを確認することを強くお勧めします。

そうでない場合は、次の方法に進んでください。

方法2：コードでサイドバーの配置を変更する方法（クラシックテーマ）

クラシックテーマで複数のサイドバーを選択できない場合は、CSSコードを使用してサイドバーの位置を手動で変更できます。

ほとんどのクラシックテーマでは、floatというCSSプロパティを使用して、サイドバーとコンテンツエリアを隣り合わせに配置します。目標は、両方の要素のCSSを見つけて、floatの方向を逆にすることです。

この方法を試す際は、ステージングサイトや子テーマの使用をお勧めします。これにより、エラーが発生した場合でも、親テーマやライブサイトに影響を与えることはありません。

さらに、子テーマを使用すると、テーマのアップデートがあった際に変更が上書きされるのを防ぐことができます。

ステップ 1: インスペクトツールを使用してサイドバーのCSSクラスを特定する

まず、ウェブサイトを開きます。次に、サイドバーの領域の周りにカーソルを合わせ、ブラウザの検証ツールを使用します。

Chromeを使用している場合は、その領域を右クリックして「検証」を選択するだけです。

詳細については、Inspect Elementの基本ガイドをご覧ください。

次に、ページ右上のHTMLとCSSの行の上にカーソルを合わせます。

サイドバー全体がハイライトされているのが見えたら、その行をクリックします。私たちの場合、それは<aside id=”secondary” class=”sidebar widget-area”>でした。

ページ下部にある「スタイル」タブには、サイドバーに関連するすべてのCSSプロパティが含まれています。

この場合、サイドバーエリアのCSSクラスは.sidebarであることがわかりました。サイドバーの位置を決定するルールもあり、この場合は左側です。

margin-leftルールをチェック解除するとサイドバーが反対側に移動するため、これはわかっています。

こちらが当社のテーマのサイドバー領域のコードです：

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

後で必要になるため、このコードをテキストエディタにコピーして貼り付けることができます。または、このタブを開いたままにしておいても構いません。

サイドバー領域のCSSクラスがわかったので、すべての投稿や投稿コンテンツを表示するメインコンテンツ領域のクラスも見つける必要があります。

HTMLとCSSの行の上にカーソルを合わせて、どの行がメインコンテンツ領域をハイライトするかを確認できます。ここでは、それが <div id=”primary” class=”content-area”> の行であることがわかりました。

前述のように、下にスクロールして「スタイル」タブを表示すると、その領域のCSSクラスを確認できます。この場合、それは.content-areaでした。コードは次のとおりです。

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

再度、コンテンツ領域のCSSコードをテキストエディタにコピー＆ペーストするか、次のステップのためにこのタブを開いたままにしておくことができます。

サイドバーとコンテンツ領域のCSSクラスがわかったので、style.cssテーマファイルを編集してサイドバーの位置を変更できます。

ステップ2：テーマのstyle.cssファイルをカスタマイズする

通常、ウェブホスティングプロバイダーのファイルマネージャーまたはFTPクライアントを使用してstyle.cssを直接編集する必要があります。ただし、style.cssファイルはかなり長くなる可能性があり、間違いを犯すとウェブサイト全体のデザインに影響を与え、ユーザーエクスペリエンスを損なう可能性があります。

そのため、テーマファイルを直接編集せずにカスタムCSSを追加する最も安全で簡単な方法として、WPCodeの使用をお勧めします。

コードの変更によって意図しないエラーが発生した場合でも、ワンクリックで無効にでき、ウェブサイトは元に戻ります。

詳細については、WPCode レビューをご覧ください。

まず、WPCodeをWordPressにインストールしてください。ステップバイステップの説明が必要な場合は、WordPressプラグインのインストール方法に関するガイドをお読みください。

完了したら、Code Snippets » + Add Snippetに移動します。次に、「Add Your Custom Code (New Snippet)」を選択し、「+ Add Custom Snippet」ボタンをクリックします。

次に、カスタムコードのタイトルを入力します。「サイドバーの位置を変更」のようなものでも構いません。

次に、コードタイプを「CSSスニペット」に変更します。

完了したら、サイドバーとコンテンツ領域のCSSコードスニペットをコードプレビューボックスに挿入する必要があります。

これらを識別しやすくするために、空のスペースで区切ることができます。例：

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

さて、このCSSコードをカスタマイズしましょう。サイドバーとメインコンテンツ領域の配置を定義するCSSプロパティを変更します。

この例では、これらのCSSクラスにはfloat、margin、padding、widthプロパティがありますが、テーマによって異なる場合があります。

サイドバー領域では、floatとmarginプロパティのleftをrightに変更しました。これは、サイドバー領域が元の配置とは反対の方向に配置されることを意味します。

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

その部分が終わったら、コンテンツエリアの配置を変更しましょう。私たちにとってうまくいったのは、float: leftをfloat: rightに、margin-rightをmargin-leftに変更したことです。これにより、WordPressはコンテンツエリアを右に移動します。

さらに、position: relativeとright: 100%のプロパティを追加しました。これにより、コンテンツ領域が右側にそれほど遠くに行かないようになります。

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

再度、私たちのテーマで機能するものが、あなたのテーマで機能するとは限りません。なぜなら、各テーマにはCSSクラスの異なる名前があり、異なるプロパティを使用しているからです。あなたのテーマに最適なものを判断するために、この完全なCSSリファレンスを読むことをお勧めします。

さらに、コード内の幅とマージンのパーセンテージを自由に調整して、サイドバーの配置を調整してください。

コードスニペットを変更したら、下にスクロールして「挿入」セクションに移動します。「挿入方法」が「自動挿入」になっていることを確認してください。

場所については、「サイト全体フッター」を選択してください。これにより、style.cssファイル内の既存のコードを上書きできます。

右上のトグルをクリックしてコードを「アクティブ」にし、「スニペットを保存」をクリックします。その後、ウェブサイトをプレビューして結果を確認してください。

上記のスクリーンショットを見ると、デモサイトのサイドバーが右側にあったことがわかります。

style.css でコードを編集した後、テーマには左サイドバーが表示されるようになりました。

サイドバーの位置を変更したので、サイドバーのコンテンツの変更や追加を開始できます。いくつかアイデアをご紹介します。

• WordPressサイドバーウィジェットに画像を追加する方法
• WordPressでウィジェットタイトルにリンクを追加する方法
• WordPressウィジェットにカスタムスタイルを追加する方法
• WordPressで不要なウィジェットを無効にする方法
• WordPress サイドバーのアーカイブ表示をカスタマイズする方法

方法3：FSE（ブロックテーマ）でサイドバーの位置を変更する方法

ブロックテーマを使用している場合、WordPress管理画面にウィジェットセクションは表示されません。そのメニューが存在しない場合、サイドバーの配置を変更する方法について疑問に思っているかもしれません。

幸いなことに、このプロセスは従来のテーマの場合と比較してはるかに簡単です。これは、ブロックテーマがGutenbergブロックを使用しており、フルサイトエディター（FSE）を使用して要素をドラッグアンドドロップするだけで位置を変更できるためです。

第二に、ブロックテーマには通常、サイドバーを含むテンプレートがあります。それを変更するだけで、そのテンプレートを使用しているすべてのページに影響します。テンプレートの名前を確認するには、テーマのドキュメントを確認してください。

デモンストレーションには、サイドバーテンプレートを持つページがあるTwenty Twenty-Fourテーマを使用します。

まず、ダッシュボードで外観 » エディターに移動します。

ここで、ブロックテーマをカスタマイズするためのいくつかのメニューが表示されます。

「テンプレート」を選択します。

次に、編集したいサイドバーを含むテンプレートを見つけます。

Twenty Twenty-Fourでは、「サイドバー付きページ」と「サイドバー付きシングル」です。テーマによっては、テンプレート名にサイドバーが含まれていることが明記されていない場合がありますので、再度テーマのドキュメントを確認してください。

そのサイドバーテンプレートを選択してください。

通常、ブロックテーマでは、サイドバーとメインコンテンツエリアがカラムブロックに含まれています。これにより、すべてが整然と整理され、互いにきれいに分離されます。

サイドバーの位置を変更するには、サイドバーを構成する列を選択して移動するだけで済みます。

これを行う最も簡単な方法は、ページ左側にある「リスト表示」機能をクリックすることです。

次に、「カラム」ブロックをクリックして展開し、サイドバー要素が含まれるカラムが見つかるまでコンテンツの上にカーソルを合わせます。

私たちのケースでは、Twenty Twenty-Fourテーマには「Sidebar」という名前のテンプレートパーツがあるため、特定が容易でした。とはいえ、一部のテーマでは、サイドバーを構成する名前のないブロックのグループが含まれているだけの場合があります。

サイドバーのブロック全体に四角いハイライトとツールバーが表示されたら、正しい列を選択したことになります。

次に、サイドバー列のツールバーに、列の配置を変更するために使用できる矢印が表示されます。

それをクリックし、Columnsブロックのデザインによっては、適切なフィット感が見つかるまで位置を調整する必要がある場合があります。

テーマ開発者が、メインコンテンツエリアとサイドバーエリアの間にスペースを作成するために、空の列を追加した可能性があります。

削除したい場合は、以前と同様にリスト表示機能を使って適切な空の列を見つけてください。次に、ブロックツールバーで3点メニューをクリックし、「削除」を選択します。

または、サイドバー領域とコンテンツ領域の間にもっとスペースを設けたい場合は、ブロック設定タブを開き、「スタイル」セクションに切り替えることができます。

次に、「寸法」セクションで、パディング、マージン、またはブロックの間隔のスライダーをドラッグできます。

完了したら、「保存」をクリックします。

次に、モバイルで編集したテンプレートを使用しているすべてのページをプレビューして、どのように見えるかを確認できます。

テンプレートを編集したのに、ページや投稿でそれが使用されていない場合はどうなりますか？

ブロックエディターでページまたは投稿を開くだけです。次に、投稿設定パネルで、「テンプレート」フィールドのリンクをクリックし、「テンプレートを切り替える」を選択します。

次に、サイドバーを使用しているテンプレートを選択します。

その後、ページまたは投稿を更新できます。

フルサイトエディターまたはブロックエディターを使用したヒントやコツについては、これらのガイドをご覧ください。

• WordPressウェブサイトの編集方法（究極ガイド）
• WordPressウェブサイトの色のカスタマイズ方法

方法4：CSS Heroでサイドバーの位置を変更する方法（すべてのテーマ）

次の方法では、CSS Heroという有料プラグインを使用します。これは、ビジュアルCSS編集に最適なWordPressプラグインです。このプラグインを使用すると、コードに触れることなくテーマのCSSをカスタマイズするのが簡単になり、初心者にも最適です。

この方法もすべてのテーマで機能するため、以前の方法が少し制限的だと感じた場合は、代わりにこの方法を使用できます。ただし、無料プラグインバージョンはないため、有料プランを購入する必要があります。

プラグインとその価格の詳細については、CSS Hero のレビューをご覧ください。

まず、プラグインをコンピューターにダウンロードし、WordPressウェブサイトにインストールします。手順については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

インストールが完了すると、ツールバーに「CSS Hero」メニューが表示されます。それをクリックすると、ビジュアルCSSエディタが開きます。

すべてのWordPressテーマが同じように機能するわけではないため、サイドバーの配置を変更するためにCSS Heroを使用する方法は異なります。そのため、プラットフォームを色々試して、ご自身に合った方法を見つけることをお勧めします。

とはいえ、サイドバーの位置を右から左に変更するためにカスタマイズした設定をご紹介します。

まず、ページ上のサイドバー領域をクリックします。サイドバー内のすべての要素がグループとして選択され、周囲に長方形のハイライトが表示されたら、正しいものをクリックしたことがわかります。

ページの左側には、要素をカスタマイズするためのメニューが表示されます。

私たちの経験では、サイドバーの配置を変更できる設定は、「位置」、「測定値」、「スペーシング」です。

位置は、サイドバーがページの他の要素に対してどのように配置されるかを決定します。ここでは、「絶対」を選択すると、サイドバーをどこに配置するかについてある程度の自由が得られます。

ここから、上、右、下、左のピクセルを変更してサイドバーを配置できます。

サイドバーとメインコンテンツエリアが同じ側にあることがわかります。

これを修正するには、メインコンテンツエリアを構成するコンテナにカーソルを合わせてクリックします。

次に、左側のパネルで、適切なフィット感が見つかるまで「位置」設定を調整します。

私たちが行ったのは、位置を「相対」のままにして、右のピクセルを調整したことです。

技術的には、これだけで十分です。しかし、サイドバーのサイズを調整したい場合は、サイドバーエリアを選択し、「測定値」設定に移動してください。

ここで、サイドバーの幅と高さを変更できます。

サイドバーエリアとメインコンテンツエリアの間のスペースを変更したい場合は、「Spacings」に移動してください。

ここで、要素のパディングとマージンを調整するためのスライダーが表示されます。

再度、このプラグインの設定を探索して、サイドバーの位置を好みに合わせて変更することをお勧めします。

完了したら、ページの右下にある「保存」ボタンをクリックできます。

代替案：WordPressページビルダープラグインでカスタムサイドバーを作成する

ここまで、ウェブサイト全体のサイドバーの場所を変更する方法を検討してきました。しかし、特定のページや投稿タイプに特定のサイドバーのみが必要な場合はどうでしょうか？結局のところ、すべてのページに同じサイドバーコンテンツが必要なわけではありません。

例えば、ホームページには、ソーシャルメディアアイコンと行動喚起を備えた、より一般的なサイドバーが適しているかもしれません。しかし、商品ページには、関連商品や顧客レビューを紹介するサイドバーの方が適しているかもしれません。

この場合、WordPressテーマ用のカスタムサイドバーを作成することを検討してください。カスタムサイドバーを使用すると、次のことができます。

• 特定のサイドバーを異なるページまたは投稿タイプに割り当てます。これにより、各ページの特定のニーズに合わせてサイドバーのコンテンツを調整できます。
• よりダイナミックで魅力的なユーザーエクスペリエンスを作成します。サイドバーに関連性の高いコンテンツを提供することで、訪問者を惹きつけ、ウェブサイトをさらに探索してもらうことができます。

ここでWordPressのページビルダープラグインが役立ちます。これらのプラグインは、ドラッグ＆ドロップ機能と豊富なテンプレートライブラリを提供し、カスタムサイドバーの作成を容易にします。

人気があり初心者にも使いやすいページおよびテーマビルダープラグインであるSeedProdの使用をお勧めします。SeedProdを使用すると、使いやすいインターフェースでカスタムページやテーマを簡単にデザインできます。

詳細については、これらの記事をご覧ください。

• カテゴリごとにカスタムヘッダー、フッター、またはサイドバーを追加する方法
• WordPress で投稿やページごとに異なるサイドバーを表示する方法

または、Thrive Architectページビルダーを使用することもできます。このツールには、テーマキットやランディングページテンプレートも豊富に用意されており、固定フローティングサイドバーウィジェットを作成する機能も提供しています。これは、ユーザーがページをスクロールしてもサイドバーを固定しておくのに役立ちます。

WordPressサイドバーに関するよくある質問

ウェブサイトのサイドバーについて、読者からよく寄せられる質問をいくつかご紹介します。

WordPressでサイドバーの位置を変更するにはどうすればよいですか？

使用する方法は、お使いのテーマによって異なります。クラシックテーマの場合は、テーマカスタマイザーで位置を変更できるか、カスタムCSSを追加することで変更できます。モダンなブロックテーマの場合は、フルサイトエディターでサイドバーカラムをドラッグアンドドロップして反対側に移動するだけで済みます。

WordPressでサイドバーをカスタマイズする方法は？

ウィジェットまたはブロックを使用してサイドバーのコンテンツをカスタマイズできます。クラシックテーマを使用している場合は、**外観 » ウィジェット**に移動して項目を追加または削除してください。

ブロックテーマを使用している場合は、**外観 » エディター**に移動し、WordPressブロックを追加または削除してサイドバーテンプレートパーツを直接編集します。

WordPressで左と右のサイドバーを追加するにはどうすればよいですか？

左と右の両方のサイドバーを追加するには、3カラムレイアウトをサポートするテーマが必要です。

お使いのテーマにこのオプションが組み込まれていない場合は、WordPressのページビルダープラグイン（SeedProdやThrive Architectなど）を使用して、カスタム3カラムレイアウトを作成するのが最も簡単な方法です。

WordPressでサイドバーの幅を変更するにはどうすればよいですか？

サイドバーの幅を変更する最も確実な方法は、カスタムCSSを使用することです。ブラウザのインスペクトツールを使用してサイドバーのCSSセレクターを見つけ、.sidebar { width: 30%; }のような新しい幅のルールを追加できます。

または、CSS Heroのようなプラグインを使用すると、コードなしで視覚的に幅を調整できます。

このWordPressチュートリアルで、WordPressでサイドバーの位置を変更する方法を学べたことを願っています。また、WordPressでフルスクリーンレスポンシブメニューを追加する方法に関する記事や、WordPressサイドバーのトリックで最大限の結果を得るためのリストも参照することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。