2026/02/04講義

　本日の講義は1/31に再配布された、手順がASTRAとELEMENTORの操作ごとにまとめられている、レジュメを基になされた。
　会員の希望で、復習から入る。Localに各自任意サイトを立ち上げ、テーマASTRA、プラグインELEMENTORを解説の順にインストールし、サイト作成における　ASTRA側の操作、ELEMENTOR側　の操作をまとめての学習だった。
御注意：報告はレジュメ10Pから14Pまでは、バージョン違いなのか？　内容が完全には合致せず、自分なりの方法で同じ結果を得る方法を記述していますので各自ご判断下さい。画像も自分の練習サイトの画像を使用していますのでレジュメ通りでは御座いません。

Local を立ち上げ　新規サイト立ち上げる。
以下手順：
Local 画面上の　（＋）マーク　click　＞　サイト名　入力（練習用なのでASTRA2026とした）＞　（continue）click　＞　次画面　（continue）click＞　ID　P/W　入力　＞（continue）click　＞　WordPress　install中・・・・　＞　デバイスに加える変更OK　＞　WordPress設定画面立ち上がる＞

ダッシュボード　setting 設定　＞　General 一般　＞
一般設定画面　この時点では英語表示なので日本語化するとともに下記項目の設定をする。
サイトタイトル　適宜変更
キャッチフレーズ　適宜入力
WordPressアドレス　https化
サイトアドレス　https化
サイトの言語　日本語化
タイムゾーン　UTC＋9
日付形式　適宜指定
週の始まり　月or日　等に

最後に（変更を保存）　＞　この最初の変更保存時　下記警告が出る　

（詳細設定）click　＞　表示が下図に替わる

・・・にアクセスする（安全でなありません）の文字列上をクリック（自分のサイトなので安全）
日本語化され設定項目が反映されたWordPressが立ち上がる。次回からは警告は発生しない。

テーマ　ASTRA　のインストール

外観　＞　テーマ　＞　テーマを追加　＞　アップロード画面　ここにASTRAが有れば、
画像上にHoverすればインストールボタンが表示されるので　click

無ければ、検索窓にASTRAと入力　＞　自動的に最初に、ASTRAが表示されるのでHoverしてインストールボタンをclickする。下図

サムネイルにHoverして

ASTRAをカスタマイズする

●表示された画面のASTRAサムネイルのカスタマイズボタン　または
●ダッシュボード　＞　ASTRA　＞　カスタマイズ（講義ではこれ）
●ダッシュボード　＞　外観　＞　テーマ　＞　カスタマイズ　でも　等価のようだ。
カスタマイズ　をクリック　＞
カスタマイズ画面　が表示されているが、現状ではデフォルトのロゴの後ろに練習用サイト名　ASTRA2026が表示されている（下図）。（後ほど表示を消す操作在り）

サイト全体の設定をする

サイズ設定
カスタマイズ画面　　全般　＞　コンテナ　＞　コンテナレイアウト　＞
全幅　選定（下図）、スタイルタブで幅の設定。

サイト名（ホームの表示　ここではロゴの後ろの　ASTRA2026　）を消す

“＜” で2つ戻って　投稿タイプ　選択　＞　個別ページ　選択　＞
個別ページのタイトルエリア　＞　フロントページで無効化しますか　ON

レジメ通りしたが　私の場合　これでは消えなかった（のちに再度再現では消えたが？？？）

そこで　ロゴ部分のHoverで表示される　鉛筆ﾏｰｸ（下図）　click

（下図）サイトタイトルの可視性　をOFFにする

上図の通り、実際はサイト名は消されてはいないのだが　不可視化された。
以前の講義では、この手法を採ったように思ったが？　複数の手法は有る　と理解した。

サイトロゴやメニューの設定をする

ロゴを変更する
サイト表示　カスタマイズ　click　＞
ヘッダー　＞　下図いずれかの　サイトタイトルとロゴ　click

左側　操作メニューに下記表示が出るので

ロゴファイルをアップロード　＞　メディアライブラリ　に挿入　＞
当該ファイル選択　＞　代替テキスト　・　タイトル　を適宜入力　SEO検索上位対策　です　＞　切り抜かない　or　切り抜く（左右インジケーターを動かして余白調整できる）　いずれか選択　click　

（上図）ロゴ画像が挿入された　＞　ロゴ幅を　300px　に設定
この段階で　サイトタイトルの可視性　を　OFF　にすれば、画像の外側にタイトルテキストが表示されている場合は、不可視化することが出来る（前段操作述）。

