とことん凝ったデザインにカスタマイズするのも良いですが、とりあえず少しでも自分好みにしていくのも良いかなと思いました。
現状はとりあえずブログを立ち上げたときにやっつけでやった感が拭えないです。
SWELLは比較的シンプルな操作で色々と弄れるのが良いのですがほぼ仕様や操作方法も知らないままとりあえずやったので、SWELLの勉強も兼ねてやっていこうと思います。
自分自身イマイチ気に入っていない状態だとどうしてもブログ運営のモチベーションも低下してしまいますので少しずつでも手を加えていきましょう。
極力シンプルなデザインにしたいのでまずどこをどうしようか考えます。
今現在のトップページは下記の状態です。
なんかゴチャついてる感じがして落ち着きません。
記事スライダーを消したいので非表示にする
とりあえずゴチャゴチャしていて画面が騒がしい感じがするのは記事スライダーを設置しているのがデカいのではないかと思います。
当たり前ですがブログなので記事の一覧がざっと並んでいる上に記事スライダーで記事がぐるぐると動き続けていると情報量が多いかなと。
ちなみに記事スライダーとは下の画像のような特定の記事をピックアップしてその記事一覧がスライドするというSWELL標準で付いている素敵機能です。
上手いことデザインしてハマるようにすればかなり良い感じになるのですが私にはその技量がありませんので一旦非表示にしようと思います。
WordPress管理画面で外観＞カスタマイズをクリックし、SWELLのカスタマイザー画面を起動します。
左側のメニューからトップページ＞記事スライダーをクリック。
そうすると記事スライダーの設定を色々弄ることができるので、記事スライダーを使いたい方はここを触って色々試すのも良いかと思います。
私は今回非表示にしたいので「記事スライダーを設置するかどうか」の「設置しない」をクリックし、記事スライダーを消します。
忘れずに上部の公開ボタンをクリックしましょう。
かなりスッキリしました。
記事スライダーがあれば見てくれている方に色々な記事を視覚的に訴えることができるのですが、先日人気記事一覧をサイドバーに入れたのでそこだけで十分なんではないかと思ってます。
あとはまあ記事が動き続けるのが個人的に忙しない印象であることと、ブログを見るデバイスが進化している今の時代気にするほどのものではないですが記事スライダーがある分ブログが重くなることも理由です。
まあ自分を納得させるための後付け理由ですが。
メインビジュアルを差し替える
あっさりしていて今のままでもええかと思う部分のあるのですが、今のメインビジュアル画像にテキストを入れたGIFを作ったのでそれと入れ替えます。
メインビジュアルとはトップページに大きく表示される画像、または動画のことです。
私のブログの場合は以下の赤枠内になります。
ブログトップページに訪れた方が目にするメインの部分なのでなるべく印象に残りやすいとかどんなブログが一目で分かるようにするのが良いでしょう。
こちらも画像を差し替えるだけなので操作は簡単です。
WordPress管理画面から外観＞カスタマイズで先ほどと同じくSWELLのカスタマイザーを起動します。
トップページ＞メインビジュアルをクリックし、メインビジュアルの表示内容を選択します。
私の場合は画像（GIFファイル）をメインビジュアルにしたいので画像をクリック。
左側のメニューを少し下にスクロールすると「各スライドの設定」という項目があり、「画像の変更」ボタンをクリックするとメインビジュアルに使われる画像を変更できます。
ちなみにこのスライド画像はPC用とスマホ用でそれぞれ設定可能ですが、特に意味がない限りはPC用を設定するだけで問題ないと思います。
PC用を設定するとスマホで見た時もPC用で設定したメインビジュアルが表示されます。
またスライド画像［１］とある通り、複数枚のメインビジュアル画像を設定することができ、複数枚設定している場合は自動で画像がスライドするようになります。
変更ができれば左側メニュー一番上にある公開ボタンをクリックして変更を保存しましょう。
多少見やすいようになったかなと思うのですが、ヘッダーがメインビジュアルに重なっており不格好です。
ヘッダーとメインビジュアルが重なっているので修正
SWELLの機能になるのですが、先の画像を見てもらうと分かる通りヘッダー（ブログ名）とメインビジュアルが重なって表示されておりあられのない姿となっております。
単純にSWELLのカスタマイザーで重なるように表示しているのでその設定を直すか、もしくはメインビジュアル画像を微調整して文字部分が重ならないようにするという２つの方法があります。
まあそもそもメインビジュアルとヘッダーを重ねた際に文字と文字が重なることを考慮しなかった私が悪いのですが手直しが必要ですね。
今回はメインビジュアル画像を手直ししようと思いますが、念の為SWELLの機能で簡単にオンオフできますのでそちらも記載しておきます。
ヘッダーとメインビジュアルを重ねる or 重なっている状態を戻す
WordPress管理画面の外観＞カスタマイズでSWELLカスタマイザー画面へ行きます。
「ヘッダー」をクリックし、左側のメニューを少し下へスクロールすると「トップページでの特別設定」という項目があります。
このカスタマイザー内の文章では分かりづらいのですがここで変更が可能です。
「ヘッダーの背景を透明にするかどうか」で以下の選択ができます。
- しない
- する（文字色：白）
- する（文字色：黒）
初期設定では「しない」となっているはずですので、もし重なってしまっているのを重ならないようにしたいと思う方はヘッダーの背景を透明にするかどうかを「しない」に変更してください。
「する」の状態では上記のようにヘッダーの文字とメインビジュアルの文字が重なってしまっています。
「しない」に変更することで下記のようにヘッダーとメインビジュアルが完全に分かれて表示されます。
ただその分ヘッダー+メインビジュアルの表示で高さが出てしまいますね。
文字と文字が重なっている状態を修正する
こちらに関してはメインビジュアル画像に入れている文字位置の調整で解決するので特に書くことはないです。
再びメインビジュアルの差し替えとついでなのでヘッダーロゴを変更します。
ヘッダーロゴの設定も非常に簡単にできるようになっており、WordPress管理画面の外観＞カスタマイズでいつもの画面へ行きます。
ヘッダーをクリックし、「ヘッダーロゴの設定」という項目がありますので画像の変更をクリックします。
そして問題なければ上部の公開ボタンをクリックして完了です。
ヘッダーロゴよりメインビジュアルの文字の方が存在感が強い気がしますがとりあえず完成です。
あとは上記画像の赤枠内にヘッダーメニューを設置すれば見栄えとしてはまずまず普通のブログになると思います。
更に手直しが必要だった
これでええでっしゃろと思い、何気なく出先でこのブログを見てみました。
するとスマホで見ると思いっきりヘッダーロゴとメインビジュアルの文字が重なっていることに気付きました。
多少なりともデザインを変更した場合はスマホでもしっかりと確認しないといけませんね。
ということで更にメインビジュアル画像を手直ししてスマホで見た際にも重ならないように調整しました。
そもそもSWELLの場合はカスタマイザー画面でPC表示、タブレット表示、スマホ表示が選択できます。
横着せずにせっかくの便利機能なのでしっかりと確認した方が良いですね。
