国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

初心者のためのブログ始め方講座

国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

【連載その5】XWRITEでWordPressブログをはじめよう!「サイドバーの設定編」

\この記事をシェアする/

T部長

当メディアはリンクフリーです。SNSやブログでご紹介いただけると嬉しいです。

この記事のレベル
初心者
(5.0)
重要度
(4.0)
難しさ
(2.0)

こんにちは、T部長です!

WordPressでブログを始めたいけど、具体的にどうすればいいの……?」と悩んでいる方は多いのではないでしょうか。

そこで今回は、初心者におすすめのWordPressテーマ 『XWRITE(エックスライト)』を使ったWordPressブログの開設方法を、全6回に分けてご紹介します!

もしテーマに迷っているなら、ぜひこの記事に沿ってXWRITEでブログを始めてみませんか?

本記事は、第5回「サイドバーの設定編」のお話です。

T部長

この記事は次のような人におすすめ!

  • WordPressでブログを開設したい
  • テーマ(テンプレート)選びに迷っている
  • WordPressテーマ『XWRITE』を使ってブログを作りたい

この記事を読むと、WordPressでのサイドバーの設定手順が学べるので、初心者の方でも簡単に設定できるようになりますよ!

また、連載企画を通して、WordPressのインストールや初期設定の手順、トップページをデザインする手順、記事や固定ページの作り方を紹介しています。ぜひ参考にしてください。

それでは、どうぞ!

本記事で完成するサイドバーのイメージ

サイドバーを設定する前に、以下の完成イメージを確認しましょう。

▼サイドバー

本記事で完成するサイドバーのイメージ

▼記事(サイドバーを設定した場合)

記事(サイドバーを設定した場合)

作業前に必要な準備

サイドバーを設定するうえで、以下の作業が完了しているか確認してください。

  • WordPressと『XWRITE』のインストールが完了している
  • WordPressの初期設定が完了している
  • トップページのデザイン設定が完了している
  • 記事作成が完了している

前回までの手順は、以下の記事からご覧いただけます。

【連載その1】XWRITEでWordPressブログをはじめよう!「インストール編」 【連載その2】XWRITEでWordPressブログをはじめよう!「初期設定編」 【連載その3】XWRITEでWordPressブログをはじめよう!「トップページのデザイン編」 【連載その4】XWRITEでWordPressブログをはじめよう!「投稿記事の作成編」

サンプルファイルのダウンロード

本記事で使っている画像のサンプルファイル(プロフィールイメージ)を用意しました。
利用する場合は、下記のボタンからダウンロードできます。

※ファイルはzip形式で圧縮しているので、ダウンロード後に展開してご利用ください。

画像をダウンロードする(zip形式)

サイドバー(ウィジェット)の設定について

サイドバーに表示するプロフィールや人気記事などのウィジェットを設定しましょう。

サイドバー(ウィジェット)の設定について
ウィジェット

固定のエリアに任意のコンテンツを表示できる機能です。

サイドバー、フッター、投稿記事、固定ページなど、さまざまエリアに設定できます。

サイドバーに設定する項目は以下です。

デフォルトの項目を削除する

サイドバーに設定されているデフォルトの項目を削除しましょう。

ウィジェットの編集画面を表示する

メニューの「外観」から「ウィジェット」を選択しましょう。

ウィジェットの編集画面を表示する

編集画面が表示されたら、「サイドバー」をクリックしてください。

編集画面が表示後に「サイドバー」をクリックする
不要なコンテンツを削除する

画面左上の「リストビュー」をクリックし、サイドバーの「グループ」をすべて選択して、「削除」を選びましょう。

※デフォルトで追加されている「検索」は削除せずに残します。

不要なコンテンツを削除する

×」をクリックして、リストビューを閉じます。

リストを閉じる

項目を削除したら、更新をクリックして完了です。

設定を保存する(更新ボタン)

検索フォームを設定する

▼完成イメージ(検索フォーム)

完成イメージ(検索フォーム)

