WordPress設定: Hummingbird

Hummingbird を設定するための基本操作を説明します．初心者向けの内容ですので，WordPress の管理画面に慣れている人は，必要なところだけ読んでください．

ログイン

Hummingbird のカスタマイズは，WordPress のダッシュボードから行います．ログイン済みの場合は，サイト下部などにある「サイト管理」からダッシュボードを開けます．ログインしていない場合は，ユーザー名とパスワードを入力してログインします．

WordPress にログインし，テーマのカスタマイズ画面を表示する手順は次のとおりです．

1. 下部のメタ情報にある「ログイン」をクリックします(参考図)．
2. ユーザー名とパスワードを入力し，ログインをクリックします(参考図)．
3. ダッシュボードが表示されます(参考図)．WordPress の設定は，この画面から行います．
4. ダッシュボードの 外観 > カスタマイズ をクリックします(参考図)．
5. カスタマイズ画面が表示されます(参考図)．ここでテーマのカスタマイズを行います．

設定の基本操作

カスタマイズ画面の左側には，設定メニューが表示されます．その例を図1に示します．「サイト基本情報」「サイトカラー設定」「追加 CSS」などのメニューを開き，必要な項目を設定します．現在のテーマとして hummingbird_custom が表示されていることも確認しておきます．

設定は，メニューをクリックして項目を開くところから始めます．例えば「サイト基本情報」を開くと，サイトタイトルやキャッチフレーズを入力できます．入力した内容は右側のプレビューに反映されます．変更を公開する場合は，画面上部の 公開 をクリックします．歯車ボタンからは，「下書きとして保存」「予約公開」「変更を破棄」などを選べます．

ひとつの項目の設定が終わったら，左上の戻るボタンでメニューに戻ります．必要な項目を順に設定していくと，サイト全体の外観が整っていきます．

何が設定できるか

Hummingbird のカスタマイズ画面では，左側のメニューから設定内容を選択します．主なメニューと設定内容は，以下のとおりです．

メニュー	設定内容
サイト基本情報	サイトのタイトル，キャッチフレーズ，サイトアイコンを設定します．
サイトカラー設定	サイト内で使う色を設定します．
サイトロゴ・アイコン	サイトロゴやアイコンを設定します．
トップページ設定	トップページの表示，ヘッダー画像，リンクなどを設定します．
投稿・固定ページ設定	見出し，シェアボタン，アイキャッチ画像，投稿日・更新日の表示，Facebook 関連表示などを設定します．
その他オプション	サイト内検索，説明文，ヘッダー，メインカラム，アニメーション，記事レイアウトなどを設定します．
アクセス解析コード	Google Analytics などのアクセス解析コードを設定します．
背景画像	背景画像を設定します．
メニュー	サイト内のナビゲーションメニューを設定します．
ウィジェット	サイドバーや広告，補助的な表示部品を設定します．
ホームページ設定	トップページと投稿一覧ページの表示方法を設定します．
追加 CSS	サイトの外観とレイアウトを調整する CSS コードを記述します．

どこまで設定が必要か

最初からすべてを設定する必要はありません．まずは「サイト基本情報」と「サイトカラー設定」を整え，ブログとして読める状態にしてから記事を書き始めるとよいでしょう．ロゴ，アイコン，細かな CSS は，必要になってから少しずつ調整できます．

ここでは，Hummingbird のカスタマイズメニューのうち，最初に設定しておきたい項目を説明します．サイト基本情報，サイトカラー，ロゴとアイコンを整えるだけでも，ブログの印象はかなり変わります．

サイト基本情報

ここでは，サイトのタイトル，キャッチフレーズ，サイトアイコン (ファビコン) を設定します．タイトルとキャッチフレーズは，読者にサイトの内容を伝えるための最低限の設定です．ファビコンは後から設定しても構いません．

[作成方法の例] ファビコンは，GIMP を使って作成できます．

