\楽天ROOMでもお気に入りを紹介しています/

カスタマイズが簡単にできるWordPressテーマ「SWELL」と はてなブログを比較

当ページのリンクには広告が含まれています。
長女ちゃん

ブログ初心者だからこそ、「ふきだし」使ってみたいって思う。
デザインもこだわれるのなら、こだわりたいよね。

この記事では

  • 現在、はてなブログ等のブログサービスでブログを運営している方
  • 無料ブログサービスからWordPressへ移行を考えている方
  • CSSやHTMLはわからないけど、素敵なブログ作成に憧れている方
  • はてなブログとWordPressテーマ「SWELL」、それぞれのメリット・デメリットを知りたい

という方のために、はてなブログとWordPressテーマ「SWELL」を両方使った事のある私が、

この記事でわかること
  • それぞれのメリット・デメリット
  • はてなブログと「SWELL」・文字装飾などの設定方法の違いについて
  • はてなブログが向いている方
  • WordPress「SWELL」を使った方がいい方

できるだけわかりやすく初心者目線で解説していきます。

レビューをする私の自己紹

  • 2011年より、はてなブログを約10年続けていました。
  • はてなブログプロに変更したのは、2020年9月(契約期間2年)
  • WordPress、テーマは「SWELL」を利用中
  • PC作業は好きだけれど、プログラミングは未知の領域。

CSSやHTMLコードの知識がなくてもオシャレなWebサイトが作る事ができる!
初心者だからこそ WordPress テーマ「SWELL」

はてなブログと、WordPressテーマ「SWELL」を同時並行で使っていた私ですが、はてなブログプロの契約期間が1年以上残っているにも関わらず、ブログ運営をはてなブログからWordPressへ移行しました。

目次

はてなブログのメリット・デメリット

私の感じる「はてなブログ」のメリット

  • 無料ですぐに始められる
  • ブログを始めるまでの過程がとても簡単
  • iPhone 11 Pro Maxで撮影した写真をサイズダウンしなくても載せることができる
    (スマホで自分のサイトをみても、「重い…」と感じた事はありません)
  • アイキャッチ画像の設定がいらない(記事の一番うえにある画像が自動的にアイキャッチ画像になるため)

私の感じる「はてなブログ」のデメリット

  • ふきだしや凝った文字装飾をしたい場合、デザインのカスタマイズをする時にはCSSやHTMLコードを使わなくてはならない

WordPress「SWELL」のメリット・デメリット

私の感じるWordPress「SWELL」のメリット

  • CSSやHTMLコードがわからなくても、オシャレなサイトを作る事ができる
  • 直感的に使う事ができる
  • 最初の設定さえしてしまえば、文字装飾やオシャレなカスタマイズができるので楽しく記事が書ける

私の感じるWordPressのデメリット

Lucy

「SWEEL」のデメリットではなく、WordPressでWebサイトを作る場合のデメリットかな。

  • 記事を書くまでの道のりが遠い(各種プラグイン設定、ドメイン登録や、サーバー契約など、するべき設定が色々とある)
  • スマホで撮影した写真をアップロードする時は、写真の容量をサイズダウンする必要がある
  • 1つの記事に対して毎回アイキャッチの設定をする

文字の装飾の仕方や、ふきだしを使う場合、はてなブログとWordPress「SWELL」では全くやり方が違います!

はてなブログで特に設定が大変だと思った、ふきだしや文章を枠で囲むカスタマイズのやり方を比較してみたいと思います。

カスタマイズ方法・ふきだし

星の数ほどあるブログ。私が目にするブログやWebサイトには、必ずといっていいほど「ふきだし」が使われています。

長女ちゃん

「ふきだし」ってこんなの

このブログにも3姉妹と私のキャラクターをふきだしに利用しています。キャラクターを登場させて、会話風の演出ができますよね。

ふきだしがあるとなんだか、本格的なブログっぽい気がするのは私だけでしょうか?

はてなブログで吹き出しアイコンを使う場合

