【Cocoon】簡単カスタマイズでサイト型にする方法をやってみた

WordPressは「ブログ」を作るシステムです。

しかし、応用すれば企業サイトでも、教室案内でも、レストランのメニューページでも、割となんでも作れるためこれだけ多くの人が利用するシステムへと進化しています。

LEOLOGは今の所ブログ的に使うしか考えていないので、従来通りの構成から変えるつもりはありませんが、無料テーマとして最強のCocoonを上手にカスタマイズするとブログ型からサイト型(風)のトップページに変更できるという技を知り、別のブログで実施してみたのでシェアしようと思います!

  • ポータルサイトや、情報発信サイトを作りたい人
  • 交流サイトを運営したい人
  • かなり多くのカテゴリに分かれたブログサイトを運営している人
  • Cocoonで「サイト型」トップページを作る方法
  • サイト型にするメリット・デメリット
  • サイト型にしたサンプル(Leo作)

ブログ型とサイト型の違い

そもそも論ですがブログ型とサイト型、何が違うのか?です。

わかりやすく(?)

実際のサイトの構成をスクショで紹介して比較しますね。

↑これがこのブログのトップページです。任意で変えれるっちゃ変えれますが、一般的なブログってだいたいこういう構造で、上から順に新しい投稿が並んでいく感じが多いはずです。

記事数が多かったり、複数のライターで運営しているタイプだとカテゴリーごとにブロック化されていたり、ライターごとに分けられていたり、特集ページが上に並んでいたり、それなりにバラエティはあると思いますが、とにかく基本的に新しいものから順に上からずらっと並ぶスタイルのものをブログ型と呼び、ブログとしては基本のスタイルです。

ちょっと縦に長くなっていますが、これがカスタマイズしたトップページで、サイト型にあたります。詳しくみたい場合は↓リンクからどうぞ。

 EXS BLOG

サイドバーの感じはほぼ同じだと思いますが、左カラム(メイン側)の構成が大きく違います。

ちょっと長いので全部載せていませんが、「カテゴリ」ごとに人気記事を3つずつ並べて、最後は↓こんな感じで「お知らせ」欄で閉じています。

お知らせ欄には案内や、広告(アフィリエイトも可)、新着情報など好きなことを載せられます。

左右に並べて比較しやすくしますね。

ともに背景白のページなので間に灰色を挟んでいます。

同じCocoonを元に、共有するCSSカスタマイズも多い2つのサイトですが、左がブログ型、右がサイト型になっています。

テーマレベルでサイト型にしている場合も

ちなみに最初に書いた通り、Wordpressはブログサイトを作るために開発されたものですが、応用で色んな形のページが作れます。

例えば、ボクの写真サイトである、leomiyanaga.comは、ポートフォリオスタイルに仕上がっています。

これがトップページのイメージですが、どっからどう見てもブログとは違ったデザインですよね?ですが、これもWordpressを元に作られているサイトです(テーマは、有料テーマを購入しています)。

WordPressのテーマは無数にあり、有料テーマにお金を出すことをいとわなければだいたいどんな形のサイトも実現可能だと思ってOKです!

なので、

初めからお金を出すつもりがあればサイト型に作り込まれたWordpressテーマを買ってしまえば今回の記事を読む必要性はゼロです(笑)。

今回の記事は、Cocoonというブログ型にデザインされた無料テーマをサイト型にするお話です。

サイト型のメリット

ブログは、新しい情報が一番価値がある、とまでは言いませんが、

どんどん新しい情報が掲載されていく中で、基本的に読者はその新しい記事を読みたくてやってくることが多いイメージです。

一方、サイト型は、先ほども書いた通り、カテゴリごとに整理されていたり、ライターごとに分けられるなど、情報が整理整頓されているのが特徴です。

例えば市役所のホームページをイメージして下さい。

