「SWELL」トップページを固定ページにしてカスタマイズする方法【WordPressブログ】

どうもおかきぱん(@okakipanBANKER)です

ブログやっているとおしゃれなトップページに憧れますよね。

おしゃれなトップページへの第一歩として、

固定ページをトップページにカスタマイズして、ブログ型からサイト型へする方法を紹介します。

※このブログのWordpressテーマは「SWELL」です。SWELLでの方法を中心に説明します。

この記事でわかること
  • SWELLトップページのカスタマイズ方法
  • 固定ページでのトップページ作成方法
  • ブログ型からサイト型への移行方法

この記事を読めば、固定ページでトップページを自由に作る方法がわかります。

目次

SWELL固定ページをトップページにした構成

固定ページを使ったトップページはこんな構成になってます。

トップページの構成
  1. ①固定ページで作成した内容が表示されます。
  2. ②外観>カスタマイズで作成した内容が表示されます。
    SWELLではピックアップバナーや記事スライダーを設置できます。
  3. ③外観>ウィジェットでサイドバーに追加したものが表示されます。
    スマホだとサイトの一番下に表示されます。

それぞれ解説していきます。

>>目次へ戻る

固定ページをトップページにしてカスタマイズする

固定ページを用いたトップページは非常に簡単です。

固定ページをトップページにする3ステップ

これだけ!

②固定ページの編集は当サイトの例を参考までに紹介します。

カスタマイズ①固定ページを2つ準備する

まずは下準備で2つの固定ページを作ります。

固定ページ>新規作成」でページを2つ作成

固定ページ用意

HOME:これから編集して行くページ
新着記事:タイトルだけの空ページ

タイトルはなんでもいいので、

「TOP」「HOME」と「新着記事」「記事一覧」などにしておきましょう。

ここで作るページはタイトルとパーマリンクだけ設定すればOKです

固定ページのパーマリンクを設定

パーマリンクの設定

作成できたらそのまま「公開」しちゃってください。

現段階では誰にもみられないので、特に問題ありません

>>目次へ戻る

カスタマイズ②トップページの固定ページを編集する

SWELLは直感的に操作できて、デザイン性も高いので是非自分でやってみてください。

楽しく作業できて、自分のサイトにも愛着が増しますよ!

参考までに当サイトの例を紹介します。

働く銀行員ドットコム固定ページ部分の構成

トップページの構成

トップページの内、固定ページ部分はこんな感じの構成になっています。

その中でも①〜③の部分を実際のページでみるとこんな感じ

①〜の実際のページ

トップページ 実際のページの構成

その後もずらーっとSWELL記事やカテゴリ別記事が続いています。

①のスタイルは記事作成の時に使う右にあるブロックから選択しています。

スタイル

④見出しは見出しのH3を使用しています。

②③⑤の投稿リストと⑥のSWELLボタンは画像付きで説明していきます。

>>目次へ戻る

投稿リストの設置

ブロック追加の➕から

SWELLブロック>投稿リスト」を選択

投稿リストの追加

投稿リストのブロックが挿入されます。

投稿リストは右側のSettingとPickupから表示内容を編集することができます。

投稿リストの編集

色々表示方法を設定できますね。

当サイト働く銀行員ドットコムの設定例を紹介します。

実際のページの設定

②の投稿リスト

Setting

  • 表示する投稿数:1
  • レイアウト:サムネイル型
  • 表示設定:更新日、pv数

Pickup

  • 投稿IDで1つの記事を指定

③の投稿リスト

Setting

  • 表示する投稿数:2
  • レイアウト:リスト型(左右交互)
  • 表示設定:更新日、pv数

Pickup

  • 投稿IDで2つの記事を指定

⑤の投稿リスト

Setting

  • 表示する投稿数:3
  • 投稿の表示:新着順
  • レイアウト:サムネイル型
  • 表示設定:更新日、pv数

Pickup

  • 指定なし

Pickupでカテゴリやおすすめタグを設定した記事なども設定できます

>>目次へ戻る

SWELLボタンの設置

ブロック追加の➕から

SWELLブロック>SWELLボタン」を選択

SWELLボタンの追加

表示したい文字とリンク先のURLを入力すればジャンプできるようになります。

SWELLボタンの設定
おかきぱん

リンク先はこのような方法で設定できます

新着記事最初に作った新着記事固定ページ(タイトルだけの空ページ)のURL

カテゴリ:「投稿>カテゴリ>(表示したいカテゴリの)表示」で表示されるページURL

SWELLボタンの先頭文字は「Font Awesome」からも使用できます。

公式ホームページで詳しく説明してくれているので、参考にしてみてください。

>>目次へ戻る

かっこいいサイトを作る

SWELLデモサイト
SWELL公式-SWELLデモサイト一覧-より

デモサイトどれもかっこいいですよねー!

一回はこんなサイト作ってみたい。。。

掲載されている「画像どーん!」のかっこいいページはフルワイドから作成できます。

フルワイド設定方法
降るワイド設定方法

テーマが絞れていて、雰囲気が合う人はバッチリ決まると思います。

