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

2018年5月3日

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

投稿記事が、新しいものから順番に並んでいるのがふつうですね。
ブログがメインなら、それで十分です。
でも、私はホームページっぽくしたいのです。
そういう考えで、未来のトップページを作りました(仮ですが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)を別の名前で複製して、リンクを貼ればいいだけですね。

<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/new_style.css” media=”all” />

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

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

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

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

あとは自由にデザインするだけ・・・って、それがハードルが高いんですよ~

CSSを何とかしなければならない、ってことだけは、何ら変わりありませんでした。

でも、いいんです。
下手なことをしても、このページしか影響しませんからね。
気長に気楽にやりますよ!

カスタム投稿タイプだって、この方法でいけるじゃないですか!

そういえば・・・。

カスタム投稿タイプを使って、「ニュース」「お知らせ」「開業日記」という新しい投稿タイプを作っていたことを思い出しました。
>> カスタム投稿タイプを使いこなせ!独立開業後の事務所サイトには必須

これも同じ方法で、簡単に別デザインにできるじゃないですか!

CSS、がんばって勉強しなきゃですね!
(苦手だなあ・・・。)

・・・

少しだけがんばりました(本当に少しだけですよ)。
これは・・・カッコいいかも!(ホームにも行って、ブログとの違いも見てね。)

スポンサーリンク