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

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

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

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

画像に alt 属性が指定されていません。ファイル名: 2020-04-30_13h54_1211-2.png

メインカラムの編集

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

最近の投稿順
カテゴリーごとの投稿順(2列)

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

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

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

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

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

サイドバーの編集

この右の画像がこのブログのサイドバーです。
この記事作成時点では、
①検索バー
②プロフィール
③人気記事一覧

の3つのウィジェットを設定しています。

ウィジェットとは!?

検索バー、プロフィールなどのコンテンツや人気記事・最新記事の記事一覧を表示する機能を持ったプログラムのことです。

ウィジェットは、主にサイドバーや、ヘッダー・フッターに設置されます。

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

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

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

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

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

フッターの編集

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

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

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

順に説明していきます。

メニュー(グローバルメニュー)

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

(※)2.ヘッダーの編集 ➡ 2.③メニュー(グローバルメニュー)

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

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

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

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

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

フッターメニュー(PC用)

このブログではこれ☆

フッターモバイルメニュー(スマホ用)

このブログではこれ☆

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

このブログではこれ☆

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

他の項目

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

変更できる内容
  • フッター色(背景色・文字色)
  • フッター表示タイプ
    ①ロゴ、②メニュー、③クレジット(左右・中央)で構成される3つの表示グループから選択
  • フッターロゴ
  • クレジット表記(サイト開設年、著作権者表記など)
  • フッターメニュー幅

    「赤字」は私のブログで変更しているものです☆

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

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

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

タイトルとURLをコピーしました