こんにちは！マヨそば坊やです！
今回は、ホームページを新しくリニューアルしたのでどんなところを変えたのかやそのやり方について紹介します！
この記事を見てぜひ自分好みの素敵なホームページを作成してみてください！
Cocoonというテーマについて
そもそも「Cocoon」とは何かというと、Word Pressで使える無料テーマの一つです。
テーマを変えることでブログやサイトを作るときに表示されるデザインを変えることがあります。ものに寄っては有料のテーマもあるのですが、僕は初めてということもあり、有料のものを選んでも機能を最大限に行かせないかなと思って評価の高かったCocoonで始めてみました。
Cocoonを使ってみて、「これで無料なの！？」と驚きました。
機能やカスタマイズ性が豊富でブログを始めたての人なら充分なんじゃないかなと思います。
ですが、その機能の多さからホームページの編集やデザインなどに手が回っていなかったです。でも、人は第一印象が大事といいますし、ブログも最初に目に入ることの多いホームページを見やすくすることでブログの印象が良くなると思います。
Cocoonのダウンロードはこちら（プラグインインストールし、プラグインメニューから有効化で設定できます。）
そこで自分のホームページの編集をしようと思い、色々調べてみるといろんなカスタマイズができたので初心者の僕の目線で、「これは変えてよかった！」と思う項目をいくつか紹介します。
サイトロゴを設定する
最初にブログを開いたときに出てくるのはブログのタイトルになるのですが、ただ単に文字が書いてあるだけだと印象が薄く記憶に残りません。
そこでサイトロゴを設定することでブログのタイトルを強調して読者の覚えてもらいやすくしましょう！
↑この部分
設定の仕方は、
１．自分のブログのダッシュボードメニューを開く
２．プラグインから「Cocoon」と検索しインストールする。
この２つをインストールしておけばこれから紹介する設定はすべて行えます。インストールしたあとはプラグインメニューから有効化することをお忘れなく！
３．ブログのダッシュボードの左にある欄からCocoon設定を開く
プラグインをインストールし、有効化すると左欄にCocoon設定が表示されますのでそこを開いてください。
左欄にCocoon設定が出てこない場合はちゃんとインストールできているか、プラグインは有効化されているか、テーマの更新などは溜まってないかなど確認すれば大丈夫です。
４．「ヘッダー」を選び下にスクロールし、「ヘッダーロゴ」から画像を設定する。
ヘッダーロゴ→選択から画像を設定するとサイトの上の画像に設定されるのですが１つ注意点があります。
それは画像のサイズです。お気に入りの画像やせっかく作った画像もアイコンサイズやスクショのサイズだと画像がすごく小さくなり、左右の余白がでてデザインとしては微妙になってしまいます。
なので、上の画像にもある通り、ヘッダーロゴサイズに合わせた画像を設定する必要があります。
ちなみに僕のヘッダーロゴは自分で「Canva」というアプリで制作しました。このアプリはスマホなどでも簡単に作業できますし、画像サイズも設定で変更できますので、おすすめです！
このあと紹介するサイトアイコンとかにもこのアプリを利用しています。
そのまま一番下までスクロールして「変更をまとめて保存」をクリックすると画像が反映されます。
Cocoon設定の上部で、プレビュー表示で見れるので設定してみてちょっと違うなとなったら画像を調整したりサイズを調整してください。
他にも色々項目はありますが少しずつ変えてみて自分の好みの設定にしましょう。僕の場合はシンプルなデザインにしたかったのでその他の設定は大きくは変更していません。
サイトのアイコンを設定する
次は検索したときに小さく表示される「サイトアイコン」を設定します。
サイトアイコンを設定しておくことでブログのホームページからではなく記事から入った人にも自分のアイコンを覚えてもらうことで記憶に残ってまた見に来ようという気にさせてくれます。
設定の仕方は
１．自分のブログのダッシュボードメニューを開く
２．「設定」ページを開く
先ほど選んだCocoon設定と同じように左欄から設定をクリックします。
３．上から順に設定していく。
この設定からはサイトのタイトルやサイトアイコンを設定したり変更したりできるのですが、どれも大事な設定なので全部設定することをおすすめします。
特にサイトアイコンは紹介した通りブログの顔になっていくものなので、あまりコロコロ変えてしまうと、せっかく覚えたサイトが違うサイトに見えて忘れられてしまう可能性があります。
なので、最初は慎重に選び、変更するときも告知したり元の画像から全く違うものへの変更はなるべく避けましょう。
ここまではサイトの見た目の部分がメインの設定でしたが、ここからは機能面の設定もしていきます。
ヘッダー部分にカテゴリーを表示する
ブログをどんどん投稿していくと量が増えて、読者の人が見たい記事を探し出すのが難しくなってきます。
そこでヘッダー部分にカテゴリーを表示させることで、自分の読みたいカテゴリーを絞って記事を探せるのでホームページの快適さが格段に上がります。
ここでカテゴリーをヘッダーに表示させる方法を紹介していきます。
１．自分のブログのダッシュボードメニューを開く
２．「外観」→「カスタマイズ」の順に開く
外観では自分のWebページの表示方法を自由に変更できるようになります。ここではヘッダー部分にブログのカテゴリーを表示させたいのでまずはカスタマイズを開きます。
３．「メニュー」→「メニューを新規追加」で「ヘッダーメニュー」を作成する
カスタマイズを選ぶと外観をカスタマイズするのに関係する項目がいくつか出てくるので、今回は、「メニュー」を開く。
最初は何も追加されていない画面なのでメニューを新規作成をクリック。
メニュー名に「ヘッダーメニュー」と入力し自分で管理しやすくする。
メニューの位置はヘッダー部分に表示させたいのでヘッダーメニューにチェックを入れる。
入力とチェックが完了したら公開をクリック。
すると一つ前の画像のメニューの下の欄に作成したヘッダーメニューが表示される。
３．「ヘッダーメニュー」→「項目の追加」→「カテゴリー」から表示させたいカテゴリーを選ぶ
ヘッダーメニューから項目の追加をクリックし、カテゴリーを選択する。
ホームページからすぐアクセスできる場所にあるので自分が自信のあるものや自分のブログを代表するものにつけているカテゴリーを追加する。
並び替えもできるので左から見てほしい順にカテゴリーにするのほうが良い。
注意点は２つあって、自分が書いた記事にカテゴリーをつけるのを忘れないことと、ちゃんと記事の内容に合っているカテゴリーをつけること。
もしカテゴリーから選んだ内容と記事の内容がチグハグだったら読者に求めてないものを読ませてしまって不快感を与えてしまう。
追加できたら公開をするのを忘れないようにしてください。
できたら一度自分のホームページに戻ってちゃんと反映されているか確認してみましょう。カテゴリーの名前のところをクリックしたら、そのカテゴリーをつけた記事が出てきたらちゃんと設定できている証拠です。
アピールエリアを設定する
最後にアピールエリアの設定方法を紹介します。
アピールエリアとは、自分のブログのタイトルや紹介を短くまとめてホームページに表示させる事ができるスペースのことです。
設定の仕方は、
１．Cocoon設定からアピールエリアを開く
２．設定したいタイトルやメッセージを入力する。
アピールエリアの選んでから下にスクロールしていくと、設定できる項目がいっぱいあり、特にその中でも僕が設定してよかった部分を紹介します。
- タイトル
- メッセージ
- ボタンメッセージ
- ボタンリンク先
- ボタンの色
- エリア画像
です。「ボタン」はクリックしたらサイトに移動してくれるようにリンク先のURLを貼ります。
イメージとしてはボタンに「プロフィール」と書いて自分のプロフィールを書いているページのURLをボタンリンク先に貼ります。
すると読者の方が、「投稿してる人はどんな人なんだろう」と思ったときにホームページからアクセスできるようになります。僕もアピールエリアに自分のプロフィールサイトを載せています。
まとめ
ここまで３つの項目を紹介しましたが、他にも「おすすめカード」や「サイト内検索」など色々あり、僕自信もまだ設定が追いついてないくらいです。
ですが、ますはこの３つさえ抑えておけばサイトの印象はとても良くなります。
僕もこれから勉強してためになった設定などありましたらまた共有していきますのでぜひまた見に来てください！
最後まで読んでいただきありがとうございました！
他のSNSも更新していこうと思いますので、そちらもチェックしていただけると、とっても嬉しいです！
YOUTUBE：short動画やAIを使った動画を作成予定：www.youtube.com/@マヨそば坊や
X：情報収集やブログの拡散に使います：(1) マヨそば坊や (@Mayosobaboya) / X
INSTAGRAM：リール動画やインスタ運用を勉強しながら発信していく予定です：Instagram
TIKTOK：主にAI動画を上げて行く予定です：マヨめん坊や (@mayomenboya) | TikTok
twitch：今後配信するかも（格闘ゲームやfpsゲームなど）：マヨそば坊や – Twitch
コメント