カテゴリー
お役立ち情報

Twenty Twentyの編集②

前回はヘッダーメニューやフッターの編集方法、固定ページやカテゴリーページの作成についてを説明しましたが、今回はより高度な記事タイトルのサイズ変更や記事本文の横幅の変更、サイドバーの設置の仕方について説明します。

前回の記事はこちら
>>Twenty Twentyの編集①

記事タイトルのサイズ変更
記事本文の横幅の変更
カラムを利用したサイドバーの付け方

CSSを使いますが、それほど難しい作業や複雑な作業はありませんので、安心してください。

①記事タイトルのサイズ変更

デフォルトのままだとサイズがかなり大きく、少し長めのタイトルを付けると2段になってしまい見栄えが非常に悪くなってしまいますよね。
サイズを変更すれば、1行でスッキリ表示することが出来ますよ。

サイズを変更するには下記CSSを追加します。

管理画面の外観→カスタマイズ

ページが切り替わったら、「追加CSS」を選択

展開された入力フィールドに、下記CSSを追加します。

.entry-header .entry-title {
font-size: 50px;
}

数字を変更すると、記事タイトルのサイズも変わります。

サイズ10px
サイズ100px

びいちまとでは60pxに設定しています。

②記事本文の横幅の変更

記事本文のスペースは、デフォルトのままだとかなり細くなってしまいますよね。
次に説明するサイドバーを設置すると、さらに細くなってしまうので、ここで横幅のサイズを調整しましょう。

さきほど同様、管理画面→カスタマイズ→追加CSSを選択
入力フィールドに下記CSSを追加します。

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
max-width: 95rem;
width: calc(100% – 4rem);
}

ここのmax-widthの数字を変更すると、本文横幅が変更されます。

10以下だと1列しか表示されません
100くらいの値を指定すると、ちょうど良いサイズになります。

設定が完了したら、公開をクリックしてください。
公開をしないと設定が保存されません。

③サイドバーを追加する

Twenty Twentyにはサイドバーがありません。
ウィジェットで編集できるのはフッターのみとなります。
ではどうすれば良いか、ということなのですが、「カラム」という機能を使います。

厳密にいえばサイドバーではないのですが、このカラムを使うことにより、サイドバーのように見せることが可能となります。

記事の新規追加をする際に、カラムのブロックを選択します。

ブロックを追加→レイアウト要素→カラム

カラムには5種類あります。
自分のサイトのレイアウトにあったものを選択してください。

カラムを選択したら、それぞれのフィールドに文章やブロックを入力していきます。

カラムフィールド内で入力している間は、横幅は選択したカラムのサイズ幅で表示されます。
カラム外のフィールドに入力すると、横幅全体のサイズに表示されます。

大きめにとったカラムフィールドに本文、小さめのカラムフィールをサイドバーとして使うことが多いと思います。
例として、小さめのカラムフィールドに過去の記事のウィジェットを入れてみたいと思います。

ウィジェットブロックから最新の記事を選択

最新の記事は、各記事にアイキャッチ画像を入れていれば画像付きで表示させたり、カテゴリごとに絞って表示するこが可能です。

これでサイドバー付きのページになったかと思います。
HTMLやCSSを駆使すればもっとしっかりしたサイドバーになりますよ。

カテゴリー
お役立ち情報

Twenty Twentyの編集①

WordPressのテーマの1つであるTwenty Twentyのヘッダーメニューやフッターの編集の方法を説明していきます。

ヘッダーメニューを編集する
フッターを編集する

①ヘッダーメニューを編集する

ページ右上の水平メニューと、展開メニューの編集方法です。

管理画面の外観メニューを選択します。
すると現在のメニュー構造が表示されます。

メニュー項目として追加できるのは

固定ページ
過去に投稿した記事
カスタムリンクで好きなページ
カテゴリー

の4種類となります。

初期状態では「お問い合わせ」や「会社概要」などが入っていると思います。
不要な項目は各項目の▼をクリックし、展開された追加設定オプションの削除を選択し保存てください。

固定ページやカテゴリーページがないとメニューの編集はできません。
そのため、まず初めに固定ページとカテゴリーページを作成します。

この部分にチェックが入っていれば、固定ページを作成すると自動的にメニュー項目に追加されます。

固定ページ

「会社概要」や、「このサイトについて」、「プライバシーポリシー」など1ページのみで完結するページになります。

管理画面より、固定ページ→新規追加を選択
ページタイトルとページの内容を入力していきます。

入力が完了したら、公開しましょう。
公開しないとメニュー項目に表示されません。

公開が完了すると、自動的にメニュー項目に追加されます。

カテゴリーページを作る

管理画面の投稿→カテゴリーを選択
名前(カテゴリー名)、スラッグ(URL)を入力し、新規カテゴリーを追加

カテゴリーを作成したら、管理画面の外観→メニューへ

メニュー項目を追加→カテゴリー→すべて表示
作成したカテゴリーから、メニューに追加したいものにチェックを入れて、メニューに追加
メニュー構造に追加されたらメニューを保存で完了です。

②フッターを編集する

管理画面の外観→ウィジェットを選択

twenty twentyではフッター1とフッター2の2項目に分かれています。
利用したいウィジェットをフッター1またはフッター2へドラッグ&ドロップするか、各ウィジェットの▼を選択しそれぞれのフッターへ追加します。

フッターから削除する場合は、フッター側からウィジェット側へドラッグ&ドロップするか、フッターの▼から項目を展開し、削除をクリックすることでフッターの内容を削除することが出来ます。

以上がWordPress Twenty Twentyのヘッダーとフッターの編集方法となります。

次回は記事タイトルのサイや記事本文の横幅の編集、サイドバーの付け方などを解説していきます。