hueman テーマのカスタマイズ WEBページデザイン編 ~WordPressでブログを始める~ | そう備忘録

hueman テーマのカスタマイズ WEBページデザイン編 ~WordPressでブログを始める~

前回の「子テーマの作成」の記事

テーマのカスタマイズ

カスタマイズといってもコードを書くのでは無くて管理画面から「カスタマイズ」ボタンを押してhuemanの設定をするレベル。

WordPressのメニューから外観ー>カスタマイズでカスタマイズ画面を表示する。

左側に設定用のメニューが並んでいて右にプレビューが表示されている。

画面に左下にパソコンとタブレットとスマートフォンのアイコンが並んでいて、クリックすると右側のプレビュー表示が変わる。

それぞれの端末でどの様に表示されるのかがプレビューできるのは便利

テーマのカスタマイズ hueman

テーマのカスタマイズ タブレット表示

テーマのカスタマイズ スマートフォン表示

Webページデザイン

尚、今回の記事はWebページデザイン(タイトル、ロゴ、フォント、色、背景、ソーシャル、リンク)までの設定を対象としている

Hueman Webページデザイン

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メニューで設定するように変更されていた

画像の角丸

3を指定した。

数字を指定するとサムネイルやアップした画像の角が丸くなる

外部リンクの後にアイコンを表示

オンにした。

記事中に外部リンクをはったときにリンクの後ろに矢印アイコンが表示されて外部へのリンクだという事が分かる様になる。

ブログ内のリンクの場合は表示されない。

外部リンクを新しいタブで表示

オンにした。

外部リンクをクリックした時に新しいタブで開くようにした

コンテンツの背景色の変更

2018年11月28日 追記

投稿本文の背景色が白の為、背景色が白の画像を貼り付けた時に境目が見づらかった。

画像に縁の加工をしても良いのだが毎回加工するのも面倒なのでいっそのこと背景色を変更することにした。

しかし「全般デザイン設定」の中に背景色の設定があるのかと思ったが見つからず。

新しく追加されたBody Backgroundもちょっと違うのでstyle.cssで対応することにした。

WordPressのメニューから外観ー>テーマの編集で子テーマのstyle.cssを呼び出して

section.content{
background-color:#f7f6fb; /* ラベンダーアイス */
}

を追加した。

背景色を変更した

2018年12月2日 更に追記

一旦は背景色を白からラベンダーアイスに変更して貼り付けた画像との境目を見やすくしたが再度変更。

やはり背景色は白に戻して画像にcssで縁を付ける事にした。

style.cssにオリジナルのクラスを追加

/* 画像用のクラス */
.r_image{
border : 1px solid #f5f5f5; /* 枠線を設ける */
margin: 0.5em 0em 1em 0em; /* 上、右、下、左 枠外とのマージン */
}

画像を貼り付けた後に画像をクリックして「Editbottun」で編集で呼び出す

EditButton

上級者向け設定の画像CSSクラスに先程作成したクラス名(r_image)を設定して「更新」ボタン

以上で画像に枠が表示されるようになった

画像cssクラス

ソーシャルリンク

自分のSNSへのリンクを追加する機能。

何も設定しなかった。

ソーシャルリンクはプラグインで良さげなのがいくつか出ているみたいなのでそのうち追加するつもり。

2019年1月9日 追記

Twitter、Facebook、Instagramのソーシャルリンクを追加した。

結局プラグインでは無くHuemanのテーマのカスタマイズで追加したアイコンが一番しっくり来るのでこちらで設定をする事にした。

ソーシャルリンクメニューから「Add New」ボタンをクリックする。

 ソーシャルリンクの追加

アイコンとURLを設定する。

ソーシャルリンク

アイコンを選択

SNSのアイコンを一覧から選択する

上記の例はTwitter

ソーシャルリンクURL

Twitterの自アカウントへのURLを指定して「Add it」ボタンをクリックする

追加の設定メニューが表示される

Twitterのソーシャルリンクの設定

タイトル

アイコンにマウスオーバーした時に表示されるタイトル

アイコンの色

アイコンの色

ターゲットをリンク

チェックをするとSNSアイコンをクリックした時に新しいタブで開く

チェックした

表示例(Twitter)

表示例(Twitter)

同様にFacebook、Instagramも追加した。

SNSリンクの追加

Body Background

2018年11月13日追記

ふと気がついたら新しいメニューが追加されていた事に気がついた。

この記事を書いた時にはBody Backgroundメニューは無かったので、どこかのバージョンアップで追加されたのだと思う。

Body部の背景色、画像の設定が行える

尚、テストの為、一時的に背景色、背景画像設定したがひとまず初期設定に戻している

Body Background設定

サイト全体 body 背景

ホーム以外のページのBody部の背景色を指定する

Body部の背景色

サイト全体 body 背景

画像

ホーム以外のページのBody部の画像を指定する

画像を選択すると以下の「繰り返し」、「背景画像の固定設定」、「背景の位置」、「背景サイズ」のメニューが表示されて設定可能になる

背景画像を指定したパターン

背景画像を指定した

サイト全体 body 背景

繰り返し

ホーム以外

以下の中から選択する

  • 繰り返しなし
  • すべて繰り返し
  • ヨコに繰り返し
  • タテに繰り返し
  • 継承

サイト全体 body 背景

背景画像の固定設定

ホーム以外

以下の中から選択する

  • 固定
  • スクロール
  • 継承

サイト全体 body 背景

背景の位置

ホーム以外

以下の中から選択する

  • 左上
  • 左中央
  • 左下
  • 中央上
  • 中央
  • 中央した
  • 右上
  • 右中央
  • 右下

サイト全体 body 背景

背景サイズ

ホーム以外

background-size の CSS プロパティを指定する

デフォルトはcover

Body Background in context : Home

ホームのBody部の背景色を指定する

ホーム Body部 背景色

Body Background in context : Home

背景画像

ホームのBody部の画像を指定する

画像を選択すると「繰り返し」、「背景画像の固定設定」、「背景の位置」、「背景サイズ」のメニューが表示されて設定可能になる

※ホーム以外と同様

繰り返し

ホーム

以下の中から選択する

  • 繰り返しなし
  • すべて繰り返し
  • ヨコに繰り返し
  • タテに繰り返し
  • 継承

背景画像の固定設定

ホーム

以下の中から選択する

  • 固定
  • スクロール
  • 継承

背景の位置

ホーム

以下の中から選択する

  • 左上
  • 左中央
  • 左下
  • 中央上
  • 中央
  • 中央した
  • 右上
  • 右中央
  • 右下

背景サイズ

ホーム

background-size の CSS プロパティを指定する

デフォルトはcover

続く

設定項目数が多いので続きの設定は次回の「hueman テーマのカスタマイズ フロントページのコンテンツ編」の記事

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

1件の返信

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。