WordPress Astra テーマのカスタマイズ・色と背景からボタンの設定まで(その2) | そう備忘録

WordPress Astra テーマのカスタマイズ・色と背景からボタンの設定まで(その2)

Astraテーマ

VM環境のWordPressのテーマにAstraをインストールして設定した時の備忘録。

インストールからレイアウトの設定までは前回の記事を参照

今回は「色と背景」から「ボタン」までの記事とする。

「色と背景」から「ボタン」まで

色と背景

基本色

文字色、リンク色、背景などの基本的な色に関する設定

基本色 設定

テーマカラー

テーマカラー

しかし正直どこに反映されるのかよく分からなかった。。。

リンクカラー

リンクの色

文字色

文字色

リンクのホバー色

リンクの上にマウスオーバーした時の色

背景色

背景色

デフォルトは透過色が設定されている

背景画像

背景画像

下記は背景画像を設定した時の例

背景画像の設定例

背景画像を設定すると位置や繰り返し、背景サイズ、背景スクロールが設定できるようになる

フッターウィジェット1

フッターウィジェットの色に関する設定

フッターウィジェット

フッターウィジェット 設定

ウィジェットのタイトル色

タイトルの色

文字色

文字色(文字の場合)

リンクカラー

リンク色(リンクがある場合)

リンクのホバー色

リンクの上にマウスオーバーした時の色

背景色

背景色

デフォルトは透過色が設定されている

背景画像

背景画像

背景画像を設定した時の設定可能な項目は”基本色”の時の設定と同様

フッターバー

フッターバーの文字色などの設定。

基本的にフッターウィジェットと同じ内容の設定が可能。

フッターバー 設定

文字色

文字色(文字の場合)

リンクカラー

リンク色(リンクがある場合)

リンクのホバー色

リンクの上にマウスオーバーした時の色

背景色

背景色

デフォルトは透過色が設定されている

背景画像

背景画像

背景画像を設定した時の設定可能な項目は”基本色”の時の設定と同様

書体

基本書式設定

基本書式設定 設定

本文とコンテンツ

フォントファミリー

フォントファミリーの設定

システムフォントの他にGoogleのWebフォントを指定することができるが、英文字へのフォント指定なので日本語には反映されない。

日本語のWebフォントやフリーのフォントをインストールして使う方法については別記事を参照

フォントの太さ

フォントの太さの指定

テキスト変換

  • デフォルト
  • なし
  • 先頭大文字
  • 大文字
  • 小文字

から選択が可能

フォントサイズ

フォントサイズ

行の高さ

行の高さ(行間)を変更可能

行の高さ、段落下のマージン

段落の下部マージン

段落後のマージン

見出し

フォントファミリー

見出しのフォントファミリー

”継承”を選択すると本文とコンテンツと同様のフォントが選択される

フォントの太さ

見出しのフォントの太さ

”継承”を選択すると本文とコンテンツと同様の指定になる

テキスト変換

  • 継承
  • なし
  • 先頭大文字
  • 大文字
  • 小文字

から選択が可能

”継承”を選択すると本文とコンテンツと同様の指定になる

メインヘッダー

メインヘッダー

フォントサイズ

 メインヘッダー部のフォントサイズ

メインヘッダーのフォントサイズ

内容

見出しのフォントサイズ

内容 見出しのフォントサイズ

見出し1 ~6(h1~h6)のフォントサイズ

 本文の見出しのフォントサイズ

ブログ

ブログ / アーカイブ

ブログのアーカイブページのフォントのサイズ ブログアーカイブページ

ブログ/アーカイブページフォントサイズ設定

フォントサイズ

アーカイブのサマリーボックスのタイトルのフォントサイズ

ブログ投稿タイトル フォントサイズ

アーカイブページのブログのタイトルのフォントサイズ

単一記事の投稿

投稿や固定ページのタイトルのフォントサイズ

個別投稿 / 固定ページのタイトル

個別投稿 / 固定ページのタイトル 設定

個別投稿 / 固定ページのタイトル フォントサイズ

 投稿や固定ページのタイトルのフォントサイズ

ボタン

ボタンの表示方法についての設定

コメント投稿時のボタン例

Astra ボタンの設定

ボタン設定

ボタン テキストカラー

ボタンのテキストカラー

ボタンテキストのホバー色

ボタン上にマウスオーバーした時のテキストカラー

ボタンの背景色

ボタンの背景色

ボタンの背景ホバー色

ボタン上にマウスオーバーした時の背景色

ボタンの丸み

ボタンの角の丸みの設定と思われるのだが設定値を変更してもボタンのビジュアルは変化しない

正直良く分からなかった

垂直余白

ボタンの垂直方向の余白と思われるのだが、同様に良く分からなかった

水平余白

同上

メニュー以降

メニュー、ウィジェット、ホームページ設定、追加CSSについては他のテーマと同様なので割愛する。

以上でAstraテーマについての記事は終了。

souichirou

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

おすすめ

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

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