【Cocoon】サイト型トップページを固定ページから作る方法

島根県
スポンサーリンク
ブログ初心者
ブログ初心者

新着記事が上から並ぶトップページって分かりにくいな。

でもサイトっぽいのってどうやって作るんだろ?

こんな初心者の悩みに答えていきます。

結論からいえばはまちゃん氏の下記記事を参考に作っていきます

この記事は、上記記事の補足をするものです。

何か分からないことがあれば当記事を覗いてみてください。

どんなトップページがつくれるの?

まずはまちゃん氏の上記記事を読むと、下の画像のようなトップページも作成可能です。

当ブログのトップページ

全体像&操作感もチェックしたいかたは当ブログのトップページをご覧ください。

また本家はまちゃん氏のトップページを見たい方はこちらをクリック

カテゴリごとに記事が並び、自動で新着記事が更新されるようになっています。

この記事は2020年2月17日に執筆しています。

時間の経過とともに、更にカスタマイズしている可能性があります。

このトップページは勿論、島根県在住のブロガー はまちゃん氏 の記事を参考に作成しています。

ちなみに、はまちゃん氏は山陰中央新報にも掲載された島根のブロガーさんです。

それでは、改めて、その記事を紹介させていただきます。下記は必ずチェックしてください。

初心者用の補足事項

実は私もブログ初心者で、つい先日トップページを作成しました。

その時に初心者過ぎて私自身がつまづいた所とその解決策を紹介していきます。

初心者過ぎてつまづいた箇所
  • トップページのテンプレHTMLコードってどこにコピペすればいいの?
  • 「このカテゴリをもっと読む」ボタンにリンクさせるURLが分からない。
  • 「見出し3」のデザインを変更するCSSはどこにコピペすればいいの?
  • 作成した固定ページをトップページ化させたいけど表示設定が見つからない
ruru
ruru

全て簡単に解決する疑問だからご安心を!

トップページのテンプレHTMLコードってどこにコピペすればいいの?

まずはこれが解決出来ないと何も始まりませんね。

下記手順で解決します。

  1. HTMLを全て選択してコピーする。
  2. 自分のWordPressにログインする。
  3. 固定ページ 新規追加 をクリック
  4. h1タイトルを適当に入力
  5. ブロックの追加でクラシックを選択
  6. HTMLとして編集を選択
  7. コピーしたHTMLを貼り付ける。

手順の3~7はGIF画像にしたので、読むのがめんどくさかった下記をご覧ください。

「このカテゴリをもっと読む」ボタンにリンクさせるURLが分からない。

こちらもサクッと解決していきます。

カテゴリのURLは下記のようになっています。

“https://ブログURL/category/カテゴリー名/”

当ブログの場合を例にすると、

ブログURL ➡”lifengineer.com”

カテゴリー名➡”shimane”

のようになります。

なお、カテゴリー名は以下で確認・編集できます。

  1. 投稿 カテゴリ をクリック
  2. 任意のカテゴリ名からクイック編集をクリック
  3. スラッグの欄に好きなカテゴリ名を入力(ローマ字がSEO的におすすめ)
  4. カテゴリーを更新をクリック

例えば私の場合、下の写真のように設定しています。

category

名前は読者の目に触れるものなので、分かりやすいものに設定しましょう。

「見出し3」のデザインを変更するCSSはどこにコピペすればいいの?

デザイン変更は必須ではないですが、こだわり派のあなたの為にサクッと解決していきます。

  1. 外観 テーマエディター をクリック
  2. Cocoon Child を選択し選択をクリック
  3. スタイルシート(style css)をクリック
  4. /必要ならばここにコードを書く/ の下にコピーしたCSSを貼り付ける
  5. ファイルを更新 をクリック

スタイルシートに新しいCSSを貼付ける前にする前に、既存のCSSを別のテキストエディタにコピペしておくと、失敗しても元に戻せるので安心です。

2~3の手順を画像にまとめましたので読むのがめんどくさい方はこちらをご確認ください。

ruru
ruru

ファイル更新をクリックしたら、トップページ用の固定ページに戻り、プレビューで確認してみよう。

編集画面は何も変わらないのが普通なので、まだあわてるような時間じゃない

作成した固定ページをトップページ化させたいけど表示設定が見つからない

ラストにこちらを解決して終わりにしましょう。

  1. 設定表示設定 をクリック
  2. 固定ページをクリック
  3. ホームページ欄でトップページ用固定ページに記入したh1タイトルを選択
  4. 変更を保存をクリック

以上で、無事トップページの作成は終わりです。

文章は読まない派の為にGIFも載せたので参考までにどうぞ。

ruru
ruru

ホームページ欄に作成した固定ページが出ない人は、固定ページを公開しているかチェックしてみよう。

公開済みの固定ページしか選択できないよ

おわりに

お疲れさまでした。

疑問は無事解決できたでしょうか?

これで初心者から一歩リードしたブログになったかと思います。

デザインはイジりだすとキリがないのでほどほどに(笑)

ではまた!

コメント

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