wordpressでオリジナルテーマを作ってみよう⑥~ヘッダーを作る~

では実際に細かいところを編集していきます。
僕は基本的に飽き性な性格などが起因してヘッダー、コンテンツ、、など部分部分を大まかに作れたら、細かいところを作る前に次の部分に移って、また大雑把に作って、また移って、てな感じの作業をするので非常に記事にしにくいのですが、できるだけ細かい部分まで一気に作ってしまいと思います。

まずはパソコン画面から見た目をメインにしていきます。
それが一通り終わってからスマホ画面を細かく修正していきます。

とりあえず中身は何もないですがサイドバーを作っておきます。
サイドバーはコンテンツの右側に配置したいのでわかりやすくコンテンツとフッターの間に書きます。

 

次にわかりやすいようにヘッダー、コンテンツ、フッターにCSSで適当に映える色を付けてみます。
atomnのプラグインに自動更新プレビューがあるんですが、まだ良くわかっていないのとキャッシュが残って編集しても更新されないので、chromeのデベロッパーツールを使ってChromeのキャッシュを消して編集していきます。

フッターが回り込んで来てしまっているのでそれを解除します。

 

あとはデベロッパーツールとにらめっこしながら一つずつ作っていきます。

 

ヘッダーの画像を固定してかっこよくするにはこの構造ではいけないことがわかり以下のように変更しました

 

headerのz-indexを0に、.con-sid-foo-wrapperのz-indexを2にして、ヘッダーの画像を固定して.con-sid-foo-wrapperがかぶさるようにしています。

 

今回のスタイルではヘッダー、コンテンツ、フッターを識別しやすかったので、bgcを理想のものに調整しました。

 

最初のヘッダーの高さを画面の高さに合わせたいので画面の高さを取得するjqueryを使いたいのでheadの中に次の一行

記事作成時にまだjqueryをちゃんと理解していないのでこれで合っているのかよくわからないから要編集なんだけどひとまずうまく行ったっぽいのでこれで良い。

タイトルの色やフォントサイズ、マージンをちょっと訂正しました。
まぁ、ひとまずこんなかんじでいいかな。

 

とにかくコンテンツ内を早くしないと可読性が・・。

コメントを残す