有料テーマの購入を検討中の方におすすめ記事

【CSS不要】SWELLのカスタマイズ!サイト型トップページの作り方

  • URLをコピーしました!
悩子ちゃん

おしゃれなブログが作りたい!
でも、デザインセンスがなくても、大丈夫かなぁ?

ケイ@

わたしもデザイン本を読んで、
おしゃれなブログを作れたよ。
今回はその本も紹介しちゃいます。

当サイトは、

WordPressの有料テーマ【SWELL】を使用しています。

SWELLを使うことで、
かんたんにおしゃれなデザインのブログを作ることができます。

  • パソコン初心者でもかんたんに使える
  • かんたんにおしゃれなブログを作れる
  • 記事を書くのが楽しくなるSWELLのブロックエディタ

SWELLへの移行方法が知りたい方は、【初めてでも簡単にできる】cocoonからSWELLへの移行手順!にて
詳しく解説しています。

ケイ@

トップページは固定記事で書いていくよ。

悩子ちゃん

固定記事で書く?
どういう意味?

ケイ@

わからなくても大丈夫!
この記事を読めば誰でも簡単にサイト型のトップページが作れるよ。

この記事でわかること
  • 当サイトのトップページの作り方
  • サイト型のホームページの作り方
  • デザインセンスがなくてもできたデザイン勉強方法
タップできる目次

当サイトの項目

項目名
  1. グローバルメニュー
  2. ヘッダー
  3. お知らせバー
  4. メインビジュアル
  5. カテゴリー
  6. 新着記事・人気記事
  7. プロフィール
  8. 問い合わせ
  9. SWELLのアフィリエイト
  10. フッター
  11. コピーライト

この記事は、⑤から⑨の項目のやり方を説明していきます。

①から④と⑩・⑪の項目は、別記事でまとめますので、公開までしばらくお待ちください。

各項目で用意するもの
  • カテゴリー画像×カテゴリーの数(220px×220px)
  • プロフィール用画像(512px×512px)
  • 各項目のタイトル画像×項目の数(1500px×500px)
  • 新着記事用の固定ページ
    (固定ページのURLをのちほど使用します)
  • お問い合わせ用のプラグイン
    (Contact Form7)をインストールし、有効化する。

自分で画像を作る方法

当サイトは、「canva」を使用して画像を作成しています。

canvaとは、
デザイン作成ツールのことで多くのブロガーが採用しています。

canvaには、無料に使える「canva」と
月または、年契約で使用できる「」が
あります。
無料とproは、テンプレートの種類の数がちがい、proの方がかわいいと思うものは多いです。

また、「画像のサイズ変更」や「背景透過」などのオプションもproしか使えません。

」 は、一か月間の無料期間
あります。


トップページをカスタマイズする際は、この無料期間を利用して、画像を作り満足できなければ解約し無料のものを使うことをおすすめします。

わたしが、canvaを使用するにあたって参考にしたブログを紹介します。

きゃりー@ブログ5カ月目さん (@enkura_carrie) / Twitter

(2) せれねこ@ブロガーさん (@SerenecoBlog) / Twitter

この2人の記事は、とてもわかりやすいのでこれを読めば、素敵なアイキャッチ画像を作れるようになると思います。

デザインセンスがなくてもおしゃれな画像を作る方法

わたしが、このブログのデザインを作るにあたって参考にしたもの。

それは、

「デザイン本」です!

ブログの勉強をするとき本を購入して勉強しますよね。

その感覚で、本を買ってみたら、自分でも納得いくデザインができたのでその本を紹介します!

わたしが、本を購入する前のトップページがこちらになります。

本を購入した後のトップページ

ケイ@

本を買う前は、色のバランスがうまく取れなかったけど、買った後のデザインは、うまくまとまった気がするなぁ。

悩子ちゃん

色の統一感が出て、見やすくなったね。

わたしが、購入した本はこちら。

この本を読めば、色合いやデザインがイメージしやすくなるのでおすすめです。

不安な方は、本屋さんで中身を確認してから
購入してください。

各項目のタイトル画像を貼る方法

画像を作成するにあたっての注意点

タイトルで作成する画像は、フルワイドの背景の色を何にするか決めてから、作成してください。

タイトル画像の作成手順
  1. フルワイドの背景の色を決める。
  2. 背景の色に合う文字の色を決める。
  3. 画像作成時に「透過背景」を使用
    する。または、タイトル画像の背景の色をフルワイドの色に合わせる。
当サイトのタイトル画像の割合
  • タイトル画像(1500px×500px)
  • 項目の文字(1000px×240px)
  • サブタイトル(250px×50px)

文字の長さによって少し変わりますが、
これを目安にして作成しました。

STEP
フルワイドブロックを出して、
見出しを削除する。

