SWELLを購入してみたいけど，どうやってCocoonから移行するかわからない・・・
こんな悩みにお答えします．
・初心者ブログをプロ級に変える サイト型トップページの作り方 ・サイト型トップページ① ヘッダーの作り方 ・サイト型トップページ② メインビジュアルの作り方 ・サイト型トップページ③ トップページの作り方 ・サイト型トップページ④ 新着記事エリアの作り方 ・サイト型トップページ⑤ プロフィールエリアの作り方 ・サイト型トップページ⑥ カテゴリー別記事エリアの作り方 ・サイト型トップページ⑦ 作成したページをサイト型トップページに設置する ・有料テーマ導入前との比較（恥しいからあまり見ないで）
初心者ブログからレベルアップをするためにSWELLを導入しました．
今回は数ある有料テーマの中でSWELLに決めた理由と，実際にCocoonからの移行方法，プロ級のブログにするカスタム方法を解説していきます．
実際に自分が導入をしてから完成するまでを，画像たっぷりでまとめました．
このシリーズを同じようにやれば誰でも簡単にプロ級のサイトに生まれ変わります．
初心者ブログをプロ級に変える サイト型トップページの作り方
ここからはWordPressをそのまま使用していた初心者ブログから，プロ級のブログに変化させる具体的な方法を書いていきます．
サイト型トップページ① ヘッダーの作り方
まずはヘッダーから変えていきます．
『外観⇨カスタマイズ』をクリックします
『ヘッダー』をクリックします．
ロゴはCanvaというサイトで作っていきます． テキストから好きなテンプレートを選び，自分だけのロゴを作成します．
完成したら右上の↓を押し，ダウンロードしていきます．
ヘッダーカスタマイズ画面に戻り，ロゴ画像をアップロードします．
あとは大きさなど設定を自由に編集してみてください．
私のサイトでは，次のような設定にしています．
- 画像サイズ（PC)：55px
- 画像サイズ（PC追従ヘッダー）：48px
- 画像サイズ（SP)：70px
- ヘッダーレイアウト（PC)：ヘッダーナビロゴ横右寄せ
- ヘッダーレイアウト（SP）：ロゴ中央メニュー左
- ヘッダー境界線：なし
- ヘッダーの背景を透明にするか：しない
最後に左上の公開を押せば完了です．
サイト型トップページ② メインビジュアルの作り方
『外観⇨カスタマイズ』をクリックします．
『トップページ⇨メインビジュアル』とクリックします．
好きな画像をO-DANから選び，挿入していきます．
画像の多きさやScrollボタンの有無，メインテキストを決めて左上の『公開』を押せば完成です．
サイト型トップページ③ トップページの作り方
まず軸となるトップページを作っていきます．
『固定ページ⇨新規追加』を押します．
ページタイトル：HOME URLスラッグ：home HOMEというタイトルでページを作ります．
これで準備は完了です．
次に，このページの中に「新着記事一覧」「プロフィール」「カテゴリ別記事」を順番に入れていきます．
サイト型トップページ④ 新着記事エリアの作り方
『固定ページ⇨新規追加』と進みます．
1:ページタイトルを決める 2:表示状態を「公開」にする 3:パーマリンクを「new-posts」にする 4:右上の公開を押せば終了．
次に実際に『HOME』の固定ページ内に新着記事一覧エリアを作っていきます．
『HOME』の固定ページを開いて，左上の『＋』を押して，フルワイドを追加します．
フルワイドの設定は以下のようにします．
- コンテンツ横幅：記事
- 上下のpadding量：PC・SPともに40
- 背景色：好きな色
- 上下の境界線の形状：波、高さ：0
左上の『＋』からカラムを開きます．
カラムは『30:70』を選択します．
まずは左側のブロックから作っていきます．
左側のブロックの『＋』を押し，『投稿リスト』を挿入します．
挿入した投稿リストをクリックすると，右側に設定画面が出現します．
- 表示する投稿数：1
- レイアウト：カード型
- 投稿の表示順序：更新日順
- カテゴリー表示位置：日付の横
- 最大カラム数(PC/SP)：1列
- 抜粋文の文字数：8０
次に右のブロックを作っていきます．
右側のブロックの『＋』を押し，『投稿リスト』を挿入します．
挿入した投稿リストをクリックすると，右側に設定画面が出現します．
- 表示する投稿数：4
- レイアウト：テキスト型
- 投稿の表示順序：更新日順
- カテゴリー表示位置：日付の横
- 最大カラム数(PC/SP)：1列
- 抜粋文の文字数は「０」にする
- MOREリンクの表示テキスト：新着記事をもっとみる
- MOREリンクのURL
一番最後のリンク先のURLは，『新着記事一覧を作る』の始めに作った『新着記事一覧』のURLです．
私の場合，『https://nayamerupapa.com/new-posts/』です．
新着記事一覧のテキストの方の1番目と2番目の記事が，上のカード型の大きなものと重複していると思います．
これを解消するために一工夫加えます．
右下の追加CSSクラスに『li-2nd-none』を入力します．
ページ下部に下のコードをコピペします．(コードの変更は自己責任でお願いします．ここは飛ばしても構いません．)
.li-2nd-none > ul >li:first-child {
display: none;
}
.li-2nd-none > ul >li:nth-child(2) {
display: none;
}右上の公開を押せば終了です．
サイト型トップページ⑤ プロフィールエリアの作り方
プロフィールエリアは先ほど作った『新着記事一覧』の下に作っていきます．
人気記事の下の『＋』を押し，フルワイドを追加します．
『見出し』と書いてあるところをクリックし，ブロックを削除します．
『 WebMaster 』と打ち込んでいきます．
下に『カラム』を追加し，『30：70』にします．
左側の『＋』を押し，画像からプロフィールアイコンをアップロードしていきます．
次に右の『＋』から段落を選択し，自己紹介文を記載していきます．
右の画像URLから背景画像を入れていきます．
Fixed Background：スクロールすると背景画像が動きます パララックス効果：スクロールすると背景画像がゆっくり動きます
これでプロフィールエリアの完成です．
サイト型トップページ⑥ カテゴリー別記事エリアの作り方
カテゴリー別記事エリアは，先ほど作ったプロフィールエリアの下に作っていきます．
プロフィールエリアの下に『フルワイド』を挿入していきます．
タブブロックを挿入します．
タブの中に投稿リストを挿入していきます．
- 表示する投稿数：3
- レイアウト：リスト型(左右交互)
- 投稿の表示順序：更新日順
- カテゴリー表示位置：日付の横
- 最大カラム数(PC/SP)：1列
- 抜粋文の文字数は「80」にする
- MOREリンクの表示テキスト：もっとみる
『Pickup』をクリックします．
カテゴリーを選択しましょう．
全てのタブを同じように作れば完成です．
ここまで完成したら，右上の『公開』を押して終了です．
サイト型トップページ⑦ 作成したページをサイト型トップページに設置する
『外観⇨カスタマイズ』とクリックします．
『WordPress設定⇨ホームページ設定』とクリックします．
『固定ページ』を選択します． ホームページ：HOME 投稿ページ：NEW-POSTs
『公開』を押せば終了です．
有料テーマ導入前との比較（恥しいからあまり見ないで）
これがSWELL導入前の悩めるパパブログです．
これでも色々考えて，アイキャッチなど華やかにして見やすくしていたつもりでした．
しかし，beforeとafterでは雲泥の差です．
時間をかけて悩むより，早く導入をして実際の記事の執筆に時間をかける方が，よっぽどサイトに来てくれる人の数は増えます．
完成版を見たい方は，ぜひトップページに飛んでみてください．
まとめ
今回はサイト型トップページの作り方についてまとめました．
・初心者ブログをプロ級に変える サイト型トップページの作り方 ・サイト型トップページ① ヘッダーの作り方 ・サイト型トップページ② メインビジュアルの作り方 ・サイト型トップページ③ トップページの作り方 ・サイト型トップページ④ 新着記事エリアの作り方 ・サイト型トップページ⑤ プロフィールエリアの作り方 ・サイト型トップページ⑥ カテゴリー別記事エリアの作り方 ・サイト型トップページ⑦ 作成したページをサイト型トップページに設置する ・有料テーマ導入前との比較（恥しいからあまり見ないで）
みなさんもこの記事を見ながらぜひチャレンジしてみてください．
コメント