絞れば、出てくる、アイディア。

Elementor無料版でサイドバーを作成する方法

Elementorの無料版でも、簡単にサイドバーを作ることができます。
今回の記事では、Elementorのコンテナのカラム数を２カラムにしてサイドバーを作成する方法、そしてサイドバーの中にプロフィールと記事一覧を表示させる方法を紹介します。

さらに、スクロールしてもウィジェット（要素）が固定されるように（＝スクロールしても常に表示されるように）する方法も紹介しますので、ぜひ参考にしてみてください！

↑デスクトップ表示で、画面の左側に表示されているのが「サイドバー」です。
今回はこのようなサイドバーの作り方を紹介します。

※テーマはElementor公式テーマ「Hello Elementor」を使用

INDEX

サイドバーを作る方法
サイドバーの中身（プロフィール・記事一覧）を作る方法
ウィジェットを固定してスクロールしても常に表示させる方法

1. サイドバーを作る方法

↑Elementorの編集画面から、２カラム構造を選択します。

↑外側のコンテナを選択し、「レイアウト」から、コンテンツ幅を「ボックス」にし、方向を「→」にします。

↑次に、中のコンテナの幅を調整していきます。
まず左側のコンテナ（＝記事やコンテンツを表示）のコンテンツ幅を「全幅」にし、幅を「65%」にします。

↑右側のコンテナ（＝サイドバーを表示）を選択した状態で、「高度な設定」からマージンを左だけ「100」に設定します。
※マージンの一番右のリンクマーク（クリップのようなマーク）を押すと、上下左右個別に設定できます。

2. サイドバーの中身（プロフィール・記事一覧）を作る方法

◇プロフィール

↑右側のコンテナの中に、さらにコンテナをもう一つ作ります。
コンテナを編集の「スタイル」から、枠線の幅を「１」、丸みを「10」に設定します。

↑コンテナの背景に画像を設定し、背景オーバーレイで背景画像の透明度を調整していきます。

↑コンテナの中に、プロフィール画像、サイト名やブログ名、説明を配置していきます。
この時に、コンテナの方向を画像のように縦方向にする事で要素を縦に並べることができます。

◇記事一覧

記事一覧は、様々な種類のElementorの追加ウィジェットが無料で使える「Essential Addons for Elementor」の「Post Grid」という機能を使って表示させます。

※Essential Addons for Elementorのインストールがまだの方は、下記の記事を参考にインストールしてから記事一覧を作成できます！

Elementor Essential Addonsの使い方はこちら↓の記事で紹介しています！

Essential Addons for Elementorの使い方【基本の使い方】

2024/01/06

Elementorのプラグイン「Essential Addons（エッセンシャル・アドオン）の基本の使い方を紹介します。

↑まず初めに、プロフィールの下にさらにもう一つコンテナを作成し、区切りウィジェットを使って「最近の投稿」というタイトルを作成します。
「区切りを編集」から「要素を追加」の「T」をクリックし、「テキスト」に「最近の投稿」と入力します。

↑区切りを使ってタイトルを作ったら、その下に「Post Grid」を配置します。
※あらかじめEssential Addons for Elementorのインストールが必要です！

↑Post Gridを編集から、「Query」の中の「Source」を「投稿」、「Post Per Page」を「２」、「Order By」を「Date」に設定します。

Post Gridの使い方やレイアウトの変更はこちら↓の記事で詳しく紹介しています！

Elementorで投稿一覧を表示！ Essential Addons for Elementor【Post Gridの使い方】

Elementorで記事一覧を表示！ Essential Addons for Elementor【Post Gridの使い方】

2024/01/07

Essential Addons for Elementorのプラグインを使用して、投稿一覧を表示する方法とカスタマイズを紹介します！

3. ウィジェットを固定してスクロールしても常に表示させる方法

ここまでで基本的なサイドバーは完成しましたが、最後に画面をスクロールしてもサイドバーの特定のウィジェットを固定して、常に表示させるようにする方法を紹介します。

↑ワードプレスのメニューから、「外観」→「カスタマイズ」を選択します。

↑追加CSSをクリックし、下記のコードを貼り付けて、「公開」ボタンをクリックします。

				
					#sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 100px; /* ヘッダーの高さに合わせて適切な値に変更 */
  z-index: 1000;
  margin-top: 50px; /* マージンの設定 */
}