【評判】SWELLのセール!安く買う!WordPressののテーマ!

SWELLを購入してこのサイトで使っています。

カスタマイズもまだ道半ばでこれからどんどんカスタマイズしていきます。

目次

ワードプレスSWELLの評判

UIもそれなりによく、ブロックエディターにこだわりをもたれて開発されているようです。Swellを買って使っています。

  • シンプルなデザインですが、使いやすいものなので、それほど自分でデザインしなくてもすぐに整います。
  • 人気記事などは正方形のデザインも可能です。
  • 利用者が多くて情報が豊富です。
  • 複数サイト使えて買い切りです。

次のような高い機能性をもっています。

今でも高速化に取り組まれているようです。

顧問もついているようです。

他のテーマで、X(Twitter)の埋め込みがサイトが重い原因になることはよくあります。

Swellは波の映像が印象的ですが、トップページは動画をいれこんだり、画像のスライダーをつけたりも簡単にできます。背景も楕円にしたり波型にしたり簡単にできます。

PC・スマホともに固定バーにできます。ボックスナビとあわせて使うとアイコンつきボックスをスマホの中にいれられます。少しCSSをカスタマイズすれば上から下へなどの動きもつけられます。

Swell

SWELLのWordPressのセール!安く買う!

近年、SWELLのセールは行われていないようです。

2020年が最後のようですね。

残念ながら諦めて買う方が早いでしょう。

Swell

ブログ運営を早くはじめるとさまざまなメリットがあります。

SWELLの購入方法

Swellの購入方法は簡単です。

  1. [利用規約に同意します。]にチェック
  2. SWELLを購入する
  3. クレジットカードを入れて支払う
Swell

クレジットカードの明細

クレジットカード明細の表記について
SWELLは 「株式会社LOOS(カブシキガイシャ ルース)」 が開発・販売していますので、クレジット明細には社名の(カ) ルース)等が使われる可能性があります。
また、Stripe経由での決済のため、一時的に STONLINE PAYMENTやSTオンラインケッサイ の表記になることもあります。

ご利用していただくには、新規会員登録が必要です。
(SWELL購入時に入力したアドレスを使って登録していただくことが可能です。)

新規会員登録

会員登録が必要です。フォーラムはすぐ使わないかもしれませんが、子テーマのダウンロードが必要です。

  • 新規会員登録ページ
  • ユーザー名
  • メールアドレス
  • パスワード

登録後、子テーマをダウンロードします。

流れもわかりやすく特に迷うことはありませんでした。

ユーザー認証の制限

  1. ダウンロードしたファイルを管理画面から読み込んみます。
  2. Swellのテーマを親テーマと子テーマともに有効化します。

しかし、警告がでました。

SWELLのユーザー認証が完了していません。
そのため、バージョンアップデート機能が制限されてます。

WordPressの管理画面

管理画面をみたらユーザー認証がついていました。制限はアップデートだけの模様。

認証が完了するまで、「SWELL本体のアップデート」が管理画面からはできなくなります。

https://swell-theme.com/basic-setting/8974/

ちょっと調べたら、以前、転売事件があったため、このような対応になったようです。

アップデートできないのは困りますし、認証は簡単にできたため、やりました。

SWELLを使うと不要になるプラグイン一覧

  • Scroll Back to Top
  • Table of Contents Plus
  • WP Responsive Menu Pro
  • WordPress Popular Posts
  • Lazy Load

Lazy Loadは入っていると画像が壊れて表示されなくなるよう。
SWELでも対策されているようなので、この手のプラグインは不要です。

SWELLのカスタマイズ・使い方

ヘッダー固定

外観 > カスタマイズ > ヘッダー

ロゴ画像の設定

ロゴはいれる

ヘッダーを追従させる(PC)
ヘッダーを追従させる(SP)

UI的に追従派。デフォルトのままでOK

ロゴを中央に

カスタマイズ > ヘッダー > ■ レイアウト・デザイン設定 > ヘッダーナビを下に

フォントサイズ

