こんにちは。
前々回にやったノーコードWEBページ作成（WordPress）のつづきをします。
前の記事↓
WordPressを導入して、管理画面をちらっと見たところまででした。
今回はおそらく基礎中の基礎であろう下記操作をしてみたいと思います。
注意書き
この記事は初心者がやってみたというだけの日記です。間違ったことを言っている可能性があります。
ページの表示
前の記事では固定ページの編集画面を開きましたが、現在のページがどう表示されるのかは管理画面ホームの左上、サイトを表示ってところから確認できます。
まだなにもしていないのでデフォルトのサンプルページが表示されます。
テーマ（ひな型）の選択
WordPressは導入後、まずはテーマ選びからするのがセオリーのようです。テーマとはサイトデザインのひな型で、おおまかなデザインを最初に選択しておくということです。公式・非公式のテーマがたくさんあるのでその中から好みのものを選びます。
ダッシュボードの外観→テーマ と進んで、テーマを追加をクリック。
サンプルがたくさん表示されるので好みのものを選んでインストールします。有料・無料のものがあるようです。
Astraってやつがわかりやすいようなのでとりあえずそれにしてみます。
インストールしたらそのまま有効化できるので有効化します。
インストール、有効化すると固定ページにホーム画面が作成されていました。
ここからページを編集できますが、その前にヘッダとフッタを設定します。
ヘッダー・フッターの設定
ヘッダーとはwebページ上部に表示される部分のことで、通常はホーム画面へのリンクだったり、ログインするようなサイトならログイン画面へのリンクなんかが設置されているようなエリアのことです。
フッターはwebページ下部に表示される部分です。会社情報とか利用規約、問い合わせページへのリンクを置いていることが多いですかね？
サイトの共通エリアになるので最初に設定しておきたいです。
外観→カスタマイズ を選択
Astraのカスタマイズ画面が表示されます。
画像の上部分がヘッダー。
上の画像だとすでに消してしまっていますがヘッダーの左側にはAstraのロゴが入っているのでここを変えたいと思います。左側の「ヘッダー」をクリック。
「サイトタイトルとロゴ」をクリック。
「ロゴを変更」というボタンから画像を選んでロゴにせっていすることができます。
ここではAIに作成してもらったロゴを使用します…(生成後手を加えてます)
(よーく見たらSOLUTION が SOILUTION になっとる…(´・ω・))
こうなりました↓
背景の色とマッチしてませんがそのへんは後で調整するとして、ヘッダーのリンクには「当社を選ぶ理由」など要らないものがあるので消しておきましょうか。
カスタマイズ画面の最初にもどって「メニュー」。
「プライマリ」ってやつを選ぶと項目が出てきます。ここの選択はメニューの"セット"のようで「プライマリ」っていうセットを編集することになります。
消したい項目を選んだら「削除」が表示されるのでそれをクリックすると消せます。追加する場合は右下の「項目を追加」ってやつでできそうですね。
このリンクはページ内リンクになっているようでして、URLのところに#+HTMLタグid(アンカーというらしい)を指定することでその場所に表示を移動(スクロール)するようになっているようです。後でhtmlを見る(編集する)方法も紹介しますが、ヘッダーにページ内リンクを置くのってどうなんですかね？他のページからだとリンクが機能しないようですが…(´・ω・)？
普通のリンク(URLにhttp～入れる)のほうがいいのでは？
初心者なのでよくわかりません(´Д｀)
(※この後ホーム画面は消してしまうのでここのページ内リンクはすべて無効になりますが、編集のしかたのメモとして残します。)
設定したら上の方にある「公開」のボタンから公開か下書き保存を選んで保存します。
次にフッターですが、カスタマイズ画面の最初のところで「フッター」を選べば編集画面になりますがここは特に変えたいところはないかなぁ。
他に、「全般」→「色」のところで背景色や文字色を変更できるようだったので変更しました。
ブロック(画像、文字)の設置
次はページのメイン部分を編集します。ダッシュボードホーム画面の固定ページを選択。
テーマをインストールしたときに自動でホームページとしてテーマサンプルと同じページが作成されていますが、要らないので消します。
選択してごみ箱へ移動。
そして「固定ページを追加」ボタンで新しく作成します。
ページの編集画面が開きます。
タイトルを入れるようになっていて、ホームを作りたいのでとりあえずタイトルをホームにしておきます。
その下は文章を入れるようになっていて、文字を入れおわるとその下にまた文章用の"ブロック”が作成されます。
こうやって"ブロック"を追加していくことでページをデザインするんですね。
では画像を追加するのはどうするのか。
画面にかかれているとおり「/」を入力してみます。
選択肢がでてきました。「/」の入力ではなく、右側の「+」アイコンを押すとボタンなどもっといろんな選択肢がでてきます。画像と文章を半々で横に並べたりする場合も「+」アイコンからっぽいです。
今回はアップロードで画像を挿入しました。
またしてもAIに描いてもらったものです(・∀・)
(自分が描いた絵を変えてもらい、少しだけ編集しました。)
ブロックをリンクにするにはブロックを選択した状態でリンクのアイコンをクリックしてリンク先のURLを入力するだけです。
これでとりあえずは文字と画像、他ページへのリンクを掲載することは可能になりました。
最低限中の最低限ですが、ひとまずこれを保存するとしましょう。
右上の設定アイコンからアイキャッチ画像を設定できます。
そして今回のはホームページにしたいので固定ページタブの右側、3点(・・・)メニューから"ホームページとして設定"を選択します。通常のページなら右上の公開ボタンでOKです。すでに公開しているページなら保存ボタンになっています。
(ちなみにですが右上ASTRAアイコンからコンテナスタイルっていうやつを変更してデザインを少し変えてます。赤い枠みたいなやつ。)
HTMLの表示・編集
いちおうノーコードでWEBページを作成するってことでやってますが、先述のとおりリンク作成時になどでHTMLをちょっと確認したり編集するってことが必要になる場合もあると思うのでその方法もメモ書きしておきます。
WordPressではブロック毎にHTMLを表示・編集できるようになっているようでして、ブロックを選択した状態で3点メニュー→HTMLとして編集 で編集できます。
ページ全体のHTMLを確認するなら画面の右上3点メニュー→コードエディターです。
今回は文字と画像をそのまま置いただけですが実際は横に並べたりとかもすると思うので次回以降でもうすこしだけやろうかな…
いまのところこんな感じ↓ 赤がちょっとキツいな。
AIに読ませた自作らくがきはコレです↓
ポーズだけ変えさせるつもりだったのですが結構変わっちゃいましたね(´・ω・)
ありがとうございました。
