Part-3

パーマリンクとは、固定ページや投稿ページの個別URLです。
https://ドメイン名/○○○の○○○の部分をどのようにするかの設定です。

左メニュー「設定」の「パーマリンク」を選択し上から５番目の「投稿名」がお勧めです。
ドメイン名の後に記事タイトル（ページタイトル）が設定されます。
「https://ドメイン名/ページタイトル」が、各ページのURLになります。

但し、投稿名が日本語の場合、URLが日本語になりこののままではよく無いので「固定ページ一覧」や「投稿一覧」から選択し、右側の「リンク」をクリックし「/」は残し、パーマリンクを任意の「英数字」に変更し、上部の「保存」をクリック。

管理画面左側「外観」＞「メニュー」をクリック。
「ヘッダーナビ」を選択し、必要なメニュー項目を追加していきます。
ヘッダーナビは、ホームページの上部右側に表示されるグローバルメニュー(グローバルナビゲーション)になります。

メニュー項目の下に英字のサブタイトルを入れる場合、メニューの設定画面右上「表示オプション」をクリック。
画面上部に画面上の要素、「詳細メニュー設定を表示」のチェック欄が出てくるので「説明」の欄にチェックを入れます。
各メニュー項目の▼部分をクリックし「説明」の項目に英字などを入力。

フッターナビ（ホームページの下部に表示されるメニュー）の設定。
完成したら「メニューを保存」をクリック。

見出しを配置したい場所の「＋」をクリックし、「見出し」を選択し、大きさを指定、サンプルは「H3」。
デフォルトでは淡いグレーだが、色を変更の場合は右メニューの「背景」をクリックし、選択。

本文を挿入したい場合は、配置したい場所の「＋」をクリックし、「カラム」をクリックし、カラムの数を指定する。
このサンプルの様に左に画像２つ、右に本文を配置したい場合、カラム数を「3」にし、右のBox上の「プラス」をクリックし、「段落」をクリックし、テキストを入力。
画像の場合も同様、「画像」アイコンを選択。

配置したい場所の「＋」をクリックし、「カバー」＞「アップロード」で画像を選択し、タイトルを入力し、「配置」で全幅にする
右側のカバーメニューの「メディア設定」で「固定背景」を有効にする。
オーバレイでお好みを指定、サンプルは「30%」。
カバー画像の最小の高さを指定、サンプルは「300px」。
「色」でテキスト色を指定、サンプルは「白」。
「タイポグラフィ」で文字サイズも指定できる、サンプルは「L」サイズ。
画像変更の場合は「置換」をクリック。

1.テーブル(表)を作成
配置する場所で「＋」をクリックし、「全てを表示」＞「テーブル」を選択。
「カラム数」と「行数」を設定し「表を作成」をクリック。
右側のテーブルメニューで表のスタイルや色など詳細を設定できます。

右側のテーブルメニューの「スタイル」で設定。
左上が「デフォルト」
右上が「ストライプ」
左下が「直線 上下」
右上が「枠線／ストライプ」
上の「カラムの配置変更」でテキストを右揃えにもできます。
「B」はボールドでテキストを太くできます。
右側のテーブルメニューの「色」でテキストや背景の変更もできます。
終わったら右上の「更新」ボタンを忘れずに！

左の様に枠線もストライプも消し、たい場合、右テーブルメニューの一番下の「枠線」を「０」ゼロにする、またはその左隣で色を白にしても可。

Google マップを表示し、店舗名、オフィス名、またはビル名を入力して、検索ボタンをクリックすると検索結果が表示される。
今回は、金沢21世紀美術館を検索し、右にある「共有」をクリック。
メニューが表示されるので「地図を埋め込む」をクリック。
地図の埋め込み用のコードを取得する画面が表示される。
左上部にある▼のプルダウンをクリックし、埋め込む地図のサイズを選ぶことができるので選択後コピーし、メモ帳などにペースト。

管理画面にログインし、編集画面にアクセスし、編集画面の左上から「カスタムHTML」のブロックを選択する。
「HTMLを入力」のブロックに、先ほどコピーしたコードをペーストする。
「プレビュー」を選択してプレビューを表示さる。

ギャラリーを追加

挿入したい箇所の「＋」を押し、「全てを表示」>「ギャラリー」を選択。

今回は「メディアライブラリ」を選択し、1列に5個の画像を並べたい場合、ライブラリの中から5個の画像を選択し、右下の「ギャラリーを作成」ボタンを押し、次の画面で順番を入れ替えたい場合は画像を押したままドラッグする。キャプションが必要ならば挿入し、右下の「ギャラリーを挿入」を押し、右メニューの「ギャラリー」の「カラム」を「5」にする。

マウスクリックで画像を大きく見せたい場合、画像を選択し、上メニューの（－）マーク「リンクを挿入」で「メディアファイル」を選択で完成。

左メニュー「外観」＞「カスタマイズ」をクリックする。
左メニューの「追加css」の中に追加。

下記は参考の一例です。

/* ロゴ画像を元画像どおりのサイズで表示 */
.navbar-brand img {
max-height: none !important;
}

/* コピーライト削除 */
footer .copySection p:nth-child(2) {
    display:none !important;
}

/* フォントを「游ゴシック」に変更 */
body, html {
	font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

/* フォントを「ＭＳ Ｐ明朝」に変更 */
body, html {
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro";
}

Lightningのカスタマイズは検索すると色々出てきますが、個人の責任でやってください。
左は確認済みの一例です。

CSSが反応しない場合の参考
「カスタマイズ」＞「Lightning 機能設定」＞
1.「theme.json 設定」＞「theme.json を有効にする」にチェック
2.「世代設定」＞「Generation 2(~version 13.x)」を選択
3.「ページを再読み込みをする」をクリック