WordPress設定: Hummingbird

はじめに

レンタルサーバーを契約し，ブログシステム WordPress とテーマ Hummingbid のインストールが完了したら，Hummingbird を設定します．ここでは，その設定方法を示します．ただし，ここでの設定ではテーマは「hummingbird_custom」である必要があります．もし，このテーマーではない場合は設定が必要です(初期設定: テーマ)．

Hummingbird はインストールしただけで，センスの良いブログができるわけではありません．写真を貼り付けたりして，自分のページの外観を決める必要があります．この外観を決めるのは，あなたです．Hummingbird はその仕組みを提供します．言うならば，絵を書くための便利な道具で，絵を書くのはあなたです．このページはその道具の使い方の説明をします．

設定の基本

Hummingbird を設定するための基本的ことを説明します．初心者向けです．かなりアタリマエのことを記述していますので，コンピューターに慣れた人は読む必要はないかもしれません．

ログイン

Hummingbird のカスタマイズは，WordPress のダッシュボードから行います．そのために，少なくとも一度は，WordPress へのログインの操作が必要です．一度，ログインしログイン状態のままだと，以下の操作は不要です．サイトの下の方にある「サイト管理」をクリックすると，ダッシュボードを開くことができます．

WordPress にログインし，テーマのカスタマイズのページを表示する方法を示します．

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

設定の基本操作

サイトにログインし，テーマのカスタマイズを表示させます．そこにはカスタマイズのためメニューが表示されているはずです．その様子を図1に示します．このメニューをクリックして，カスタマイズを行います．「サイト基本情報 >」以下が，カスタマイズのメニューです．現在のテーマ hummingbird_custom の 変更 をクリックすると，テーマの変更ができます．

設定は，設定のメニューをクリックすることから初めます．例えば，メニュー「サイト基本情報 >」をクリックします．すると，設定画面が現れます．記入すると，右側に反映されたされた画面が現れます．変更結果を公開する場合は，画面の上部にある 公開 をクリックします．すると，変更結果が反映されます．また，隣の歯車ボタンをクリックすると，「公開」と「下書きとして保存」，「予約公開」，「変更を破棄」などの選択できます．

設定が終わるとそのカスタマイズを終わるメニュー「< カスタマイズ中サイト基本情報」(例)をクリックします．以上で，ひとつの項目の設定が終わりです．必要な項目を設定すれば，サイトの外観が決まります．

図1: テーマ(Hummingbird)のカスタマイズページ

何が設定できるか

前節に示したようにWordPress にログインし，外観 > カスタマイズでテーマのカスタマイズができます．ここの左側のメニューからカスタマイズの内容を選択します．メニュー毎のカスタマイズの内容は，以下のとおりです．

どこまで設定が必要か

全てを設定するのは，かなり面倒です．まずはある程度の設定を行い，記事を作成することを勧めます．最低限の設定は，「サイト基本情報」と「サイトカラー設定」です．これらを設定すると，それなりのブログサイトになります．そして，記事を書きましょう．

Hummingbird の設定

ここでは，Hummingbird のメニュー毎の具体的な設定方法を示します．ここでの設定で，ブログの外観を決めることができます．

サイト基本設定

ここでは，サイトのタイトルとキャッチフレーズ，サイトアイコン (ファビコン) を設定します．ファビコンは設定しなくても良いです．

サイトのタイトルとキャッチフレーズが，ブログサイトの最低限の設定です．ファビコンの設定は面倒なので，後に回すこともできます．

[作成方法の例] ファビコンは，GIMP を使い作成することができます．

1. GIMP を起動します．そして，ファイル > 新しい画像 を選択します．
2. ダイアログ「新しい画面を作成」が現れます．画像サイズを 512 × 512 にします．そして，OK(O) をクリックします．512 × 512 以上の正方形でなくてはなりません．
3. キャンバスが現れます．レイヤー(L) > 透明部分(A) > アルファチャンネルを追加(H) を選択します．
4. 背景の色を指定します．選択(S) > すべて選択(A) を選びます．そして，ツールボックスの現在の色をクリックします (参考図)．そして，背景色を決めます．ツールボックスの塗りつぶしを選択し，キャンバスをクリックします．
5. 次に，デザインを決めます．単純なものが良いです．ツールボックスで現在の色を設定します．そして，文字を書いたりします．一旦．png フォーマットで保存します．
6. かっこ良くするために，角を丸めます．選択(S) > すべて選択(A) を選びます．そして，選択(S) > 角を丸める(E…) を選びます．そして，半径を設定します．
7. 選択(S) > 選択範囲を反転(I) を選びます．
8. 編集(S) > 消去(E) を選びます．
9. ping フォーマットで保存します．

図2: テーマ(Hummingbird)のサイト基本情報の設定結果

サイトカラー設定

サイトカラーの設定では，ブログの色を決めることができます．カラーパレットから設定することもできますし，16進数の直接入力も可能です．

図3: テーマ(Hummingbird)のサイトカラーの設定結果

サイトロゴ・アイコン

ここでは，サイトロゴとアイコンを登録します．最初は登録しなくても大丈夫です．

• ロゴ作成には，様々な WEB サイトを利用できます．例えば，「ロゴ作成が無料のサイト24選!おしゃれなロゴジェネレーター」に紹介されています．私は「DESIGNEVO」を利用しました．
• アイコンの作成にも，WEB サイトが利用できます．元画像からアイコンを作成する「iconifier.net」が便利です．

図4: サイトロゴ・アイコンの設定の結果

CSS の設定

ブログの外観の変更は，CSSの変更で行います．Hummingbird の子テーマである「hummingbird_custom」の CSS を変更します．

方法

前節に示したようにWordPress にログインし，外観 > カスタマイズを選択します．そして，追加 CSS をクリックします．すると，CSS が記載可能になります．

注意事項

CSS を記述する上でいくつかの注意を示します．

1. CSS を設定する場合，親テーマのクラスの情報が必要となります．これは，ブログのソースを見ることで，クラスを推測することができます．ソースはブラウザを使うことで見ることができます．目的のページを開き，右クリックで「ページのソースを表示」を選択します．
2. 理由は分かりませんが，子テーマの 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;
}

ページ作成情報

参考資料

更新履歴

last update:2021/10/14 22:20:38