18周年記念キャンペーン中
チャンス&お得がいろいろ(9/30迄)エックスサーバー

【WordPress初心者向け 2】基本レイアウトからSWELLの機能を生かしたデザインに

WordPress(SWELL)初心者
SWELLの機能を生かす

前回の記事でSWELLでありながら、SWELLの機能をほとんど使わず、基本的なレイアウトに留めたサイトの立ち上げ方を紹介しました。

WordPress初心者がデザインに時間を取られ、ブログそのものが停滞するのが勿体なくて(老婆心全開で)書きました。

デザイン云々よりまずは基本のレイアウトでブログ執筆に注力しましょう…ということで、前回はその基本形を作るだけの手順です。

そして今回が第二弾

SWELLらしさを少し追加して、ちょっとだけ自分らしい見栄えのサイト作りを紹介します。

自己紹介

SWELLの機能&画面の説明なので、別のテーマだと役に立たない内容です

記事の内容(もくじ)

トップページに自分らしさを加える

SWELLにはトップページに設定できる大きな要素が3つあります。

  • メインビジュアル
  • 記事スライダー
  • ピックアップバナー
SWELLトップページ
クックる

メインビジュアル

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

メインビジュアルの説明【SWELL公式】

トップページ上部、ロゴ下に位置する部分です(SWELL公式サイトのトップページには波のうねる動画が設定されています)。

メインビジュアルの表示内容」は2種類(+非表示)。

  • 表示しない
    メインビジュアル無し
  • 画像
    複数画像のスライダー設定も可能(5枚まで)
    スライド[2]まで設定すると次(スライド[3])の設定画面が表示されます
  • 動画
    メインテキストのほか、サブテキストやボタン、ブログパーツも利用できます。

画像・動画とも、余白の有無やサイズ、ボタン、テキストなどが自由に設定できます。

ちなみに、上記参照サイトの動画は【FlexClip】で作りました。

メインビジュアルを使わない時は必ず「表示しない」を選択しましょう。

画像や動画のファイルを設定しなくても、表示内容で「画像」や「動画」を選んでいるとヘッダーとコンテンツに間に大きな空白ができます。

記事スライダー

外観 → カスタマイズ → トップページ → 記事スライダー

記事スライダーの説明【SWELL公式】

対象をどちらにするか選択:カテゴリーまたはタグ

  • カテゴリーはIDを設定
    IDはカテゴリーページで確認できます
  • タグはタグ名を設定

並び順やタイトル位置など柔軟に設定できます。

ピックアップバナー

外観 → カスタマイズ → トップページ →  ピックアップバナー

ピックアップバナーの作り方【SWELL公式】

こちらに詳しく紹介

ピックアップバナーはトップページだけでなく、下層ページ(記事やカテゴリー)に表示する設定もあります。

バナーを作る

バナーを初めて作る時は難しく感じるかもしれませんが、他サイトを参考にすれば何とかなります。

可愛いイラストや画像を無料で配布しているサイトがたくさんあるので、自分の写真がなくても、または自分で描けなくてもそれなりのバナーが作れます。

トップページの上部は3要素を組み合わせて

3つの大きな要素を設定しただけで、サイトの印象が一変します。

ただ、訪問者にとって親切かというとそうでない場合もあります。ブログの内容にあった要素を組み合わせて最もよい形を見つけましょう。

例えば、メインビジュアルは初見では大きな印象を残しますが、毎回は要らないと思う訪問者はいると思います。

訪問者がすぐに内容に触れたいブログ(情報サイトやマニュアルサイト)もあります。コンテンツと見た目のバランスを考え、サイトのデザインを決めましょう。

動画より静止画像の方が容量が小さいので表示速度が上がる(単純に言い切ると)など、現実的な部分も考える必要があるかもしれません。

ヘッダーの調整

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

SWELLのヘッダー設定【SWELL公式】

ヘッダーの背景色やナビの位置などサイトになじむように設定しましょう。

特に誘導したいページがある時

目立つ部分にテキストやボタンを置く機能が2つ。

  • お知らせバー
  • ヘッダー内部

お知らせバー

外観 → カスタマイズ → サイト全体設定 → お知らせバー

お知らせバーの設定【SWELL公式】

赤文字+ボタンの部分

お知らせバー

