ワードプレステーマSWELLのすすめ&当サイトの設定もちょっと公開♪
当ブログは「SWELL」というワードプレステーマを使用しています♪
最近よくTwitterでも使っている方を目にするようになりましたね！
人気上昇中のSWELLをおすすめな理由を私なりに書いてみたいと思います！
この記事はこんな方におすすめ
- ワードプレステーマを悩んでいる
- 無料テーマから有料テーマに切り替えたいけどせっかく買うなら失敗したくない！
- 正直HTMLやらCSSわかんないけど手っ取り早くおしゃれにしたい！
- すでにSWELLユーザーで、装飾の仕方を知りたい
＼ このおしゃれぼたんも用意してくれてる素敵なSWELL ／
Contents
SWELLがあればCSSやHTMLの知識がなくてもそれなりに素敵なサイトが作れる
少し昔の話をしますが、
アラサーしおりんははるか昔パソコンが普及して少ししてホームページ作りが流行った時代、
ちょっとだけサイトを作ったりして遊んでいました。
その時はHTMLでゴテゴテ装飾するのが流行っていました。
装飾したテーブルタグのコピペサイトがあったり（Mi*○erryとか）※この時代に遊んでいた方は是非お友達になりましょう。笑
時代は変わってスマホで文字を打ったり画像を編集する時代・・・。
iphoneが普及してUIも感覚的に使いやすいアプリが増えたような気がします（なんとなく感覚でしゃべっています）
新しく始めるときに今更<body><font color=・・・だなんて打ちたくないし
しかももうなんか今時はCSSで装飾するんだよとかそんな・・・んもうわからん！
そんな方にSWELLはほんとにおすすめです。
何いってるかわからんって人は、簡単におしゃれに装飾できる便利なSWELLだよって話です。
正直CSSとかわからないけどおしゃれなサイトにしたいよね。
見た目より内容って言うけど正直私のサイトの内容でデザイン見辛いと読まないよね(：∀；)
SWELLは「ブロックエディタ」に完全対応で視覚的に作業できる
私のサイトはSWELLとブロックエディタのおかげで作られているといっても過言ではありません！
過言ではないどころか頼り切っています(・∀・)
ブロックエディターは、使ってみるとわかるかと思うんですが、
ワードやエクセル等で入力してるときのように、文字を入力して、
ここの文字を太くしたい、と思ったらそこを選択して太字にするボタンをポチッと押すと太字にしてくれます。
HTMLタグを使う場合わざわざ<b>太字にする文字</b>みたいに入力しなきゃいけないんですが、
これがツールバーのボタンひとつでぽちっとできちゃうんです。超便利ですね★
装飾が簡単
文字を打ってからでもツールバーを選択してちょちょいのちょいで色々変更できちゃいます。
ワードとかエクセルとかのイメージで大丈夫です。簡単。
文字装飾が簡単かわいい
文字の大きさはもちろん変えれます！！！
アンダーラインも簡単に。４色まで設定できます。 （もちろんご自身で好きな色を設定できます）
アンダーラインとは別に文字の背景に色も設定できます！
※ちなみに背景色をつけると、文字色は背景の濃さに合わせて勝手に白文字に変わってくれます！
太字、斜め、取り消し線も簡単かんたん。
吹き出しだって簡単
SWELLならふきだしもプラグインもcssも不要でこんな感じで設定するだけで簡単につくれます！
発言バージョン
・ふきだしの形：発言
・ふきだしの方向：左
（アイコンが左側）
・ふきだしの線：なし
心の声バージョン
・ふきだしの形：心の声
・ふきだしの方向：右
（アイコンが右側）
・ふきだしの線：あり
SWELLを使ってサイト型ブログも簡単に作れる！！
ありがたいことに私のサイトのデザインを沢山の方に褒めていただけるんですが、
SWELLについている機能しか使っていません…!!
トップページで使用しているSWELLの機能を少し紹介します。
メインビジュアル
当サイトを開くとまずどーんっと見えるこの画像のことです。
当サイトの雰囲気づくりというかイメージを作ってくれる大事な画像ですね。
私はこの画像ありきでサイトの色合いも決めています。
設置方法
カスタマイズ＞トップページ＞メインビジュアル で画像を設定するだけ。
SWELLで設定できる「メインビジュアル」という機能。
画像を選択するだけではなく、さまざまな効果を追加で設定できるんです。
当サイトのトップページではこのようにメインビジュアルの設定をしています。
当サイトの設定内容
スクロールボタンを表示する（画像の下部の「⏬Scroll」文字）
メインビジュアル高さ 数値で設定 PC：30vw SP：30vh
画像（動画）の上に表示されるボタンの丸み なし
フィルター処理 なし
オーバーレイカラー 黒(#000000)
不透明度 0.2
メインテキスト[1] に「Everything will be fine!」そのほかは空白
ちなみに私の場合、元の画像はこちら。
さっきみた画像と色合いがなんとなく違いますよね。
これは、SWELLの機能を使って画像にオーバーレイカラーで黒いフィルターをかけて、上に文字を表示させています。
画像を自分で加工したりCSSとかなんも必要ないんですよ・・・！
楽ちん！！
フィルター処理から順番に詳しく見てみるとこんなかんじです。
フィルター処理
私のサイトはフィルター処理は「なし」にしていますが、他にはこのように４種類を選べます。
メイン画像にフィルターがかかって画像の雰囲気を変えられます
ブラー
ぼやーっとぼかしがかかったようになります
グレースケール
グレースケールはモノクロっぽく
ドット
ちょっとみにくいですがドットになっってます
ブラシ
ブラシでさーっとなでたような斜線がつきます
オーバーレイカラー
色選択
画像の上に載せる色です。色によって雰囲気が結構変わります！
あの、あれです。セロファン越しに見るイメージです。ちっちゃいころを思い出して！
わかりやすく赤と青で比較してみるとこんな感じ。
赤にしたとき
さらに温かみのある色になりますね
青くした時
もともとピンク味のある画像なので青をのせるとすこしスッキリ見えます。
オーバーレイカラーの不透明度
オーバーレイカラーの濃さを設定できます。数値が１に近づくほど選択した色が濃くなります。
当サイトはオーバーレイカラー黒で設定しているので、１にすると完全に画像は見えなくなり真っ黒になります。笑
0.2の場合
すこし暗くなるくらい。当サイトはこの設定になってます。
0.5の場合
ちょっと黒が強くなりますね。
こんなふうに、メインビジュアルは好きな画像を選んで好きな効果を追加するだけで、サイトの顔になる画像を手軽にかっこよくかわいく演出できちゃう機能なんです。
私はやってないですが、このメインビジュアル画像自体にリンクを貼ることもできるので、
ただのメイン画像ではなく、おすすめ記事に飛んだりすることも可能です。
めっちゃ便利だ・・・
記事スライダー
設置方法
カスタマイズ＞トップページ＞記事スライダー
記事スライダーを設置するかどうか で「設置する」にチェックするだけ。
ぽちっとすればいいだけです…なんて楽なんだ…
記事のピックアップ方法で、カテゴリーやタグで絞り込むことができます。
当サイトの場合、2021年6月現在はカテゴリーID[11]を指定しているのですが、
これはセルフジェルネイルのカテゴリ記事のみを表示するようにしています。
並び順は「人気順」となっていますが、ぐるぐる回ってるので一位がどれかはちょっとよくわかりません笑
フルワイドブロック
背景がこう「〜」みたいに波型になって区切られていると思うんですが、こちらもSWELLのフルワイドブロックというブロックでできています。
トップページは固定ページを使用して作っていて
固定ページの中にフルワイドブロックを何個も作って色分け・画像を入れたりして区切ってる感じです。
設置方法
設置方法は簡単。
設置したい記事のなかで「フルワイドブロック」を使うだけ！！
「SWELLブロック」のなかの下の方にありますよ♪
SWELLではこのようにオリジナルのブロックが最初から多数あるのがまた嬉しいポイントです。
当サイトの設定内容
コンテンツ幅 記事
上下のpadding量 (PC) 60 / (SP※ｽﾏﾎ) 20
※padding=ブロック内側の余白のこと
テキストカラー デフォルト
オーバーレイカラー 薄いグレー
背景画像 画像にしているところは画像を選択、ピンクの背景部分はここでピンクを設定しています。
背景効果 Fixed Background オン パララックス効果をつける オフ
上下の境界線の形状 上下とも 波 高さレベル1.5
これはぜひ、SWELLを入れたらやってほしいです。めちゃめちゃ楽しい。笑
オーバーレイはメインビジュアルでもありましたが、画像の上に色を重ねることができます。
当サイトの場合は、画像の上に白っぽいグレー色を重ねてすこしくすんだ色に見せています♪
SWELLがあれば画像の色味の変更だって思い通りです…‼︎
FixedBackgroundはね、是非オンオフして違いを試してみてください。
高さレベルはMAXが５なんですが、５に近づくほど高低差がはっきりします。
当サイトは1.5なのでゆる〜〜いなみになってます。波の他には斜線・丸・ジグザグがありますが個人的には波推しです。
＼ このおしゃれぼたんも用意してくれてる素敵なSWELL ／
まだあるSWELLのすごいところ
公式サイトの説明がわかりやすい。
ためしにこの【SWELL専用ブロック】ステップブロックの使い方をみて欲しいです。
もう、これみたらわかりますよね(：∀；)何これわからん！検索だ！ってならないんです。
わかんなかったら公式サイトみればおk！最高！
それでもわからなかったら、SWELL購入者専用の会員サイトが用意されており、
SWELLに関する相談や不具合報告などをすることができるんです♪
頻繁にアプデされる
SWELLの作者了さんはTwitterをやられているんですが頻繁に機能が増えていきます…！ありがたいことこの上ない。
こちらは先月のツイート。どんどん便利になっていきます(：∀；
【SWELL ver. 2.3.8 をリリースしました！👏】
— 了🌊SWELL開発者 (@ddryo_loos) May 14, 2021
・「カスタム書式」機能を追加しました。
・LPページでも「SWELLボタンブロック」のクリック計測機能が利用可能になりました。#wpswellhttps://t.co/RWrQjzYS4w
他テーマからの乗り換えプラグインも用意されている
なんと他テーマから乗り換える際の乗り換え用プラグインも用意されています。
よく乗り換え大変というツイートを目にしますが、プラグインでサポートされているのでいつでもウェルカムというわけですね・・・優しい。
SWELL
他テーマからSWELLへの「乗り換えサポートプラグイン」一覧 | WordPressテーマ SWELL
テーマを乗り換える時、旧テーマの独自機能で文章の装飾などを使っていると 過去記事のデザインが一気に崩れてしまいます。 つまりテーマを途中で乗り換える場合、 過去記…
SWELLは初心者にこそおすすめだと思う
初心者なのに有料テーマはちょっと手を出すのはなんだか怖いなーって思いますよね。
すっっっっっごくわかります。
使いこなせなかったらどうしようとか、まだ収益ないしとか思っちゃいますよね。。。
もちろん無料テーマでも素敵なサイトたくさんあります！
でも、私は使ってからこそ思うのは、初心者こそ有料の手を借りてよかったと思いました。
さとしんさんのサイトWeb note＋の「SWELLサイト集」ではSWELLを使用しているブログがたくさん拝見できます。
素敵なブログやサイトをみているとこんな風に作りたい！って気持ち、たくさん出てきますよね。
理想のサイトにつくるために構想を練ってCSSの勉強をして試して…ってする時間で記事がいくつも書けると思うんです。
有料テーマはその時間や手間を買うんだと思います。やりたいのはブログで発信することなはず。
時間は有限です！是非検討してみてくださいね！
お得な情報おすそ分け🧡
2022年にリニューアルし、様々な雑誌でベスコスを取りまくった
オルビスのスキンケア「オルビスユー」が、破格の980円でお試しできちゃいます💖
有名な諭吉美容液にも配合されている成分が入っているんです…‼︎
エイジングケアを意識し始めたら是非試してみて欲しいスキンケアラインになっています💖
ぜひチェックしてみてください💓
