トップページをホームページっぽく。専用のCSSで自由にデザイン！

最終更新日：2020年7月24日 13時27分

公開日：2018-05-03 18:50:04

みなさん、トップページのデザインはどうされていますか？

投稿記事が、新しいものから順番に並んでいるのがふつうですね。
ブログがメインなら、それで十分です。
でも、私はホームページっぽくしたいのです。
そういう考えで、未来のトップページを作りました（仮ですがw）。
社労士ブログを書いている私の、将来独立開業したときの事務所のページです。
＞＞いつかは自分のホームページを持つ。ブログはコンテンツのひとつに

WordPressの固定ページを使って、とりあえず仮ですが作りました。

せっかくのホームページ。ブログとは別に自由にデザインしたい！

ホームページのデザインは、ぼんやりと決まっています。社労士事務所なんですから、お堅いイメージでいきましょう。

どどんと「事務所名」があって、ブログタイトルは横に引っ込んでもらいましょう
事務所名の下には、でっかく事務所の写真。まだないから適当に
その下には事務所のメニュー。ブログメニューは別のところへ
「お知らせ」と「ニュース」は横並びがいいかな？　その下からサイドバー
ブログは右にサイドバーですが、ホームページは左！　私の固定観念です

うん。王道をいけば、こんなもんですね！

方向は決まったけど・・・、CSSかあ

私は、CSSが苦手です。

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）というのは、ブログのスタイル（デザイン）を指定するものですね。
要素ごとの位置や色や大きさなんかを指定していきますが、これが今イチよくわからない。
「#」から始まるものもあれば、「.」から始まるものもある。
これが組み合わさって、「#sub .side_contents li ul li」とくると、もういけない。

それはいったい、どこのどれなんだあ～！
ってなってしまいます。

トップページの場合は右寄せで、その他のページは左寄せ、とか・・・
そんな器用なことが、はたして私にできるのだろうか。

CSSを別に用意すればいい？　えっ？そんなのでいいの？

具体的には、どうすればいいんだろうか。要素名に名前でも付けて、呼び出せばいいんだろうか。下手をしたら、他の記事までデザインが崩れそうでこわい・・・。

ビビりまくりながらも腹を決めた私を、あざけ笑うような検索結果が待っていました。

WordPress の CSS は外部リンクとして<head>内で読み込まれます。

外部リンク？
「style.css」じゃなくてもいいの？？

それなら話は簡単です。
すでに、「page-スラッグ名.php」というホームページ（仮）用のテンプレートは準備済み。
しかも、ここにheader.phpの内容もべた書きしてあったりします。

ということは、スタイルシート（style.css）を別の名前で複製して、リンクを貼ればいいだけですね。

こんな感じでいいのかな？
「new_style.css」が新しいスタイルシートの名前です。

ちなみに、ルクセリタスでもできるのかな？、と思って試してみました。
（※2018/5/20 に削除しました。）

結果は、できなくはないですけど、ってところです。
もともと何種類ものスタイルシートを読み込んでいるし、それを止めるのもためらわれる。
仕方なく、カスタムCSSを上書きしましたが、どこかで元のスタイルシートがさらに上書きしているような・・・。
そもそも上で紹介したコードでは、親テーマのディレクトリを読みに行ってしまいます（これくらいは力技でなんとかなりますが）。

・・・さすがは最新テーマ、手ごわいです。
ひょっとしたらこんなことしなくても、簡単にカスタマイズできるのかも？