HPリニューアル◉

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

https://shiramorisawa.com/

・使用テーマ：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）〜（5）

（1）〜（5）はseason製作者のぽんひろさんのHPを見ればやり方がわかります！！！

ありがたい！！！

HTMLについて私は詳しくないので、みんなもぽんひろさんのHPをみよう！（丸投げ）

※追記※

「（5）表をモバイル表示時アコーディオンになるように設定」をしたら、なぜかフッター下に謎のコードが表示される事態になりました。

わたしのHPだけなのか、cocoonとの相性が悪かったのか…（なぞ）

↑これ

JavaScriptに入力したコードの一部がテキストとして読みこまれて表示されているみたいだったので、該当部分を消去したら治りました。

コード消去後も表は問題なくアコーディオン表示されていたので、まあ一件落着ということで！！

（6）切り替えタブの設置

切り替えタブの設置は、トップページではなくプロフィールページに掲載する仕事履歴表をきれいに表示させるためにやったことです。（趣旨とずれてごめん）

だけどトップページにも使える技だから紹介しちゃう！

後述する「ページビルダー（Page Builder by SiteOrigin）」にも切り替えタブは標準で入っているのですがデザインがイマイチなんですよ…（※白森個人の意見です）

あと、モバイルで表示させると4つ目のタブが折り返しちゃうのがいや！！！

以下、灰色のタブがページビルダーの標準切り替えタブで

2つ目のピンクのタブが今回導入した切り替えタブです。