検索フォームを選択して、「ラベル」の入力欄をクリックし、ツールバーの「検索ラベルを切り替え」をクリックします。

ツールバーの「検索ラベルを切り替え」をクリックする

設定できたら、「更新」をクリックして完了です。

設定を保存する(更新ボタン)

プロフィールを設定する

サイドバーにプロフィールを設定しましょう。
プロフィールを設定する方法は、基本的に以下の2つです。

プロフィールを設定する方法
  • サイドバーに表示する(今回設定する方法)
    ウィジェットから「XWRITEプロフィール」ブロックを追加して設定します。
  • ライター情報を表示する(記事下部にデフォルトで表示)
    WordPressの標準機能の「ユーザー」から「プロフィール」を入力します。

ライター情報の表示については設定手順が煩雑なため、本記事では紹介しません。

そのため、今回はサイドバー(ウィジェット)にプロフィールを表示する方法を解説します。

なお、ライター情報は何も設定していない場合でも、初期状態で記事上に表示されてしまうため、非表示にする方法についてもあわせてお伝えします。

▼完成イメージ(プロフィール)

完成イメージ(プロフィール)
プロフィールを追加する

検索フォームの「+」をクリック後、検索欄に「プロフィール」と入力し、「[XWRITE]プロフィール」を選択します。

プロフィールを追加する
プロフィールを移動する

[XWRITE]プロフィール」を選択し、ツールバーの「ドラッグ」をクリックしたまま、検索フォームの上部に移動してください。

プロフィールを移動する
プロフィールを設定する

次に、以下の項目を設定しましょう。

  • タイトル
  • 名前
  • 説明文
  • プロフィール画像

設定する内容は、ブログの内容にそって適宜変更してください。

プロフィールの各項目を入力する

※今回は背景画像を表示しないため、「背景画像を表示する」のチェックを外します。

また、SNSのボタンを設置したい場合は、必要なものにURLを入力してください。

各SNSボタンのリンクを設定する

プロフィールが設定できたら、更新をクリックして完了です。

設定を保存する(更新ボタン)

補足:ライター情報を非表示にする

記事下部に表示されているライター情報を非表示にしましょう。

補足:ライター情報を非表示にする
カスタマイズをクリックする

メニュー「外観」から「カスタマイズ」をクリックします。

カスタマイズをクリックする
記事下エリアをクリックする

次に、メニューの「投稿/固定ページ」を選択し、「記事下エリア」をクリックします。

記事下エリアをクリックする
チェックを外して公開する

ライター情報を表示する」のチェックを外して、公開をクリックすれば完了です。

「ライター情報を表示する」のチェックを外して公開する

ボックスメニュー(カテゴリー)を設定する

各カテゴリーの記事一覧へ誘導するために、ボックスメニューを設定します。

▼完成イメージ(ボックスメニュー)

完成イメージ(ボックスメニュー)

6つのメニューを設けて、アイコン、見出し、リンクを設定しましょう。

ボックスメニューを追加する

+」をクリック後、検索欄に「ボックス」と入力し、「ボックスメニュー」を選択します。

ボックスメニューを追加する

ボックスメニューが追加されると、以下の画像のように表示されます。

ボックスメニューが追加されたことを確認する
メニューを追加する

ボックスメニューの下部にある「+」をクリックして、メニューを追加しましょう。

メニューの数については、カテゴリーの数に合わせて適宜変更してください。

メニューを追加する

※今回のブログでは、記事のカテゴリー数に合わせて、メニューを6つに設定しています。

見出しを設定する

見出し」をクリックして、カテゴリー名を入力します。

見出しを設定する
リンクを追加する

ボックスメニューに設定した、6つのメニューにリンクを追加しましょう。

リンクの設定」にカテゴリーのリンク(URL)を入力します。

リンクが入力できたら、「送信」ボタンをクリックしてください。

リンクを追加する
アイコンを設定する

アイコンの選択」からプルダウンをクリックし、アイコンのリストが表示されたら、Font Awesome アイコン一覧をクリックします。

