IT初心者向け｜操作ガイド（レイアウト・ブロックエディター）

WordPress初心者がよく遭遇するレイアウト・ブロックエディター
画面レイアウト・サイドバー設定
ブロックエディターの装飾
ＳＥＯ対策
まとめ

WordPress初心者がよく遭遇するレイアウト・ブロックエディター

運営者

この記事では、下記の悩みを解決します。
・WordPressのレイアウト設定。
・WordPressのメニュー（ブロックエディター）での設定に特化した操作手順を
分かりやすく解説します。
初心者の方でも、この記事を参考にサイトの作成を進める手助けになれば幸いです。

また、私自身、WordPress を使い始めた頃は、「設定したはずの項目が反映されない」
「どこを触ればいいのか分からない」といった初歩的な部分で何度もつまずきました。
この記事では、私が実際に経験したトラブルと、そのときにどう解決した事も交えて解説します。

画面レイアウト・サイドバー設定

ここでは、私自身のサイトを編集していて、レイアウト等ちょくちょく変更した際の設定など記載します。参考にしていただけると幸いです。（〇〇な事をやりたいが、どんな方法があるかなど意見や質問は「問い合わせ」より気楽にお問い合わせください。間違っている等も歓迎してます。）

初心者が特につまずきやすいポイントの下記2点に注意し記載します。
・設定した内容が反映されない
・メニューやウィジェットの階層が理解しにくい

サイドバーの設置位置を変更した場合

サイドバーの項目位置の変更

WordPressで、サイドバーの位置を変更したい際、下記方法で迷わず操作完了できます。

解決方法：下記手順に沿って実施し解決できました。（サイドバーより削除したいメニューなどの表示位置を見直すことができます。）

左画面が初めの状態です。

この状態から、プロフィールを上に移動し「アーカイブ」や「コメント」を外したいと思い、見なおした際の操作方法を下記に記載します。

手順：「管理画面」⇒「外観」⇒「ウイジェット」

現在、サイドバーに表示されているものを設定を残したまま非表示にしたい場合は、下図赤枠（使用停止中のウィジェット）にドラック＆ドロップで移動します。

プロフィールのブロックを移動することにより、自分の好きな位置に設置することが可能です。

サイドバー全体を左側にする場合（Cocoon）

ここでは、サイドバー全体の位置を左右入れ替える方法を紹介します。参考にしていただければ幸いです。

解決方法：「Cocoon設定」⇒「全体」⇒「サイドバーの位置」を左に✓をする。

サイドバー内表示を親カデゴリー表示のみにしい場合

ここでは、サイドバーのカテゴリーを1階層目のみの表示にした場合の操作方法を、初心者にわかるように下記に解説しました。

最終（イメージ）画面：下図（右側の図）のように1階層目のみ表示する場合。

解決（2メニュー（青色、赤色塗りつぶし））で解決できました。
全体の流れ（扱う工程は2工程（メニューとウイジェットです。））
グローバルナビゲーションのメニュー作成で新規にメニューを作成します。⇒作成したメニューに親カテゴリのみ選択し保存⇒ウィジェットのナビゲーションメニューをサイドバーに追加⇒タイトルやグローバルナビゲーションで新規作成メニューを選択し保存すると完成できました。
（↑の塗りつぶし色は、↓と対応しています。）
（新規メニューの作成）⇒ウイジェットでの操作

新規メニューの作成

下図画面①から③で完成です。

ウィジェットでの操作

下図画面④⑤で完成です。

目次に戻る

サイドバー内表示をプルダウン＋階層表示にした場合

ここでは、サイドバーのカテゴリ表示が親階層のみの表示で、エリアを占有していたのでプルダウン表示及び階層表示で小スペースの設置ができないか困っていました。

解決方法：下図の設定を行うことにより解決できましたので、下記に記載します。参考になれば幸いです。

下図(上図=完成図)で（下図＝ウィジェットの編集）で完成しました。

サイドバーよりカテゴリを消した場合

解決方法：ダッシュボードで下図の設定を変更すると消えました。

