Twenty Twenty-Fiveにしてみた

パソコン・スマホ

2025年9月9日

私がやっているブログの一つは(このサイトではありません)、Twenty Twentyというテーマを使っていましたが、Twenty Twenty-Fiveに変えてみました。

Twenty Twentyは2020年のデフォルトテーマです。Twenty Twenty-Fiveは今の時点では一番新しいデフォルトテーマです(2025年9月10日)。

Twenty Twenty-One以降、シンプルすぎて、何かしら手を加えなければならないテーマになりまsた。それが、自分の手で好きなように作っていく面白さがあるということだと思うのですが、個人的には見栄えのために頭を捻るのはどうかな、そのまま使えるのが一番、と思っているので、手を出さずにきました。

ですが、ワードプレスがこういう路線なのであれば、ユーザーとしては合わせて行くべきだろうな、と思い直して、出遅れましたが、Twenty Twenty-Fiveをいじってみることにしました。

まず、テーマをインストールし、有効化。

ナビゲーションメニューを削除

最初に、ナビゲーションメニューがデカいのにびっくり。そのサイトは、特に固定ページが多いので、開いたとたん、PC画面の3分の2がナビゲーションメニューです。まず、これを取ることにしました。

何か変えようと思えば、ほとんど「エディター」をさわらなければなりません。これが億劫で、これまで遠ざかっていたのですが、やむを得ません。

  1. WordPressのダッシュボードにログイン。
  2. 左側のメニューから「外観」→「エディター」を選択。
  3. 画面上部にあるナビゲーションメニューの任意の場所をクリックし、選択します。
  4. ブロックが選択されたら、画面右側の設定サイドバーを確認します。表示されていなければ、右上の歯車のアイコン⚙️をクリック。
  5. ナビゲーションブロックの右側にある縦に3つ並んだ点「」をクリックします。
  6. 本当に削除するか聞いてきます。「削除」
  7. ドロップダウンメニューから「ナビゲーションを削除」を選択します。

削除してしまうと、復活できないようですが、ま、よいでしょう。

「最新の投稿」の大きさを変える

  1. WordPressのダッシュボードにログイン。
  2. 編集したい固定ページまたは投稿を開きます。
  3. 「最近の投稿」ブロックをクリックして選択します。
  4. 右側のサイドバーに表示されるブロック設定パネルを確認します。歯車アイコン(⚙️)をクリックして表示させることができます。
  5. 設定パネル内の「レイアウト」や「スタイル」などの項目でサイズ調整が可能です。

SからMに変更しました。これで、コンテンツのフォントサイズとバランスするようになりました。

2025年9月10日

今の段階ではシンプルです。私はシンプルがとても好きですが、ちょっと度が過ぎるくらいシンプルです。

とりあえず、今日の目標は、「見出し」のデザインかな。見出し2と見出し3がちょっと大きさが違うだけなので紛らわしいので。次に、ヘッダー部分を何かもう少し、カラーを入れるか何か、手を加えてみたいと思います。

見出しの装飾

  1. 外観 → エディター(サイトエディター) を開く
  2. 「スタイル」アイコンをクリック
  3. 「ブロック」 → 「見出し」を選択

変更できるのですが、この範囲であれば変更するまでもない、となりました。

特に引っかかるのは、H2 H3 H4一緒に同じパターンに変更される、枠をつけると同じ枠が全部につく、ところが不満。調べたのですが、現在のところ、「見出し」ブロックのスタイル設定は、すべての見出し(H2~H6)に共通で反映される仕様のようです。

なお、「保存」ボタンが見つからずに時間をかけたのですが、これは「○個の変更をレビュー」をクリックすると「保存」ボタンが出る仕組みになっていました。

ヘッダーの背景色

「ブログタイトル部分」は、「エディター」→「テンプレート」のヘッダー領域に含まれているようでした。

あと、外観 → エディター →「テンプレートパーツ」→「ヘッダー」でもやれそうでした。

ようでした、とか不確かな言い方をするのは、若干やってみたのですが、これも、デフォルトで良いかな、と思い直して途中でやめたからです。

2025年9月13日

見出しの装飾

プラグイン、Simple Custom CSS and JSを入れて、cssを追加しました。

/*見出しの装飾*/ 
h2 {
  padding: 1rem 2rem;
  border-left: 5px solid #000;
  background: #F0FFE8;
}

h3 {
  border-bottom: 3px solid #000;
  margin-bottom: 10px; /* ボーダーの下側(次の要素との間)の余白を調整 */
}

ブログタイトルの背景

以下に手順を詳しく説明します。

  1. WordPressのダッシュボードにログインします。
  2. 左側のメニューから「外観」>「エディター」を選択します。

エディター画面が表示されたら、サイトのヘッダー部分を編集していきます。

  1. 「パターン」を選択します。
  2. 右に表示されるヘッダーから該当のものをダブルクリックします。
  3. 右側の設定パネル(サイドバー)を確認します。ヘッダーの背景色を変更するには、ヘッダー全体を囲んでいるグループブロックや行ブロックを選択する必要があります。リストビューで「ヘッダー」の下にあるブロック(例: グループ、行など)をクリックして、どのブロックがブログタイトルとその背景を含んでいるか確認しましょう。

ヘッダーの背景色を制御しているブロックが見つかったら、以下の手順で色を変更します。

  1. 右側の設定パネルで「スタイル」タブ(円形のアイコン)を選択します。
  2. 」の項目を開きます。
  3. 背景」の項目をクリックします。
  4. 色見本が表示されるので、好きな色を選択するか、特定のカラーコード(例: #FF5733)を入力してカスタムカラーを設定します。

色の設定が終わったら、変更をサイトに適用します。

  1. エディター画面の右上にある「保存」ボタンをクリックします。
  2. 変更内容を確認し、再度「保存」をクリックします。
  3. サイトのフロントエンド(実際の表示画面)を開いて、ブログタイトルの背景色が変更されていることを確認してください。

一応、これでタイトルの背景をいれることができましたが、しっくりこないので、元に戻しました。結局、エディター画面の「スタイル」タブから、スタイルを選択して、背景全体を変更しました。


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