外観>カスタマイズ>サイトの全体設定>基本デザイン

18pxまでしかないようですね。

カラー

カスタマイズ >サイト全体設定>基本カラー

メインカラーを変えるとトップに戻るボタンなどもそれにあわせて変化する

日付

日付の調整はここです。

タイトル横に日付を表示する(PC)
タイトル横に日付を表示する(SP)
タイトル下に更新日を表示する
タイトル下に更新日を表示する

トップページ(スライダー)

カスタマイズ > トップページ メインビジュアル

メインビジュアルの高さ(PC)

編集しているとき、横幅が狭くなっているため、少し控えめに高さを決めます。

記事スライダー

並び順を人気順にするとよさそうです。

カスタマイズ > トップページ > 記事スライダー > 並び順

トップページの作り方

設定 > 表示設定

固定ページを割り当てる

サイドバーを非表示にする


カスタマイズ > サイドバー > トップページにサイドバーを表示する

Google Search Console

Google Search ConsoleはSEO SIMPLE PACKのプラグインでいれるのがよさそう。swellの開発者と一緒なので、このプラグインを推奨している模様。

Google Search Consoleからhtmlタグの該当箇所だけ抽出。

 <meta name="google-site-verification" content="xxxxxxxxxxxx">

SEO PACK > 一般設定 > ウェブマスターツール > Googleサーチコンソールの認証コード

人気記事とブログカードを正方形にする

ちゃんと設定がありました。個人的に正方形派です。SANGOやCocconの前身SImplicityもこの形でしたよね。かわいいイメージになります。

カスタマイズ > 記事一覧 > サムネイルの比率設定

  • カード型リストでの画像比率(人気記事をカード型にした場合)
  • リスト型リストでの画像比率(人気記事をリスト型にした場合!正方形はリスト型があうため、こちらを正方形)
  • サムネイル型リストでの画像比率(保留)
  • ブログ型での画像比率(保留)
  • ブログカードでの画像比率(正方形)

記事下のSNSのシェアボタンのデザイン

カスタマイズ > 投稿・固定記事 > SNSのシェアボタン

丸がないのが若干残念…。

記事タイトル左の日付を消す

カスタマイズ > 投稿・固定ページ > タイトル > タイトル横に日付を表示する

PCとモバイルにわかれています。

カテゴリページの抜粋を消す

カテゴリページに抜粋文が表示されるのは、ごちゃごちゃして好きではありません。画像とタイトルと日付だけで十分です。

外観 > カスタマイズ > 記事一覧リスト > 抜粋文の文字数 (PC/Tab)を非表示

セルフピンバックを停止する

デフォルトはオンのよう。

SWELL設定 > 機能停止 > セルフピンバックを停止する

この記事を書いた人を非表示にする

ダッシュボード > 外観 > カスタマイズ >投稿・固定ページ > 記事下エリア > 著者情報を表示

のチェックボックスを外します。

なお、サイドバーのプロフィールボックスはウィジエットから設定するようです。

プロフィールボックス

サイドバーのプロフィールボックスはウィジエットから設定するようです。

フッターメニュー

外観 > メニュー > 新しいメニューを作成しましょう

Font Awesome

SWELLにはほかにもアイコンはあるようですが、アイコン数が多いFont Awesomeを採用しました。

SWELL設定 > Font Awesome > CSSで読み込む

</>アイコンから使うようですが、カスタムHtmlでもいけます。個人的に柔軟性が高いカスタムHtmlを利用しています。

SWELLのCSSカスタマイズ

スマホの固定メニューヘッダーを上から下にする

うちのサイト、そのようにカスタマイズしました。左から右はあまり好きじゃないので。

/*******************************************
モバイルメニューヘッダー
*******************************************/

.-left .p-spMenu__inner {
    left: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

[data-spmenu=opened] .p-spMenu__inner {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.p-spMenu__inner {
    width: 100%;
}

translateXは、Yを指定することにより同じCSSプロパティのため上書きされます。

Swell

参考になれば幸いです。

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

コメント

コメントする

目次