2025/04/02講義録

本日は前回の復習から

レスポンシブの確認　の項　モバイルメニューをカスタマイズする

Astraで編集
ダッシュボード　＞　ASTRA　＞　カスタマイズ　click　＞　下図

上図の編集アイコンをclickすると　下図になる

上図の如くタブレットアイコンをclickすると
［ボタン切り替え］のボタンが表示される

［ボタン切り替え］click　＞　下左図が表示される。アイコンのデザインを選択［左］・トルクボタンのスタイルを［ミニマル］に、タブをGENERALからDESIGNへ移動すると下右図に移行する

DESIGNタブ　アイコンの色　設定ボタン　click　＞　カラーピッカーで黒またはブランド色を指定、アイコンサイズを30～36px（任意）に変更する＞　下方にある　マージンを下10～20px（任意の幅）指定＞［公開］して変更を保存する（以上　上図）。

デザイン変更　下図　OFF CANVAS　ボタンclick

メニューアイコンのclickによって出現するメニューリストの出現の演出

左図　OFF CANVAS　をclick

左図のように指定する（任意）
確認して変更する
ここまでがタブレットの変更

図右下　スマホアイコンclick
スマホでも表示確認。
不都合なければ
最後に［公開］保存。

ここまではメニューiconの変更

ここからは「サイトタイトルとロゴ」の調整

図下部の　サイトタイトルとロゴ　をclick

ロゴ　カスタマイズ

タブを　GENERAL　に
ロゴ幅
スマホ180px

タブレット200px

PCでは300px　に

タブをDESIGNに移行

マージンをタブレットの場合　下20px（任意）に

［公開］保存。

ここまでが　ASTRA　での編集

ここから　Elementor　での編集

タイトル文字を　PC 　タブレット　・　スマホ　に合わせる
ダッシュボードに戻って固定ページ　＞　ホーム　を　Elementor　で編集　をclick

［スマホ　アイコン］click　↑

［構造　アイコン］click　↑　

構造　＞　header（コンテナ名を分かり易く書き替え）　＞　見出し　（Tondabayashi.netと書き替えて置く）　選択

見出しを編集　＞　スタイル　＞　
配置　を　中央に
タイポグラフィー　＞　フォントサイズを　上部［端末切り替えアイコン］で選択して
PCでは　48px　タブレットでは　40px　スマホでは　28px　に設定（それぞれ任意）

headerコンテナの位置調整をする
構造　＞　header　選択
スマホアイコン選択

コンテナを編集　＞　高度な設定タブ　＞　レイアウト　マージン　上　70px　に設定

PC　＆　タブレット　は　マージン　上　90px

ここから本日の講義

新しいコンテナを作り名前を挨拶に変更

ヘッダー下の新規コンテナ作成の＋マークをclick
Flexboxを選択　＞　縦列ボックスを選択
ヘッダーの下に新規ボックスが出来た。
[構造]　click、

新規コンテナ名をW-clickで［　あいさつ　］とする。
［　あいさつ　］ボックス中心の＋マークをclick　

サイドメニューの基本＞T見出し　click　＞あいさつコンテナの中に見出しコンテナが挿入される。
見出しボックスの中を　とんだばやしドットネットについて　と変更したい、＞タイトルボックス内にそのように文字を入力する（下図矢印）。