タブレット　スマホ　での見え方を確認・調整する

”＜” 戻るマークをclick　＞　ヘッダーをカスタマイズ中　に戻る
このPage10の記述と私のASTRAとは合致せず、ページの右下[　ボタンの切り替え　］表示なく、［　メインメニュー　］と表示のまま、これをclick　これで資料の表示画面になる。
資料　下段、⚙も clickするも資料のような変化なし。上記ボタンの違いと共にバージョンの違いか？
以下資料14pageまで、資料と異なる操作在り、見比べて、自己画面に合う方を採用下さい。

ヘッダーメニューのレスポンシブ調整まとめ

② 表示ページにある［　サイトタイトルとロゴ　］ボタンで、必要ならサイトロゴの位置調整をする。：［　サイトタイトルとロゴ　］＞　GENERALタブでロゴ幅調整、DESIGNタブでマージン調整が出来る

③ ＜ ← 戻るマーク で　ヘッダーをカスタマイズ中　に戻る
右下　又は　メニューの　［　ボタン切り替え　］クリック　＞　下図

次に、メニューアイコンを押したときにメニューの表示方法を決定する

下図は　ボタン切り替えメニュー　手順を示しているだけです　図のように決定している訳ではありませんのでご注意　
ボタン切り替え　から　戻って　④へ

④ ヘッダー　をカスタマイズ中　に戻り、⚙OFF CANVAS　＊　＞　下図へ　Page14

オフキャンバスメニュー（Off-canvas menu）は、通常は画面外（canvasの外部）に隠れており、ハンバーガーボタンなどのトリガーをクリックするとスライドインまたはフェードインして表示されるナビゲーション

私の場合、上図のように変更した、ここは自分のヘッダーデザイン(ヘッダーイメージ）に合わせて下さい。

⑤ 同じ手順でスマホ表示も調整する、Elementor導入後でも調整できます。

ELEMENTORの設定　P15

ELEMENTORをダウンロード　＞　有効化　する。

ELEMENTORの設定
ダッシュボード　＞　Elementor　＞　エディター　＞　設定　＞　設定画面　＞　一般

上図のように☑を入れる。
次に　高度な設定　タブ　＞　Google Font　無効化　する（下図）

Google Font を無効化し、変更を保存　する。

ELEMENTORでサイトを作成　page16

トップページをリセットする（見本ページから自己ページへ）

上図　Elementorで編集　click　＞　最初だけポップアップが出るが　スキップ　click　＞
構造　＞　（コンテナ　選択　右クリック　＞削除）　or　（コンテナ　選択　＞　Delete）　＞
見本ページのデザインが消去され、ページがリセットされる。

ヘッダー画像を入れる　（ChatGPTに依れば、トップページの最重要　画像やテキストのある所をHero-Sectionといい、その画像をHero-Imageと言うらしい。）

画像を入れるBoxの挿入

コンテナを編集
レイアウトタブ　コンテンツ幅　＝　全幅　幅＝100％　最小の高さ　500px　を指定した。
（資料では高さ指定はないが、予定画像の高さが500pxなので、前もって指定して置いた。）

スタイルタブ　背景　＞　クラシック　選択　＞　画像選択窓表示　＞　Hover　＞　（下図参照　メニュー部分のみ）

画像の選択　click　＞　画像のアップロード　＞　メディアライブラリに画像挿入　＞　代替テキスト　・　タイトル　を適宜に入力　＞　選択　＞　Hero-Image　が挿入された。（資料ではここでたかさ500pxの指定になるが、最初に500px指定をしていたので、そのままの高さで挿入できた。＞P20

レイアウトタブに戻り　Gaps　を　カラム0　行0　に指定
公開　

ヘッダー画像の位置を下げる

この段階では画像によって、ホームロゴ画像・ナビ部分　が隠されているので画像をその分下げる
Page21　マージンを操作する
高度な設定　タブ　＞　マージン　上だけ　ロゴ高さ分100px（資料は90px）を設定　＞
header　ロゴ・メニュー部分が現れた　ここで画像コンテナの名を適宜変更（Hero-Image ）する。
公開　保存。

本日はここまで　次回は　Hero-Image　にタイトルテキストを載せる方法、2カラムのあいさつセクションを作成し、左に画像、右にテキストを配置する方法を学ぶ予定。画像とあいさつ文を用意しておくよう指示在り。