【WordPress】トップページをポータルサイト風にカスタマイズする方法【Cocoon】

WordPress
フリーランス猫
フリーランス猫

吾輩はフリーランス猫である。仕事はまだ、それほどない。
この社会を自由に生きられる方法を拾い集めている真っ最中である。

こんにちナァ、フリーランス猫です。

毎日更新しているこのブログは、WordPressで運営しています。

使っているテーマは無料テーマのCocoonです。

ブログ開設日は2020年2月28日。

これまではブログ記事を書いて更新することに注力しており…

トップページのカスタマイズは後回しだったのですが(^o^;)

/ ゴールデンウィークが自粛ウィークに!

ということで!

これを機に、いろんなWebサイトを参考にしながら、めちゃくちゃカスタマイズしました\(^o^)/

カスタマイズ…たのしいいいいいいいぃ!(叫び)

学生時代にHTMLタグとか使って、携帯HPをカスタマイズしてた頃を思い出しました。

フリーランス猫
フリーランス猫

モバイルスペースとか、peps!とか、懐かしい…

あのころは時間も忘れて、睡眠時間削ってひたすらいじってたナァ…。

というわけで

✔ トップページがどれだけ変わったのか?
✔ どんな風に変更したのか?
✔ 参考にしたWEBサイト

を今日は紹介していきたいと思います(*^^*)

トップページのカスタマイズに悩んでいる方、ポータルサイト風にしたいという方の参考になれば幸いです!

トップページのビフォー画像(通常のブログ風)

※写真はPC表示の画像です。

デフォルトで更新していたころはこんな感じでした。

通常のブログのトップページ、といった雰囲気ですね。

ご覧の通り、新着記事が順番に上から時系列に並んでいるデザインでした。

これでも悪くはないのですが…

私フリーランス猫のブログは幅広いジャンルをテーマに記事を更新しています。

なのでせっかく記事からトップページまで来てくれた方が、読みたいジャンルの記事にたどり着きにくいのはいかがなものかな…と。

美容の記事おもしろかった〜!他の美容の記事はないかな?

と思って、トップページに来たのに、新着記事の一覧しかないのは不親切だし、ブログ運営側としてもかなり損をするような気がしました。


そんな懸念点を解決するために変更したのがこちら!

✔新着記事

✔人気記事

✔カテゴリ別の新着記事

✔SNSを掲載

✔サイドバーにランキングと新着記事表示

上記の項目をカスタマイズした、トップページが以下になります!

トップページのアフター画像(ポータルサイト風)

画像を複数スクショして、並べて表示しているのでお見苦しい部分もありますがご了承くださいm(_ _)m

※写真はPC表示の画像です。

ジャジャジャジャーン!

いかがでしょう・・・?

めちゃくちゃポータルサイト風になって、大変気に入っております(自画自賛)

ポータルサイト風にするために、参考にしたサイト!

まさに私が理想とするトップページを作るための方法がこの記事に掲載されていました!

解説もわかりやすくてほんとにおすすめです。

ブログ名は「婿養子の島根移住ブログ | 地方移住×仕事(UIターン転職)×田舎暮らしガイド

はまちゃんさん、ありがとうございますm(_ _)m

私が行ったことは、こちらに載っているやり方でhtmiとCSSをカスタマイズするのみです…!

フリーランス猫
フリーランス猫

神様、仏様、はまちゃん様…!

Cocoonをおしゃれにカスタマイズしたい人へ

トップページをポータル型にするまではないけど、もっとおしゃれにできたらな〜と思っている方は、下記の記事が必見です!

またまた、はまちゃんさんの記事を参考にさせていただきました。

メニューバーで使用しているアイコンや、カルーセル部分はこちらを参考にさせていただきました!

この記事を読むまで、カルーセルのこともしりませんでした^^;

はまちゃんさんには感謝しかないですm(_ _)m

これからもプログ楽しみにしています!

プロフィールのカスタマイズもやってみた

トップページの項目をカスタマイズすると、サイドバーのプロフィール部分のシンプルさが目立って、気になってきました…。

フリーランス猫
フリーランス猫

おしゃれなプロフィールにカスタマイズしたいなあ…

そう思って、[プロフィール Cocoon カスタマイズ]で検索すると…

出てきました!

またまた私の理想とするプロフィールのデザイン〜!

ぽんひろさん、ありがとうございます!m(_ _)m

ビフォー

アフター

ナナナ〜!
こんなに変わるなんて感激!!

変更の方法はぽんひろさんのページを参考に!

ぽんひろさんのWEBサイトに、変更の方法がわかりやすく掲載されています。

そのとおりに行えば簡単にプロフィールがカスタマイズできましたよ!

同じようなデザインにしてみたいと思う方はぜひ!

プロフィールの他にも、カスタマイズで大変参考になる記事がたくさんあります。

ぽんひろさんありがとうございましたm(_ _)m

まとめ

いかがだったでしょうか?

自力で一からhtmlやCSSをいじるのはかなり大変ですが…

先人の知恵をお借りすれば、たった数時間でWEBサイトに劇的な変化が!

✔WordPress使っているけど、もっとカスタマイズしたい!

✔ブログ風からポータル風にしたい!

✔プロフィール部分ももっとおしゃれにしたい!

そう思っている方の参考になれば幸いです(^o^)

フリーランス猫
フリーランス猫

それでは、またナァ!

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