★当サイトは【SWELL】を使用しています....(▽◕ ᴥ ◕▽)    ★★ 【Canva】のテンプレートで年賀状を作る方法を紹介しています(^-^)/

【Cocoonから乗りかえ】使い勝手のよさを実感した「SWELL標準機能」7選&ランキング

お悩みさん

かわうそんさん、CocoonからSWELLに乗りかえをしたんですって?

お悩みさん

わたしもSWELLに興味があるんだけど、今使っているCocoonもじゅうぶんな機能があるし、ぶっちゃけ17,600円の価値ってあるのかしら?

かわうそ

私もブログを始めてから4か月間Cocoonを愛用してきました。機能が充実していて無料で使わせてもらうのが申し訳けないくらいでした。

かわうそ

でもSWELL乗りかえて1か月間使ってみると「やっぱり有料だけあって使い勝手のよさがアップしたなあ・・・」とつくずく実感しました。

かわうそ

この記事では、 Cocoonから乗りかえたばかりのSWELL初心者の視点で「使い勝手のよさを実感したSWELLの標準機能」7選をランキング方式で紹介します。

この記事はこんな方におすすめ
  • Cocoonから有料テーマへの乗りかえを考えている方
  • SWELLを購入しようか迷っている方
  • SWELLを購入されたばかりの方
  • SWELL独自の機能について知りたい方
目次

Cocoon歴4か月の私が使い勝手のよさを実感した「SWELLの標準機能」7選とは

リタイアかわうそです。ご訪問ありがとうございます。

「記事の書きやすさ」「標準装備された豊富な装飾」などで、ブロガーに大人気のワードプレス有料テーマ「SWELL」

わたしは、この記事を書いている1か月前に、ワードプレス無料テーマ「Cocoon」から「SWELL」に乗りかえをしました。

わたしがブログをはじめてから4か月間愛用した「Cocoon」は、無料であるにもかかわらず、初心者にも親切で「できないことがないのでは」と思うくらい機能が充実したテーマでした。

わたし自身大変満足してCocoonを愛用していました。

Cocoonを使っていたときに私が投稿したツイートです。

しかし、SWELLを約1か月使用してみて実感したのは、「やっぱり有料のテーマだけあって、ブログづくりが快適になったなあ」ということでした。

以下が、わたしが使い勝手のよさを実感したSWELLの標準機能」7選 & Myランキングです。

【1位】ブログパーツ機能

サイトのカスタマイズが簡単

【2位】吹き出し機能

設定変更が自由自在

【3位】SWELLブロック機能

記事の見やすさがアップ

【4位】メインカラー設定機能

色の統一感があるサイトを作れる

【5位】タブつき囲み枠機能

タブに自由にテキスト入力できる

【6位】画像囲み枠機能

画像ごとの設定がラクラク

【7位】 目次ボタン

記事の途中で目次を表示できる

では、ひとつずつ詳しく説明していきます。

使い勝手のよさを実感した 「SWELLの標準機能」ベスト7

【7位】記事の途中で目次を表示させることができる「目次ボタン」

わたしが使い勝手のよさを実感した「SWELLの標準機能」7位は「目次ボタン」です。

「目次ボタン」は、記事内のどこからでも「目次」を表示させることができる機能です。

SWELLのここがスゴイ!

便利な「目次ボタン」が標準装備されています!

SWELL Cocoon
目次
ボタン
あり なし
サイドバー
目次追従表示
できる できる

こちらはパソコン画面のSWELL「目次ボタン」です。

投稿ページの画面右下に表示されます。

SWELLの目次表示ボタンを説明するための画像
SWELLの目次ボタン(PC)

こちらはスマホの画面のSWELL「目次ボタン」です。

投稿記事を開くとフッダーに表示されます。

スマホ画面の目次表示ボタンを説明するための画像
SWELLの目次ボタン(スマホ)

「目次表示ボタン」をクリックすると、このように記事のどこからでも目次を表示させることができます。

