【ワードプレス】初心者が挑戦!Cocoonで固定ページを使ったオリジナルトップページの作り方

手でOKの合図をするスーツ姿の女性スマホでブログ

こんにちは。マリリです。

突然ですが…

当ブログのトップページをリニューアルいたしましたっ!!

マリリ
マリリ

いぇーい(*´∀`*)v♪

ワードプレスで記事を書いて更新していくと、トップページでは新しい記事から順番に掲載されます。カテゴリーは関係ありません。

これは普通のことであり勝手にそうなっているので、ブログ初心者の私は「そういうものなんだ」と思っていました。

でも、私は不満でした。

マリリ
マリリ

ブログのトップページ、なんかパッとしないなぁ…(´-`)

そして、色々なブログを読んでいると、新着記事順だけではないオシャレで個性的なトップページのブログもたくさんあります。

マリリ
マリリ

コレは一体どうやっているんだろう。こういうテーマがあるのかな?自分でコードを書いたり難しい事をしないといけないなかなぁ…

そんな時に見つけてしまったのです。

私と同じワードプレスのテーマ『Cocoon』を使って独自のトップページの作り方を詳しく解説した記事を!!

マリリ
マリリ

私もパクる挑戦するしかないですね!!(^o^)

ということで、今日はブログのトップページをカスタマイズする方法を紹介しちゃいます(^^)あなたもご一緒にいかがですか♪

スポンサーリンク

トップページとは

トップページというのは、ブログのホーム画面のことです。ブログの入り口であり顔ですね。

私が使っているワードプレスのテーマ『Cocoon』ではスキンというところを使ってブログ全体の色や雰囲気を簡単に変えることができます。

それだけでもブログの雰囲気を変えたり可愛くできるので気に入っていたのですが、ただ記事が並んでいるだけなのでちょっと物足りないな〜というのはずっと感じていたんですよね(´・ω・`)

トップページを変更した理由

トップページを変更するまで私が感じていた不満は、

  • なんかパッとしない
  • どんなブログかわかりにくい
  • 過去記事が埋もれそう

というものです。

このブログはテーマを1つに絞っておらず、私が思った事を書きたい順番で書いていく雑記ブログです。

ただの新着記事順だと、初めてブログを読んでくれる方に

「このブログはどんなブログなのか、マリリという人はどんな人で何を言いたいのか」

が伝わりにくいです。

マリリ
マリリ

「何かを伝えたい」とかそんなカッコイイものじゃないんですけど…テヘ(*´∀`*)

そんな時に、はまちゃんさんという方のブログを見つけました。

そして、トップページをカスタマイズすれば私の不満が解決できる!と思い、早速真似させていただきました〜♡

マリリ
マリリ

はまちゃんさんありがとうございますっ(*^▽^*)

新しいトップページは

  • スッキリまとまってパッとする
  • どんなブログかよくわかる
  • 過去記事も埋もれにくい

このように改善され、私の悩みが見事に解決いたしました!

参考にさせてもらった記事はコレ!

それでは早速、パクリまく参考にさせていただいたはまちゃんさんの記事を紹介します♪

【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込

↑↑じゃーん!この記事ですっ!!(*´∀`*)

はまちゃんさんはこの記事の他にもブログのカスタマイズの記事などとってもわかりやすく書いてくれています

同じCocoonを使っているので初心者の私にもわかりやすくて本当に助けていただきました。

必要なことははまちゃんさんが全て書いてくれています

私はこれ以上素晴らしい記事は書けないので、トップページをカスタマイズしたい方は是非はまちゃんさんの記事を読んでくださいね☆

マリリ
マリリ

お任せしちゃってすみませーん( ´∀`)

私は、トップページに新着記事カテゴリーごとの人気記事を並べました。

初めはカテゴリーごとの人気記事のみにしていたのですが、ブログの最新記事はどれかわかりやすく載せた方が「ブログがきちんと更新されているかどうか」がよくわかると考えたからです。

ちなみに、新着記事一覧ページの作り方の記事もございます。それがコチラ☆↓

WordPressの固定ページに新着記事一覧を表示させる方法【プラグインなし】
こんにちは!ブログのトップページをカスタマイズしまくりのはまちゃん(@wakuwakukeigo)です。「ブログのトップページが、新着記事一覧なんてつまらない」そう考えて、ブログのトップページ(フロントページ)を固定ページ化して専門サイトの

