やちゃ坊おすすめ商品♪>>>楽天ROOM

【画像有り】SWELLトップページをお洒落なサイト型にカスタマイズをする方法

やちゃ坊

うがみんしょら〜(こんにちは)、やちゃ坊です

ブログ開設から、気付けば3ヶ月、ブログテーマは無料派!!

と思っていた私も

サイト型トップページに憧れ、ついに有料テーマ『SWELL』に移行をしました。

SWELLなら、CSSなどのWEBデザインやプログラミングの知識がなくても

簡単にトップページをカスタマイズ出来てしまうのです。

今日は、初心者にでも出来るサイト型カスタマイズについて、解説していきます。

こんなあなたに伝えたい

・ブログをお洒落にしたい

・ブログをサイト型にカスタマイズしたい

・難しいコードをいじるのは自信がない

SWELL最高♪

\私がSWELLに移行した理由はこちら/

【cocoon卒業】無料テーマ派の私がSWELLに移行した理由5選

\カスタマイズで参考にした記事はこちら/

今回は、ヘッダーとフッターのカスタマイズは、省略します。

固定ページで作成するトップページの作成のみです。

目次

トップページとは、どの部分のこと?

それでは、私のサイトを元に解説していきます。≫≫≫やちゃ坊たいむ

当ブログは以下で構成されています。

  • ヘッダー
  • トップページ
  • フッター

ヘッダー

やちゃ坊たいむヘッダー

ヘッダーとは、サイトの冒頭の部分のことです。

ワードプレス管理画面→外観→カスタマイズ→ヘッダーまたはトップページ

フッター

やちゃ坊たいむフッター

フッターとは、サイトの一番最後の部分です。

WordPress管理画面→外観→フッターまたはウィジェット

トップページ

ヘッダーとフッターの間に当たるレイアウトをトップページといいます。

今回は、こちらのカスタマイズについて説明します。

トップページのカスタマイズは固定ページで作成する

固定ページを2つ作成する(トップページ用・新着記事用)

サイト型にするには、固定ページでカスタマイズしていく事が不可欠です。

WordPress管理画面

WordPress管理画面→固定ページ→新規追加

固定ページを2つ作成していきます。

新着記事用固定ページ

新着記事用固定ページ

STEP
タイトルを変更

わかりやすく『新着記事』

STEP
URLスラッグを変更

そのままだと文字化けするため、英語表記にする(例)newpost

STEP
公開

新着記事は以上です。

トップページ用固定ページ

トップページ用固定ページ

STEP
タイトルを変更

わかりやすく『ホーム』

STEP
URLスラッグを変更

わかりやすく『top』


先ほどと同じ容量で作成します。

さて、ここからが本番です。

実際に、このページにカスタマイズをしていきます。

やちゃ坊

一緒に頑張っていこう!

 

『やちゃ坊たいむ』トップページは、以下のブロックで構成されています。

  • 新着記事・人気記事
  • カテゴリー①〜④(山&アウトドア)
  • カテゴリー⑤(英語学習)
  • カテゴリー⑥(雑記)

順番に解説していきます。

トップページⅠ新着記事・人気記事

新着記事・人気記事

背景に波をつける

これが背景の波です。

ブロックの中から『フルワイド』を選択

フルワイドの設定

歯車→ブロックで詳細を設定する

フルワイド設定
  • コンテンツ幅 記事
  • 境界線の形状 
  • 背景色
  • 上下のpadding数
やちゃ坊

好みに合わせて、いろいろ触ってみてね!

2カラムブロックを作成

ブロック→カラム→50/50(2カラム)を選択

カラムブロック
やちゃ坊

最新記事を1番目立たせる設定にしたよ!

左カラム

STEP
段落にタイトルを書く

(例)\New arrival/

STEP
ブロックから投稿リストを選択
投稿リスト設定
  • 投稿数 1
  • レイアウト カード型
  • 最大カラム数 1
  • 抜粋文 40

右カラム

STEP
ブロックからタブを選択

