【WordPress】ブログサイドバーのカスタマイズ｜編集や非表示のやり方を解説

まずは WordPress に「アイコンにしたい画像」を登録しましょう。

WordPress 管理画面にアクセスして「メディア」を選択。

画面が表示されたら「新規追加」ボタンをクリックしてください。

「ファイルを選択」をクリックして、アイコンにしたい画像を選択してください。

さきほどアップロードした画像が一覧に出てくるので、選択してください。

つぎの画面が表示されたら「画像を編集」ボタンをクリック。

任意のサイズに調整して「縮尺変更」をクリック。

画像を切らさずフルサイズで表示するには

【横幅】298px × 【縦幅】222px

にする必要があります。

画像サイズを調整したらメディア一覧が表示されるので、さきほどと同じ画像を選択しましょう。

「URLをクリップボードにコピー」をクリック。

コピーしたURLは後で使うので、どこかに張り付けて保管しておきましょう。

つぎにCSSデザインの設定をおこないます。

WordPress管理画面の左メニュー「外観＞カスタマイズ」を選択します。

以下の画面が表示されたら「追加CSS」を選択。

追加CSS画面が表示されたら、下記CSSコードを コピー＆貼り付け して「公開」ボタンをクリック。

WordPress管理画面の左メニュー「外観 ＞ ウィジェット」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「カスタムHTML」を選択してください。

サイドバーウィジェットに「カスタムHTML」コンテンツが追加されます。

以下のコードを入力してください。

もう一度 ＋ をクリックして、「カスタムHTML」を選択してください。

「カスタムHTML」コンテンツに下記コードを コピー＆貼り付け してください。

※ 黄文字はカスタマイズ箇所です。任意の文字列を入力してください。

上記を入力したら「更新」ボタンをクリックしてください。

サイドバーに「プロフィール」が表示されていることを確認しましょう。

以上で設定は完了です。

WordPress管理画面にアクセスして「外観 ＞ ウィジェット」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューがでたら「カスタムHTML」を選択してください。

サイドバーウィジェットに「カスタムHTML」コンテンツが追加されます。

以下のコードを入力してください。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「検索」を選択してください。

サイドバーウィジェットに追加された「検索」コンテンツを選択すると、詳細を設定できます。

以下のように設定して「更新」ボタンをクリック。

WordPress管理画面にアクセスして「 プラグイン ＞ 新規追加 」を選択します。

Cool Tag Cloudを検索してインストールします。

Cool Tag Cloud をインストールすると右上に「有効化」ボタンが出てくるので、クリックして有効化しましょう。

WordPress管理画面にアクセスして「外観 ＞ ウィジェット」を選択します。

「サイドバーウィジェット」の ＋ をクリックすると、コンテンツ追加メニューが出てくるので「Cool Tag Cloud」を選択してください。

「Cool Tag Cloud」コンテンツを追加した後、設定値を入力する必要があります。

「どこに何をいれたら良いかわからない」という人は 下記の設定をまねしてください。

入力が完了したら、右上の「更新ボタン」を押しましょう。

設定後は、サイドバーに「カテゴリ」タブが表示されていることを確認しましょう。

以上で設定は完了です。

まずは 広告コード を取得します。

下記では、例として アクセストレード の 広告コード 取得画面 を表示しています。

コードをコピーしてください。

WordPress管理画面にアクセスして「外観 ＞ ウィジェット」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「カスタムHTML」を選択してください。

「カスタムHTML」コンテンツに STEP１でコピーした 広告コードをペーストして「更新」をクリックしましょう。

サイドバーに「広告」が表示されていることを確認しましょう。

以上で設定は完了です。

WordPress管理画面にアクセスして「プラグイン＞新規追加」を選択します。

WordPress Popular Postsを検索してインストールします。

WordPress Popular Postsをインストールすると右上に「有効化」ボタンが出てくるので、クリックして有効化しましょう。

WordPress Popular Posts の設定をしていきましょう。

WordPress管理画面の左メニュー「設定 ＞ WordPress Popular Posts」を選択します。

WordPress Popular Posts 設定画面を表示したら「ツール」をクリックしてください。

「アイキャッチ画像」設定項目は、基本的にそのままでOK。

設定を変更したい場合は、任意のものを選択して「適用」ボタンをクリック。

「データ」設定項目には、以下の設定がおすすめ。

それぞれ好みの設定を選んで「適用」ボタンをクリックしましょう。

「その他」設定項目では、以下の設定がおすすめ。

それぞれ好みの設定を選んで「適用」ボタンをクリックしましょう。

WordPress管理画面にアクセスして「 外観 ＞ ウィジェット 」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「カスタムHTML」を選択してください。

サイドバーウィジェットに「カスタムHTML」コンテンツが追加されます。

以下のコードを入力してください。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「WordPress Popular Posts」を選択してください。