STEP
ふきだしを設定するためのやり方の全容をまずは把握する
STEP
事前準備として、ふきだしアイコンに使いたい画像を準備し、はてなフォトライフに画像をアップロードする。アップロードした画像アドレスを確認しておく。
STEP
デザインCSSに、吹き出しアイコンが表示されるためのコードを入力する
STEP
ふきだしアイコンを表示させるHTMLコードを書きこみ、ふきだしアイコンを表示させる

SWELLで吹き出しアイコンを使う場合

SWELLでは、文字で説明するよりも動画でそのやり方を見ていただいた方がわかりやすいので、是非動画をみてください!

動画で見る「SWELL」でのふきだしの使い方
簡単に説明すると…
  1. 編集画面にが表示されているのでクリックする
  2. ふきだしのブロックを追加する
  3. ふきだしを選び、ふきだしコメント欄にコメントを書き込む
Lucy

ふきだしの中の文字は、太字・アンダーラインを引いたりと文字装飾も可能です

ふきだしを使うのに CSSコードやHTMLコードは不要!

よく使う ふきだしは、事前に登録 しておくとさらに便利です。

SWELLの公式サイトにふきだしの使い方について詳しくのっています!

文章を枠で囲みたい

はてなブログで文章を囲む場合

STEP
文章を囲む設定のやり方の全容をまずは把握する
STEP
文章を囲むデザインのHTMLコードを調べる

文章を囲む枠の色を変更したい場合や枠の太さを変更したい時などは、それらを指定するHTMLコードが必要です。そのデザインによって書くコードが変わってきます

STEP
文章を囲むデザインのHTMLコードを使って入力し、囲み枠を表示させる

SWELLで文章を枠で囲みたい場合

SWELLでは、文字で説明するよりも動画でそのやり方を見ていただいた方がわかりやすいので、是非動画をみてください!

動画で見る「SWELL」で 文章を枠で囲むやり方
簡単に説明すると…
  1. 編集画面に文章を書く
  2. 枠で囲みたい文章を選択する
  3. 使いたい枠を右側にあるボーダー設定・スタイルから選んでクリックする
    (ボーダー設定とスタイルを同時に2つ選ぶこともできます)

文字に枠を付けるのに CSSコードやHTMLコードは不要!

SWELLの公式サイトにふきだしの使い方について詳しくのっています!

アンダーライン(マーカー線)文字装飾

はてなブログでアンダーライン(マーカー線)文字装飾をする場合

STEP
アンダーラインを文字装飾を設定するためのサイトを調べて、やり方の全容をまずは把握する
STEP
デザインCSSにアンダーラインが表示されるためのコードを入力する
STEP
アンダーライン文字装飾用のHTMLコードを使ってアンダーラインを表示させる

SWELLでアンダーライン(マーカ線)で文字装飾をする場合

SWELLでは、文字で説明するよりも動画でそのやり方を見ていただいた方がわかりやすいので、是非動画をみてください

動画で見る「SWELL」で 文章にアンダーラインをひくやり方
簡単に説明すると…
  1. 編集画面に文章を書く
  2. アンダーラインをひきたい文章を選択する
  3. テキスト装飾の をクリックしてマーカー線を選び、好みの色を選ぶ
    (太字にしたり、斜めにしたり他の文字装飾もすることができます)

アンダーラインを引くのも CSSコードやHTMLコードは不要!

SWELLの公式サイトにふきだしの使い方について詳しくのっています!
Lucy

はてなブログでふきだしや文字を枠で囲む場合は、必ずCSSコード、HTMLコードが必須でした。このコードを理解するのがちょっと大変でした。

SWELL専用のブロック

WordPress「SWELL」では、文章や画像などを「ブロック」という単位で扱っています。

WordPress「SWELL」には、SWELL専用のさまざまななブロックが用意されています。

SWELLでは、文字で説明するよりも動画でそのやり方を見ていただいた方がわかりやすいので、是非動画をみてください!

動画で見る「SWELL」 オリジナルブロックの出し方
Lucy

ふきだし・文章を枠で囲む時と同じで、クリックするだけで、さまざまなブロックを使う事ができます!

CSSコードやHTMLコードは不要なんです!

