hueman テーマのカスタマイズ WEBページデザイン編 ～WordPressでブログを始める～
Contents
テーマのカスタマイズ
カスタマイズといってもコードを書くのでは無くて管理画面から「カスタマイズ」ボタンを押してhuemanの設定をするレベル。
WordPressのメニューから外観ー＞カスタマイズでカスタマイズ画面を表示する。
左側に設定用のメニューが並んでいて右にプレビューが表示されている。
画面に左下にパソコンとタブレットとスマートフォンのアイコンが並んでいて、クリックすると右側のプレビュー表示が変わる。
Webページデザイン
尚、今回の記事はWebページデザイン（タイトル、ロゴ、フォント、色、背景、ソーシャル、リンク）までの設定を対象としている
サイト情報
左のメニューから「WEBページデザイン（タイトル、ロゴ、フォント、色、背景、ソーシャル、リンク）」「サイト情報：ロゴ、タイトル、タグライン、サイトアイコン」と進んで以下の情報を設定した。
サイトタイトルをヘッダーに表示 | オンにした。 文字通りサイトのタイトルをヘッダーに表示するかどうか |
ヘッダーにロゴを表示 | オフ、ヘッダーにロゴは表示しない事にした |
サイトのタイトル | ”そう備忘録” とした |
キャッチフレーズ | ”note to self”とした。 基本的に後から何をしたのか忘れないようにする為のメモなので |
サイト情報（タグライン）を表示 | オンにした。 上のキャッチフレーズをタイトルの右側に表示するかどうかの設定 |
サイトアイコン | コーヒーカップのアイコン（512 ✕ 512ピクセル）をPhotoshopで加工して設定した。 ここはファビコン(Favicon)と言ってタブの左側に表示される小さいアイコンの事 |
これで「公開」ボタンを押せば保存される。（記事の公開とはまた別）
全般デザイン設定
左のメニューから「WEBページデザイン（タイトル、ロゴ、フォント、色、背景、ソーシャル、リンク）」「全体デザイン設定：フォント、色、・・・」で以下の設定を行った。
フォント | ”Ubuntu, Latin Cyrillic-Ext”を選択した。 ここで指定したフォントは英文字にしか反映されない。 2018年9月にWebフォント（Google Fonts＋日本語）に変更した。 |
フォントサイズ設定 | 当初は14pxに設定。 最近の他のブログを見るとみんなフォントサイズが大きくて見やすい。 改めて見直すと確かに14pxだと詰まった様に見えるのでその後に16pxに変更した。 |
ウェブサイトの最大幅 | 1380px |
ボックスレイアウト | オフにした。 違いが正直良くわからなかった。 |
サイドバーの幅 | ウィジェットに30pxの余白 |
左サイドバーのカラー。 カラーは全体的に落ち着いた色を選んだ | |
右サイドバーのカラー | |
Body の背景色 | Bodyの背景色 2018年11月13日追記 以前はここでBodyの背景色を設定していたがBody Backgroundmメニューで設定するように変更されていた |
画像の角丸 | ３を指定した。 数字を指定するとサムネイルやアップした画像の角が丸くなる |
外部リンクの後にアイコンを表示 | オンにした。 記事中に外部リンクをはったときにリンクの後ろに矢印アイコンが表示されて外部へのリンクだという事が分かる様になる。 ブログ内のリンクの場合は表示されない。 |
外部リンクを新しいタブで表示 | オンにした。 外部リンクをクリックした時に新しいタブで開くようにした |
コンテンツの背景色の変更
投稿本文の背景色が白の為、背景色が白の画像を貼り付けた時に境目が見づらかった。
画像に縁の加工をしても良いのだが毎回加工するのも面倒なのでいっそのこと背景色を変更することにした。
しかし「全般デザイン設定」の中に背景色の設定があるのかと思ったが見つからず。
新しく追加されたBody Backgroundもちょっと違うのでstyle.cssで対応することにした。
WordPressのメニューから外観ー＞テーマの編集で子テーマのstyle.cssを呼び出して
section.content{
background-color:#f7f6fb; /* ラベンダーアイス */
}を追加した。
一旦は背景色を白からラベンダーアイスに変更して貼り付けた画像との境目を見やすくしたが再度変更。
やはり背景色は白に戻して画像にcssで縁を付ける事にした。
style.cssにオリジナルのクラスを追加
/* 画像用のクラス */
.r_image{
border : 1px solid #f5f5f5; /* 枠線を設ける */
margin: 0.5em 0em 1em 0em; /* 上、右、下、左 枠外とのマージン */
}画像を貼り付けた後に画像をクリックして「Editbottun」で編集で呼び出す
上級者向け設定の画像CSSクラスに先程作成したクラス名（r_image）を設定して「更新」ボタン
以上で画像に枠が表示されるようになった
ソーシャルリンク
自分のSNSへのリンクを追加する機能。
何も設定しなかった。
ソーシャルリンクはプラグインで良さげなのがいくつか出ているみたいなのでそのうち追加するつもり。
Twitter、Facebook、Instagramのソーシャルリンクを追加した。
結局プラグインでは無くHuemanのテーマのカスタマイズで追加したアイコンが一番しっくり来るのでこちらで設定をする事にした。
ソーシャルリンクメニューから「Add New」ボタンをクリックする。
アイコンとURLを設定する。
アイコンを選択 | SNSのアイコンを一覧から選択する 上記の例はTwitter |
ソーシャルリンクURL | Twitterの自アカウントへのURLを指定して「Add it」ボタンをクリックする |
追加の設定メニューが表示される
タイトル | アイコンにマウスオーバーした時に表示されるタイトル |
アイコンの色 | アイコンの色 |
ターゲットをリンク | チェックをするとSNSアイコンをクリックした時に新しいタブで開く チェックした |
同様にFacebook、Instagramも追加した。
Body Background
ふと気がついたら新しいメニューが追加されていた事に気がついた。
この記事を書いた時にはBody Backgroundメニューは無かったので、どこかのバージョンアップで追加されたのだと思う。
Body部の背景色、画像の設定が行える
尚、テストの為、一時的に背景色、背景画像設定したがひとまず初期設定に戻している
サイト全体 body 背景 色 | ホーム以外のページのBody部の背景色を指定する
|
サイト全体 body 背景 画像 | ホーム以外のページのBody部の画像を指定する 画像を選択すると以下の「繰り返し」、「背景画像の固定設定」、「背景の位置」、「背景サイズ」のメニューが表示されて設定可能になる 背景画像を指定したパターン
|
サイト全体 body 背景 繰り返し | ホーム以外 以下の中から選択する
|
サイト全体 body 背景 背景画像の固定設定 | ホーム以外 以下の中から選択する
|
サイト全体 body 背景 背景の位置 | ホーム以外 以下の中から選択する
|
サイト全体 body 背景 背景サイズ | ホーム以外 background-size の CSS プロパティを指定する デフォルトはcover |
Body Background in context : Home 色 | ホームのBody部の背景色を指定する
|
Body Background in context : Home 背景画像 | ホームのBody部の画像を指定する 画像を選択すると「繰り返し」、「背景画像の固定設定」、「背景の位置」、「背景サイズ」のメニューが表示されて設定可能になる ※ホーム以外と同様 |
繰り返し | ホーム 以下の中から選択する
|
背景画像の固定設定 | ホーム 以下の中から選択する
|
背景の位置 | ホーム 以下の中から選択する
|
背景サイズ | ホーム background-size の CSS プロパティを指定する デフォルトはcover |
続く
設定項目数が多いので続きの設定は次回の「hueman テーマのカスタマイズ フロントページのコンテンツ編」の記事で
1件の返信
[…] https://www.souichi.club/wordpress/customizetheme/ […]