サイドバーウィジェットに「WordPress Popular Posts」コンテンツが追加されます。

ここでも「表示設定」が必要。どのように設定したら良いかわからない人は下記の設定をまねしてください。

最後に「更新」ボタンをクリックします。

では、サイトに反映されているかを確認しましょう。

WordPress管理画面にアクセスして「 プラグイン＞ 新規追加 」を選択します。

Content Views を検索してインストールします。

Similar Postsをインストールすると右上に「有効化」ボタンが出てくるので、クリックして有効化しましょう。

Content Views の設定をしていきましょう。

WordPress管理画面の左メニュー「 Content Views ＞ 新規追加 」を選択します。

Content Views の設定画面が表示されたら「タイトル」をつけましょう。

Taka

Content Views の設定に対するタイトルなので適当で良いです

つぎに「Filter Settings」タグの設定をしていきましょう。

※基本的には「Limit ：表示する記事数」を任意の数にするくらいで、その他はデフォルトの設定のままでOK。

「include only」 には、おすすめとして表示する記事の ID を入れてください。

※記事IDは 投稿一覧画面（投稿＞投稿一覧） から確認できます。

つぎは「Display Settings」タグの設定です。

どのように設定したら良いかわからない場合は下記をまねしてください。

ここまで設定したら、画面の上側に コード が表示されます。これをコピーしてください。

WordPress管理画面にアクセスして「外観 ＞ ウィジェット」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「カスタムHTML」を選択してください。

サイドバーウィジェットに「カスタムHTML」コンテンツが追加されます。

以下のコードを入力してください。

もう一度 ＋ をクリックして「ショートコード」を選択します。

「ショートコード」にSTEP８でコピーした IDを貼り付けて「更新」ボックスをクリック。

サイドバーに「おすすめ記事」が表示されていることを確認しましょう。

以上で設定は完了です。

WordPress管理画面にアクセスして「外観 ＞ ウィジェット」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「カスタムHTML」を選択してください。

サイドバーウィジェットに「カスタムHTML」コンテンツが追加されます。

以下のコードを入力してください。

再度 ＋ をクリックして「最近の投稿」を選択します。

サイドバーウィジェットに「最近の投稿」コンテンツが追加されたら「更新」ボタンをクリックしましょう。

サイトを表示して、サイドバーに「最近の投稿」が表示されていることを確認してください。

以上で設定は完了です。

WordPress管理画面にアクセスして「 プラグイン ＞ 新規追加 」を選択します。

Similar Postsを検索してインストールします。

Similar Postsをインストールすると右上に「有効化」ボタンが出てくるので、クリックして有効化しましょう。

Similar Posts の設定をしていきましょう。

WordPress管理画面の左メニュー「 設定 ＞ Similar Posts 」を選択します。

「General」タブの設定を変更していきます。

そのほかの項目は、デフォルト設定のままで大丈夫です。

つぎに「Output」タブの設定を変更していきましょう。

「Output template」は、関連記事のデザインの設定。

ここがデフォルトのままだとクソダサいデザインになるので、下記を コピー＆貼り付け してください。

貼り付けたら保存しましょう。

そのほかの項目はデフォルト設定のままでOK。

つぎに「Manage the Index」タブの設定を変更していきましょう。

関連記事のタイトルに日本語を使っている人は、以下の設定に変更して「Recreate Index」を押してください。

WordPress管理画面の左メニュー「 外観  ＞ ウィジェット 」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「Similar Posts」を選択してください。

サイドバーウィジェットに「Similar Posts」が追加されました。最後に「更新」ボタンをクリックしてください。

それでは サイトを表示して、サイドバーに「関連記事」が表示されていることを確認しましょう。

以上で設定は完了です。

WordPress管理画面にアクセスして「 プラグイン ＞ 新規追加 」を選択します。

Table of Content Plusを検索してインストールします。

Similar Postsをインストールすると右上に「有効化」ボタンが出てくるので、クリックして有効化しましょう。

つぎに Table of Content Plus の詳細を設定していきましょう。

WordPress管理画面の左メニュー「設定＞TOC+」を選択します。

Table of Content Plus 設定画面の「基本設定」タブを選択して以下の通り設定してください。

もちろん、項目ごとに好みのものを選択してもOKです。

入力後は、設定を更新した後「上級者向け’（hide）」をクリックしてください。

上級者向けの設定欄が展開されます。

以下の通り設定してください。

入力が完了したら設定を更新しましょう。

Table of Content Plus 設定画面の「サイトマップ」タブを選択して以下の通り設定してください。

入力が完了したら設定を更新してください。

つぎにデザインの設定をおこないます。

WordPress管理画面の左メニュー「外観＞カスタマイズ」を選択します。

以下の画面が表示されたら「追加CSS」を選択。

追加CSS画面が表示されたら、下記CSSコードを コピー＆貼り付け して「公開」ボタンをクリック。

