どうもおかきぱん(@okakipanBANKER)です
ブログやっているとおしゃれなトップページに憧れますよね。
おしゃれなトップページへの第一歩として、
固定ページをトップページにカスタマイズして、ブログ型からサイト型へする方法を紹介します。
※このブログのWordpressテーマは「SWELL」です。SWELLでの方法を中心に説明します。
- SWELLトップページのカスタマイズ方法
- 固定ページでのトップページ作成方法
- ブログ型からサイト型への移行方法
この記事を読めば、固定ページでトップページを自由に作る方法がわかります。
SWELL固定ページをトップページにした構成
固定ページを使ったトップページはこんな構成になってます。
- ①固定ページで作成した内容が表示されます。
- ②外観＞カスタマイズで作成した内容が表示されます。
SWELLではピックアップバナーや記事スライダーを設置できます。 - ③外観＞ウィジェットでサイドバーに追加したものが表示されます。
スマホだとサイトの一番下に表示されます。
それぞれ解説していきます。
固定ページをトップページにしてカスタマイズする
固定ページを用いたトップページは非常に簡単です。
固定ページをトップページにする3ステップ
これだけ！
②固定ページの編集は当サイトの例を参考までに紹介します。
カスタマイズ①固定ページを２つ準備する
まずは下準備で２つの固定ページを作ります。
「固定ページ＞新規作成」でページを２つ作成
タイトルはなんでもいいので、
「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
- 指定なし
SWELLボタンの設置
ブロック追加の➕から
「SWELLブロック＞SWELLボタン」を選択
表示したい文字とリンク先のURLを入力すればジャンプできるようになります。
おかきぱんリンク先はこのような方法で設定できます
新着記事：最初に作った新着記事固定ページ（タイトルだけの空ページ）のURL
カテゴリ：「投稿＞カテゴリ＞（表示したいカテゴリの）表示」で表示されるページURL
公式ホームページで詳しく説明してくれているので、参考にしてみてください。
かっこいいサイトを作る
SWELL公式-SWELLデモサイト一覧-より
デモサイトどれもかっこいいですよねー！
一回はこんなサイト作ってみたい。。。
掲載されている「画像どーん！」のかっこいいページはフルワイドから作成できます。
テーマが絞れていて、雰囲気が合う人はバッチリ決まると思います。
カスタマイズ③固定ページをトップページに表示する
ここまでできたらあとは設定すればトップページが表示されます。
「外観＞カスタマイズ」から「wordpress設定＞ホームページ設定」を選択
上記で設定してみてください。
正しく表示されているか確認してみましょう！
外観＞カスタマイズからヘッダーを編集する
固定ページのトップページカスタマイズは終わりです。
続いて、ヘッダーの編集方法も解説します。
ヘッダーの構成はこんな感じ
ヘッダーの構成
カスタマイズ①ピックアップ、記事スライダーを設置する
「外観＞カスタマイズ＞トップページ」を選択
ピックアップや記事スライダーの設置ができます。
また、レイアウトやデザインもここで設定できます。
記事スライダーは表示記事の設定もここでできますが、ピックアップは別の項目から作業が必要です。
「外観＞カスタマイズ＞メニュー」を選択
「外観＞カスタマイズ＞メニュー＞ピックアップ」を選択
メニューから載せたいページを設定します。
ここで投稿を選択した場合、アイキャッチがデフォルトで表示されてしまいます。
文字入りの画像をアイキャッチにしている場合見えづらくなってしまいますね。
そこで、緑色で囲んだ「説明」の欄に画像のURLを入れると、その画像が表示されるようになります。
カスタマイズ②グローバルナビを編集する
「外観＞カスタマイズ＞メニュー＞グローバルナビゲーション」を選択
表示したい項目を追加していけばOKです。
段差をつけて並べると、カーソルがあたった際にサブメニューが表示されるようになります。
カスタマイズ③ヘッダーロゴ、ヘッダーバーを編集する
「外観＞カスタマイズ＞ヘッダー」を選択して編集します。
当サイトでは
- ヘッダーロゴの設定
- ヘッダーバーの設定
を設定しています。
そのほかヘッダーに関してはSWELL公式で詳しく解説してくれています。
外観＞ウィジェットからサイドバーを編集する
SWELLで表示するサイドバーには4つ種類があります。
- 共通サイドバー
- 共通サイドバー【スマホ版】
- トップページ専用サイドバー
- 追尾サイドバー
当サイトでは「共通サイドバー」を使用しています。
サイドバーの表示方法は公式で詳しく解説してくれています。
カスタマイズ①サイドバーに表示する項目を追加する
「外観＞ウィジェット」を選択
使用したいサイドバーに項目を追加していきます。
当サイトは画像のように
- 検索
- プロフィール
- Twitterタイムライン（カスタムHTML）
- 最近の投稿
- カテゴリー
- アーカイブ
を表示しています。
カスタマイズ②Twitterのタイムラインを表示する
Twitterのタイムラインを表示するにはカスタムHTMLにコードを入力しなければなりません。
そんなに難しくないですよ！
Twitterタイムラインを埋め込む4ステップ
- Twitter Publishにアクセス
- TwitterのプロフィールURLを入力
- カスタムHTMLに貼り付け
- 表示数を調整する（やりたい場合）
これだけ！
表示数調整しなければ秒で終わります。
順にやっていきます。
真ん中にTwitterプロフィールのURLをコピペします。
左側を選択したらコードが出来上がるのでコピペしてください。
追加した「カスタムHTML」に貼り付ければ完了です。
実際表示してみてどうですか？
表示投稿数多くて邪魔じゃないですか？笑
私は嫌だったので、減らしました。
先ほどの画像の黄色マーカー・赤下線の箇所を入力すれば表示数が調整できます。
ユーザー名＋英数字”>Tweets by〜の「”」と「＞」の間に
data-tweet-limit="3"
を入力してください。
‘3”は表示したい投稿数です。
自分で表示したい投稿数を入れてみましょう！
固定ページをトップページにするとカスタマイズの幅が広がる
今回は固定ページを使ったトップページの作り方、ヘッダー・サイドバーの作り方を解説しました。
SWELLを使っていれば簡単にできて、時間を忘れるほど楽しいので一度試す価値ありです。
かっこいいトップページできたら是非連絡ください。
見にいきます！
愛着のあるトップッページで良いブログライフを！
おしまい！
コメント