SWELLを購入してこのサイトで使っています。
カスタマイズもまだ道半ばでこれからどんどんカスタマイズしていきます。
Contents
- 1 ワードプレスSWELLの評判
- 2 SWELLのWordPressのセール!安く買う!
- 3 SWELLのカスタマイズ・使い方
- 3.1 ヘッダー固定
- 3.2 ロゴを中央に
- 3.3 フォントサイズ
- 3.4 カラー
- 3.5 日付
- 3.6 トップページ(スライダー)
- 3.7 記事スライダー
- 3.8 トップページの作り方
- 3.9 Google Search Console
- 3.10 人気記事とブログカードを正方形にする
- 3.11 記事下のSNSのシェアボタンのデザイン
- 3.12 記事タイトル左の日付を消す
- 3.13 カテゴリページの抜粋を消す
- 3.14 カテゴリページのリストを更新日にする
- 3.15 セルフピンバックを停止する
- 3.16 この記事を書いた人を非表示にする
- 3.17 プロフィールボックス
- 3.18 フッターメニュー
- 3.19 Font Awesome
- 3.20 マーカーの設定
- 3.21 目次を省略しない
- 3.22 固定ページのアイキャッチ画像を表示する
- 4 SWELLのCSSカスタマイズ
ワードプレスSWELLの評判
UIもそれなりによく、ブロックエディターにこだわりをもたれて開発されているようです。Swellを買って使っています。
- シンプルなデザインですが、使いやすいものなので、それほど自分でデザインしなくてもすぐに整います。
- 人気記事などは正方形のデザインも可能です。
- 利用者が多くて情報が豊富です。
- 複数サイト使えて買い切りです。
次のような高い機能性をもっています。
今でも高速化に取り組まれているようです。
SWELLの高速化処理にテコ入れ中…。気になってたところがだいぶいい感じに整理できて処理もかなり軽くできてる気がする。
— 了🌊SWELL | Arkhe開発 (@ddryo_loos) April 2, 2023
完成したらArkheにも導入予定😌
顧問もついているようです。
【超お知らせ🙋♂️】
— 了🌊SWELL | Arkhe開発 (@ddryo_loos) August 19, 2021
WordPress高速化のプロ、「スキルシェア」(@skillsharejp )さんと顧問契約を結びました!
すでにSWELLの高速化・CWV対策についてご協力いただいており、今後のアップデートでどんどん改善していく予定です!#wpswellhttps://t.co/XwPoWJYlmE
他のテーマで、X(Twitter)の埋め込みがサイトが重い原因になることはよくあります。
アドセンスやツイート埋め込みを使っているサイトは高速化できない!
— スキルシェア⚡WordPress高速化 (@skillsharejp) November 24, 2021
という声がありましたが実際は高速化出来ます。
ただいままで専門家の領域でしたが、次回のSWELLではこの外部スクリプトの読込も改善できる機能が登場します。 #wpswell
「SWELLと高速化で提携した事を理由にSWELL買いました」という声を聞いてめっちゃテンションあがった。
— スキルシェア⚡WordPress高速化 (@skillsharejp) November 28, 2021
いくら顧問契約しても、顧問先の売上が上がらなかったら失敗だもんな。すごく安心できるコメントをいただきました。
今後も契約期間中は全力でSWELL売上に貢献していきます。
Swellは波の映像が印象的ですが、トップページは動画をいれこんだり、画像のスライダーをつけたりも簡単にできます。背景も楕円にしたり波型にしたり簡単にできます。
swellでやりたかったこと、
— くま@ゆるミニマリスト (@kumamama2021) March 9, 2023
その1 トップページをサイト型にして、おすすめ記事とか表示して、おしゃれにしたい✨
毎日、スキマ時間を見つけて、少しずつ作成してます。
あの波型はswell設定だったのか!と感動🤗ハマってます😍#swell#ブログ書け
PC・スマホともに固定バーにできます。ボックスナビとあわせて使うとアイコンつきボックスをスマホの中にいれられます。少しCSSをカスタマイズすれば上から下へなどの動きもつけられます。
SwellSWELLのWordPressのセール!安く買う!
近年、SWELLのセールは行われていないようです。
2020年が最後のようですね。
初めまして!
— 了🌊SWELL | Arkhe開発 (@ddryo_loos) April 12, 2020
僭越ながら、宣伝させていただきます…!🙇♂️
ブログ向けWordPressテーマ『SWELL』
✅ブロックエディター完全対応!
✅シンプルなのに高機能!
✅初心者でも簡単に使える!
という特徴を持っています🙌
(18日まで20%オフのセール中です!)https://t.co/095fiz9THi
残念ながら諦めて買う方が早いでしょう。
Swellブログ運営を早くはじめるとさまざまなメリットがあります。
SWELLの購入方法
Swellの購入方法は簡単です。
- [利用規約に同意します。]にチェック
- SWELLを購入する
- クレジットカードを入れて支払う
クレジットカードの明細
クレジットカード明細の表記について
SWELLは 「株式会社LOOS(カブシキガイシャ ルース)」 が開発・販売していますので、クレジット明細には社名の(カ) ルース)等が使われる可能性があります。
また、Stripe経由での決済のため、一時的に STONLINE PAYMENTやSTオンラインケッサイ の表記になることもあります。ご利用していただくには、新規会員登録が必要です。
(SWELL購入時に入力したアドレスを使って登録していただくことが可能です。)
新規会員登録
会員登録が必要です。フォーラムはすぐ使わないかもしれませんが、子テーマのダウンロードが必要です。
- 新規会員登録ページ
- ユーザー名
- メールアドレス
- パスワード
登録後、子テーマをダウンロードします。
流れもわかりやすく特に迷うことはありませんでした。
ユーザー認証の制限
- ダウンロードしたファイルを管理画面から読み込んみます。
- Swellのテーマを親テーマと子テーマともに有効化します。
しかし、警告がでました。
SWELLのユーザー認証が完了していません。
WordPressの管理画面
そのため、バージョンアップデート機能が制限されてます。
管理画面をみたらユーザー認証がついていました。制限はアップデートだけの模様。
認証が完了するまで、「SWELL本体のアップデート」が管理画面からはできなくなります。
https://swell-theme.com/basic-setting/8974/
ちょっと調べたら、以前、転売事件があったため、このような対応になったようです。
【注意喚起】
— 了🌊SWELL | Arkhe開発 (@ddryo_loos) December 21, 2021
WEBデザイナー講師と名乗る人物がSWELLを転売しているようです。
謎リンクからのPayPal決済で購入できるみたいですが、SWELLは公式サイトからしか販売しておりません。ご注意ください。
アップデートできないのは困りますし、認証は簡単にできたため、やりました。
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設定 > 機能停止 > セルフピンバックを停止する
ただ、内部リンク用で外部リンクのピンバックには効きません。
外部リンクの場合はWordPressの標準機能を使います。
設定 > ディスカッション > 投稿中からリンクしたすべてのブログへの通知を試みる
のチェックを外すことにより、外部ピンバックは飛ばなくなるっぽいです。
ポジティブな内容なら相手も喜ぶため、特にチェックを入れていても問題なさそうですけど。
この記事を書いた人を非表示にする
ダッシュボード > 外観 > カスタマイズ >投稿・固定ページ > 記事下エリア > 著者情報を表示
のチェックボックスを外します。
なお、サイドバーのプロフィールボックスはウィジエットから設定するようです。
プロフィールボックス
サイドバーのプロフィールボックスはウィジエットから設定するようです。
フッターメニュー
外観 > メニュー > 新しいメニューを作成しましょう
Font Awesome
SWELLにはほかにもアイコンはあるようですが、アイコン数が多いFont Awesomeを採用しました。
SWELL設定 > Font Awesome > CSSで読み込む
</>アイコンから使うようですが、カスタムHtmlでもいけます。個人的に柔軟性が高いカスタムHtmlを利用しています。
マーカーの設定
SWELL設定 > エディター設定 > マーカー
細線とストライプも試したのですけど、やっぱベタ塗りが個人的にいいですね。
目次を省略しない
目次が途中で切れるのはUI上やりたくないのですよね。全容を把握するのにクリックしなければならない。情報を見落としやすいです。
カスタマイズ > 投稿・固定記事 > 目次 > 省略しない
固定ページのアイキャッチ画像を表示する
カスタマイズ > 投稿・固定記事 > アイキャッチ画像 > 固定ページの「本文の始めにアイキャッチ画像を表示」をチェック
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参考になれば幸いです。
コメント