【WordPress】〔テーマ：Cocoon〕ブログの構成要素（メインカラム、サイドバー、フッター）の編集（変更）方法

ブログの構成要素（メインカラム、サイドバー、フッター）の編集方法

WordPressの管理画面をみてみると、左サイドの管理項目の一覧に「メニュー」や「ウィジェット」などのブログの構成要素の名称がずらっと並んでます。
初心者の私にとって、ブログの各箇所を修正するにあたって、管理画面のどの項目を編集すべきかなども分からなかったので、私自身の備忘録を兼ねて簡単にまとめてみました。

この記事では、私がブログ作成初期に行った「メインカラム」、「サイドバー」、「フッター」部分の編集内容を備忘録的に書き綴っています。

メインカラムの編集

このメインカラム（トップページ）、デフォルトでは「最近の投稿」が最新順に並んで表示されています。
左側（スマホでは上側）の画像がデフォルト（最近の投稿順）のもので、右側（スマホでは下側）が現在の変更を加えた後（カテゴリーごとの投稿順（２列））の画像です。

メインカラムの編集は、管理画面の「Cocoon設定」から「カラム」タブを選択すれば、以下の内容について変更できます。

・コンテンツ幅（最小：600px、最大：1600px）
・コンテンツ余白幅（最小：10px、最大：80px）
・コンテンツ枠線幅（最小：0px、最大：10px）
・コンテンツ枠線色（未入力（デフォルト）で透過色）

「Cocoon設定」のカラム幅に関する記事があったので参考に掲載します⇩

Cocoon設定の「カラム幅変更」で変わる場所の説明。

カラム幅設定により太さなどが変更される位置を詳しく説明。

wp-cocoon.com

トップ画面に「カテゴリーごと」の最新記事順で表示したいといろいろ模索してみるとなんとか私のイメージに近い形にできました♪
ほぼ他の人のサイトで紹介されていた方法を取り入れさせていただいただけなんですけど(;^_^A（※はまちゃんさんありがとうございます！いかにリンクを貼っています☆）

【編集方法の概要】
①管理画面「設定」➡「表示設定」➡「ホームページの表示」を開く
②「固定ページ」を選択し、「ホームページ」欄で事前に自分で作成した固定ページ（※）（以下では「トップページ」）を選択
※作成方法などの詳細は以下のはまちゃんさんのサイトをご覧ください。

THANKS！

以下のサイトを参考にしました♪

【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon（コクーン）。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込

wakuwaku-keigo.com

サイドバーの編集

この右の画像がこのブログのサイドバーです。
この記事作成時点では、
①検索バー
②プロフィール
③人気記事一覧
の３つのウィジェットを設定しています。

サイドバーの編集は、まず、管理画面の「外観」から「ウィジェット」を選択すると、ウィジェットの設定画面が表示され、右側にはウイジェットエリアごとの選択バーが表示されます。
選択バーの最も左上のバーが「サイドバー」、その下に「サイドバースクロール追従」があり、その２つのバーからサイドバーの編集を行います。

上の管理画面からサイドバーの編集はできますが、「ライブプレビューで管理」を押下すると、次の画面のような「ライブプレビュー画面」に遷移します。
このライブプレビュー画面では、変更した内容が即ウェブ上での表示状況を確認できるので、こちらの画面で作業をした方が効率的です☆

編集方法ですが、上の「サイドバー」を選択すると、下のような画面に遷移し、さらに自分が設置したいウィジェットを設置します。
設置するとそのウィジェットのバーが表示されるので、そのバーを選択するとさらに編集画面が開きます。（下の画像は、「プロフィール」バーを選択し、プロフィールの編集画面が表示されています。）

設置するウィジェットにより編集項目は異なってきますが、例えば「プロフィール」であれば、①タイトル、②肩書きラベルの２点の編集が可能です。

サイドバーに設置するウィジェットの種類により、編集可能な内容・方法は異なるので、こちらでは詳細な記述を略します。
（※詳細は、別途「ウィジェット」に特化した記事で記述します。）

フッターの編集

上の画像はこのブログのフッター部分。この場所には以下の２つの情報が含まれています。

①メニュー
②クレジット表記（「他の項目」にて記述）

WordPressの管理画面でこれらの内容を編集するにはどこからできるのか。

順に説明していきます。

メニュー（グローバルメニュー）

メニュー（グローバルメニュー）の概要・編集方法については、次のページ（※）で書いていますので参考にご覧ください。

【WordPress】〔テーマ：Cocoon〕ブログの構成要素（ヘッダー）の編集（変更）方法

私がブログ作成初期に行った「ヘッダー」部分の編集内容を備忘録的に綴っています。

aokablog.com

2020.04.26

（※）２.ヘッダーの編集　➡　２.③メニュー（グローバルメニュー）

ここでは、編集にあたり「ヘッダー」と異なる点である「メニューの表示場所を選択する方法」のフッターに関する内容についてのみ説明します。

メニューの表示場所を選択する方法

設定したメニューを表示させる場所を選択します。
フッターの次の箇所に表示可能です。

最下部にある①PC、②タブレット、③スマホの各アイコンをクリックすると、それぞれの端末でのWeb上での表示状態を確認できます！

スマホだと画面が小さいので「カラム」のブロックを使用する時（２列表示などにする時）は確認しましょう！

フッターメニュー（PC用）

フッターモバイルメニュー（スマホ用）

モバイルスライドインメニュー

上の画像がこのブログの「スライドインメニュー」です。
デフォルトから変更しているのは、背景色とアイコンの色のみですが、変更するにはCSSのコードを入力する必要があります。
私が入力したコードは、以下の記事にまとめていますので、参考に掲載します☆

【WordPress】〔テーマ：Cocoon〕ブログ作成初期に追加したCSSなどのコードたち（初心者）

ブログ作成を始めた初期に、私の思い描くサイトイメージに近づけるべく追加したCSSなどのコードたちです。

aokablog.com

2020.04.27

他の項目

〇WordPress管理画面（Cocoon設定）から
テーマCocoonを使用していると、次の内容も簡単に変更できちゃいます♪

変更する場所はこちら⇩⇩⇩

以上で、メインカラム、サイドバー、フッターの編集方法に関する記事はおわりです。

ご覧いただきありがとうございました☆