こんにちはっ!マチミィです。
ブログを始めてから一週間がたちまして、
いつまでも(仮)なんて付けているのも
なんだかなぁと思ったので
今日は「ヘッダー」を作ってみる事にしました!
ヘッダーとは
一番上のスペース(赤い枠内)の事です。
上画像の様に、ヘッダー設定がされていない場合は
「設定」より「ブログタイトル」と「ブログの説明」を記載する事ができます。
ここに画像を配置してオリジナル感を出していきます♪
はてなブログ用ヘッダーの作成サイズ
横幅1000×高さ200pixel
公式で記載されている上記のサイズで作成していきます。
作成できたヘッダー画像をブログに反映してみる!
下記の順序で設定していきます。
「ブログの説明」が不要な場合は
「画像をアップロード」の下にある「表示設定」を
「画像だけ表示」の方にチェックを入れておきます。
プレビュー画面が出たら、「適用」を押します。
画像がヘッダー部分に配置されました!
しかし、下側が離れて過ぎていて違和感が出てしまっています。
サイズを大きくすれば、隙間が埋まるかなと思い
縦のサイズを100pixelほど大きく作成して、
且つ絵柄が切れても違和感がないイラストに変更してみました。
すると今度は配置プレビュー時に
「トリミング位置調整の枠」が出て、強制的にトリミングをしまいました。
(反映すると、グレーの帯部分上にある絵柄がゴッソリ切れてしまいます)
縦のサイズを変更してもあの隙間は埋める事はできない様ですね。
解決策を色々調べたところ、
「設定」の「デザインCSS」から調整ができるみたいですが
マチミィが選んだ「デザインテンプレート(テーマ)」では対応していない事と
現在の「無料バージョン」では細かく設定するのは難しそうでした。
(CSSが理解できる方なら上手く配置できるかもしれませんが><)
ついでにテーマはPCとスマホでデザインを統一させる為に
「レスポンシブ対応」のものを選んだ方が良いみたいです。
今回はどうしようもないので、
絵柄が見切れない様にデザインの方を調整しました。
今後Proバージョンにはアップグレードしたいなぁと考えてはいるので
その時に自分好みに細かく設定できたら
また記事にできればと思いますっ!(くやしいっ!)