ヘッダーの高さ設定

外観 -> カスタマイズ -> [ys]デザイン -> サイトヘッダー ->と移動

下の方に高さ(PC)での設定でサイズを変更すると高さを変更できる。現在は「90」で設定している。

記事一覧の表示設定

記事一覧の画像が天地枠よりせまい、上下空きの状態になっている。

これは一覧表示のパティング設定がyStandardデフォルトの設定でこうなっているようなので、yStandardの「追加CSS」で設定すると変更できる。

外枠に対してパティングが天地に17px設定してあったので0pxに変更した。

※ここの設定はダブっていたので外した。
左サイドのメニュー「カスタムCSS & JS」で「サムネイル画像とテキストのセット枠 – CSS」で設定している。

ちなみに変更前のデフォルト設定がこれになる。

.archive__detail {
padding: 17px 0px 17px 0px;
}

h1タイトルのCSS変更

左サイドのメニュー「カスタムCSS & JS」から、CSS「H1タイトルをCSSで変更（アイコンを入れる）」で設定。
左にマーク画像、下に点線（これは:rootで一括設定している）

h1.page-title,.entry-title{
font-size: 2.3em !important;
padding: 0px 0px 8px 70px;
background: url(https://polo-web.com/WP/wp-content/icon/Leopard.png) no-repeat left top;
border-bottom: dashed 3px var(–my_theme_color); /:rootで一括設定している/
}

サムネイル画像とテキストのセット枠の設定

左サイドのメニュー「カスタムCSS & JS」から、CSS「サムネイル画像とテキストのセット枠 – CSS」で設定。

ボーダーは:rootで一括設定している。
これは :rootのCSS変数の宣言といいこの設定をすると一括で色を変更することができるようになる。

article.archive__item {
border: 1px solid var(–my_theme_color) !important;
}

この要素は以下のように広告の入るところの枠だけが表示されない。

同じように枠を設定する要素。全ての枠が表示される。

.archive__item.is-card {
border: 1px solid var(–my_theme_color) !important; /* #CCCC99/
}

このように、広告が入るところまで全て枠が表示されるようになる。広告とダブって見にくい。

一括設定！ 指定の色を一発で変更できるCSS変数設定

yStandardのchildのstyle.cssに入れたが効果がなかったので左サイドにある「カスタムCSS & JS」プラグインに入れた。

:root{
–my_theme_color: #FFA500; /デフォルトカラー #bdb76b/
}

左サイドのメニュー「カスタムCSS & JS」から、CSS「一度に変更できるサイトのテーマカラー」で設定。

帯のところの色

.info-bar {
background: var(–my_theme_color);/:rootで一括設定/
}

h1タイトルの下の色も一発設定。上の方でコードは説明している。

枠の色

検索ウインドウの枠の色

サイドメニューの仕切り線の色

FlyWithLuaサイドバーのテキストの色設定

ここは何もしないと青色で表示される。これを下のアーカイブと同じ色に設定するには、左サイドのメニュー「カスタムCSS & JS」から、CSS「サイドバーの区切り線、色と太さの設定CSS（FlyWithLuaのサイドバーも含む）」で設定。

上の２つのCSSは罫線関係で、下のフォントサイズとカラーで設定できた。
#212529は多分、yStandardのデフォルトのフォントカラーだと思う。

.sidebar-widget ul {
border-bottom: 1px solid var(–my_theme_color);/:rootの一括設定/
}
.sidebar-widget li {
border-top: 1px solid var(–my_theme_color);/:rootの一括設定/
padding-top: 5px;
padding-bottom: 5px;
}
.sidebar-widget a {
font-size: 14px;
color: #212529;
}

バックの色

バックの色は以下のようになる。
場所によって別の設定になっているので変更が必要かも、面倒なら色を削除するか透明で指定。
私の場合は、バックと違う色はバックと統一するようにしている。

左サイドのメニュー「カスタムCSS & JS」から、CSS「のバックグランドカラーCSS」で設定。

上の色を全て一度に変える方法として、左サイドのメニュー「画像とテキスト（四角の枠）の一覧表アイテム&サイドバーのバックの色」で設定している。
ここの「var(–my_background_color)」は同じところにある「一発変換！一度に変更できるサイトのテーマカラー」で一度に変更することができるのでそこで設定変更すること。

新着記事一覧の下のスペースが不自然

ここでは　「固定のTOPページに画像を入れてみる。左の「外観」「カスタマイズ」メニューから「ヘッダーメディア」を選択。
ヘッダー画像で新規画像を追加で右に表示される。

ヘッダーメディアで画像を追加するとき、切り抜きという設定が出るが、カットされた状態に切りぬかないこと。デフォルトでカット状態になる場合があるので注意！

これだけでは一般的なTOPページのように、投稿一覧ではなく、文章・画像・ボタンを使ったページを表示する方法。
単純にメディア画像を入れた場合、以下のようにタイトルとか、以下には無いが右サイトのメニューが入ったりする。

これが実際のプレビュー、右側にアーカイブやカテゴリーが入り、TOPページとしてはまずい場合がある。

TOPページの設定

以下のように設定する必要がある
「設定」→「表示設定」を開きます。

「表示設定」で「固定ページ」を選択し、「ホームページ」TOPページを設定し、「変更を保存」する。

この状態でサイトのTOPページを表示してみると、投稿一覧が表示されなくなり、画面いっぱいに画像が表示されるようになる。画像の大きさを調整する必要があるかも。

この状態では、まだ固定ページの中身を何も編集されていません。固定ページの中身を編集します。

TOPページの内容を作成する

TOPページ表示用の固定ページの編集画面からブロックを使ってページの内容を作り込んでいきましょう。

TOPページをサイドバーなしの1カラム表示にする場合、表示幅をサイトヘッダーやフッターの幅に合わせた幅の広いタイプ「投稿ヘッダーなし１カラム（ワイド）」がおすすめ。

1カラム表示と幅の広いタイプの設定方法についてはこちらのマニュアルを参考にしてください▼

「1カラム（ワイド）」の場合はページタイトル・アイキャッチ画像が表示される。

「投稿ヘッダーなし 1カラム（ワイド）」の場合はページタイトルが表示されない。
そのため、編集画面でh1の見出しなど、自分でページタイトルを用意する必要があるが、画像を大きく表示させたりなど、より柔軟にページを作ることができる。

TOPページを固定表示にした場合、投稿一覧ページを表示する方法

TOPページを固定で表示した場合、今までTOPページに表示されていた投稿一覧ページが表示されなくなる。しかしTOPページにも投稿一覧ページも表示させるようにする方法。

投稿一覧ページ用の固定ページを新規作成するまずは投稿一覧表示用のページを新規作成します。

中身は空白でも大丈夫、「タイトル」と「リンク（パーマリンク）」は設定しておくこと。

タイトル：ページ上には表示されないが、ブラウザのタブなどに表示される部分のページタイトル(titleタグ)として使用される。

リンク（パーマリンク）：投稿一覧のページURLとして使用される。

ページは「公開」にしておくこと。（「下書き」ではこの先の設定ができないから。）

作成した固定ページを投稿一覧ページに割り当てる

表示設定のホームページの表示で「投稿ページ」に先程作成した固定ページを設定。

投稿一覧ページが表示されるか確認する

投稿ページの設定が完了したら、投稿ページに設定した固定ページの「表示」をクリックして投稿一覧ページが表示されるか確認する。

やってみました、テキスト入りの画像。別に大々的に入れたいわけではないので、右下にチョット入れるだけなんですが、何とかできたので解説してみます。

まず、[ys]でのヘッダー画像を登録追加する方法から

外観＞カスタマイズ＞ヘッダーメディア から入ります。

「現在のヘッダー」が実際に使われている画像、「アップロード済み」は他に複数の画像を登録した状態、別の画像を選択するとその画像が「現在のヘッダー」に移動してアクティブになる。

「アップロード済みヘッダーをランダム表示」を選択するとアップロードされている画像を読み込み直すたびにランダムに変えながら表示するようになる。チョット面白い機能になる。

画像を入れる方法はこれだけで、無料の[ys]ではテキストを画像の上に入れる設定はない。

以下から、ヘッダー画像にテキストを入れる方法をステップごとに解説してみます。

[ys]パーツでショートコードを作成して入れる

[ys]パーツにはショートコードを作成する機能があります。これを利用します。

[ys]パーツ＞新規追加 から設定

タイトルから入れます。このタイトルが[ys]パーツのタイトルになるので分かりやすい名前なら何でもいい。次のブロックに画像を入れる。

このように画像を入れたら、矢印のアイコンをクリック。

カバーブロックに変わっています。

テキストが入力できるようになった。テキストを選択すると右の設定項目にテキストの色、サイズ等が設定ができるようになる。

テキストの下には背景があり、テキストのバックの色を設定できる。

更に、画像をクリックして選択すると右側の設定項目にオーバーレイがあり、画像の上に被せる色を設定できるようになる。クリアを押すと元に戻すことができる。

その下の不透明度、デフォルトでは文字を見やすくするために画像がかなり暗くなっているが、それを調整できるようになる。これは結構重要な設定項目になる。

問題はテキストの位置調整である。赤枠のアイコンをクリックすると下のポップアップが表示されテキストの表示位置を設定できる。ここでは画像の右下にテキストが移動する。

パティングとか画像の高さの設定もできる。右の矢印をクリックすると４つのパティング全てが個別に設定できるようになっている。上下は画像そのものにパティングが設定してあるようで、左右以外0にしても画像の縁までテキストは移動することはできない。

最後に画像の高さもここで設定。ヘッダーの高さを設定したいなら、ここでの設定が生きてくる。

設定が完了したら右上の「公開」ボタンをクリックして保存します。[ys]パーツに戻って確認すると右にショートコードが表示されています。

これで[ys]パーツの作成完了です。

ショートコードをヘッダーメディア設定に入れる

外観＞カスタマイズ＞ヘッダーメディア から

ここで一番下にショートコードを入れるところがあります。入れるとすぐにヘッダー下に画像が表示されます。テキストも表示されています。

このテキストは画像ではなく、選択できる普通のテキストとして表示されています。

サイトのトップページだけは以上のように[ys]パーツを使ってヘッダー画像を作成するとCSSを使わずにある程度複雑なテキストを入れることができるようになりました。

このアイキャッチ画像とプラグインを使ってあわせ技でヘッダー画像にテキストを入れて見ました。

FSM Custom Featured Image Captionプラグインを使用

設定画面の表示はここから。

設定画面が表示される。Defauly Classでは<figcaption>のクラス名がwp-caption-textとなり、スタイルは斜体のかかったテキストが表示されます。別のスタイルにして画像の中にテキストを入れるためにCustom Classをチェックし、横のボックスにpolo-caption-textとクラス名をいれます。

これにより思いどおりのCSSでの調整ができます。

FSM Custom Featured Image Caption、これを入れると以下のように表示されるようになる。

Featured image caption（アイキャッチ画像キャプション）、この中にテキストを入れます。これにより、キャプションとしてヘッダー画像の下に表示されるようになります。

このテキストをを画面の右下に入れたいのでCSSで調整します。

/*投稿ヘッダ下の画像*/
/*デフォルトの画像の余白を取る*/
.wp-caption, .featured{
  position: relative;
  padding: 0;
}

/*テキストと位置を調整*/
.polo-caption-text{
  position: absolute;
  bottom: 15px;
  right: 30px; 
  color: white;
  font-size: 12px;
}

うまく右下に入りました。

場合によってはテキストの色を変更したい場合もあると思います。

そのときは下の画面（赤矢印）に直接スタイルを追加設定することもできます（設定画面で「Allow HTML code rendering in the caption」にチェックを入れる必要あり）。そのときはスタイル宣言をしてからCSSを記述してテキスト色をこのページだけ変更することができるようになります。

複雑なレイアウトは簡単ではないが、1行程度のテキスト挿入は以上のように簡単に入ります。一度せっていすれば他のページではテキストを入れるだけなので楽ちんです。

どのページでも同じ画像を入れる

まず整理するために、どのページにでもヘッダー下に同じ画像（またはランダム表示）を入れる場合です。

外観＞カスタマイズ＞ヘッダーメディア

ここに画像を入れる。1枚でもいいし、複数でもいい、複数だとランダムに表示されることになる。そして、ここで設定した画像はヘッダーメニューに表示されているメニューのトップ項目をクリックすると全て同じように表示されることになる。つまりここではページ毎に別の画像を入れることはできないということになる。

カテゴリー別に画像を入れる

これはカテゴリーを作成してから画像を指定する方法になります。

投稿＞カテゴリー＞新規カテゴリー追加

カテゴリー別の画像を入れることができます。
既に作成したカテゴリーでまだ画像を指定していないなら、一覧表示されているカテゴリーから編集を選択して画像を指定することもできます。

これによりカテゴリーのトップページにヘッダー画像が表示されるようになります。

ページ毎に別の画像を入れる

yStandardでページ毎に別の画像を入れたいと思う場合もあります。

外観＞カスタマイズ＞[ys]デザイン＞固定ページ＞

以下のように設定、ポイントは表示タイプと「アイキャッチ画像を表示する」にチェックを入れること。

指定のページの編集画面に移動します。画面右の「歯車アイコン」を選択して「アイキャッチ画像」を指定します。

これで指定のページのヘッダー下にこの画像が表示されるようになります。

この場合のCSS は以下のように修正した。

.ystdb-card__image.is-fit.is-size--normal img{
  height: 141px;
}
.ystdb-card__container.is-horizon.has-image-align-{
  border: 5px solid #CCCC99;
}

例えばここにインラインを実行したところです。薄いピンクのラインが作成せれテキストが強調されます。

そして、以下の赤枠内が段落ブロックによるインラインの設定をすることろになり、これのスタイルを変えることができます。

yStandard Blocksではマーカーボタン(画像左)とインラインスタイルボタン(画像右)を利用できます。
マーカーボタンは3つ、インラインスタイルボタンは追加・削除ができます。

マーカーボタン・インラインスタイル編集の切り替え

画面上部の「マーカーボタン」「その他スタイル」と書かれた部分をクリックすると、マーカーボタンとインラインスタイルの編集モードを切り替えできます。

画面左側で編集、右側でその編集したプレビューができます。

マーカーボタンでの編集方

マーカーボタンは3つ作成できます。編集エリアの各設定を変更してスタイルを編集します。

例えば、下では「ボタン１」の設定を行います。

サイズ、これはPC、タブレット、スマホと設定できるようですが、PC以外はプレビューはここでは確認できません。yStandardはデフォルトで段落のサイズは16pxだと思いますが、わたしは１つ上げているので17pxにしています。
太さはテキストの肉太さを設定、指定無しのデフォルトでいいでしょう。スタイルは指定無しとイタリック体（斜体）が選択できるようです。

その下では、テキストの色とマーカーの色を変更することができます。マーカーは選択した色の濃ゆさや太さも変更できます。右側でリアルタイムにプレビューできるので便利です。

最後の「上級者向け設定」フォントの種類を指定できるようです。

設定が完了したら「選定を保存」をクリックして「ボタン１」の作成完了です。右下に「更新しました。」とメッセージが表示されます。

何故か、インラインスタイルが反映されません。段落の筆アイコンの「１」が変更したはずだがうまくラインの色が変わらないのですが、一度スライダーを動かして変更したら変化させることができました。

設定を保存すると段落ブロックが以下のように変化するので設定が変わったのが分かります。

デフォルトのままで問題ないので一番下の「設定を初期化」でデフォルトに戻しました。

その他のスタイルについて

これはマーカーボタンとは別のスタイルを作成するためのもののようで、下画像の4つ目の鉛筆アイコンから赤枠のように選択肢が増えるようになります。すでに初期設定で５つの設定が追加されているのでそのまま使えます。

それでは例題として自分のスタイルを追加してみたいとおもいます。
上から６つ目、最後の「インラインCodeスタイル」というものを追加してみました。

何故これを追加したかというと段落内に説明のための下のようにコードであることを分かりやすくするためにインラインコードして入れることがよくあります。

前に文章 display: inline-block; 後ろにも文章の間に入るような例

しかし実際はこのインライン設定はすでに段落の中にあるので、わざわざ作る必要は無いのです。
ツールバーの一番右から２つ目にある下向きのチェックマーク見たいなアイコンをクリックすると「インラインコード」という項目が出て使えるようになっています。要素を見てみると<code></code>タグで囲まれていて、他でハイライトなどのコード表示が使われていると影響が出来くるのです。

そこで、独自のインラインコードを作成するために、ここで設定してみたいと思います。ここでの設定はインラインに対して新しいクラスを付与できるということです。

「スタイルの追加」をクリック。

ここでのIDはこのコードのクラス名になります。
このようにタグが追加されます <span class=”ystdb-inline–code-text”>コードテキスト</span>

テキストの上で画面右クリック（Macの場合）すると「要素の詳細表示」が表示されるので確認できます。

表示名は鉛筆メニューを選択したとき出るプルダウンメニュー内に表示される名前で、スタイル及び基本設定のところにも同じ名前が自動で入ります。大きさ、スタイルはyStandardのフォントの大きさは多分16pxですが、入れなくても段落と同じ大きさになると思います。私は17pxにしているのでこれにしました。タブレットとスマホは確認しながら大きさを設定するといいのではないでしょうか。

最後に「設定を保存」をクリックして保存します。

その後、CSSで設定して完了です。コピーして「追加CS」に入れるだけです。

.ystdb-inline--code-text {
  display: inline-block;
  padding: 0.1em 0.25em; /* 文字周りの余白 */
  color: #444; /* 文字色 */
  background-color: #e7edf3; /* 背景色 */
  border-radius: 3px; /* 角丸 */
  border: solid 1px #d6dde4; /* 枠線 */
}

ツールバーで鉛筆アイコンをクリックすると、一番下に作成した「インラインCodeスタイル」が表示されるので段落内のテキストを選択してこれをクリックするだけです。

このように display: inline-block; 表示されます。以上です。

上の画像の「インフィード広告」を選択するとこのようになる。yStandardには一覧表示にこれが表示されるので現在の横幅を測ると360pxだったので下のようにコンテナの幅を360pxで作成して保存した。

チョット意味不明だが、保存する前の状態ということらしい。保存をクリック。

以下のように表示されるのでコードを取得する。

yStandardでのインフィード広告に取得したコードを入れて見る。
場所は、外観 -> カスタマイズ -> [ys]広告から、
コードを入れるとすぐに下のように空きスペースが表示され、そこに広告が入るということがわかる。しばらくは表示されない。しかし、色々ページを見ているといると、割と早く20分もするとぼちぼち表示され始める。

さらにに「PC広告設定」で記事本文下に入れた（左右に表示される予定）、ここも記事本文下なのでスタイルは同じなので同じコードを入れてみた。

早い！、コードを入れてサイトを表示したらすぐに入っていた。但し、入っていないところもある。完全に入るのはしばらく時間がかかるようだ。

せめて使いたい色だけでも自分で登録設定できたらと思うはずである。

自分専用の登録ができます。

方法は、テーマで作成されたカラーピッカーに追加する形で独自カラーピッカーを作成する方法とテーマのカラーピッカーを削除して自分だけのカラーピッカーを作成する方法。
この２つがある様です。

後のカラーピッカーは注意が必要で、これまでの投稿でテーマ作成のカラーピッカーを使って色を設定していた場合、そのカラーを削除した場合、その色が失われてしまうと言うこと（一般的には黒になるとか、yStandardでは色が設定されないクリア状態になる）。
従って、デフォルトで使っている色は基本削除しない方が良いと言うことになる。

yStandardのデフォルトカラーピッカー：

テーマの色設定を残しながら、自分がよく使う色を追加する方法

下の画像で赤枠が追加して色になる。
下の例で最初の赤枠の一つ前にグレーがあるがyStandardのカラー設定で合計３つが追加できるが、そのうちの１つだけを追加した分。

この様に表示される。

yStandardのテーマを例として説明すると：
外観 -> テーマファイルエディッターからstandard-childを選択して「functions.php」を開く。

子テーマの function.php

polo_add_my_color_palette

/* カラーパレットの色追加 */
function polo_add_my_color_palette() {
    $palette = get_theme_support( 'editor-color-palette' );// 既存のパレットに追加する場合
    if ( ! empty( $palette ) ) {
        $palette = array_merge( $palette[0], array(
            array(
                'name'  => 'グレイ-１',
                'slug'  => 'gray1',
                'color' => '#fcfcfc',
            ),
            array(
                'name'  => 'グレイ-２',
                'slug'  => 'gray2',
                'color' => '#f9f9f9',
            ),
            array(
                'name'  => 'グレイ-３',
                'slug'  => 'gray3',
                'color' => '#f6f6f6',
            ),
            array(
                'name'  => 'グレイ-４',
                'slug'  => 'gray4',
                'color' => '#f3f3f3',
            ),
            array(
                'name'  => 'グレイ-５',
                'slug'  => 'gray5',
                'color' => '#f1f1f1',
            ),
            array(
                'name'  => 'グレイ-６',
                'slug'  => 'gray6',
                'color' => '#eeeeee',
            ),
            array(
                'name'  => 'グレイ-７',
                'slug'  => 'gray7',
                'color' => '#ebebeb',
            ),
			array(
                'name'  => 'グレイ-８',
                'slug'  => 'gray8',
                'color' => '#e8e8e8',
            ),
			array(
                'name'  => 'グレイ-９',
                'slug'  => 'gray9',
                'color' => '#e5e5e5',
            ),
            array(
                'name'  => 'グレイ-10',
                'slug'  => 'gray10',
                'color' => '#e2e2e2',
            ),
        ) );
        add_theme_support( 'editor-color-palette', $palette );
    }
}

add_action( 'after_setup_theme', 'polo_add_my_color_palette', 11 );

子テーマの style.css

これを入れなくても、フロントエンドでも問題なく色は表示されている。
説明ではCSSも入れるようになっているので一応、ystandard-childのスタイルシートに入れている。

class名が、テキストの場合は.has-{スラッグ}-color
背景の場合は.has-{スラッグ}-background-color
と「テキスト」と「背景」の色、2つセットで定義する必要がある。

/* 文字色 */
.has-gray1-color {
	color: #fcfcfc;
}
.has-gray2-color {
	color: #f9f9f9;
}
.has-gray3-color {
	color: #f6f6f6;
}
.has-gray4-color {
	color: #f3f3f3;
}
.has-gray5-color {
	color: #f1f1f1;
}
.has-gray6-color {
	color: #eeeeee;
}
.has-gray7-color {
	color: #ebebeb;
}
.has-gray8-color {
	color: #e8e8e8;
}
.has-gray9-color {
	color: #e5e5e5;
}
.has-gray10-color {
	color: #e2e2e2;
}

/* 背景色 */
.has-gray1-background-color {
	background-color: #fcfcfc;
}
.has-gray2-background-color {
	background-color: #f9f9f9;
}
.has-gray3-background-color {
	background-color: #f6f6f6;
}
.has-gray4-background-color {
	background-color: #f3f3f3;
}
.has-gray5-background-color {
	background-color: #f1f1f1;
}
.has-gray6-background-color {
	background-color: #eeeeee;
}
.has-gray7-background-color {
	background-color: #ebebeb;
}
.has-gray8-background-color {
	background-color: #e8e8e8;
}
.has-gray9-background-color {
	background-color: #e5e5e5;
}
.has-gray10-background-color {
	background-color: #e2e2e2;
}

テーマカラーを変更して、オリジナルのカラーだけを表示する

これは、私の場合は実際には使わないが参考までに。

子テーマの function.php

function sample_add_theme_json_color_palette_setting( $theme_json ) {
$new_data = array(
	"$schema"=> "https://schemas.wp.org/trunk/theme.json",
	"version"=> 2,
	"settings"=> array(
		"color"=> array(
			"palette"=> array(
				/*** 自身のカラーパレット ***/
				
				
				/*** TT3のカラーパレット ***/
				array(
					"color"=> "#ffffff",
					"name"=> "Base",
					"slug"=> "base"
				),
				array(
					"color"=> "#000000",
					"name"=> "Contrast",
					"slug"=> "contrast"
				),
				array(
					"color"=> "#9DFF20",
					"name"=> "Primary",
					"slug"=> "primary"
				),
				array(
					"color"=> "#345C00",
					"name"=> "Secondary",
					"slug"=> "secondary"
				),
				array(
					"color"=> "#F6F6F6",
					"name"=> "Tertiary",
					"slug"=> "tertiary"
				)
			)
		)
	)
);

	return $theme_json->update_with( $new_data );
}

add_filter( 'wp_theme_json_data_theme', 'sample_add_theme_json_color_palette_setting' );

CSSの設定が無い。CSSを設定しなくても問題なくカラーを追加できる。

エラーが発生

syntax error, unexpected identifier ” “, expecting “)”

PHPのバージョンの問題？

何でか不明だが、上のエラーコードがよく表示される。うまく行く場合もある？
一旦入れて、編集して保存するとエラーになる。

他のところで編集して作成したファイルをそのままコピー＆ペーストするとエラー無くうまく行く場合が多い。

外観->ウイジェットのサイドバーを開く。

以下のところをそれぞれ選択して「削除」するだけ。これで表示されなくなる。

もし再度必要になったら、H2のブロックを入れタイトルを挿入。下はプラスボタンで「最近のコメント」ブロックを入れると元の状態に戻ることができる。