SWELL[「目次表示ボタン」で記事内に表示した目次を説明するための画像
SWELL目次ボタン

「目次ボタン」の設置はカスタマイズメニューから行います。

目次ボタンの設置方法

「外観」→「カスタマイズ」→「サイト全体設定」→「下部固定メニュー」

SWELLの目次表示ボタン設定画面を説明するための画像

かわうそ

目次を表示させるための同じような機能として、「サイドバー」目次追従表示 があります。

記事をスクロールしていくと、このような目次が「サイドバー」に追従表示される機能です。

Cocoonでも設置することができます。

サイドバーの目次追従表示
お悩みさん

サイドバーの「目次追従表示機能」を使えば「目次ボタン」はいらないんじゃないの?

確かにそうですよね。でも・・・・

かわうそ

「目次追従表示機能」 は スマホでは使えません。

かわうそ

記事にサイドバーを表示しない設定にした場合にも「目次ボタン」があるとたいへん便利です。

かわうそ

「サイドバーに表示される目次」に比べて「目次表示ボタン」で表示される目次は改行が少ないない分見やすいというのもメリットだと思います。


こちらが「目次表示ボタン」で表示される目次です。

SWELLの「目次表示ボタン」で表示した目次はみやすいことを説明するための画像
お悩みさん

「目次ボタン」があると、記事を読み終わってからもう一度確認したい箇所に戻りたいときに便利よね。

かわうそ

そうなんです。私はCocoonを使っているときは、記事最後の「まとめ」から、記事内の関連する場所にジャンプできるよう「アンカーリンク」を使っていました。

かわうそ

でもSWELLにしてからは、どこからでも目次が見れるようになったのでアンカーリンクは使わなくなりました。

【6位】画像ごとに個別の設定ができる「画像囲み枠機能」

わたしが 使い勝手のよさを実感した 「SWELLの標準機能」6位は「画像囲み枠機能」です。

その名のとおり写真などの画像に「外枠」や「影」などをつける機能のことです。

SWELLのここがスゴイ!

画像ごとに囲み枠の効果を設定することができます!

スクロールできます
SWELL Cocoon
画像囲み枠
機能
ありあり
画像囲み枠の
設定方法
エディーター画面で行う
(画像ごとに適応)
Cocoon設定→画像で行う
(ブログ内全ての画像に適応)
画像囲み枠の
効果
枠あり
影あり
フォトフレーム
プラウザ風
デスクトップ風
ボーダー(薄い枠線)
ボーダー(太い枠線)
シャド―(薄い影)
シャドー(ペーパー)
画像ごとの
個別設定
できる できない
かわうそ

SWELLの画像囲み枠は、エディーター画面で画像ごとに個別に選ぶことができるので、使い勝手がバツグンなんです!

たとえば、こんな画像囲み枠も・・・・

プラウザ風

こんな画像囲み枠も・・・

デスクトップ風

ワンクリックで選択できるので、

とても快適です(^-^)/

かわうそ

Cocoonにも画像に囲み枠をつける機能があります。

「 Cocoon設定」→「画像」で設定画面に進み「囲み枠効果」を選択します。

Cocoonの画像囲み枠を選択する画面
Cocoon設定の画像囲み枠選択画面

ただし、ここで選択した囲み枠は、ブログ内全ての画像に適応されてしまいます。

そのため、個別に囲み枠の効果を変えるためには、CSSなどを使ったカスタマイズが必要になります。

かわうそ

わたしは、Cocoonを使っていた時は、画像囲み枠効果の設定を「なし」にしていました。

かわうそ

個別に画像囲み枠をつけたいときは、画像をいったんパワーポイントに挿入して「枠」をつけていました。

お悩みさん

ワンクリックで「画像囲み枠」を自由に選べるSWELL
はやっぱり使い勝手がよさそうね。

【5位】自由にテキストを入れることができる「タブ付き囲み枠機能」

わたしが 使い勝手のよさを実感した 「SWELLの標準機能」5位は「タブ付き囲み枠機能」 です。

SWELLのここがスゴイ!

囲み枠のタブにテキストを自由に入れることができる

機能 SWELL Cocoon
タブつき囲み枠
機能
ありあり
自由な色の
カスタマイズ
できるできない
タブ内の
テキスト入力
できる できない

わたしは、「タブつき囲み枠」をSWELLブロックの「キャプシンボックス」で作っています。

こちらが「キャプションボックス」でつくった 「タブつき囲み枠」 です。

キャプション

キャプションブロックで作ったSWELLの「タブつき囲み枠」

キャプション部分には自由にテキストを入力することができます。

色を自由にカスタマイズできるところも使い勝手がよいと思います。

デザインは、全部で7種類です。

「SWELL」のキャプションボックスでつくったタブつき枠
SWELL

かわうそ

Cocoonでは、自由にテキスト入力できる「タブつき囲み枠」をつくることができません

こちらが、Cocoonでの「タブつきボックス」作成画面です。

たとえば、この中からボックス(ポイント)を選択すると・・・

タブに「POINT」と入った囲み枠が4つ出てきます。

Cocoon
かわうそ

タブつきボックスの種類が豊富で便利なんだけど「テキストを自由に入力できない」「好きな色にカスタマイズできない」というのが少し残念でした

自由なテキストを入れたピンク色の「タブつき囲み枠」をどうしても作りたかった私・・・

「HTMLをコピペするだけで囲み枠がつくれる」というサイトを利用させていただいていました。

こちらは、私のパソコンにブックマークされているお世話になったサイトです。

この「タブつき囲み枠」は私がCocoonを使用していたときに、上記サイトからHTMLをコピーして作ったものです。

Cocoonでカスタマイズした囲み枠の画像
Cocoon

かわうそ

SWELLを使うようになってからは「タブつき囲み枠
をつくるときにHTMLコードのコピペがいっさい不要になりました

お悩みさん

私はあまりパソコンが得意じゃないから、カスタマイズのことを考えずに記事を書くことに専念できるのはありがたいわね。

4位】色に統一感があるサイトをつくることができる「メインカラー設定」

わたしが 使い勝手のよさを実感した 「SWELLの標準機能」4位は「メインカラー設定機能」です。

SWELLの「メインカラー」とは記事内の見出しや各種装飾ボタンなど、サイトで重要となる様々なポイントで利用される色のことです。

SWELLのここがスゴイ!

一度「メインカラー」を設定すれば、記事の主な装飾がメインカラーで統一されます!

機能 SWELL Cocoon
メインカラー
設定
ありなし着せかえ機能で設定

メインカラーは、最初に設定するだけです。

メインカラーの設定方法

「外観」→「カスタマイズ」→「サイト全体設定」→「 基本カラー 」

SWELLメインカラー設定画面を説明するための画像
メインカラー設定画面

メインカラーを設定すると・・・

このように「見出しの色」「囲み枠の色」などをメインカラーで統一することができます。

もちろん違う色に変更することも可能です。

SWELLのメインカラーを説明するための画像
SWELLメインカラー
かわうそ

記事の中でたくさん装飾を使っても色が統一しているから、ごちゃごちゃした感じになりません。

かわうそ

メインカラーのおかげて、サイト全体のカラーを私の大好きなピンク系に統一することができました(満足)

お悩みさん

わたしは、大好きなラベンダー色で統一してみようかしら・・・

【3位】 記事を見やすくしてくれる便利な「SWELLオリジナルブロック」

わたしが 使い勝手のよさを実感した 「SWELLの標準機能」3位は「SWELLブロック」です。

【SWELLブロック】とは その名のとおりSWELL独自の機能を持った専用ブロックのことです。

SWELLのここがスゴイ!

便利なSWELL独自のブロックが標準装備されています(プラグイン不要!)

数あるSWELLブロックの中でも「見やすい記事がつくれて便利だなあ」と感じた【SWELLブロック】が以下の3つです。

SWELLブロック:ステップ

スマートなデザインのフロー図を簡単に作ることができます

SWELLブロック:説明リスト

見やすい「説明リスト」をあっという間に作ることができます

SWELLブロック: FAQ

Q&A形式 のコンテンツを簡単に作ることができます

かわうそ

この枠の中の説明文は「説明リスト」で作りました。

当ブログで実際に「ステップ」と「FAQ」を使っている実例を紹介します。

こちらは「ステップ」でつくったフロー形式のコンテンツの一部です。

ココナラに会員登録してから商品を受け取るまでの流れを「ステップ」を使って説明しました。

STEP
ココナラに会員登録
  • 会員登録は、1分以内に完了します
  • 会員登録は無料です
STEP
イラストレーターに申し込み
  • お気に入りのイラストレータ―を見つけて申し込みをします
  • ココナラの申し込みページには、たくさんのイラストレーターさんが紹介されています

こちらは、ココナラ「アイコン申し込み」のページです。

こちらは「FAQ」でつくったQ&A形式のコンテンツです。

記事のリード文として使いました。

サイトデザインのカスタマイズってむずかしいんじゃないの?

SWELLの「ブログパーツ」を使えば誰でも簡単にカスタマイズできます

でも「CSSコード」が必要なんじゃないの?

いいえ。この記事で「CSSコード」を全く使わないでカスタマイズした実例を5つ紹介します

お悩みさん

こんなカッコよくて見やすい文章がSWELLブロックで簡単に作れちゃうなんてスゴイなあ・・・私も使ってみたいわ

かわうそ

スマホの画面でも見やすくて、とても重宝している機能です。

紹介した3つのSWELLブロックについては、こちらの記事でくわしく説明をしています。

【2位】設定の変更が自由自在の「吹き出し機能

わたしが 使い勝手のよさを実感した 「SWELLの標準機能」2位は「吹き出し機能です。

SWELLのここがスゴイ!

「吹きだし」の入れ替えや呼び出しがサクサク行えます!

機能 SWELL Cocoon
吹き出しの
設定変更
テキスト入力後
も可
テキスト入力後
は不可
登録した
吹き出しの
呼び出し
吹き出し画像を
クリックして
選択
プルダウン
リストから
選択
自由な
色の
カスタマイズ
できる できない31色から選択

私が「この機能が使い勝手がいいなあ!」感じたSWELLの吹きだし機能は以下の3つです。

  1. 「吹きだし設定」の変更が自由自在
  2. 「登録した吹きだし」をラクラク呼びだし
  3. 「吹きだしカラー」のカスタマイズが自由自在

〈自称〉吹きだし愛好家の私は、記事の中で「吹きだし」を多く使っています。

そんな私が、イチ押しなのが「❶ 吹きだし設定を自由自在に変更できる機能です。

かわうそ

しかも、ワンクリックできちゃうんです!

何とこちらのカワウソ吹きだしが・・・

SWELL

ワンクリックで入れ替えることができるんです!!

SWELL

かわうそ

Cocoonの場合吹きだしを変えるときは、もう一度別の吹きだしを選び直す必要があります。

かわうそ

アイコンが何種類もある私は「少し不便だなあ」とを感じていました。

表情がコロコロかわるカワウソさんも、SWELLの吹きだし機能ならラクラク変身できるわね!

SWELLの便利な「吹きだし」機能については、こちらの記事でくわしく紹介をしています。

【1位】簡単にトップページをカスタマイズできる「ブログパーツ機能

わたしが 使い勝手のよさを実感した 「SWELLの標準機能」1位は「ブログパーツ機能」です。

ブログパーツとは、専用のエディ―ターで作成したコンテンツを「サイト内の好きな場所に表示させることが機能」のことです。

SWELLのここがスゴイ!

「ブロックパーツ」の基本的な使い方をマスターすれば、だれでも(それなりの)オシャレなサイトを作ることができます!

機能 SWELL Cocoon
ブログパーツ
機能
ありなし

当サイトのトップページも、ブログパーツを使ってカスタマイズしています。

かわうそ

こちらの、おすすめの記事をピックアップしたコーナーもブログパーツでつくりました。

トップページのブログ記事コーナー

パソコンが苦手な私でも、オシャレな「サイト型」のトップページにチャレンジできそうね!!

「ブログパーツ」を使った当サイトのトップページのカスタマイズを、こちらの記事でくわしく紹介をしています。

まとめ

今回は、SWELLの使い勝手のよい便利な以下の7つの機能を紹介させていただきました。

17,800円とけっして安くはない買い物でしたが、思い切って乗りかえをしてよかったと思います。

SWELLに関して、あえて不満な点があるとすれば「Twitterフォローボタン」 のデザインです。

こちらが、SWELLで標準装備されている「Twitterフォローボタン」です。

あくまで個人的な好みですが「私のピンク系のサイトには合わないなあ」と感じながら使っています。

できたら、違うデザインが選択できるといいなあ、と願っています。

SWELLの標準Twitterフォローボタンの写真

ただこの 「Twitterフォローボタン」 以外は、とても使い勝手がよいテーマだなあ、と大満足しています。

もし、SWELLにしようか迷っている方がいらっしゃいましたら・・・

かわうそ

使い勝手バツグンのSWELLをぜひおすすめします

最後までお読みいただき、ありがとございました。

ポチっとしていただけると嬉しいです

リタイアかわうその主婦活ブログ - にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URL Copied!
目次
閉じる