ワイSWELLってデザイン性に優れたテーマなんやろ？
自分もなんかカッコいいブログ作りたい…
ダーマン実際にボクが特化ブログ用で構築したブログがあるので、ひとつひとつ手順を確認しながらSWELLのカスタム方法を解説します。
- SWELLで作るトップページカスタムについて深く理解できる。
SWELLのトップページカスタマイズ
今回ボクは特化ブログを作りました。
このブログとは別で、書いてみたいジャンルがあったからです。
今回この特化ブログ構築する上で一つのテーマがありました。
サイト型のトップページとは企業Webサイトのような、画面すべてを使ってコンテンツを配置していくもの。（厳密にそういった定義は無いですが…）主にはサイドにカラムが無いページをイメージしたものです。
それがしたい理由として、
・かっこいいサイトだとブログ執筆のモチベ上がる
・SWELLのカスタムをやってみたかった
・デザイナーとしての意地
これらがあったからです。
それで11月初旬からサイトのコンセプトを考え、12月に入ってサイト構築してきてようやく形になってきました。
今回の記事ではカスタム方法の記録を残しておけば今後何かカスタムする時に、ぱっと思い出しやすいと考えて記事にしています。
それではいってみましょう！
ヘッダーでサイトタイトルを設定
カラー設定
・ヘッダー背景色：白
・ヘッダー文字色：黒
今回のサイトカラーは白と黒を基調にしたもので制作します。
ボクの中で好きな組み合わせだし、少ない色の中でいかにカッコよさを出せるかというのも一つテーマとしてあったので、この配色を採用しています。
この白と黒配色のサイトで参考にさせてもらったのが下記です。
・POINT OF VIEW
・みんなの銀行
・Pickup Playground
上記3サイトはボクの中で至高の領域のサイトで、めちゃめちゃかっこいいサイトです。
おもいっきり参考にさせてもらってます。
ヘッダーロゴの設定
この部分は「くうかんしんぷるライフ」のくうかさんの記事を参考にさせて頂きました。
設定方法はくうかさんとほぼ同じ。
まずは画像サイズを1600×360で用意します。
・画像サイズ（PC）：40
・画像サイズ（PC追従）：32
・画像サイズ（SP）：48
・ヘッダーのレイアウト（PC）：ヘッダーナビをロゴの横に（右寄せ）
・ヘッダー境界線：影
細かい設定は自分でやりながら好きな形を探してみてください。
トップページの画像を変更する
ここはサイトの顔になる部分です。
イラスト一本で勝負しようと考えましたが、それだと何のサイトか分かりづらいかなと思い直しました。
最終的にはロゴタイトル+イラストという組み合わせで落ち着きました。
表示設定
・周りに余白をつける：チェック
・メインビジュアルの高さ設定：画像・動画サイズのまま
・画像（動画）の上に表示されるボタンの丸み：なし
・フィルター処理：なし
・オーバーレイカラー：黒
画像自体のサイズは1600×888とちょっと中途半端です。
PC、タブレット、スマホと調整しながら画像を作りました。
一番気にしたのはロゴタイトルの見えやすさです。
どの見栄えが良いか、イラストとロゴタイプの位置も含めて時間を使いました。
カテゴリのボタンはどう設定するか？
SWELLでカテゴリボタンの設置方法は、色々な表現方法が用意されてます。
ボクは悩んだ挙げ句「ピックアップバナー」で設置する方法を取りました。
ピックアップバナーの良いところは、PCでブラウザをリサイズした時に、ちょうど良くスペースに収まってくれること。
横幅があれば3列に。幅が狭ければ2列になるよう設定しています。
バナーレイアウト
・バナーレイアウト（PC）：固定幅3列
・バナーレイアウト（SP）：固定幅2列
バナーデザイン
・バナータイトルのデザイン：表示しない
画像自体に文字を入れてるので、わざわざその上のまた文字は配置させないので「表示しない」に設定。
「左上に表示」とか設定するとこんなイメージ。
・内側に白線を：つけない
・バナー画像を少し暗く：しない
上記２つも設定したら見栄え悪くなるので何も設定しない。
ピックアップバナー自体はどこで設定するか？
公式で解説されてますので、ざっくりの理解はまずはそちらをどうぞ。
まずはメニュー自体を作ります。
上部の「編集するメニューを選択」から「ピックアップバナー」を選びましょう。
ページ下部の「ピックアップバナー」にチェック。
そしてピックアップバナーに加えたい項目を「メニュー項目を追加」から追加していきましょう。
ピックアップバナーで任意の画像を設定するには「説明」欄にURLを加えれば画像が表示されます。
一通り設定が終われば、右下に「メニューを保存」ボタンがあるのでクリックします。
マウスオーバー時の拡大ってどこで設定してるの？
ピックアップバナーってデフォルトの設定でマウスオーバーした時、ふわっと拡大する仕様になっていますよね。
その処理をやめようかどうしようかガチャガチャ設定した挙げ句、やっぱりそのまま使うようにしました。
ワイなんや、そのまま使うんかい
ダーマン何かしらの動きを出したかったので
それでは設定方法をご紹介しますね。
設定自体は下記のサイトが参考になりました。
追加CSSの欄に上記サイトで紹介されてるCSSコードを放り込めばマウスオーバー時に拡大はされませんでした。
拡大したくない設定は以上です。
結局拡大表示をさせることにしたので、以下の処理が必要です。
ピッタリサイズで画像を作ってはマウスオーバーした時に画像が切れてしまうので、あえて少し小さいサイズで作ります。
画像ファイル自体は850×360px。
PC環境ではボタンも大きく表示されるので割と大きめに作ります。
灰色と白のドット部分が透明な部分です。
ファイルは透過処理を持たせています。
Photoshopで「Web用に保存」でpngファイルを選択し保存すればOKです。
デザインパーツはどうやって作ってるの？
バナーを作ったベースはIllustratorで作っています。
使用したフォントはバナナフリップplus。
文字数が大幅に増えたので漢字を含めた文章が作りやすくなりました。
これはありがたい。
また文字の横に配置しているアイコンはicooon monoから。
このサイトめちゃめちゃ使ってます。
アイコンが盛りだくさん。
使ってない人は使いましょう。サイトが一気に華やかになります。
アイコンがあることで視覚的に瞬時に理解しやすくなります。また文字だけのボタンよりもディテールアップするのでサイト全体のデザインレベルが上がります。
ブログコンセプト部分の設定
この部分は「ブログパーツ」機能を使って作っています。
新規画面が開いたら何もないまっさらな状態です。
ブログコンセプト部分は画像を使っているので、事前に用意しておきます。
画像の文字フォントは上記で紹介したバナナフリップPlusを使用します。
全体的な統一感を持たせる為にフォントはこれで統一するつもりです。
見出しの「Concept/ブログの考え方」とコピー文の「自分のイラストに～」をそれぞれ配置します。
ちなみにこの部分は「フルワイドブロック」で作っていまして、簡単に言えば画面いっぱいにコンテンツを表示できるようになります。
それによって視覚的にもインパクトを与えやすくなります。
そこに先程作った画像を加えていきます。
段落ごとに画像①、②と、SWELLボタンを配置しただけです。
そしてブロック全体にアニメーション効果を持たせています。
フルワイドブロックを選択した状態で、右側にあるブロックメニューから「Animations」を設定します。
Animation：Bounce In Right（右からシュッと現れる効果）
Delay：100Milliseconds（アニメ実行までの待機時間）
Speed：Fast（アニメ自体のスピード）
アニメーション設定は実際に目で見ながら設定されることをオススメします。
全ての設定が完了したら右上の「公開」ボタンを押しましょう。
ブログパーツが出来たらウィジェットに
さきほど作ったブログパーツにはコードが割り振られています。
そのコードをコピペしておきましょう。
次にウィジェット画面を開きます。
画面が開いたら「カスタムHTML」を「トップページ上部」へとドラッグ＆ドロップする。
挿入した「カスタムHTML」の右側にある▼をクリック。
位置的にはピックアップバナーの直下になります。
先程のコードをペーストする。
そしてカスタムHTML下部の「完了」をクリックして保存しておく。
これでようやくトップページにブログコンセプト部分が配置されます。
新着記事部分
この部分も「ブログパーツ」で新着情報部分を作り、ウィジェット画面から「カスタムHTML」にコードを加えて作っています。
ただ少し凝った事をしていまして、最新の新着記事を左側に大きく表示させて、一つ前の記事を右側に表示させるようにしています。
この部分はまたしてもくうかさんの記事を参考にしています。
この処理について解説します。
まずは「フルワイドブロック」を選択します。
フルワイドブロックを挿入したら、「見出し」部分があるのでそれを削除。
代わりに「カラム」を加えます。
「50/50」のカラムを選択します。
左右どちらのカラムにも「投稿リスト」を加えます。
次に画面右の設定から「ブロック」→「Setting」から投稿リストの詳細を設定していきます。
左カラムの投稿リスト設定
・表示する投稿数：1
・レイアウトを選択：カード型
・投稿の表示順序：新着順で降順
・各種表示設定：公開日を表示する
・カテゴリー表示位置：サムネイル画像の上
・タイトルのHTMLタグ：h2
・最大カラム数（PC）：1列
・最大カラム数（SP）：1列
・抜粋文の文字数（PC）：40
・抜粋文の文字数（SP）：0
右カラムの投稿リスト設定
・表示する投稿数：3
・レイアウトを選択：リスト型
・投稿の表示順序：新着順で降順
・各種表示設定：公開日を表示する
・カテゴリー表示位置：サムネイル画像の上
・タイトルのHTMLタグ：h2
・最大カラム数（PC）：1列
・最大カラム数（SP）：1列
・抜粋文の文字数（PC）：0
・抜粋文の文字数（SP）：0
この状態ですと左右どちらも最新記事が表示されるので、右側の投稿リストを2記事目から表示させます。
右側の投稿リストを選択した状態で、「ブロック」→「高度な設定」を開きます。
追加CSSクラスの欄に「li-2nd-none」と入力。
次に以下のコードを「追加CSS」に設定します。
.li-2nd-none > ul >li:first-child {
display: none;
}このコードを入れることで、右側の投稿リストが2記事目から表示されます。
これで一通りカラム部分は完成です。
そろそろ仕上げです。
背景のフルワイドブロックを黒に設定します。
そして、境界線を「斜線」に設定。
SWELLのフルワイドブロックを設定されている方は、ボクが見る限り境界線の部分を「波」に設定されています。
ボクは差を出したかったので、斜線を選択しています。
最後に見出しの画像を配置して完成です。
おすすめ記事部分
基本的には新着情報部分と作り方は全く一緒です。
ただ右カラムが2記事目から表示されないだけ。
この部分は記事が溜まってきたら自分で選んで配置しようと考えているので、これでOKです。
任意の記事を選ぶ設定は下記。
投稿IDで設定できます。
その他にもカテゴリーやタグで条件に合う記事の表示も可能です。
プロフィール部分
この部分も新着情報部分、おすすめ記事部分と作り方は途中まで一緒です。
まずは50/50のカラムを用意して、左に画像、右にテキストとボタンを入れてるだけ。
至極単純ですね。
フッター部分
この部分も作り方は簡単です。
一瞬で簡単にかっこよくできるのもSWELLの良さですよね。
設定方法は下記。
フッター（PC）1〜３とあるので、それぞれに左の項目からドラッグ＆ドロップで振り分けて配置させます。
フッタメニューは？
まずSNSのアイコンの設定です。
その他の設定
まず「フッターにSNSアイコンリストを表示する」にチェック。
次にSNSのURLを加えましょう。
URLを加えていきます。
これで完了です。
次にフッターのメニュー項目です。
上部のメニューを「フッターメニュー（フッター、固定フッター（SP）」を選択して任意の内容をメニュー項目から追加します。
メニュー設定でPCとスマホ用のチェックをして「メニューを保存」したら完了です。
SWELLでトップページがおしゃれになる！サイト型の構築方法完全解説します まとめ
SWELLでガシガシトップページをカスタマイズしました。
ポイントとしては
・ピックアップバナー
・ブログパーツ
・フルワイドブロック
上記をメインに活用して作っています。
しかも動きのあるサイトができちゃうんだからSWELLの可能性は無限大です。
ワイワイもおしゃれなサイト型にしたい…
ダーマン大丈夫、すぐできます！
SWELLの圧倒的な使いやすさで作るトップページは作りながらワクワクします。
あまりに凝りすぎるとそればっかやってしまうぐらい楽しいです。
参考になれば幸いです。
それではまた！
SWELL検討中の方は下記の記事もどうぞ。