WordPress管理画面の左メニュー「外観 ＞ ウィジェット」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「TOC＋」を選択してください。

「TOC＋」コンテンツが追加されたら「更新」ボタンをクリックしてください。

記事を投稿していきます。

WordPress管理画面の左メニュー「 投稿 ＞ 新規追加 」を選択してください。

投稿画面で いくつか見出しを追加して、画面右上の「：」をクリック。「コードエディタ」を選択しましょう。

コードエディタの表示になったら、適当な場所に

［toc］

を入力して「下書き保存」をクリック。

「 プレビュー ＞ 新しいタブでプレビュー 」をクリックしてプレビューを表示しましょう。

ここまでの手順で、以下のように目次が追加されているかと思います。

以上で設定は完了です。

Twitter にアクセスして、ブログに表示したい投稿を見つけましょう。

ツイートが見つかったら右上の「…」をクリック。

「ポストを埋め込む」を選択してください。

つぎのような画面が表示されるので「Copy Code」をクリックして、コードをコピーしましょう。

コピーが完了したら次の画面が表示されます。

WordPress管理画面にアクセスして「 外観 ＞ ウィジェット 」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジェット」を選択して ＋ をクリック。

コンテンツ追加メニューが出てくるので「カスタムHTML」を選択してください。

サイドバーウィジェットに「カスタムHTML」コンテンツが追加されるので、STEP２でコピーしたコードを貼り付けてください。

貼り付けたら「更新」をクリック。

最後にサイトを開いて、ツイートが表示されていることを確認しましょう。

以上で設定は完了です。

WordPress管理画面にアクセスして「 外観 ＞ ウィジェット 」を選択。

ウィジェット変更画面を開きます。

配置を変えたいコンテンツを選択して配置を下に移動。

「更新」ボタンをクリックしてください。

これで完了。

サイトを開いて コンテンツが入れ替わっていることを確認しましょう。

以上で設定は完了です。

WordPress管理画面にアクセスして「 外観 ＞ ウィジェット 」を選択。

ウィジェット変更画面を開きます。

不要なコンテンツを選択して「カスタムHTMLを削除」をクリック。

サイトを開いて コンテンツが削除されていることを確認しましょう。

以上で設定は完了です。

WordPress管理画面にアクセスして「プラグイン＞新規追加」を選択します。

Fixed Widget and Sticky Elements を検索してインストールします。

Fixed Widget and Sticky Elements をインストールすると右上に「有効化」ボタンが出てくるので、クリックして有効化しましょう。

WordPress管理画面の左メニュー「外観 ＞ ウィジェット」を選択します。

ウィジェット設定画面が表示されたら「サイドバーウィジット」の ＋ ボタンをクリックして、スクロール追従させたいコンテンツを選びましょう。

※この記事では 目次（TOC） を追従表示させていきます。（  TOC プラグインの設定手順を見る ）

「Fixed Widget」にチェックをいれて「更新」ボタンをクリック。

WordPerss の標準搭載エディタが「ブロックエディタ」になったことで、Fixed Widget and Sticky Elements がうまく機能しない現象が発生しています。

クラシックエディタではスクロール追従を設定できていたコンテンツが、ブロックエディタでは設定できない といったこともあるので、まずは 対象のコンテンツが Fixed Widget に対応しているかをご確認ください。

実際にサイトを表示して、コンテンツがスクロールに追従することを確認しましょう。

以上で設定は完了です。

WordPress管理画面にアクセスして「プラグイン＞新規追加」を選択します。

Content Aware Sidebars を検索してインストールしましょう。

このプラグインを使うと「ページごとに表示・非表示を設定した」新しいウィジット を作成できるようになります。

Content Aware Sidebars をインストールすると右上に「有効化」ボタンが出てくるので、クリックして有効化しましょう。

Content Aware Sidebars の 新ウィジットを追加していきましょう。

WordPress管理画面の左メニュー「Content Aware ＞ 新規追加」を選択します。

新規で作成するウィジットのタイトルをつけましょう。

「Conditions」タブの設定をしていきましょう。

「＋ New condition group 」をクリックして、コンテンツを表示させてたい場所（投稿、固定ページ など） を選択してください。

「Action」タブでは、新規作成するウィジットを「どこに表示するのか」を設定します。

上記を設定したら「生成」ボタンをクリック。

※この記事では「サイドバートップ」ウィジットの下部に、（投稿ページだけを表示対象とする）新しいウィジットをくっつける設定にしました。

WordPress管理画面の左メニュー「外観 ＞ ウィジェット」を選択します。

ウィジット一覧にさきほど作成した新しいウィジットが出てきます。

新しいウィジット へ 適当なコンテンツ を追加して「更新」ボタンを押してください。

最後にサイトを表示して、設定したページにだけコンテンツが表示されることを確認しましょう。

以上で設定は完了です。