タブ1に『新着記事』、タブ2に『人気記事』を記入

STEP
タブ1(新着記事)内に投稿リストを追加
新着記事 投稿リスト設定
  • 投稿数 1
  • レイアウト リスト型
  • 最大カラム数 1
  • moreリンク (例)read more
STEP
タブ2(人気記事)内に投稿リストを追加
人気記事 投稿リスト設定
  • 投稿数 1
  • レイアウト リスト型
  • 最大カラム数 1

このままでは、左カラムで設定した記事と

右カラムの新着記事の最新が被ってしまうため、

CSSを使って重複を無くします。

※あくまで、自己責任でCSSは利用しましょう。

STEP
右カラム『高度な設定』に追加CCS名を入力

lit-first-noneと入力

STEP
管理画面→外観→カスタマイズ→追加CSSに以下のコードを記入

.li-first-none > ul >li:first-child {
display: none;
}

以上で、重複はなくなります。

トップページⅡカテゴリー①〜④(山&アウトドア)

カテゴリー①〜④ 山&アウトドア
やちゃ坊

ここからは、さっきまでの応用になるけど、簡単だよ!

STEP
ブロックでカテゴリー用の画像を挿入
カテゴリー画像挿入
画像設定
  • スタイル 角丸
  • 画像の寸法 50%
STEP
ブロックで投稿リストを追加
カテゴリー投稿リスト設定

Setting

  • 投稿数 3
  • レイアウト カード型
  • 最大カラム数 PC 3 SP 1
  • moreリンク

Pickup

  • カテゴリーを選択
やちゃ坊

この工程をカテゴリー①〜④で繰り返したよ!

 

トップページⅢカテゴリー⑤英語学習

カテゴリー⑤英語学習
STEP
画像の挿入

カテゴリー①〜④と同じ

STEP
背景に波を挿入
STEP
2カラムブロックを挿入

左カラムには『カスタムHTML』でアフィリリンクを挿入

右カラムは『投稿リスト』でカテゴリーを選択

トップページⅣカテゴリー⑥雑記

カテゴリー⑥雑記
STEP
画像の挿入
STEP
2カラムブロックを挿入
左カラム 自己紹介記事設定

Setting

  • 投稿数 1
  • レイアウト カード型
  • 最大カラム 1

Pickup

  • 投稿IDを直接指定(自己紹介記事のID)

右カラムは『投稿リスト』でカテゴリーを選択

最後に固定ページを公開して完成です。

固定ページをトップページに設定する

ホームページ設定

管理画面→外観→カスタマイズ→WordPress設定→ホームページ設定

  • ホームページの表示 固定ページ
  • ホームページ ホーム
  • 投稿ページ 新着記事

以上で、設定は終わります。

やちゃ坊

お疲れ様でした♪

【画像有り】SWELLトップページをお洒落なサイト型にカスタマイズをする方法

いかがだったでしょうか?

ほぼ、CSSは利用する事なく、トップページをカスタマイズする事ができました。

SWELLは本当にブロックが充実していてカスタマイズが簡単です。

是非、皆さんも沢山ブロックを触れてみて

オリジナルのカスタマイズをしてみてくださいね。

分からないことがあれば、コメントTwitter@laughdays_e)のDMなどで

いつでも質問を受け付けています。

気軽にご相談してください。

にほんブログ村 にほんブログ村へ
にほんブログ村

オススメザック『山と道』レビュー

やちゃ坊自己紹介

\SWELLの購入はこちら/

SWELL公式サイト
やちゃ坊

ありがっさまりょうた〜!!!

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

よかったらシェアしてね!

この記事を書いた人

奄美大島出身。九州在住。
趣味は登山(7年目)・キャンプなどのアウトドア全般、音楽、サウナ、旅行。
「ハーフなのに英語を話せない」ことがコンプレックスで
コロナ禍にオンライン英会話を開始(通算180回以上受講)。
R3年の目標は、
●ブログとアウトドアを楽しむ。
●TOEIC初受験

コメント

コメントする

CAPTCHA


目次
閉じる