WordPressのヘッダーデザイン

 

LINEで送る
Pocket

design_001

どうも、Pan Graphicoです。
Stinger7のデザインの変更を現在進行形で過程をまとめてみました。

まとめると言っても、今後の変更予定箇所など覚書のようなものになります。

スポンサーリンク

WordPressのヘッダーデザイン

Stinger7になってからシンプルなデザインになっていましたが、
よりミニマルなブログデザインにしたかったので、
少しCSSを変更したり、PHPを調整したりしていこうと思います。

今回のデザインは大体決定していたので、そのイメージに沿って変更予定。
パーツのみ変更する場合でも、予めデザインを決めた上で進めないと、
気付いた時にはガチャガチャしてくるので、初めにしっかりと完成図を作っておくことをお勧めします。

ヘッダー部分

まずはヘッダー部分です。
やはりWEBサイトやブログの顔的な部分になりますし、
ナビゲージョンなども含まれるため、一番気を使う場所がヘッダーです。

画像などのイメージやロゴなど、時間がかかる部分ですが、
今回こんな点を、先に決めていました。

  • 画像は使用しない
  • ロゴの代わりにWEBフォントを使用する
  • 背景はホワイト

以上の3点を決めていたので、まず画像を使用しないよう「外観/カスタマイズ」から、
画像を不使用に設定しました。WordPressのタイトルのみテキストで表示させています。

背景は白を指定し、CSSで字間やフォントサイズを変更し、
上下にマージンを指定して、ナビゲーションとの境界に100%の平行線を入れています。

この部分は、テーマ内のheader.phpを編集し、wrapperの上でheaderタグを閉じて、
その中に、innerのclassを設けたタグで囲み、内側にhrタグを挿入しています。

 

・ ロゴの代わりにWEBフォントを使用する

問題はここです。
現在はゴシック体で表示していますが、ここはあえて明朝体で表現したいのです。
サイト名も英字であれば、悩みも少ないのですが、今回はカタカナ。

さくっとクリアしたかったのですが、ここで早速つまづいています。
フォントも限られる上、環境を考えるとサーバーにフォントを置くべきか、
しかし、容量の負荷も避けたい。。。

もっとも、最適な方法は。。。

一晩調べて考えてみます。

 - WEB, デザイン
 -


Copyright© キクミミミルメ , 2019 All Rights Reserved.