MENU
Shoko
英検1級・TOEIC955
楽しめば楽しむほど英語は上達すると信じている元英会話講師です。

海外ドラマや映画、洋書のオーディオブックで英語を毎日聴くことを10年継続したら「通訳・翻訳を仕事にする」という夢が叶いました!

【WPテーマJINからSWELLに変えたら大反響】サイト風トップページの作り方(カスタマイズ・デザイン)

サイト風にした洋書多聴ブログ

WordPressテーマをJINからSWELLに変えて、特化ブログのトップページをサイト風にしてから

Hello

トップページ、どうやって作ってるの?

と、ブログに関する問い合わせが届くようになりました。

WordPress歴10ヵ月・WPテーマSWELL歴2ヵ月目のブログ初心者によるサイト風トップページの作り方なんて誰も興味ないと思っていたんですが、ありがたいことに個別返信してきた分だけでもなかなかの文量になったので記事化しました。

WPテーマとは?

<本記事は2部構成にしています>

第1部:WPテーマに左右されないデザインや画像についての質問に対する回答

第2部:WPテーマSWELLを使ってトップページを洋書多聴ブログと同じデザインにする方法

目次を下に用意していますので、読みたいところ(知りたい内容)だけクリックして閲覧ください。

タップできる目次

イラスト・デザインに関する質問への回答(WPテーマSWELLに関係しない内容)

画像/写真はどのサイトからダウンロードしたか

使用している素材や編集ツールについては「ピンタレストやブログのアイキャッチ画像作成に最適な無料ツール&愛用サイト」の記事内で紹介しています。

ずっと無料素材を使ってきましたが、Canvaの有料会員になったので最近はCanva内で有料会員が使える画像を使うことが多いです。

“この”イラストはどのサイトからダウンロードした?①

Canvaの「素材」を組み合わせて自作しました。

Canvaは半年くらい無料会員として使っていましたが、イラストの色が変更できる素材の多くが有料会員向けだったので、今は月額US$12.95(1,000円くらい)の定額料金を支払って利用しています。

記憶が曖昧ですが各素材は

  • book
  • play
  • voice
  • audio
  • mobile
  • phone

と入力して見つけました。

  • 日本語でも検索可能です

“この”イラストはどのサイトからダウンロードした?②

商用フリー・無料ベクター線画イラスト素材サイト「Linustock」からダウンロードしました。

左から

  • イラストをそのまま使用
  • 男の子+和柄セットのイラストの一部を組み合わせ
  • 女性+自分で「?」と入力したテキストを組み合わせ

と加工している箇所があります。

配色ツールは使ってる?何を参考にブログの色を決めているか

色はなんとなく決めていて、かなり頻繁に変更しています。

ブログを始めてからデザインのセンスを磨きたいと思いはじめて、Pinterestでブログ用のアカウントとは別にプライべートアカウントを作成。

目を肥やせばデザインや色のセンスも身につくかな?と期待していて、色のバランスやブランディングの勉強になりそうな画像を集めては、スキマ時間などに眺めています。

配色ツールと言えるかはわかりませんが、写真/画像内の色コードを知りたいと思った時は

WEBブラウザ上で、読み込んだ画像の任意のピクセルに表示されている色のRGB値と16進数カラーコードを取得するオンラインツール「画像から色のRGBを取得するスポイトツール

のページを活用しています。

余談ですが、美術館に一人で行くのが趣味(幅広いジャンルの絵画が好き)だからか、ブログ運営もデザインや配色を考える方が、文字入力より楽しいです…。

どのサイトのデザインを真似したか

「このデザインを真似しました」というサイトは無く、自分なりに考えて作りました。

配置はプロが作成しているLPや企業のトップページなどを参考にしています。

直接サイトを探して見に行くよりも、Pinterestの方がたくさん閲覧できて効率よく勉強できると感じています。

ゴチャっと保存していますが参考までにプライベートアカウントで作ったボードを掲載します。

LPの画像を集めたボード

ウェブサイトを集めたボード

Pinterestでは、気に入った画像を「ボード」に保存します。パソコンや携帯の「フォルダー」と同義です。

Pinterestはブログ集客用に使うのもおすすめです。

関連記事 ブログ初心者とピンタレストは相性良◎少なすぎるアクセス数を大公開【ブログ運営9ヵ月目】

WPテーマSWELLでサイト風トップページを作る方法

うーん

コード(HTML/CSS)の知識がいるんでしょ?難しそう、なんかすごいね!

という反応をいただいたんですが、洋書多聴ブログトップページではHTMLの編集もCSSも使っていないです

