【 2025.3.19 更新 】WordPress を勉強しながら作り上げた記録です。(まだ追記していくかもです)
序章
まずは準備中の表示だけでも、ということで。 ホームページ開設当初はこのような状態でした。
最低限のタイトルや準備中の文言を入れただけ。 いろいろと変えていきたいけれど方法がわからず
これでしばらく放置していました。
これがどのようにして完成にこぎ着けられたのか、私自身も初心者として創っていきながら、
これから初心者の方にもわかりやすくご紹介していきたいと思います。
※ サイトの環境： サーバは XServer、WordPress と テーマは「Cocoon」を使用しています。
WordPress や テーマのインストールなどはここでは端折ります。
私はこちらを参考にしながらインストールをしました。
https://www.xserver.ne.jp/blog/wordpress-cocoon-install
各サーバ環境に合わせて普通にインストールすれば、同じような環境は整うかと思います。
まずは 序章の段階まで
作成するにあたって、最初にホームページのタイトルとキャッチフレーズを決めて設定しました。
(あとでロゴ画像を貼り付けると、サイトのタイトルテキストは見えなくなりました
→ 【 2025.3.14 】 ロゴ画像にタイトル文字を入れて一旦は解決！)
次にトップページに文言を入れました。
左サイドメニューの「固定ページ」の中の、「固定ページ一覧」をクリック、
フロントページ とある箇所の編集をクリック
(画像は後から復元したイメージなので実際と異なる場合があります)
準備中であることをまずは表記したかったのでその文章を入力して、最後に右上の保存をクリック
※以上は作成時にきちんと記録を取っていなかったので画像は「あとから再現」していますが、
これで準備中表示はできるかと思います。
サイトアイコンの設定
放置していた「準備中表示」をいよいよ改修していきました。
簡単なところでまずは、サイトアイコンの設定です。アクセスしたらタブ左側に表示されるヤツです。
あらかじめ 512×512サイズで作成した仮の画像を設定しました。(後日差し替えました)
「サイトアイコンを選択」をクリックしてこの画像ファイルをアップロードします。
続いて、いよいよ外観です でもデザインの前に…
ようやくここから、効果がわかりやすくてやりがいのある外観いじり、です。
デザイン云々の前に 上部のSNS関連のボタンがごちゃごちゃ感を煽っているような…。
まず、これを消すことにしました。
左サイドメニューより、「Cocoon 設定 → Cocoon 設定」をクリック
「SNSシェア」タブをクリック この中にあります
「メインカラムトップシェアボタンを表示する」のチェックが入っているのを外します。
さぁいよいよ、全体のデザインを変えていきます
私が選んだテーマ「Cocoon」では、様々なスキン(いわゆるデザインのテンプレート)が
用意されています。 左サイドメニューより、「Cocoon 設定 → Cocoon 設定」をクリック
「スキン」タブをクリック
ずらっとたくさんある中から私はこれを選びました。
スキンを変えた結果…
そろそろ、画像が欲しい…
まだ見てもらうには文字ばかりでつまらない。画像がない寂しさを埋めたいな、と
いうことで、タイトルのところにロゴを貼り付けました。
ロゴ制作は以下を利用。サインインしないでも使えるのが気軽でいいです。
https://www.designevo.com/logo-maker
さて、ロゴ画像を作成したのち、アップロード。
「Cocoon 設定」 → 「ヘッダー」タブをクリックし、ヘッダーロゴのところでファイルを選択。
先にロゴ画像をイメージだけで適当にサイズを作ってしまうとしっくりこず、何度か作り直すことに。
それと余白が出るので、ロゴ画像の背景と同じ黒で埋めておかないと違和感が…。
ということで、その設定。 同じく「ヘッダー」タブ内の以下の2箇所を黒色(#000000)にしました。
「フッター(画面内のいちばん下)」もロゴ画像が表示できたりするので、同様に「フッター」タブ内で
フッター色を黒色にしました。
結果、いい感じにロゴ周りはできたかなと。
サイドバーの表示をオフにしてみる
さらに、右側にある「サイドバー」と呼ばれる場所が不要と思っているので、
その表示を消してみました。
今度は、「Cocoon 設定」内の「全体」タブで、
今度は、「Cocoon 設定」内の「全体」タブで、「サイドバーの表示状態」を一旦全て非表示に。
これでメインコンテンツのみになってスッキリ。
背景にも画像を！
もっと賑やかさ(？)が欲しいので、背景にもテーマ的な画像を貼り付けることに。
この設定方法は「Coccon 設定」でもできるのだけれど、左サイドメニューの「外観」で
行なう方が自由度が高くて簡単！ てなことで、「外観」→「背景」ですぐに「背景画像」で
画像を選択できるので、選択して位置調整をして、公開すれば完了。
記事を載せていくためのもろもろ作成
外側は細かいことはさておきとりあえず整ったので、記事を載せていく部分を構築します。
記事を載せる為の機能としてごく普通に、左側サイドメニューの「投稿」機能を使用しました。
投稿記事は「カテゴリー(分類)」と密接な関係があり、以下のような関係性となるようです。
投稿記事を「カテゴリー」とリンクさせるために、まずは「カテゴリー」を作成します。
左側サイドメニューの「投稿」から「カテゴリー」をクリック
基本は、点線内の「新規カテゴリーを追加」で項目を入力して、
いちばん下の「新規カテゴリーを追加」ボタンをクリックして作成。
デフォルトで「未分類」というカテゴリーが存在していますが、それを書き換えて使ってもいいです。
項目の詳細は以下の編集画面で解説。
ここでは「スラッグ」が重要で、URL にも関わってくるのですけど、ここはシンプルに
小文字英数字とハイフン(-)でわかりやすく表記するのがお勧め。リンク先として後でも使います。
名前はわかりやすく、アイキャッチ画像は好きなものを設定。
以上を必要なカテゴリー数の分だけ繰り返し作成します。私は取り急ぎ３つ作成しました。
記事のページへのアクセスはCTAボックスを使ってみた
カテゴリーができたら、次はそのカテゴリーや記事へアクセスするためのボタンを作りました。
単なるボタンではなく、内容がすぐわかるような画像とテキストの説明つきで誘導したいなと。
どのような表示の仕方で各記事にアクセスしてもらうかは、頭の中でイメージは決まってましたが、
色々試してから結果、「CTAボックス」というものが理想に近かったので、これを実装してみました。
- 1. 左サイドメニューの「外観」の中の
- 2. 「ウィジェット」をクリックし
- 3. 次の画面で、いちばん右列上から3段目の「固定ページ本文下」の右上の▼をクリック
- 4. 開いたところに「CTAボックス」ウィジェットをドラッグ
CTAボックスの設定をしていきます。
- タイトル：四角囲いの外側に表示されるテキスト枠です。今回は使用していません
- 見出し： 四角囲いの内側上部に表示されるテキスト枠です。ここをタイトル代わりに使用。
- 画像とメッセージのレイアウト：画像を左に、詳細な説明テキストを右に
- 画像： イメージ画像をアップロード
- メッセージ：記事の詳細をここに記入しています
- ボタンテキスト：ボタンに表示するテキストをここへ入力
- ボタンURL： ここが重要！ 基本は、”/category/(カテゴリーに設定したスラッグ)”を入力 これでカテゴリーの記事の一覧表示へジャンプします。(後述：記事に直接ジャンプもできます。)
- ボタン色： ボタンの色を選択
- 各種タブ： 今回は表示したいページを選択するため、「ページ」タブのみ使用
もろもろ設定したら、忘れずに保存します。
こんな感じで仕上がりました。これで記事を載せていく下地がひとまず形となりました！
そして…、いよいよ記事を書いていく…のですが
ここからは、記事を書いて載せていく、というルーチンの作業となっていきますが、
その記事はカテゴリーと紐付けする必要があります。
記事を新規に作成する際に必ず必要で、その手順は以下の通り。
左サイドメニューの「投稿」→「新規投稿を追加」で記事を書く画面になりますが、
この右上①をクリックして設定サイドメニューを出し、②のカテゴリーを開いて、
該当するカテゴリーにチェックを入れます。(複数選択可能)
基本はこれでOKです。あとは記事をザクザク書いて保存すればアップされます！
ざっくりとながら、これで一応は完成したぞ！
【 記事の改行について追記 2025.3.18 】
この日まで私は改行を単なる ［ Return ］ キーで行なっていましたが、妙に隙間が開いてしまうのが
気になっていました。 これは改行の仕方を間違っていた(？)せいで、［ Shift ］＋ ［ Return ］を
使えば、自然な感覚で開業できることに今更気づきました。 全部やり直し！(苦笑)
ここで…、ボタンから記事へ直接ジャンプするように変更
ちょっと話が戻りますが…、CTAボックスの箇所の説明で、
「基本はボタンをクリックしたらカテゴリーへジャンプ」と記載しましたが、
実はこのページはこれひとつだけで完結させたい。つまりは１カテゴリー内に記事がひとつだけ…。
となると、カテゴリーの記事一覧表示へジャンプすることが無意味になってしまいます。
ですので、ボタンから記事の一覧表示をすっ飛ばして、直接記事へジャンプさせています。
その方法は、CTAボックスでの ボタンURLを、 ”/(投稿記事に設定したリンク)”とすれば可能です。
【 2025.3.19 追記 】
CTAボックス のボタンにマウスカーソルが来たら 何か反応させたい！
ここまでで一旦完成！、と満足していたのですが、CTAボックスのボタンにマウスが乗っかっても
何も反応がないのが寂しいなぁ…、と感じるように。(↑マウスホーバーというそうです。)
このカスタマイズはCTAボックスの自作となりお手軽ではありませんが、やってみる価値あり、と
以下の参考サイトを元に挑んでみました！
参考にしたサイト： https://tcd-theme.com/2024/03/wordpress-cta-box.html
上記サイトでも十分丁寧な説明なのですが、如何せん WordPress側の反応が塩対応でわかりにくい！
操作していて混乱したところがありました。 その辺りを特に詳細にわかりやすく記載していきます。
まずは、CTAボックスを配置したい場所で段落を作成し、右側の「＋」をクリック
カラムを選択します
いちばん左の 100 (分割しない)を選択
ここで混乱しました。忽然と以下のような表示が出て何のこっちゃ？？となりますが、ここはただただ「 ＋ 」 をクリックし、CTAボックス内の要素を追加するためのブロックを追加します。
CTAのタイトル用の段落を作成したいので、段落を選択します。
この次の表示なのですが、ここでも「あれ？ 元の空き段落に戻った？」とわけがわからず
混乱してしまい、何度もやり直ししました。
でも実はこれがCTAタイトル用の段落です。次で確認が出来るので、大丈夫！と信じて進みましょう。
タイトルを入力して、ここがタイトルなんだ！とわかりやすくしておきます。
文字を入力している時に、赤囲みのような表示が出ていれば大丈夫！きちんとできています。
(普通の段落であればこの表示は出ません)
タイトルを入力したら赤囲みをクリックして「親ブロックを選択」します。
次は画像と説明テキストの枠を作成します。右下隅っこの「＋」をクリックします。
左に写真、右に説明テキストとボタンを配置したいので、「2カラム：等分」を選択。
また、容赦なく「＋」を強要してきますが勢いで「＋」をクリック。ここはもう何も考えずに
要素を足していきます。むしろ慣れればサクサク進むので、どうと言うことはありません。
画像を貼り付ける左側カラムのブロックなので、画像を選択します。
希望の画像を選択(アップロード)すると、画像が表示されます。
右側のカラムに文字を入力したいので、画像右の空白部分をクリックします。
また「＋」の表示が出てくるので、「＋」をクリック。
段落を選択します。
テキストを入力できるようになるので、説明文を入力します。
説明文を打ったら、文章のいちばん末尾で改行をして、段落を作ります。ここにボタンを配置します。
「ブロックを追加」をクリック。
ボタンは、「カスタムHTML」を選択し、そこにコードを記述して初めてできるのですが、
「カスタムHTML」項目がないので「すべて表示」をクリック。
↓
赤囲み内に HTMLを記述する枠が現れました。
私の場合は以下のように記述しました。
<a href="/make-hp-1" class="cta-button-01">完成までの記事を見てみる</a>初心者の方でもパッと見だけで、
リンク先 ＝ “/make-hp-1”、ボタンのラベル = 完成までの記事を見てみる と見てとれるかと。
そして、参考サイトでクラス(class)と呼ばれていたのは、ボタンの名前みたいなもんなんだなぁ、と
云うのがなんとなくわかるかと思います。
次に、ちょっとだけ初心者にはややこしい CSS という外観に関わるコードを使う準備をします。
ちょっと敷居は高くなるかも、ですが、これを覚えて使いこなせるようになると
CTA の各パーツ(外枠・画像・テキスト・ボタン)の配置やボーダー・色などを CSS と言うコードで
細かく指定してカスタマイズができます。
まず、CTAの各パーツにCSSで認識できる名前(クラス)を付けます。手始めに外枠から。
次に CTAのタイトル部分に CSSクラスを設定します。(写真のように選択してもわかりにくいのですが)
画像も同様に名前(クラス)を付けます。
説明テキストのカラムも同様に。
名前(クラス)を付けれたら、CSS のコードを記載します。
コードについては、参考サイトのものをパラメータのみ変更してほぼそのまま使ってます。
左側サイドメニュー の 外観 → カスタマイズ で 開いたメニューのいちばん下、追加CSS をクリック。
コードを入力する枠が下の方にあります。参考サイトのコードをコピペして、中身をいじくりました。
記述したコード：
枠内の色やボタンの色、テキストの配置も微調整ができます。
#で始まる６桁の数字(16進数)の箇所が色コードです。ここを変えると色が変わります。
padding と言うコードで、上下左右のマージンをいくつ取るかを指定できます。
44行目の、.cta-button-01:hover { の箇所が、マウスがボタンに載った時の処理の記述で
色は同じにしていますが、透明度を0.7→1.0にしていて[ opacity: 1.0; ]、なおかつ
拡大もさせてます。[ transform:scale(1.04, 1.1); ]
CSS は記述がわかりやすいので、いじくりながら覚えていくのが手っ取り早いです。
/* CTAボックス1の外枠 */
.cta-01 {
background-color: #080808;
}
/* CTAボックス1の上要素定義 */
.cta-title-01 {
background-color: #080808;
color: #E0E0E0;
padding-left: 20px; /* 左側の余白 */
padding-top: 20px; /* 上側の余白 */
padding-bottom: 10px; /* 下側の余白 */
}
/* 画像1 位置調整 */
.cta-pict-01 {
display: block;
padding: 0px 0px 40px 20px;
}
/* CTAボックス1の子要素 */
.cta-text-01{
padding: 0 20px 60px 20px;
}
/* ボタンデザイン1 */
.cta-button-01 {
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: 80%;
margin-left: auto; /* 左のマージンを自動に */
margin-right: auto; /* 右のマージンも自動に */
padding: 0.5rem 0.5rem;
font-weight: bold;
border-radius: 0.3rem;
border-bottom: 5px solid #FF6000;
background: #FF5000;
color: #F0F0F0 !important;
opacity: 0.7; /* 透明度を下げる */
}
.cta-button-01:hover {
background-color: #FF5000; /* 同じオレンジ色 */
opacity: 1.0; /* 透明度を上げる */
transform:scale(1.04, 1.1);
}
ちなみに余談ですが、↑の「コードを表示する枠」ってよく見かけると思いますが、
「コード」を選択すると作成できます。(あとで思い出せなかったので記載)
設定できていれば、このサイトのトップページのように、ボタンにマウスカーソルを載せる
(マウスホーバーする)と、ボタンの表示が変わります。
この記事はいったんここまでで終了です。 皆さまの参考になれば幸いです。
さて、しばらくはまた、他のカテゴリーの記事をぼちぼち埋めていこうかな。