まさに隙なし!至れり尽くせりです!!ありがとうございます〜(*´∀`*)

Cocoonには新着記事や人気記事を順番に掲載するためのショートコードが初めから備わっています。

が、私は全く知りませんでしたー!!

マリリ
マリリ

宝の持ち腐れですね( ;∀;)

こんな便利な機能をつけてくれているなんて、Cocoon製作者のわいひらさんは神ですね。ありがとうございます。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

無料とは思えない、多機能で使いやすいCocoon。私の知らない便利機能がまだまだ山ほどあることでしょう。

少しずつ勉強をして使いこなしていきたいです(^^)

難しかったところ

はまちゃんさんは、トップページをカスタマイズするためのコードを公開してくれています。

このコードをコピーしてブログ名などを少し変えるだけで、はまちゃんさんのような素敵なトップページを作ることができます。

だから慣れている方や知識がある方には簡単にできると思うのですが…私のようにブログやワードプレス自体が初めての全くの初心者には少し難しかったです。

今回のカスタマイズにはCSSの追加も必要です。CSSというのは、ざっくり言うとブログの見栄えを良くするためのプログラミングの言語です。

マリリ
マリリ

私には難しくてサッパリでーす( ´∀`)ハァ〜サッパリサッパリ

私はこのブログにCSSを追加するのは今回が初めてだったのでとても緊張しました。

変にコードをいじって間違えてしまいブログが表示されなくなったら大変ですからね(^^;)

マリリ
マリリ

直せる自信も知識もありません〜(´°̥̥̥̥̥̥̥̥ω°̥̥̥̥̥̥̥̥`)

私はスマホでこのブログを書いています。今回のカスタマイズも全てスマホで行いました。

完成後は、タブレットでも見え方の確認!

今回のリニューアルにあたりサイドバーを無くしました。最近はスマホからブログを読んで下さる方が多いだろうし、管理が面倒になったので(^_^;)

ただ、サイドバーが無いとパソコンやタブレットで記事を見た時に画面いっぱいに広がるのでのっぺりした印象になってしまうんですよね…

そこで、ページタイプを1カラム(狭い)にしてみました。記事がスリムになったので多少見やすくなったかな〜と思っています。

まとめ:本気の初心者はブログに慣れてからのカスタマイズがオススメです(^^)

上にも書きましたが、今回のカスタマイズは本気の初心者には難しいと思います。

私はワードプレスでブログを始めてから3ヶ月ほど経ちました。少し慣れてきたのでやっとできた…という感じです。

サーバーを契約してブログを始めた直後にはまちゃんさんの記事を見てもサッパリ意味がわからなかったと思います(汗)

ブログを始めたばかりだと記事数も少ないですしね。

だから、本気の初心者の方は今すぐトップページのカスタマイズをせずに、まずははまちゃんさんの記事をブックマークしておいてください

そして、2〜3ヶ月くらい経って記事がたまる&ワードプレスにも慣れた頃はまちゃんさんの記事を見ながらカスタマイズに挑戦してください!

私は今回トップページをリニューアルしてめちゃくちゃ満足しています(*^^*)

自分のブログがより一層大切になりました♡

とはいえ、今はまだはまちゃんさんのトップページをパクりオマージュしただけです。

これからも色々と勉強をして、自分らしさを出せるようにブログを改造していきたいですね〜(*^▽^*)

最後まで読んでいただきありがとうございます。感謝の気持ちでいっぱいです♡
スマホでブログ
スポンサーリンク
☆マリリをフォローする☆
マリリとモモコとヨッシーと。

コメント

こんにちは。マリリです。

7歳の女の子と3歳の男の子を育児中のアラサー主婦です。

漫画やゲームが大好きです。子供が大きくなってきたので一緒にアニメを見たりゲームができるのがとっても嬉しい今日この頃。

座右の銘は『誰でも最初は1年生』。いくつになっても新しい事に挑戦し、学び続けていきたいです。

人生初のブログなので、分かりにくいところや読みにくいところがあったらすみません。少しずつ勉強して、多くの人に読んで楽しいと思ってもらえるブログにしていきたいです。

よろしくお願いします。

※2019年7月にアイコンを変更しました。それよりも前に書いた記事のアイコンは、ブログの歩みとして変更せずそのままにしています。
新しいアイコンは、プロフィールのこのアイコンです。

☆マリリをフォローする☆

アーカイブ

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