WordPressテーマ「SWELL」を使ったサイト「Kuroshiba Design」のトップページカスタマイズ事例。

僕がWordPressテーマ「SWELL」を使って初めて制作したブログ型のサイト「Kuroshiba Design」のトップページカスタマイズ事例として、簡単にではありますが書き記しておきます。

嬉しいことにSWELLテーマサイトのピックアップケースにも掲載していただき、そのためか多くのSWELLユーザーの方の目にも触れているようでとてもありがたいです。了さんいつもありがとうございます…涙。

ここのサイトは自分がもっと気軽に記事を書きたいなあと思ってそれとなく運営していますが、メインサイトの「Kuroshiba Design」は最初ちょっと気合を入れて作りました。

SWELLユーザーの皆さんの参考になるかはわかりませんが、どのようなデザイン設定/カスタマイズを行なったのか備忘として残しておくので、少しでも役に立てたなら幸いです。

「Kuroshiba Design」の全体イメージ

まずサイトの全体イメージがこちら、全体的にシンプルかつミニマルな印象が生まれるようにと思って作っています。

Kuroshiba Design
トップページ

トップページでは特別な設定などはあまりしていませんが、それでもブログ型としてはあまり見ないタイプのデザインイメージかもしれません。

上から順に解説していくので、「こういう感じにしたい!」という場合は参考にしていただければと思います。

ヘッダー部分のデザインカスタマイズ設定

ヘッダー

ヘッダー部分の設定はカスタマイザーにある「ヘッダー」から行います、まずざっと上から順に全ての設定項目をおさらいしてみるとこんな感じ。

カスタマイザー「ヘッダー」設定
  • ヘッダー背景色:#ffffff
  • ヘッダー文字色:#464646
  • ロゴ画像サイズ(PC):45px
  • ロゴ画像サイズ(PC追従):45px
  • ロゴ画像サイズ(SP):55px
  • ヘッダーのレイアウト(PC):ヘッダーナビをロゴの横に(右寄せ)
  • ヘッダーのレイアウト(SP):ロゴ左/メニュー右
  • ヘッダー境界線:なし
  • ヘッダー背景を透明にするかどうか:する(文字色:黒)
  • ヘッダーの追従設定:PC&SPどちらも追従させる
  • 追従ヘッダーの背景不透明度:0
  • ヘッダーバー/キャッチフレーズ:設定しない 以下省略

以下省略の部分は特別な設定はしていないので解説を省きます、まずヘッダー設定としては上記のような設定を施しました。

そして肝心のロゴ画像については「ロゴ画像」「透過時のロゴ画像」の両方に、こちらの同じ画像を設定しています。

Kuroshiba Designロゴ
背景透過済みのロゴ画像

サイト上ではわからないかもですがこの画像は背景を透過していて、文字だけの画像となっています(伝わりにくかったらすみません…)。

具体的には、

  1. Keynoteで「kuroshiba」の文字を打ち込み画像化する
  2. 背景透過ツールで文字以外の部分の背景を削除する

この手順で背景透過した文字だけのロゴ画像を作りました、フォトショを使ってないので荒技ですが素人でもこういうロゴ画像を簡単に作ることができるんですね。

別に背景が白いロゴ画像をそのまま使ってもいいのですが、「ヘッダーを追従させたときにロゴ文字だけが追尾する」というデザインを実現したかったのでこのようにしました。

これ言葉では伝わりにくいかもですが、サイトを見ていただいてkuroshibaという「文字だけ」が追従しているのを見ていただければと思います。

補足:ヘッダー境界線の影を削除するCSS

ただ、補足として上記の設定だけでは、以下のように「ヘッダー追従時に影が下に出る」ようになってしまうんですね。

というのも、カスタマイザーの「ヘッダー境界線」設定を「なし」にすればトップのヘッダー境界線をなくすことができますが、ヘッダー追従時にはヘッダーの境界線に「影」が出るようにデフォルトで設定されているのです。

ヘッダーの下に影が出る…

この追従時の影も僕は消してスッキリさせたいと思ったので、以下コードを追加CSSに追記し、ヘッダー追従時にも境界線の影がなくなるようにカスタマイズしました。

.-body-solid .l-fixHeader {
    box-shadow: 0 0 0 rgba(0,0,0,0)!important;
}
@media (max-width: 480px){
#header, #fix_bar::before {
    background: rgba(0,0,0,0)!important;
}}

よくわからないという場合には実際にヘッダー追従設定を施し、こちらのCSSコードを追記していただけると、「何がどう変わるのか」ということを確認しやすいと思います。

メインビジュアル部分のデザインカスタマイズ設定

Kuroshiba Designメインビジュアル
メインビジュアル

続いて、サイトの顔とも言えるメインビジュアルの設定について。カスタマイザーにある「トップページ」→「メインビジュアル」の箇所で以下のような設定を施しています。

カスタマイザー「メインビジュアル」設定
  • 表示内容:画像
  • 周りに余白をつける:チェックなし
  • Scrollボタンを表示する:チェックあり
  • 高さ設定:ウィンドウサイズにフィットさせる
  • 画像の上に表示されるボタンの丸み:なし
  • フィルター処理:なし
  • オーバーレイカラー:#000
  • オーバーレイカラーの不透明度:0
  • スライド画像:PC用/スマホ用の画像をそれぞれ用意し設定
  • メインテキスト/サブテキスト/ボタンテキストなど:空欄のまま

