トップページをホームページっぽく。専用のCSSで自由にデザイン!
公開日: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)を別の名前で複製して、リンクを貼ればいいだけですね。
<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、がんばって勉強しなきゃですね!
(苦手だなあ・・・。)
・・・
少しだけがんばりました(本当に少しだけですよ)。
これは・・・カッコいいかも!(ホームにも行って、ブログとの違いも見てね。)
スポンサーリンク