赤枠内の見出しをクリックする。

赤枠内をクリックし、見出しを削除する。

STEP
赤枠内の「」をクリックし、画像を選択する。
STEP
作成した「タイトル用画像」を選択する。

背景の浸透化機能を使いたい方は、こちら。

透過画像を簡単作成

新着記事用の固定ページの作り方

STEP
ダッシュボードの固定ページから
新規追加をクリックする。
STEP
からの項目を設定する。

① タイトル

自分のわかりやすいタイトルにする。

わたしは、「新着記事」にしました。

② パーマリンク設定

ここも、わかりやすい英数字を入れる。

「new-post」に設定。(ここで変更したURLを新着記事を作成するときに使うので、覚えていてください)

③ 公開設定

表示状態が「公開」になっているか、確認する。

④ 公開する。

公開をクリックして、この作業は終了です。

トップページを作る(⑤から⑨のエリアを作成します)

固定ページの新規追加から、固定記事を開きタイトルを決める。

タイトルは、自分がわかるようにしましょう。

当サイトのタイトルは、「Home」にしています。

カテゴリーエリアの作り方

STEP
Homeの下にあるブロックの「」を
クリックし、フルワイドブロックを選択する。
STEP
フルワイドブロック内の「」を
クリックし、リッチカラムを選択する。
STEP
赤枠内の」を「2回」クリックし、カラム数を4つにする。
カラム数を4つにした状態
STEP
リッチカラムの設定をする。

赤枠内の数字を「1」から「2」に変更して、リッチカラムの設定は完了です。

STEP
赤枠内の「」をクリックし、
検索に「バナー」と入力後、
バナーリンクを選択する。

または、「すべて表示」をクリックし、下記のバナーリンクを選択する。

STEP
初めに用意してもらったカテゴリーの画像(220px×220px)を選択する。
STEP
赤枠内に、カテゴリー名を入力する。

この場合は、SWELLの基礎知識を
クリックすると、リンクが貼れます。

STEP
バナー設定をする。

当サイトは、画像の丸みを10に設定しています。
パソコンとスマートフォンで、丸みの雰囲気が変わるので、二つのデバイスで確認してみてください。

オーバーレイを0にします。

これを4回繰り返してください。

STEP
フルワイドブロックの設定をする。

上下のpadding量を(pc)(sp)ともに、
60に設定しています。

背景色をお好きな色に変えて、
背景色の不透明度を100にしてください。

不透明度を100にすることで、
フルワイドブロックをつなげて使った際に
境界線の色がかぶらなくなります

そのほかの設定は、変えていません。

当カテゴリーで使用しているカラーコードは、「#B69B63」です。

STEP
完成画像。

これで、カテゴリーエリアの作成は完了です。

お疲れ様でした。

新着記事・人気記事エリアの作り方

新着記事・人気記事は、フルワイドブロック内に
カラムブロックを使用して、作成しています。

STEP
カテゴリーの下にフルワイドブロックを選択し、タイトルを入力する。
STEP
フルワイドブロック内の「」を
クリックし、カラムを選択する。
STEP
50/50を選択する。
STEP
左の「」をクリックし、
投稿リストを選択する。
STEP
投稿リストの設定をする。

当サイトでは、回遊率を意識して1つの記事をランダム形式で表示しています。

抜粋文は、お好みで設定してください。

STEP
右側の「」をクリックし、タブを選択する。
STEP
Tab1とTab2のタイトル名を変更する。

上と下の画像の色の違いは、選択されている
タブが黒くなります。

STEP
新着順のタブをクリックし、
投稿リストを選択する。
STEP
新着順の投稿リストを設定する。

赤枠内の設定を変更しています。

人気順との違いを出すために、テキスト型にしてみました。

投稿表示順を「新着順」にするのを忘れないようにしましょう。

MOREリンクのテキスト名を変更し、
新着記事用の固定ページのURLを貼ります。

STEP
人気順のタブをクリックし、
投稿リストを選択する。
STEP
人気順の投稿リストを設定をする。

アイキャッチ画像をみてもらいたくて、リスト型にしました。

投稿の表示順を「人気順」に変えるのを
忘れないようにしましょう。

STEP
フルワイドブロックの設定をする。

今回は、padding量を80にしました。

理由は、見た目が一番好みだったからです。

カラーコードは、「e8d6ae」です。

背景の不透明度も、100にしておきましょう。

ブロックとブロックの境界線の色がかぶらなくなります。

上部の境界線の形状を波にして、高さレベルを2.5にしました。

5が一番上で、波が高くなります。

一番好みだったため、2.5にしています。

新着・人気記事エリアの作成は、完了です。

お疲れ様でした。

プロフィールエリアの作り方

