0:デザイン刷新!
これまでこのHPは「もぐもぐ日和」として更新してまいりましたが…
来月2021年1月1日で開設2周年を迎えます!
ということで(?)ちょっとはやいですが、このたびHP名を「白森さわ.com」に改めましてデザインも一新しました!!
ちなみにこの自己主張の激しいサイト名は、HPのドメイン(shiramorisawa.com)からそのままとりました。こっちの方が白森のHPってひとめでわかるかなと思い。
え?D◯M,comみたい?
うるせー!
※ドメインは変わってないので、ブクマしてくれてる人(いる?)も焦らなくて大丈夫だよ!
↓
せっかくなのでこれから、HPデザインを変えるにあたってやったことなどを書いていこうと思います!
「ワードプレスでHP運用してるけど、トップページデザインをどうすればいいのかわからない」という方は、ご参考までにぜひこの記事を読んでね!
役に立つかもしれないよ!
特に「アフィリエイトブログというよりホームページとしてサイトを作りたい!」という方!!
世の中の「ワードプレスのトップページデザイン変更のやり方紹介ブログ」のほとんどはアフィリエイトブログ用の内容なので、「更新記事をいかに効率よく見せるか」というところに終始してるからね…
私はこれから「自己(会社)紹介・事業内容・お問い合わせ先とかをひとまず網羅させたTOPページ」の作り方を紹介しますから!
そういうところを知りたい方は読んで!
別にHP運用してない/興味ない人は、私のHPのこだわりを理解するために読んでね!(圧)
1:大前提!使用テーマ・スキンは?
私はワードプレスの「cocoon」という無銭テーマを使用してHP運用しています。
ド定番だね!
そして今回使用したスキンは「Season(シーズン)Winter」という無銭スキンです。
有料スキンを使った方がはやく綺麗なサイトが作れることはわかっているが…
すでにドメインとサーバーにお金を払っているから、これ以上HP運用にお金を使いたくないんや!!!
2:デザインBefore・After
まず、刷新前のデザインと刷新後の比較です。
こんな感じで変えたのか〜とご参考までに!
before
・使用テーマ:cocoon
・使用スキン:Fuwari 海老茶
after
・使用テーマ:cocoon
・使用スキン:Season
※スキンはFuwariでもSeasonでもどっちでもいいです!カスタマイズに影響はない!各自お好みで!
サイトカラーを赤(#E9546B)と青(#88abda)を軸にまとめて、すっきりさせました!
あとPCではなくモバイル(スマホ・タブレット)で映えるデザインを優先させました。
自己紹介スペースとか、PCで表示させると余白がすごいけどスマホだと普通に見えるはずです。
人によっては変更前の方が好きという人もいそうだけど、まあ自分が気に入ってるからええんや!!!
何をどこでどう変更したの?
1:cocoon設定から
デザイン変更はcocoon設定からできることもたくさんありますね。
ヘッダー画像とかメニューバーの色、サイトキーカラーの変更、フォント種類・太さ変更などはcocoon設定から変更しました。
また、サイドバーがブログ記事ページにだけ表示されるように改正したのですが、これもcocoon設定からワンクリックでできます!
(サードバーがトップにあると、どうしてもブログ感がでちゃうから消した)
まあとはいえ、このサイトにアクセスしている過半数の人はスマホからアクセスしている民だと思うので、あんまり気づかれない修正だろうけど…
(※スマホでは元から、どのページでもサイドバーは表示されない)
…cocoon設定についてはググればすぐわかるところなので今回はこの辺で割愛します!
これからご紹介する、cocoon設定以外でやったことは次の2点です。
・HTML&CSS変更
・ページビルダー(Page Builder by SiteOrigin)を駆使する
見える…
見えるぞ…
HTMLというワードですでに蕁麻疹がでている画面の前のみんなの姿が見えるぞ!
しかし、残念ですがcocoon設定だけだとbeforeレベルのトップページしか作れません!!
大丈夫!
これから私が紹介するのは優秀な先人の方がコピペ可能コードをネットに公開してくれているやつで
自分でやることはせいぜい色コードを書き換えるだけだから!!!
諦めないで!!
2:HTML&CSS変更
まずはHTML&CSSをいじってやったことを紹介します!
(1)通知エリアを2つ表示
(2)モバイル時のヘッダーメニューをスライド表示させられるように変更
(3)プロフィールカスタマイズ
(4)表をモバイル表示時、スライドできるように設定
(5)表をモバイル表示時、アコーディオンになるように設定
(6)切り替えタブの設置
(7)モバイル時のヘッダー色変更
(1)〜(5)
(1)〜(5)はseason製作者のぽんひろさんのHPを見ればやり方がわかります!!!
ありがたい!!!
HTMLについて私は詳しくないので、みんなもぽんひろさんのHPをみよう!(丸投げ)
※追記※
「(5)表をモバイル表示時アコーディオンになるように設定」をしたら、なぜかフッター下に謎のコードが表示される事態になりました。
わたしのHPだけなのか、cocoonとの相性が悪かったのか…(なぞ)
↑これ
JavaScriptに入力したコードの一部がテキストとして読みこまれて表示されているみたいだったので、該当部分を消去したら治りました。
コード消去後も表は問題なくアコーディオン表示されていたので、まあ一件落着ということで!!
(6)切り替えタブの設置
切り替えタブの設置は、トップページではなくプロフィールページに掲載する仕事履歴表をきれいに表示させるためにやったことです。(趣旨とずれてごめん)
だけどトップページにも使える技だから紹介しちゃう!
後述する「ページビルダー(Page Builder by SiteOrigin)」にも切り替えタブは標準で入っているのですがデザインがイマイチなんですよ…(※白森個人の意見です)
あと、モバイルで表示させると4つ目のタブが折り返しちゃうのがいや!!!
以下、灰色のタブがページビルダーの標準切り替えタブで
2つ目のピンクのタブが今回導入した切り替えタブです。
てすとてすと
てすと!!!!!!
てすとだぞ!!!!!!!
みてる!?!?!?!?
このかわいいピンクのタブは「ものぐさwebノート」さんのコードを拝借してつくりました!!
(デフォルトは青色。色は自分で変えた)
(7)モバイル時のヘッダー色変更
「モバイルヘッダー」というのは…
これ!
メニュー・サイトロゴ・検索がでるところ!
その下にも同じようなスペースがあるけど、これはPC・モバイル共通のヘッダーです。
ここのモバイルヘッダー色の変更は、意外とcocoon設定からできないんですよね…
スキンによって固定の色が表示されてしまい結構こまっちゃう…
(上スクショは色設定変更後だから白になってるけど、元は青だった)
このサイトにヘッダーの背景と文字の色を変えるcssコードが紹介されていました!
このコードを「外観」⇨「テーマエディター」⇨「スタイルシート」に貼り付けて「ファイルを更新」をしよう!
3:Page Builder by SiteOriginを駆使
ページビルダー(Page Builder by SiteOrigin)とは、無銭のプラグインです♡
これを使うといろんなコンテンツを綺麗に配置できるようになります!
・文章
・画像
・YouTube動画
・Googleマップ
・お問い合わせフォーム
・リンクボタン
…など!
私のHPのトップページ編集画面はページビルダーによってこんな感じになっています…
ウィジェットだらけ!
ちなみに…
Beforeトップページで新着記事更新を3列並べて表示させておりますが、
これもページビルダーでやりました。(列編集で3分割できる)
ページビルダーの超便利機能はこれ!!!!
これ!!!
「layouts」をクリックすると、すでに出来上がったページデザイン(ランディングページっぽいデザインが多い)一覧が表示されます。
その中から、自分が作りたいサイトの構図に似ているデザインを選ぶと
一発で必要なウィジェットが挿入されます。
ランディングページのように、たくさんの情報をスクロールで見せたいトップページには最適!
3:まとめ
1:まずはcocoon設定をいじれ
2:それでもできないことはHTML&CSSを使って解決!
3:ページビルダーでページ配置をカスタマイズ!!
ホームページデザインいじりは楽しいし、どんどん欲が出てきちゃうよね!
完成の区切りを自分の中で決めないと、一生終わらなくなるからほどほどにやろう!