豊中市のホームページ(https://www.city.toyonaka.osaka.jp

自治体により差はあると思いますが、だいたいこの豊中市のサイトの様に市民が求める情報をカテゴリごとに分けて情報をまとめてあるはずです。

例:婚姻届が欲しい時

結婚するので婚姻届が欲しいという場合、戸籍担当課にもらいにいくはずですが、市役所のページだったらだいたい、「暮らし」「各種手続き」なんかのカテゴリの中にあるかなって思います。

たくさん情報がある中から最短で適切な情報にアクセスできるサイトにするためには整理整頓が大事ですよね。

今は見る人が減ったかも知れませんが、かつてみんなが最初におとづれた、Yahoo!Japanのページも「芸術と人文」「メディアとニュース」などと、たくさんのカテゴリに分けられていて、そこから自分の求める情報を探したものです。

ブログ型のメリットは?

メリットと言えるかわかりませんが、基本的なブログ、つまり日記的な書き方で運営している場合、新しい記事をどんどん書いていって、その順に並ぶことに何も違和感ってないはずです。

紙の(手帳型の)日記を書く人も、初回からずっと順番に日が進む順に書いていきますよね?

途中で順番を入れ替えたりしませんよね?

つまり、メリットと違うかも知れませんが、基本スタイルを変更する理由がないのです。

逆に、ブログを読みに来た人からしたら、最新情報(最新の記事)から順番に読んでいけるのでむしろ便利なのです。

サイト型のデメリットは?

ではサイト型にデメリットはあるでしょうか?

サイト型は整理されていることがメリットですが、ブログ的に読みに来た人は特にカテゴリごとに情報を探すわけではないのでお目当の記事にたどり着くために逆に面倒かも知れません。

サイト型にしたい人は誰?

以上の理解から、今回の記事を読んで、トップページのカスタマイズをしたいのは誰か?という話ですが、

最初に書いた通り、

  • ポータルサイトや、情報発信サイトを作りたい人
  • 交流サイトを運営したい人
  • かなり多くのカテゴリに分かれたブログサイトを運営している人

これらの人はここから続きを読んでCocoonブログをサイト型に改造する価値があるかも知れません。

ボクが先ほど紹介したEXS BLOGは、ボクがやっている国際交流事業を取り扱う会社のブログサイトです。

コーポレートサイトではなくブログサイトなのでずっとブログ型でやっていましたし、それで困ることもありませんでした。

しかし、次の項で紹介する記事を見て、Cocoonをサイト型(風)にできると知って、これはアリかも!と思い取り入れました。

理由は、

  1. それなりに幅のあるカテゴリが共存するから
  2. 複数が書いた記事が共存するから
  3. ブログだが、ゆくゆくは簡単なポータルサイト的な使い方も考えているから

以上の3つが主ですが、1と2はすでに紹介した通りで、複数の人間で書いているブログだと、読者の中には「この人の記事を見に来る」という人もいて、ライターごとに整理されていることは望ましい可能性があります(EXS BLOGではその様な整理はまだしていませんが)。

また、うちのやっている交流事業の内容を紹介する記事を読みたいだけの人と、シアトルの情報を探しにやってくる人、留学情報を探しにくる人、など、サイトに来る人にキャラクターの違いがあると考えたためサイト型への変更にメリットを感じました。

そして3つ目の理由は将来性ですが、すでにトップページのメニューには組み込んでいる通り、

「イベントカレンダー」みたいなコンテンツを入れて、EXSが主催するイベントの告知や管理を担うページを作ったり、交流掲示板を組み込むことなどを見越してサイト型へのアップデートを考えました。

どうやってサイト型にするか?

ここまで読んで、自分もCocoonでサイト型ページを作りたい(持ちたい)と思った方は続きを読んで下さい。

ボクはプログラマでもWebデザイナーでもありませんので、ゼロからコーディングしたり、いろいろ作ることはできません。いろいろなネット上の記事を参考にLEOLOGもカスタマイズしまくっています。

今回のネタも、以下のページを参考にしました。

https://wakuwaku-keigo.com/cocoon-top-page/

『【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法』というわかりやすい題名で情報満載のページです。

テーマをCocoonに変更した後、どんなカスタマイズがあるのかな〜とネット上を探していた発見しました。

多くのHow toサイトにある「コピペでOK」スタイルなので、記事をよく読んで、自分の求めるものと合致するなら多くの方が同様の結果を求められると思います。

もちろん、

CSSって何?HTMLって何?美味しいの?

という人はやめておくべきです。

が、ある程度のコードとかカスタマイズ、stylesheetが何か、くらいわかっている人にとってはそんなにハードル高い話ではないと思います。実に細かく丁寧に紹介されているので!

カスタマイズにかかる時間

これは元の知識や慣れ、パソコンの能力などによると思いますが、

ボクの場合やろうと思って、一旦の完成に至るまで1時間ちょいでした。

実際はそこからちょっとずつ細かなカスタマイズを加えたので、総合では4, 5時間かけていると思いますが、はまちゃん氏が書かれている上記の記事を読んで→CSSなどをいじる作業だけなら2時間もいらないと思います!

Leoが追加でいじった部分

ボクが追加でいじった部分は主に見出しです。

はまちゃん氏のテンプレでは、

H2タグとH3タグで見出しを整理しているのですが、ボクがもともとH2, H3タグをカスタムしていた都合もあり、コピペのままだとデザインがおかしくなりました。

 こちらで紹介している通りにいじっています。

なのでその辺をいじって、自分なりに気にいるデザインに変更しました。

チュートリアルに書いている通りだとこんな感じの見出しになるのに対し、ボクは、

こんな感じですこーしだけ違うスタイルになっています。

この辺りは変更して自分流にカスタマイズしてもよし、コピペのままありがたく使わせていただくもよし!ですね。

総括・まとめ

  • 最強無料テーマCocoonをサイト型にカスタムする手がある
  • サイトの目指す方向性が合致すれば”アリ”なカスタマイズ
  • コピペで簡単にできる紹介ページに世話になろう

結論を言うと、ここまで読まれた方は、サイト型に興味があるか、それを求めていた人だと思いますので、簡単にそこにたどり着けるはまちゃん氏のやり方を採用すると幸せになれるのではないかと思います!

しかし、本当に全く知識がゼロという方はどっかでつまずいて、訳が分からなくなってお手上げになる、トイ可能性もあるので、

  • それなりにWordpressやCSSなどの知識がある
  • はまちゃん氏の記事を読んで基本的には全部理解できている
  • 本当にサイト型が自分の求める結果と自信がある

以上のすべてに当てはまる人以外は手を出さないほうがいいのかも知れません。

WordPressは本当にウェブサイトづくりやメンテ、運営を簡単にしました。

ボクみたいに独学だけの人間でも何個も何個もサイトを作れるようになったのは本当に革命的だと思っています。

が、ある程度の知識は必要なので、自分でチョチョっといじられるようになるには独学でも少しは勉強が必要です。

そういうのを抜きで今回紹介したサイト型ページを持ちたいという方は格安でサイト制作させていただきます!ご相談は気軽に以下からどうぞ!本格専業のプロじゃない代わりに、親身に相談にお応えできると思います!

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!


Fatal error: Uncaught ErrorException: md5_file(/home/users/1/leoism88/web/LeoLog/blog/wp-content/litespeed/js/ed4fcd0793b9cd5421a69fb458f87bb5.js.tmp): failed to open stream: No such file or directory in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php:130 Stack trace: #0 [internal function]: litespeed_exception_handler(2, 'md5_file(/home/...', '/home/users/1/l...', 130, Array) #1 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php(130): md5_file('/home/users/1/l...') #2 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(837): LiteSpeed\Optimizer->serve('https://blog.le...', 'js', true, Array) #3 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(382): LiteSpeed\Optimize->_build_hash_url(Array, 'js') #4 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(264): LiteSpeed\Optimize->_optimize() #5 /home/use in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php on line 130