設定自体はこのような感じで結構シンプルです。余白をつけずウィンドウサイズにフィットさせることで、ファーストビューのインパクトが大きくなるようにしています。

また、画像のフィルター処理やオーバーレイカラーもなしにすることで、画像をそのままの状態で表示させることができます。他にはテキストもボタンも設定していません。

そのためスライドに設定したこちらの画像が、そのままシンプルにどんと表示されるような設定になっているということですね。

Kuroshiba DesignロゴPC用
PC用スライド画像
Kuroshiba DesignロゴSP用
SP用スライド画像

PC用とSP用をそれぞれ用意しているのは、どちらの画面でもロゴイメージが見やすく表示されるようにするためです。

ちなみにこのワンちゃんのイラストはお馴染みのサービス「ココナラ」さんでお願いしました、自分でできないところは外注してどんどんプロの力を借りていくのが時短にもなって良いと思います。

補足:スクロールボタンの色を変更するCSS

こちらでもまた補足として、デフォルトの設定ではスクロールボタンには「白いボタン」が表示されるように設定されています。

メインビジュアルのスライド画像には背景があるものを使うことが多いのでこれは真っ当な設定ですが、自分のように背景や全体像が白い画像を表示させたい場合にはCSSでカスタマイズを行う必要があります。

実際に追記しているコードはこちら、追加CSSにこのコードを追記すると「#333=黒色」のスクロールボタンが表示されるようになりました(カラーコード部分を変えれば好きな色にカスタマイズできます)。

.p-mainVisual__scroll {
    color: #333;
}

スライダー部分のデザインカスタマイズ設定

Kuroshiba Designスライダー
スライダー

そしてメインビジュアルの次に目に入るスライダー部分のカスタマイズについて、ここもトップページでは重要な要素です。カスタマイズ設定はこんな感じ。

カスタマイザー「記事スライダー」設定
  • ピックアップ対象:カテゴリー
  • 並び順:ランダム
  • タイトルや日付などの表示位置:画像の下側
  • カテゴリー表示位置:タイトルの下
  • スライダーの枚数設定(PC):4
  • スライダーの枚数設定(SP):1.3
  • ページネーション:表示する
  • スライダーエリアのタイトル:なし
  • 上下の余白量:大
  • 左右の幅:フルワイド

ちなみに解説の必要のない設定項目は省略しています。

個人的なこだわりとしては「スライダーの枚数」と「左右の幅」の設定でしょうか。まず幅をフルワイドにすることによってメインビジュアルと投稿リストを分断する役割がスライダーに生まれ、トップページの見栄えにメリハリが生まれます。

そして枚数設定もアイキャッチ画像が大きすぎる/小さすぎることがないように、読者の方がパッと見たときに自然な大きさになるよう「PC:4枚」「SP:1.3枚」に設定しました。

この枚数設定にすることで左右のスライド画像がいい具合に途切れ、読者にとって「ここはスライダーなんだ」ということがわかりやすくなります。

例えばSPでスライド枚数を「1」にするとただ1枚のアイキャッチが表示されるだけとなってしまうので、投稿リストとの区別がつかなかったりスライドできる要素であることがわかりにくくなってしまうんですね。

この辺りは個人の好みもあるかもしれませんが、自分はスライダーとして自然に認識してもらえるように上記のような枚数設定・フルワイド設定を施してみました。

記事一覧リスト部分のデザインカスタマイズ設定

Kuroshiba Design投稿リスト
投稿リスト

記事一覧リストについては特別な設定は行っていないので、簡単な解説のみとします。

カスタマイザーの設定で、基本的に表示タイプは「カード型」が見やすいかなと思ったのでそれを選択し、サイドバーは「トップページにサイドバーを表示する」のみチェックを外してトップページのみワンカラムになるよう設定しました。

編集後記

といった感じで「Kuroshiba Design」のトップページをどんな感じで作ったのか、簡単ではありますが解説してみました。

記事を書いてみて思ったのですが、カスタマイザーの設定などを言葉で説明するのってめちゃくちゃ難しい…笑。

ただし、追加CSSはちょっと必要にはなるものの、実際にカスタマイザーで設定している項目自体はとてもシンプルなものです。

目立つのは独自のロゴ画像・メインビジュアル画像を用意していることで、特別なカスタマイズをふんだんに使っているわけではないサイトでも「オリジナル性がある」と言っていただけるのは、そういったまず目に入ってくる要素で差別化を図れているからなのかもしれません。

基本的に「このサイトいいな」と思ったものはどんどん取り入れていくのが良いですし、このサイトのファーストビュー等も色々なデザインを参考にしました。なのでどんどんパクってもらって大丈夫です。

カスタマイズの解説でわからなかった部分や「こういう風にしたい」というカスタマイズの要望があれば、記事にしたり自分も可能な範囲でお手伝いするので、気軽にTwitterお問い合わせページから質問・相談してください。

個人的にSWELLがほんとに大好きなので、ユーザーさんとももっと繋がりたいなあと思いますし、そうしてSWELLの良さを高めたり新たな一面を引き出していけたら嬉しいです。

記事の感想や要望、サイト周りの質問や相談など
Twitter(@___kurosb)で承ってます。気軽にご連絡ください

記事の感想や要望、サイト周りの質問や相談など
Twitter(@___kurosb)で承ってます。

気軽にご連絡ください