【ブログデザイン】邪魔なヘッダを左端に置いた。

f:id:Kawan0116:20210507164633p:plain

かわんです。

ヘッダにグローバルメニューなどがあれば、画面上部に置いてアクセスしやすいようにするのがベストかと思います。

しかし、当ブログはロゴのみです。

ぶっちゃけ消してもいいのですが、まぁ、それはそれで問題があるかなと。

なので、必要最低限の表示としました。

ヘッダはロゴがあるだけ

先ほど書いたように、当ブログのヘッダはロゴだけです。

画面上部に置く必要はありません。

なので、ちょっと工夫しました。

左端に配置。タグ風に

「ヘッダをどこに置こうか・・・」

画面の上に置くのが何となく好ましいというか、ほとんどのサイトは画面上部にヘッダを配置しています。

僕は、あえてそれを否定する(笑)。

なので、服の裏にあるタグのようなデザインにしました。

これで邪魔にならず。

先ほど書いたように、ぶっちゃけ消してもいいですが、まぁ、それだとサイト名を覚えてもらう事ができないので、左端にちょこんと置くことにしました。

ちょっと冒険したデザイン

結構冒険しましたね(笑)。

このようなデザインは中々ないですからね。

唯一無二の存在!?

ちょっとよく分からないですけどね。

結構好きになりましたけどね。

1時間程度かかった

1時間程度かかりましたね。

ネットでちょっと調べて対応しました。

ポイントは、ロゴ文字を縦書きにしてタグの中央に置くこと。

かなり苦労しました。

paddingとmarginで工夫しようかと思ったのですが、目測はダメ。

なので、目測以外のモノで対応しました。

CSSをご紹介しても良いのですが、あえて紹介はしません(笑)。

何故なら、環境によって大きく変わるからです。

よって、紹介はしません。

Chrome,Edge,Firefox,IEで表示確認済み

上の4つのブラウザで表示確認しました。

全く問題ありませんでした。

これだけ抑えておけば問題ないでしょうって感じですね。

PC向け。スマホはタグ風にしていない

なお、PC向けです。スマホではタグ風にしておりません。

スマホでもタグ風に出来るかと思いますが、それはしないですね。

スマホはオーソドックスな1カラムレイアウトでOKです。

もし、タグ風のヘッダが気になる方はPCで見て下さいね。

さいごに

当ブログは、劇的にデザインが変わりました。

元々、無料のデザインテーマを使っていたのですが、そこから逃げて自分で作ることに。

全くの1から作った訳ではありませんが、中々の個性派テーマになっているかと思います。

CSSの知識があればOKです。

あとは、分からないことがあれば調べて勉強すれば良いかと思います。

僕はそうしています。