1. GIMP を起動し，ファイル > 新しい画像 を選択します．
2. ダイアログ「新しい画像を作成」が表示されたら，画像サイズを 512 × 512 にします．そして，OK(O) をクリックします．WordPress のサイトアイコンは，512 × 512 以上の正方形画像が推奨されます．
3. キャンバスが表示されたら，レイヤー(L) > 透明部分(A) > アルファチャンネルを追加(H) を選択します．
4. 背景色を決めます．選択(S) > すべて選択(A) を選び，ツールボックスの現在の色をクリックします(参考図)．背景色を決めたら，塗りつぶしツールでキャンバスをクリックします．
5. 次に，アイコンのデザインを決めます．小さく表示されるので，単純で分かりやすいデザインにします．文字や図形を配置したら，いったん PNG 形式で保存します．
6. 見栄えをよくするために，必要なら角を丸めます．選択(S) > すべて選択(A) を選び，続いて 選択(S) > 角を丸める(E…) を選びます．
7. 選択(S) > 選択範囲を反転(I) を選び，外側の不要な部分を選択します．
8. 編集(S) > 消去(E) を選び，不要な部分を透明にします．
9. 完成したら，PNG 形式で保存します．

サイトカラー設定

サイトカラー設定では，ブログ全体の色を決めることができます．カラーパレットから選ぶことも，16進数のカラーコードを直接入力することもできます．背景色，リンク色，アクセント色をそろえると，ページ全体に統一感が出ます．

サイトロゴ・アイコン

ここでは，サイトロゴとアイコンを登録します．最初は必須ではありませんが，ロゴやアイコンがあると，サイトの印象が伝わりやすくなります．

• ロゴは画像編集ソフトや Web サービスで作成できます．文字だけのロゴでも，色と余白を整えると見やすくなります．
• アイコンは，512 × 512 以上の正方形画像を用意して登録します．小さく表示されるため，複雑な図柄よりも単純な図柄が向いています．

細かな外観の変更は，CSS で行います．ここでは，WordPress の 外観 > カスタマイズ > 追加 CSS に CSS を記述する方法を説明します．親テーマのファイルを直接編集しないことが大切です．

方法

WordPress にログインし，外観 > カスタマイズ を開きます．次に 追加 CSS をクリックします．入力欄に CSS を書くと，右側のプレビューで表示を確認できます．問題がなければ 公開 をクリックします．

注意事項

CSS を記述するときは，次の点に注意します．

1. 変更したい場所のクラス名や HTML 構造を確認します．ブラウザーの「ページのソースを表示」や開発者ツールを使うと，どの CSS が効いているかを調べられます．
2. CSS の書き間違いがあると，表示が崩れたり，設定が保存できなかったりすることがあります．変更は少しずつ行い，公開前にプレビューを確認します．
3. CSS のコメント自体は通常使えますが，保存時にエラーが出る場合は，コメントや直前に追加したコードを一度外して，どこで問題が起きているか確認します．

設定例

記事の見出し

記事の見出しの幅が広すぎる場合は，CSS で幅や色を調整できます．

記事の見出しの設定

001   .entry-content h2{
002       padding-top: 3px;
003       padding-bottom: 3px;
004   }
005   
006   .entry-content h3{
007       padding-top: 3px;
008       padding-bottom: 3px;
009   }
010   
011   .entry-content h4{
012       padding-top: 3px;
013       padding-bottom: 3px;
014   }

サイドページの見出し

サイドページの見出しも，幅や色を変更できます．

サイドページの見出しの設定

001   h4.widgettitle span{
002       padding-top: 3px;
003       padding-bottom: 3px;
004       background-color: DarkSlateBlue;
005   }

ギャラリーの設定

ブロックエディター (Gutenberg) で作成したギャラリーにリストマークが表示される場合は，CSS でリストマークを消します．

001   ul.wp-block-gallery{
002       list-style: none;
003   }

私の設定

私のブログ「東京案内」で使っている CSS の例は以下のとおりです．

子テーマ「hummingbird_custom」の CSS

.entry-content h2{
    padding-top: 3px;
    padding-bottom: 3px;
}

.entry-content h3{
    padding-top: 3px;
    padding-bottom: 3px;
}

.entry-content h4{
    padding-top: 3px;
    padding-bottom: 3px;
}

h4.widgettitle span{
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: DarkSlateBlue;
}

ul.wp-block-gallery{
    list-style: none;
}

参考資料

更新履歴