こんにちは。マリリです。
突然ですが…
当ブログのトップページをリニューアルいたしましたっ!!

いぇーい(*´∀`*)v♪
ワードプレスで記事を書いて更新していくと、トップページでは新しい記事から順番に掲載されます。カテゴリーは関係ありません。
これは普通のことであり勝手にそうなっているので、ブログ初心者の私は「そういうものなんだ」と思っていました。
でも、私は不満でした。

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

コレは一体どうやっているんだろう。こういうテーマがあるのかな?自分でコードを書いたり難しい事をしないといけないなかなぁ…
そんな時に見つけてしまったのです。
私と同じワードプレスのテーマ『Cocoon』を使って独自のトップページの作り方を詳しく解説した記事を!!

私もパクる挑戦するしかないですね!!(^o^)
ということで、今日はブログのトップページをカスタマイズする方法を紹介しちゃいます(^^)あなたもご一緒にいかがですか♪
トップページとは
トップページというのは、ブログのホーム画面のことです。ブログの入り口であり顔ですね。
私が使っているワードプレスのテーマ『Cocoon』ではスキンというところを使ってブログ全体の色や雰囲気を簡単に変えることができます。
それだけでもブログの雰囲気を変えたり可愛くできるので気に入っていたのですが、ただ記事が並んでいるだけなのでちょっと物足りないな〜というのはずっと感じていたんですよね(´・ω・`)
トップページを変更した理由
トップページを変更するまで私が感じていた不満は、
- なんかパッとしない
- どんなブログかわかりにくい
- 過去記事が埋もれそう
というものです。
このブログはテーマを1つに絞っておらず、私が思った事を書きたい順番で書いていく雑記ブログです。
ただの新着記事順だと、初めてブログを読んでくれる方に
「このブログはどんなブログなのか、マリリという人はどんな人で何を言いたいのか」
が伝わりにくいです。

「何かを伝えたい」とかそんなカッコイイものじゃないんですけど…テヘ(*´∀`*)
そんな時に、はまちゃんさんという方のブログを見つけました。
そして、トップページをカスタマイズすれば私の不満が解決できる!と思い、早速真似させていただきました〜♡

はまちゃんさんありがとうございますっ(*^▽^*)
新しいトップページは
- スッキリまとまってパッとする
- どんなブログかよくわかる
- 過去記事も埋もれにくい
このように改善され、私の悩みが見事に解決いたしました!
参考にさせてもらった記事はコレ!
それでは早速、パクリまく参考にさせていただいたはまちゃんさんの記事を紹介します♪

↑↑じゃーん!この記事ですっ!!(*´∀`*)
はまちゃんさんはこの記事の他にもブログのカスタマイズの記事などをとってもわかりやすく書いてくれています。
同じCocoonを使っているので初心者の私にもわかりやすくて本当に助けていただきました。
必要なことははまちゃんさんが全て書いてくれています。
私はこれ以上素晴らしい記事は書けないので、トップページをカスタマイズしたい方は是非はまちゃんさんの記事を読んでくださいね☆

お任せしちゃってすみませーん( ´∀`)
私は、トップページに新着記事とカテゴリーごとの人気記事を並べました。
初めはカテゴリーごとの人気記事のみにしていたのですが、ブログの最新記事はどれかわかりやすく載せた方が「ブログがきちんと更新されているかどうか」がよくわかると考えたからです。
ちなみに、新着記事一覧ページの作り方の記事もございます。それがコチラ☆↓

まさに隙なし!至れり尽くせりです!!ありがとうございます〜(*´∀`*)
Cocoonには新着記事や人気記事を順番に掲載するためのショートコードが初めから備わっています。
が、私は全く知りませんでしたー!!

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

無料とは思えない、多機能で使いやすいCocoon。私の知らない便利機能がまだまだ山ほどあることでしょう。
少しずつ勉強をして使いこなしていきたいです(^^)
難しかったところ
はまちゃんさんは、トップページをカスタマイズするためのコードを公開してくれています。
このコードをコピーしてブログ名などを少し変えるだけで、はまちゃんさんのような素敵なトップページを作ることができます。
だから慣れている方や知識がある方には簡単にできると思うのですが…私のようにブログやワードプレス自体が初めての全くの初心者には少し難しかったです。
今回のカスタマイズにはCSSの追加も必要です。CSSというのは、ざっくり言うとブログの見栄えを良くするためのプログラミングの言語です。

私には難しくてサッパリでーす( ´∀`)ハァ〜サッパリサッパリ
私はこのブログにCSSを追加するのは今回が初めてだったのでとても緊張しました。
変にコードをいじって間違えてしまいブログが表示されなくなったら大変ですからね(^^;)

直せる自信も知識もありません〜(´°̥̥̥̥̥̥̥̥ω°̥̥̥̥̥̥̥̥`)
私はスマホでこのブログを書いています。今回のカスタマイズも全てスマホで行いました。
完成後は、タブレットでも見え方の確認!
今回のリニューアルにあたりサイドバーを無くしました。最近はスマホからブログを読んで下さる方が多いだろうし、管理が面倒になったので(^_^;)
ただ、サイドバーが無いとパソコンやタブレットで記事を見た時に画面いっぱいに広がるのでのっぺりした印象になってしまうんですよね…
そこで、ページタイプを1カラム(狭い)にしてみました。記事がスリムになったので多少見やすくなったかな〜と思っています。
まとめ:本気の初心者はブログに慣れてからのカスタマイズがオススメです(^^)
上にも書きましたが、今回のカスタマイズは本気の初心者には難しいと思います。
私はワードプレスでブログを始めてから3ヶ月ほど経ちました。少し慣れてきたのでやっとできた…という感じです。
サーバーを契約してブログを始めた直後にはまちゃんさんの記事を見てもサッパリ意味がわからなかったと思います(汗)
ブログを始めたばかりだと記事数も少ないですしね。
だから、本気の初心者の方は今すぐトップページのカスタマイズをせずに、まずははまちゃんさんの記事をブックマークしておいてください。
そして、2〜3ヶ月くらい経って記事がたまる&ワードプレスにも慣れた頃にはまちゃんさんの記事を見ながらカスタマイズに挑戦してください!
私は今回トップページをリニューアルしてめちゃくちゃ満足しています(*^^*)
自分のブログがより一層大切になりました♡
とはいえ、今はまだはまちゃんさんのトップページをパクりオマージュしただけです。
これからも色々と勉強をして、自分らしさを出せるようにブログを改造していきたいですね〜(*^▽^*)
コメント