スポンサーリンク

【WEBサイト制作実績】

WordPress

当記事では、無料テーマCocoonと有料テーマSWELLで実際に制作したWebサイトの制作実績をご紹介します。

無料Cocoonテーマ、有料テーマSWELLのそれぞれの特徴もご説明します。

この記事でわかること

WordPressテーマごとの制作実績

無料と有料どちらのテーマがご自身に向いているか

Cocoonで制作したサイト

SWELLで制作したサイト

 

無料テーマCocoonでサイトを整えた裏側

最初にご紹介した「サツママ育自手帳」は無料テーマのCocoonを使って作成しています。

サイトの見た目よりも記事に注力をしたい場合はCocoonで十分です。

ただし、見た目を整えるにはcss、ショートコードが必要になります。

(見た目をそれほど気にしなければ必要ありません!個人ブログやアフィリエイトサイトにはCocoonが良く使われています。)

プログラミング用語が出てきた瞬間、なんか難しそうな雰囲気になりますね。

すぅ子
すぅ子

正直、けっこう調べて試行錯誤しました。

では実際に、こちらのサイトのフロントページの裏側をお見せします。

実際のショートコード

さらに、一覧記事のサイズを整えるためにCSSを編集します。

実際のCSSの一部をご紹介

このように、ショートコードとCSSを組み合わせてできたフロントページがこちら。

cocoonで見た目を整えるには、調べることがたくさん出てきます。

ですが、けっこう鍛えられ、試行錯誤できるので楽しくもあります。

cssに慣れれば、それなりに自由に表現できます。

すぅ子
すぅ子

無理!そんなの楽しくない!めんどうなことしないでお洒落にしたい!

という方は有料テーマのSWELLをおすすめします。

SWELLを見てみる

有料テーマSWELLでサイトを整えた裏側

SWELLではCSSやショートコードはほぼ使わずに見栄え良くできます。

また、SWELLオリジナルの機能も充実しています。

実際に筆者がcocoonとSWELL両方を使ってみて、特に良かったSWELLの機能を2つご紹介します。

スマホ画面でのカラム横並び表示

例えば、フリーランス様のサイトのスマホ画面。

bouquetduchocolat様Webサイトより

このように、カラム(横並び機能)をスマホで2つ横並びに表示させるのは、SWELLならではの機能です。Cocoonではできません。

Cocoonでは、PC上では横並びにできますが、スマホはどうしても縦並びになります。

SWELLだと、ここにワンクリックするだけで、横並びにすることができます。

 

※補足※

ちなみに、よくよく見ていただけた方はお気づきかもしれませんが、

Cocoonでもスマホで横並びになってる個所もあります。

サツママ育自手帳より

は「おすすめカード」という機能です。

表示場所が固定で、ヘッダー下になります。

ページの途中に挿入することはできません。

 

は「カルーセル」という機能です。

「おすすめカード」同様、表示位置は固定です。

 

サツママ育自手帳より

こちらは記事の表示される大きさを50%に設定しているため、このように表示されます。(上記のCSSです。)

フルワイド機能で表現が自由自在

フルワイドの機能を使って、表現したい項目ごとに背景の色を変えたり、画像を挿入したりできます。

フロントページを充実させて伝えたいことを整理できるので、読者の離脱を減らせます。

この機能は、とても多用しています。

まとめ

Cocoonに向いているのはこんな人

初期費用を抑えたい

プログラミングに少し触れたい

見栄えはそれほど重視しない

サイトを整える為の情報収集を進んでできる

そのための時間・労力がある

SWELLに向いているのはこんな人

初期費用(17,600円)がかかってもお洒落にしたい

CSSやショートコードをほぼ使わず、編集が簡単

他のサイトと差別化できるデザインにしたい

SWELLを見てみる

フリーランスや企業様がサイトを作る場合は、個人的にはSWELLが断然おすすめです。

後からインストールもできますが、使用しているブロックエディタが異なる為、記事を一つ一つ修正する必要があります。

サイトを作る目的がはっきりしているのであれば、最初からSWELLにしておいた方がいいです。

 

「これから趣味でブログを始めてみたい」「アフィリエイトブログを作りたい」という方は、Cocoonで全く問題ありません。

凝った見た目に拘らなければCSSはあまり必要ありません。

 

どちらのテーマもとても優れています。

現に、当サイトは無料テーマのCocoonを使用しています。

テーマ選びの参考になれましたら幸いです。

WordPressでお困りのことがありましたら、近々下記のサービスを開始予定ですのでご相談ください。

WordPress立ち上げサポート

Webサイト制作

WordPress初心者向け勉強会

バナー制作

取材&記事執筆

詳細はこちら

コメント

  1. […] 制作実績はこちら。 […]

  2. […] 制作実績とサイトの裏側はこちら […]

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