>>目次へ戻る

カスタマイズ③固定ページをトップページに表示する

ここまでできたらあとは設定すればトップページが表示されます。

外観>カスタマイズ」から「wordpress設定>ホームページ設定」を選択

固定ページのトップページ設定

ホームページ:編集した固定ページ
投稿ページ:空の投稿ページ

上記で設定してみてください。

正しく表示されているか確認してみましょう!

>>目次へ戻る

外観>カスタマイズからヘッダーを編集する

固定ページのトップページカスタマイズは終わりです。

続いて、ヘッダーの編集方法も解説します。

ヘッダーの構成はこんな感じ

ヘッダーの構成

ヘッダーの構成

カスタマイズ①ピックアップ、記事スライダーを設置する

外観>カスタマイズ>トップページ」を選択

ヘッダーの編集

ピックアップや記事スライダーの設置ができます。

また、レイアウトやデザインもここで設定できます。

記事スライダーは表示記事の設定もここでできますが、ピックアップは別の項目から作業が必要です。

外観>カスタマイズ>メニュー」を選択

グローバルナビの編集
グローバルナビ

外観>カスタマイズ>メニュー>ピックアップ」を選択

ピックアップの編集

メニューから載せたいページを設定します。

ここで投稿を選択した場合、アイキャッチがデフォルトで表示されてしまいます。

文字入りの画像をアイキャッチにしている場合見えづらくなってしまいますね。

そこで、緑色で囲んだ「説明」の欄に画像のURLを入れると、その画像が表示されるようになります。

画像のURLは投稿の下にある「メディア>(使いたい画像)表示」で確認できます。

>>目次へ戻る

カスタマイズ②グローバルナビを編集する

外観>カスタマイズ>メニュー>グローバルナビゲーション」を選択

グローバルナビの編集

表示したい項目を追加していけばOKです。

グローバルナビのサブメニュー

段差をつけて並べると、カーソルがあたった際にサブメニューが表示されるようになります。

>>目次へ戻る

カスタマイズ③ヘッダーロゴ、ヘッダーバーを編集する

外観>カスタマイズ>ヘッダー」を選択して編集します。

当サイトでは

  1. ヘッダーロゴの設定
  2. ヘッダーバーの設定

を設定しています。

そのほかヘッダーに関してはSWELL公式で詳しく解説してくれています。

>>目次へ戻る

外観>ウィジェットからサイドバーを編集する

SWELLで表示するサイドバーには4つ種類があります。

  • 共通サイドバー
  • 共通サイドバー【スマホ版】
  • トップページ専用サイドバー
  • 追尾サイドバー

当サイトでは「共通サイドバー」を使用しています。

サイドバーの表示方法は公式で詳しく解説してくれています。

>>目次へ戻る

カスタマイズ①サイドバーに表示する項目を追加する

外観>ウィジェット」を選択

サイドバーの編集

使用したいサイドバーに項目を追加していきます。

当サイトは画像のように

  • 検索
  • プロフィール
  • Twitterタイムライン(カスタムHTML)
  • 最近の投稿
  • カテゴリー
  • アーカイブ

を表示しています。

>>目次へ戻る

カスタマイズ②Twitterのタイムラインを表示する

Twitterのタイムラインを表示するにはカスタムHTMLにコードを入力しなければなりません。

そんなに難しくないですよ!

Twitterタイムラインを埋め込む4ステップ

  1. Twitter Publishにアクセス
  2. TwitterのプロフィールURLを入力
  3. カスタムHTMLに貼り付け
  4. 表示数を調整する(やりたい場合)

これだけ!

表示数調整しなければ秒で終わります。

順にやっていきます。

STEP
Twitter Publishにアクセス
STEP
TwitterのプロフィールURLを入力
Twitter Publish HP

真ん中にTwitterプロフィールのURLをコピペします。

Twitter Pubkish やり方

左側を選択したらコードが出来上がるのでコピペしてください。

STEP
カスタムHTMLに貼り付け

追加した「カスタムHTML」に貼り付ければ完了です。

Twitter Pubkish サイドバー貼り付
STEP
表示数を調整(やりたい場合)

実際表示してみてどうですか?

表示投稿数多くて邪魔じゃないですか?笑

私は嫌だったので、減らしました。

先ほどの画像の黄色マーカー・赤下線の箇所を入力すれば表示数が調整できます。

Tweet数のCSS

ユーザー名+英数字”>Tweets by〜の「”」と「>」の間に

data-tweet-limit="3"

を入力してください。

‘3”は表示したい投稿数です。

自分で表示したい投稿数を入れてみましょう!

>>目次へ戻る

固定ページをトップページにするとカスタマイズの幅が広がる

今回は固定ページを使ったトップページの作り方、ヘッダー・サイドバーの作り方を解説しました。

SWELLを使っていれば簡単にできて、時間を忘れるほど楽しいので一度試す価値ありです。

かっこいいトップページできたら是非連絡ください。

見にいきます!

愛着のあるトップッページで良いブログライフを!

おしまい!

follow me

コメント

コメントする

目次
閉じる