前回、サブカテゴリの作成と記事の整理や表示順の変更を行いました。
今回は、ホームページ制作の固定ページの作成を行います。
ホームページ制作ということで、トップに画像を大きく持ってきたいなーって思います。
私の画像加工はシンプルで分かりやすいWindows標準で付いているペイントで
簡単な操作だけで行っています。
まずは、選択をクリックして範囲指定し、切り取りを行います。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/43/20/p/o0772072215020218659.png)
そのままペイントでファイルから新規を選んで白紙に戻し、貼り付けをします。
その画像を名前を付けて保存することで、画像の不要な部分を切り取った画像にします。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/8a/79/p/o0717041315020218663.png)
次に、バナー工房をまた使います。
こちらのページで画像を選択し、画像の加工を行っていきます。
まずは文字入れを選択し、文字は「ホームページ制作いたします!!」
と書いて、下の条件は画像の通りにしています。
書体や透明度などを触りながら、どれが合うかなーって考えて選びます。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/9e/30/p/o0736085715020218665.png)
続けて、吹き出しを選びます。
形は1つ目を選択し、条件は画像の通りにしています。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/8e/ee/p/o1157078715020218666.png)
2ステップが終わると、画像は現在こんな感じになりました。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/c8/ed/p/o1274058915020218668.png)
こちらは吹き出しの中に入れる文字「月額費用なし」です。
条件は画像の通りにしています。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/64/1e/p/o0909089015020218671.png)
続けて料金の文字「100,000円」です。
条件は画像の通りにしています。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/6d/5e/p/o0681089415020218675.png)
こちらは下の方に説明文字を入れるための条件です。
条件は画像の通りにしています。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/67/6a/p/o0723085315020218676.png)
5ステップが終わると、画像はこんな感じになりました。
保存ボタンで画像をダウンロードします。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/c3/51/p/o1893067515020218679.png)
出来上がりの画像はこちら。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/24/6b/p/o0717041315020218681.png)
固定ページに画像を貼り付けます。
画像の配置は幅広を選択しました。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/70/c9/p/o1562087415020218684.png)
タイトルと画像の中の文字が重複するので、タイトルの文字は消したいです。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/1f/d8/p/o1392082915020218688.png)
色々調べて、style.cssの最終行に書けば消えるらしい情報があったのですが、
私の環境では消えませんでした。
テーマによっては出来ないのかもしれません。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/e7/de/p/o0957081415020218690.png)
そこで、プラグインでタイトルを消そうと思います。
使用するプラグインは「Hide Title」です。インストールして有効化します。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/42/e3/p/o1326080815020218693.png)
固定ページを開き、右のメニューの一番下にHide Titleが増えています。
こちらでチェックを付けて保存します。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/6c/23/p/o1810077015020218697.png)
すると、タイトルが消えました。
こっちの方が良いですね。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/09/f6/p/o1380084915020218701.png)
こちらの画像は、WordPressのメディアとテキスト機能で文章と画像を配置しています。
太字にしたり、文字サイズを大きくしたり、リストにしています。
文字サイズは、テキストの範囲を選択すると、右のメニューでフォントサイズが変更できます。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/80/87/p/o1313033915020218703.png)
次に、テーブル形式の表を書こうと思います。
WordPressの機能でテーブルを選びます。
表の項目数を考えて、私はカラム数を2、行数を4としました。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/06/d1/p/o0941031815020218705.png)
すると、このように線が四本引かれています。
これではよくわからないので、設定を変更していきます。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/f9/7f/p/o1601055515020218706.png)
ストライプに変更し、表のセル幅を固定を選択し、
タイトル行もあった方が良いかと思い、ヘッダーセクションを選択しました。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/e1/c0/p/o1565050615020218711.png)
カラムを中央配置にします。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/1c/5b/p/o0949043015020218713.png)
タイトル行はやっぱりいらないかと思い、ヘッダーセクションを切りました。
こんな感じの表になりました。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/8f/5e/p/o1551029315020218716.png)
あと、画像と表の間などがスペース空いていないため、間を空ける方法を調べると、
WordPressのメニューでスペーサーというのがありました。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/34/3d/p/o1344082115020218718.png)
スペーサーを選ぶと、このような画面でスペースを広げたりして、間を空けられます。
私は120ピクセルくらいにしています。
![](https://stat.ameba.jp/user_images/20211023/20/pc-komatta/9a/a7/p/o1254068715020218721.png)
これで、ホームページ制作ページはひとまず形になりました。
何度かページを確認しながら、直さないといけない点が出てきましたら修正いたします。
23日目は固定ページの微調整を行います。
以上
コメント