STEP
新着・人気記事エリアの下にある「」をクリックし、フルワイド
ブロックを選択する。
STEP
見出しに好きなタイトル名を入力する。
STEP
見出しの下にある「」をクリックし、画像を選択する。
STEP
プロフィール用の画像(512px×512px)を選択し、設定をする。
STEP
画像の下にある「」をクリックし、リストを選択する。
STEP
簡単なプロフィールを記入し、設定をする。
STEP
記入が終わったら、下記の「」を
クリックし、SWELLボタンを選択する。

このあとの作業は、
詳しいプロフィール記事がない方は「省略」または、
「自分がおすすめしたい記事」
などを貼るなどに変更してください。

STEP
SWELLボタンの設定をする。

SWELLボタンのカラーを変更したい場合

「ダッシュボード」→「SWELL設定」→「エディター設定」→「ボタン」をクリックする。

当サイトは、緑を使う予定はないのでカラーコードを「#6d4854」 に変更しています。

STEP
ボタンにタイトル名を記入し、
プロフィール記事をリンクする。
STEP
フルワイドブロックの設定をする。

今回は、padding量を60にしました。

理由は、見た目が一番好みだったからです。

カラーコードは、「b69b63」です。

背景の不透明度も、100にしておきましょう。

ブロックとブロックの境界線の色がかぶらなくなります。

上部の境界線の形状を波にして、高さレベルを2.5にしました。

5が一番上で、波が高くなります。

一番好みだったため、2.5にしています。

プロフィールエリアの作成は、完了です。

お疲れ様でした。

お問い合わせエリアの作り方

お問い合わせエリアは、「Contact Form 7」
というプラグインを使用しています。

プラグインの設定方法は、こちらの記事を参考にしました。

STEP
プロフィールエリアの下にある「」をクリックし、フルワイドブロックを選択する。
STEP
ボックス内のタイトルを記入して、「」をクリックし、
「Contct Form 7」を選択する。

Contct Form 7の設定が終わっていれば、
選択するだけで設置完了です。

STEP
フルワイドブロックを選択する。

今回は、padding量を80にしました。

カラーコードは、「e8d6ae」です。

背景の不透明度も、100にしておきましょう。

ブロックとブロックの境界線の色がかぶらなくなります。

上部の境界線の形状を波にして、高さレベルを2.5にしました。

5が一番上で、波が高くなります。

一番好みだったため、2.5にしています。

お問い合わせエリアの作成は、完了です。

お疲れ様でした。

SWELL広告エリア

STEP
お問い合わせエリアの下にある「」をクリックし、フルワイドブロックを選択する。
STEP
お好きなタイトル名を記入後、「」をクリックし、「カスタムHTML」を選択する。

カスタムHTMLに、もしもアフィリエイトにあるSWELLの広告コードを貼ってください。

STEP
下記の「」をクリックし、リストを選択する。

自分が感じるSWELLの魅力を書きだしてください。

STEP
リストの下にある「+」をクリックし、SWELLボタンを選択する。
STEP
SWELLボタン設定をする。

もう1種類ボタンを作成したら、
ボタンブロック完成です。

STEP
フルワイドブロックを設定する。

padding量を80にしました。

カラーコードは、「b69b63」です。

背景の不透明度も、100にしておきましょう。

ブロックとブロックの境界線の色がかぶらなくなります。

上部の境界線の形状を波にして、高さレベルを2.5にしました。

5が一番上で、波が高くなります。

一番好みだったため、2.5にしています。

SWELLの広告エリアの作成は、完了です。

以上で、⑤から⑨の項目作成は終了です!

作成した固定記事をトップページに反映させる方法

STEP
ダッシュボードにあるカスタマイズをクリックする。(どちらをクリックしてもok)
STEP
WordPress設定をクリックする。
STEP
ホームページ設定をクリックする。
STEP
各項目を設定する。
  1. 固定ページを選択する。
  2. 目次の「トップページを作る」で
    作成した固定ページのタイトルを選択する。
  3. 固定ページの新着記事を選択する。

以上で、トップページの完成です!

最後まで見ていただきありがとうございました。

最後に、ブロックを動かしたやり方を参考にした
記事を紹介します。

鰥夫(ヤモヲ)さん (@yamowo_claude) / Twitter

この方のブログは、プロフェッショナルなので一度見てみると病みつきになります!

以上で、トップページのカスタマイズ方法を終わります。(笑)

わかりにくいところがあったら、ケイ@子どもと毎日遊びたい (@GqxmcfrjfzDd) / TwitterにDMをください。

お疲れ様でした。

  • パソコン初心者でもかんたんに使える
  • かんたんにおしゃれなブログを作れる
  • 記事を書くのが楽しくなるSWELLのブロックエディタ

ブログ村参加しています。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
タップできる目次