以前利用していたWPテーマJINでは、トップページを作るのにカスタマイズ用のCSSを大量に入れたり、有料プラグインを使ってみたりと試しましたが、思い通りにならず心が折れていました。

でも、SWELLではサクサクあっという間にトップページが完成!

SWELLのブロックエディター(ビジュアル編集画面)だけで作っているので、すごいのは私ではなくSWELL。

そして、この記事で書く内容は、SWELL使用者であれば誰でも簡単に再現できるので参考になれば嬉しいです。

活字でじっくりSWELLの基本機能について読みたい方は、SWELL公式サイト「ブロックエディターで使えるSWELLの専用機能まとめ」の記事をご覧ください。

サイト風トップページの事前準備
  1. WordPressのテーマはSWELLを購入、SWELLの子テーマを適用
    ※子テーマのダウンロードはこちら
    ※インストール方法はこちら
  2. トップページ用の固定ページを作成、トップページを「最新の投稿」ではなく「固定ページ」に設定
    (外観>カスタマイズ>WordPress設定>ホームページ設定)

新着・カテゴリー別に記事を表示させる方法

タブの設定(SWELLブログ:タブ)

SWELLブロックの「タブ」から、4つのタブを作成しています。

タブのデザインは3種類ありますが、私は「ふきだし」を使用していて、横幅は「固定幅PC25%」に設定しています。

記事の表示方法(SWELLブロック:投稿リスト)

タブの中身は2カラムの設定。

SWELLブロックの「投稿リスト」を使って1カラム3記事で合計6記事を表示させています。

【オーディオブック特集】のタブでは、「Pickup」の箇所から記事のIDを入力して、どの記事を表示させるか指定しています。

【洋書の楽しみ方】のタブでは、Pickupで表示させたい「カテゴリーを選択」した後、Settingsから「投稿の表示順序」で「人気順」を選択して、「聴き方」カテゴリー内の記事が人気順に表示されるように設定しています。

さらに詳しく知りたい方は、SWELL公式サイト「【SWELLブロック】投稿リストブロックの使い方」の記事をご覧ください。

波のような背景の設定方法

SWELLブロックの「フルワイド」を使用しています。

背景色を好きな色に設定して、境界線の形状を「波」、高さレベルを「5」にすると下記の通り曲線の背景が付きます。

さらに詳しく知りたい方は、SWELL公式サイト「【SWELL専用ブロック】フルワイドブロックの使い方」の記事をご覧ください。

【パソコンから見ると3列2行、携帯から見ると2列3行】デバイス別に表示を分ける方法

PC表示
モバイル表示

PC表示用とモバイル表示用の2パターンを作成して、画面の大きさに合わせてどちらか一方のみ表示されるように制限しています。

  1. PC表示用に3列のカラムを2つ作成
  2. モバイル表示用に2列のカラムを3つ作成
  3. PC表示用とモバイル表示用の範囲をそれぞれ別々にグループ化
  4. それぞれのグループの表示を制限する
STEP
(PC表示用)3列のカラムを2つ作成

カラムに「影をつける」設定をして装飾

STEP
(モバイル表示用)2列のカラムを3つ作成
  • カラムの装飾無し(デフォルト)
  • 「スマホでの列数指定」を2列に設定
STEP
PC用とモバイル用を別々にグループ化

該当箇所を選択→メニューボタン(3つの点)から「グループ化」

STEP
それぞれの表示を制限する
PCで表示させる箇所は「デバイス制限」で「PCサイズ」を選択
携帯で表示させる箇所は「デバイス制限」で「SPサイズ」を選択

ご質問くださったビヨウシ【H】さんのブログ「ヘアケアトーーク」では、同じ方法でおすすめシャンプーがトップページにて紹介されています。

PC表示
モバイル表示

清潔感あふれるスッキリしたデザインで、内容も本格的なブログです。他のSWELLデザインのブログを見てみたいと思っている方はぜひチェックしてみてください。

このブログのWPテーマ:

おわりに

役に立つ内容だった!と感じましたら

  • Twitterで本記事をシェア
  • Pinterestで保存
  • 運営ブログで紹介
  • 相互リンクのお誘い

などをしていただけると、とても嬉しいです。

意味わかんないよ!これはどうやるの?という質問は

のいずれかからご連絡ください。質問が多かった点は追記するなど、本記事を改善する上で参考にさせていただきます。

なお、筆者者はプログラミングの知識などはありませんので、不具合対応はできませんことご容赦ください。

次に読まれている記事

当ブログのWordPressテーマ

月額1,980円!入会中のブログサロン

タップできる目次
閉じる