SWELLの公式サイトにブロックの使い方について詳しくのっています!

WordPress「SWELL」は、CSSやHTMLの知識がない方でも、オシャレでカッコいいWebサイトを作る事が可能ですが、それでもやはり「はてなブログ」の方がおススメの方がいます。

はてなブログがおススメの方

  • 継続できるかわからない
  • 無料で簡単にブログを始めてみたい
  • カスタマイズをする予定はない

とても簡単にブログをはじめることができるので、「カスタマイズはよくわからなけど、ますは始めてみたい!」と思う方には、はてなブログをおススメします。

はてなブログを使い始めて「やはりWordPress使ってみたいな」と思った時は、はてなブログからWordPressへ記事の移行をしてくださる方もいらっしゃいます。

Lucy

わたしもはてなブログをWordPressに移行はプロの方にお任せしました!

WordPress「SWELL」がおススメの方

  • ブログにふきだしを(簡単に)使いたい
  • 文字装飾もしてみたい
  • CSSやHTMLがわからなくてもカスタマイズに憧れる
  • アフィリエイトにも興味がある

    という方には、WordPress「SWELL」をおススメします。
  • 美味しいお店はどこかな?
  • おススメの充電器はどれかな?

    などなど、皆さんもネットでさまざまな事を調べませんか?

はてなブログを始める時も、WordPressを使ってみようと思ったときも、自分で「こんな事がしたいな」と思ったときはグーグル検索をし、自分で調べていました。

ある程度自分で調べることに慣れている方であれば、WordPressで「SWELL」をぜひおススメします!

「WordPressでブログを始める方法」などのキーワードで検索すると、わかりやすく解説しているサイトが沢山あります。

ただ、デメリットでも書きましたがWordPress「SWELL」では、アイキャッチは毎回自分で設定をしなければなりません。

(「記事の一番上にある写真をアイキャッチ画像に設定する!」というような指示もできるのでしょう…… でも、それができるなら苦労はないかも^^;)

長女ちゃん

アイキャッチってこんなの

アイキャッチとはユーザーの目を引き付けるための画像です

はてなブログを長く使われていた方には、毎回のアイキャッチ画像の設定は、慣れるまで少し面倒に感じるかもしれませんが、慣れてしまえば簡単です。まず最初にひな型となるアイキャッチをつくっておけば、あとは文字の修正などをするでけでOKです!

アイキャッチもオリジナルのものを作るとより自分のブログに愛着もわくと思います。

まとめ

はてなブログとWordPressテーマ「SWELL」があっている方について説明してきました。

最後にもう1つ「SWELL」を選んでよかったなぁと思うメリットを書きたいと思います。

SWELLを使っているうえで

  • 分からないことを質問できる
  • 「こんな使い方が出来るようにして欲しい!」
  • 不具合報告

などをユーザー同士で質問したり、解決方法についてアドバイスをしあう購入者限定のフォーラムがあります。

私はまだここで質問をするほどブログをカスタマイズしていないのでまだ困ったことはないのですが、フォーラムを覗いていると、

「こんなことが出来るのね!」

「私も疑問に思ってた!」

と自分でブログを運営していく上でのヒントがたくさん転がっています。

私の知識不足でフォーラムの質問内容に「???」という事もありますが、それでもWordPressを長年使われている方々のコメントはとても勉強になります。

あと、SWELLは一度購入してしまえば、それ以上にWordPressテーマでお金がかかることはないので、

家族で使い合うのもいいですね!

CSSやHTMLが分からなくてもオシャレなWebサイトができる!

SWELLを使った素敵なサイトの紹介

SWELLを使って作成されたオシャレなサイト一覧を @__satoshin(さとしんさん)がご自身のサイトで紹介してくださっています。

こちらに掲載されているブログはどれもセンスが良く「こんなサイトを作ってみたいなぁ」と憧れます。

この度、@__satoshin(さとしんさん)のご厚意で当ブログも掲載していただきました!

Lucy

お忙しい中、掲載ありがとうございました!

WordPressテーマ「SWELL」
WordPressテーマ「SWELL」
はてなブログとSWELLを比較

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次