ヘッダーの上か下に表示できるちょっと便利な機能です。

テキストやボタンを置けます。それぞれ色やサイズなど変更可。

ヘッダー内部

外観 → ウィジェット → ヘッダー内部

ウィジェットの「ヘッダー内部」を使ってボタンを設置しましょう。

ヘッダー内部ボタン
  1. ブログパーツでボタン作成
  2. ウィジェット「ヘッダー内部」にカスタムHTMLで取り込む

上記の画像はグローバルナビと並んでいますが、ナビを左寄せにすると 「ヘッダー内部」 ボタンだけが右側に位置し、より目立ちます。

ブログパーツを利用すれば複数のボタンが設置できます。

サイドバーを工夫する

外観 → ウィジェット → 共通サイドバー・追尾サイドバー

サイドバーの設定【SWELL公式】

基本的な設定はこちらを参照してください。

重要なのはプロフィールの設定。どんな人が書いた記事か知りたい人は多いです。

年齢や環境が似ていれば共感して丁寧に記事を読んでくれるかもしれません。

サイドバーに置くプロフィール欄が大きなスペースを取ると他の要素が入れにくいので、インパクトのある短めな文章にまとめましょう。

私の「1952年生まれ…」これはインパクト狙いです。www

若者にも驚いて欲しいし、同年代の共感も欲しいし…的な欲張りな1文です。

書ききれなかった自己紹介を固定ページで作り、サイドバーのプロフィールからボタンで飛ばしています。

そのページには更に詳しい紹介(投稿)記事とプライバシーポリシーへのリンクを設定しています。

いきなりたっぷり自己紹介するのもナンですし、まぁ興味があったら読んでください!というスタンスです。

SWELLユーザーなら置きたいプロモーションバナー

SWELLには独自のアフィリエイトがあります。

自サイトのリンクを踏んた人がSWELLを購入すると1件3,300円の報酬がいただけます。

ブログ運営の記事など書くならサイドバーにバナーを置くと良いと思います。

ウィジェットに用意されている[SWELL] プロモーションバナーを表示させたい場所に置くだけです。

フッターを有効に使う

フッターにはタグクラウドや広告など重要度の低いものを置きましょう。

ここまで辿り着き、熱心に見てくれる人がどれくらいいるか?あまり期待できないエリアかもしれません。

3エリアが用意されていますが、1つだけでも2つでもキチンとした見栄えになるよう設計されています。

メインエリアの設定

見出しの設定

外観 → カスタマイズ → 投稿・固定ページ

「コンテンツのデザイン」で見出し(H2・H3 ・H4)の見栄えを決めましょう。

いつでも変更できるので気楽なもんです。

大見出し H2、中見出し H3 、小見出し H4ですから、デザインもそのイメージで整えましょう。

見出し2より見出し3が目立つような設定だと、読者を惑わします。

SWELLエディターの設定

SWELLエディターで色味やスタイルを細かく設定できるので、サイトのイメージに合うよう調整・設定しましょう。

SWELL設定 → エディター設定

  • カラーセット(色味などの設定)
    カラーパレット・リスト・キャプションブロック・Q&A設定
  • ボーダーセット
    線の種類・太さ・色の設定
  • マーカー
    マーカーのスタイルと色の設定
  • ボタン
    ボタンのスタイルと色の設定
  • アイコンボックス
    色の組み合わせを設定
  • ふきだし
    色の組み合わせを設定
  • カスタム書式
    表示名とカスタムCSS
    カスタム書式の詳しい説明
  • その他
    ブログカードと引用のスタイル

カスタマイズした時の大事な一手

サイトをカスタマイズしてもすぐに反映されない時があります。

それはキャッシュが利いていて、カスタマイズ前の要素がクリアされていないからです。

SWELL設定(上部メニュー) → キャッシュクリア(コンテンツ)

キャッシュクリア(コンテンツ)をクリックしてからカスタマイズを確認しましょう。

私は記事を書く時、保存(ctrl+s)とキャッシュクリア(ctrl+F5)がクセ(ほとんど病気)のように使います。

第三弾はサイト型のトップページの作り方を紹介する予定です。

1カラムで、読んでもらいたい記事やカテゴリーへの導線を意識した構成。オリジナル感が目いっぱい漂います(笑)。

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
記事の内容(もくじ)
閉じる