アイコンを設定する

リストにあるアイコンを使うこともできますが、使いたいアイコンが見つからない場合は、アイコンページから探してみましょう。

※今回作成するボックスメニューには、アイコンページで探したアイコンを設定します。

▼アイコンページ(Font Awesomeアイコンの公式サイト)

アイコンページ(Font Awesomeアイコンの公式サイト)にアクセスする

▲出典:Free Icons | Font Awesome

アイコンページが表示されたら、検索窓にキーワードを入力します。

海外サイトのため、日本語で検索しても表示されないので、英語で入力してください。

使いたいアイコンが見つかったら、クリックしましょう。

検索窓にキーワードを入力する

アイコンの詳細ページには、以下の画像のようにコードが表示されているので、クリックしてコピーします。

アイコンの詳細ページを確認する(コードをコピーする)

コピーしたコードを、そのまま「アイコンのクラス名」にペーストしてください。

「アイコンのクラス名」にペーストする
各メニューを設定する

前述した③④⑤と同じ手順で、残りのメニュー項目を設定しましょう。

各メニューを設定する
ボックスメニューの見た目を設定する

メニューの選択時に表示される、ボックスメニューの親ブロックをクリックします。

ボックスメニューの見た目を設定する

右メニューから、以下のように設定してください。

  • スタイル:塗りつぶし
  • ボックスの余白:8px
  • 色選択:アクセントカラー
スタイルを変更(塗りつぶし)
色選択(アクセントカラーを選択)

ボックスメニューの見た目は、テーマにあわせて適宜変更してください。

見た目が設定できたら、更新をクリックして完了です。

設定を保存する(更新ボタン)

人気記事を表示する

▼完成イメージ(複数記事を公開している場合)

人気記事の完成イメージ(複数記事を公開している場合)

※最初のうちはアクセスがなく、人気記事を特定できないので、一覧に記事が表示されません。

人気記事(初期設定時の表示)
人気記事を追加する

+」をクリック後、検索欄に「人気」と入力し、「[XWRITE]人気記事ランキング」を選択します。

人気記事を追加する
見出しを設定する

タイトル」に「人気記事」と入力します。

見出しを設定する

設定できたら、更新をクリックして完了です。

設定を保存する(更新ボタン)

新着記事を表示する

▼完成イメージ(複数記事を公開している場合)

新着記事の表示(複数記事を公開している場合)

なお、本記事で公開しているのは1記事なので、以下のような表示になります。

新着記事の表示(公開中の記事が1記事の場合)
見出しを追加する

+」をクリックして、「見出し」を選択します。

見出しを追加する

見出しをクリックして、「新着記事」と入力しましょう。

記事一覧を追加する

「+」をクリックして、「記事一覧」を選択します。

記事一覧を追加する
記事の投稿日を非表示にする

右メニューの「投稿日」のスイッチをオフにして、非表示に設定します。

記事の投稿日を非表示にする

設定できたら、更新をクリックして完了です。

設定を保存する(更新ボタン)

まとめ

今回の記事では、WordPressでサイドバーを設定する手順を解説しました。

最後にサイドバーの設定手順について、おさらいしておきましょう。

サイドバーの設定が完了したら、それぞれの項目に抜け漏れがないようにチェックしてから公開しましょう。

次回の記事は、【連載その6】XWRITEでWordPressブログをはじめよう!「固定ページの作成編」です。

以上、最後まで読んでいただきありがとうございました!

キャンペーン開催中

国内シェアNo.1レンタルサーバー「エックスサーバー」では2024年11月5日(火)17時まで、サーバー利用料金が最大30%オフとなる期間限定キャンペーンを開催中です!

今なら月額693円~とお得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にWordPressブログをご検討ください!

※ 2024年5月時点、W3Techs調べ。

当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!

WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!

ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!

【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法まで

また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!

【たった10分】WordPressブログの始め方|初心者でも簡単に開設できる!

ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!

URLをコピーしました!