ブロックHTMLでカテゴリーと記載されていたので、「表示設定」を赤枠のように✓を外し「保存」しました。

ブロックエディターの装飾

ページの「目次に戻る」ボタンの設置

ここでは、ページの行数が増えると下にスクロールした後に戻るボタンでも、目次に戻ることができないか迷っていました。簡単な設定で解決できましたので下記に記載します。（テーマによって相違があると思いますが下記はCocoonでの例です。）

※　リンク先を「#toc」とすれば目次にリンクされます。
ちなみにリンク先を「#」や「#top」はページトップに戻ります。

[完成]

WordPressで挿入した図に枠を表示させる

ここでは、WordPressで挿入した画像の範囲がわからずにいたので、画像に枠を付けられる方法で簡単な方法がないか等で悩んでいました。簡単な設定で解決できましたので下記に記載します。参考にしていただけると幸いです。

解決方法：下図のように「画像の囲み効果」を選択するのみです。

手順：「Cocoon設定」⇒「Cocoon設定」⇒「画像」タブの選択⇒「画像の囲み効果」を選択。

リストのアイコンを装飾する方法

ここでは、ブロックエディターのリストで文頭につくアイコンを記号に変えたりわかりやすく変更する簡単な方法がないか試行錯誤の結果下記方法が見つかりましたので記載します。参考になれば幸いです。

操作方法：「リスト」を選択する。（下図の画面①）⇒バーの左側の「親ブロックを選択リスト」をクリック⇒「ブロック」を選択する。（下図の画面②）⇒「[C]スタイル」を展開しお好きな記号を選択する。（下図の画面③）⇒完成（下図の画面④）です。（詳細は下図を参照ください。）

ブロックにボーダーを設定し目立つようにする

ここでは、記事のブロックエリアにボーダーの装飾を設定し目立たせる場合の方法を初心者にわかるよう解説します。

ボーダーを付けたいブロックを選択⇒右側のブロックタブの「ICボーダー」を選択し好きなタイプを選ぶと終了です。
もし、「ICボーダー」が表示されない場合親ブロックに切替えてみてください。

ページの途中にリンクを貼る（ブログカードの場合）

ここでは、ページのリンクにテキストでなく該当ページのアイキャッチ画像などのリンクを貼る場合ブロックエディターの「ブログカード」を利用しました。リンクの貼り方についてわかりやすく下記に記載します。ご参考にしていただければ幸いです。

[操作手順：イメージ図]

ブロックエディター画面の左側にある「ブログカード」を選択し「直接URLを入力する」とページに上記のようなリンクが貼られる。

ラベルを変更する場合

ここでは、下図の「サイトでの表示画面」の例のようにラベルの変更方法を下記に記載します。ご参考にしていただければ幸いです。

操作方法：ラベルを変更したいブログカードのラベルを選択し、右側の「ブロック」⇒「ラベル」より選択します。

ブロックエディターのカスタマイズ

ここでは、CSSカスタマイズの概要を説明しています。（下記参照ください。）

ブロックでCSSを使う

ブロックではCSSを使えないということではありません。そのため「装飾を加えるために、最初から最後までコードエディターで書く必要はありません」。むしろ、現在のWordPressでは「ブロックエディターを使いながら、必要な部分にだけ追加CSSを使う」のがミスの少ない方法です。
基本的にはブロックを使い、必要に応じてブロックでCSSの「クラス属性」だけを指定するのが良いと思います。
以下、手順です。
１：ブロックエディターで普通に画像や文章を配置する。
２：そのブロックを選択し、右側の設定パネルの一番下にある「高度な設定」を開く。「追加 CSS クラス」という欄に、好きな名前（例：my-special-border）を入力する。
３：「外観」＞「カスタマイズ」＞「追加CSS」に、その名前に対応するCSSを書く。
【具体例】画像を丸くして影をつけたい場合
ブロック側：追加CSSクラスに circle-shadow と入力。
追加CSS側： .circle-shadow { border-radius: 50%; box-shadow: 5px 5px 10px #ccc; } と記述する。