WordPressサイトのトップページ編集とデザインをカスタマイズ

サイトの設定
スポンサーリンク

 今回の記事は、ブログを開設したばかりの方でサイトを開いた時に、
最初の表示されるトップページ(フロントページ)の編集、カスタマイズ方法が分からないという方向けにカスタマイズの方法を説明していきます。

わか
わか

さぁブログを開設したぞ!早速サイトを見てみよう!!

☟サイトを開いてみたら☟

わか
わか

な、なんじゃこりゃ、、

「Hello world!」、、?

こんにちは、世界?

こうなった人はいませんか?

 せっかくブログ開設の第一歩を踏み出し、レンタルサーバーなどと契約を済ませたのに早速心が折れそうになっている方は、この記事を読んで頂きたいです。

 この記事を読みながら設定を行えば、下のページ程度には設定することができますよ!


 新着記事と人気記事は、ブラウザ画面で見ると、横並びになります。

わか
わか

このように画像を入れてみたり、吹き出しを入れたりと、ご自身で色々なアレンジが可能です!

面倒なことは抜きにすぐに終わらせたい方は、目次から4番に飛ぶと早いです笑

※一生懸命書いたんだけどな、、笑

この記事の対象になる人

①WordPressでcocoonを使っている人
②ブログを始めたばかりの人
③トップページを編集したい人
④難しい操作が苦手な人
⑤CSSなどでつまずいてしまった人

訪問者
訪問者

とはいえ、難しい操作とかが必要になるんじゃないの?

難しいのは苦手なんだよね、、

わか
わか

大丈夫、今回はその辺りも含めて追加CSSなどは一切使わずに設定して行くからね🤗

この記事が必要ない人

①cocoon以外のテーマを使っている人
②既にトップページの設定が済んだ人
③追加CSSを理解している人
④難しくても凝ったデザインに挑戦したい人

 上のような方々には難易度が低かったり、既に習得している内容になってしまうかと思います。

 また、cocoon以外のテーマを使ってる方はもっと簡単にカスタマイズ出来ることもあるようなので、ご自身が使用しているテーマで検索してみると良いと思います。

1.サイトのトップページ(フロントページ)について

 サイトのトップページと一言で言っても、かなりお洒落なカスタマイズしている方だったり、シンプルなカスタマイズにしている方だったりと多種多様です。

大まかな大別として

①ブログ型トップページ
②サイト型トップページ
この2種類がメジャーです。
今回はここに、、
③固定ページを使った簡単なサイト型風トップページ
を追加して紹介したいと思います。

 では、それぞれのイメージ画像と一緒に設定方法も説明していきます。

2.ブログ型トップページの設定方法

 ブログ型のトップページ設定方法ですが、結論から言うと特に設定しなくてもそのままの状態でブログ型トップページになっています。

わか
わか

試しにテスト記事を5本上げてみました。

アイキャッチ画像とかも何も設定していません、ごめんなさい。

 このように既に投稿順に記事が上がっています。
これがブログ型と呼ばれるトップページになります。

 ここからデザインをオシャレに変えるとなるとCSSを追加したりなど、多少の設定が必要になるので、ブログ初心者の方はこのまま記事を上げていって良いと思います。

 記事を投稿したりしながらWordPressをいじってる内に慣れてくると思うので、それまでは無理して覚える必要はないでしょう。

わか
わか

無理に覚えようとして心が折れてブログを辞めてしまうくらいなら、一件でも一日でも長くブログを続ける方が良いと思いますよ!

3.サイト型トップページの設定方法

 サイト型のトップページへの変更方法ですが、今回はCSSを使わずに変更する。ということにするので、cocoon設定から設定できる簡単な変更方法だけにしたいと思います。

注意点

この設定だけでは、オシャレなデザインにすることはできないです。
デザイン性を求める場合は、CSSを追加してHTMLを貼るなど、技術介入が必要となります。

わか
わか

WordPressに慣れてCSSについても多少理解してきた頃にでも再度オシャレなデザインに挑戦してみると良いかもしれませんね!

3-1.cocoon設定の変更に移る

メニューからcocoon設定を開きましょう。

インデックス」タブを押してください。

フロントページタイプ」の選択項目を一覧→タブ一覧に変更し、表示カテゴリーを最大で3個まで選びます。
※今回の簡易設定では、3個までしか選択できないので注意しましょう。

そのまま下にスクロールして、変更をまとめて保存を押して設定終了です。

変更後の画面はこのような感じになります。

 新着記事の他に、カテゴリー①・②・③の4個が表示されていますね。

 これでサイト型へ変更出来ました。

4.固定ページを利用したサイト型風トップページについて

 この記事の最初で見せたような「なんちゃって」ですが、それなりにオシャレに見せる方法に移ります😳‼︎

固定ページを新規で作成します。

とりあえずそのまま保存して良いです。

タイトルなしの固定ページが出来上がりましたね。
このページを編集していきます。

タイトルを入れると邪魔なので、入力しなくて大丈夫です🙆

まずは「カラム」と呼ばれるブラックを挿入しましょう。

カラムを挿入すると、分割を選べるので、今回は二分割(50/50)にしました。

カラムの中央に「+」ボタンがあるので、今度は段落を挿入します。

段落を挿入すると、カラムに題名を入れられます。
今回は、上は「新着記事」下は「人気記事」にしてみました😊
カラムに+ボタンがあるのでタップします。

上と下のカラムにそれぞれ新着記事と人気記事を挿入して下さい。

その後は、自由に画像を入れてみたりしても良いと思います😌

場所を変えたければ、ブロック毎に矢印を押すと上下に移動させられます。

上に移動してみました。

後は吹き出しを入れてみたり、ご自身の好きなように文章などを入れて下さいね。

満足できる仕上がりになったら、固定ページを公開して次の設定に移ります。

メニュー画面に戻り、設定から表示設定にいきます。

ホームページの表示を固定ページに変更し、固定ページ一覧から今回タイトルをつけてないので、タイトルなしを選んでください。

これで設定は終了となります。

わか
わか

お疲れさまでした😊

今回は、追加CSSやHTMLがまだ理解できていない方でも設定できるやり方を記事にしてみました。

 せっかくブログを開設したのですから、まずは記事を書いてみる!という所までは頑張って進めて記事を書いてみましょう。

わか
わか

見た目なんて二の次で良いと思います!

まずは続けなければ意味がないですよ😌

 とはいえ、私も全く理解できていないにも関わらず見た目が気になって仕方なかったので、気持ちは分かります。
 この方法なら始めたばかりの方でも設定出来るはずですので、まずは繋ぎの気持ちで設定してみて下さいね!

ブログを始めたらまずはアフィリエイトサイトに登録しましょう。
A8.netなら審査なしで登録できます😳

まだブログを始めてない方で、
始めてみようと思っている方は、レンタルサーバーと契約するとブログを開設出来ます。
私はConoHaWINGを使ってます😊

レンタルサーバーについての記事はこちらのリンク

ブログを開設して公開するまでの過程の目安記事はこちらのリンクで公開してます。

随時リライトして読みやすく改善して行きますので、応援よろしくお願いします🙇

タイトルとURLをコピーしました