マチミィ'S DIARY

包丁のことや育児・日常のことを毎日更新中♪

はてなブログの「ヘッダー」を作ってみた♪

こんにちはっ!マチミィです。

ブログを始めてから一週間がたちまして、

いつまでも(仮)なんて付けているのも

なんだかなぁと思ったので

今日は「ヘッダー」を作ってみる事にしました!

 

 

ヘッダーとは

f:id:machimy:20190408132941j:plain

一番上のスペース(赤い枠内)の事です。

上画像の様に、ヘッダー設定がされていない場合は

「設定」より「ブログタイトル」と「ブログの説明」を記載する事ができます。

ここに画像を配置してオリジナル感を出していきます♪

 

はてなブログ用ヘッダーの作成サイズ

横幅1000×高さ200pixel

 公式で記載されている上記のサイズで作成していきます。

 

作成できたヘッダー画像をブログに反映してみる!

下記の順序で設定していきます。

f:id:machimy:20190408133322j:plain

「ブログの説明」が不要な場合は

「画像をアップロード」の下にある「表示設定」を

「画像だけ表示」の方にチェックを入れておきます。

プレビュー画面が出たら、「適用」を押します。

f:id:machimy:20190408133900j:plain

画像がヘッダー部分に配置されました!

しかし、下側が離れて過ぎていて違和感が出てしまっています

 

サイズを大きくすれば、隙間が埋まるかなと思い

縦のサイズを100pixelほど大きく作成して、

且つ絵柄が切れても違和感がないイラストに変更してみました。

f:id:machimy:20190408133839j:plain

すると今度は配置プレビュー時に

「トリミング位置調整の枠」が出て、強制的にトリミングをしまいました。

(反映すると、グレーの帯部分上にある絵柄がゴッソリ切れてしまいます)

縦のサイズを変更してもあの隙間は埋める事はできない様ですね。

 

解決策を色々調べたところ、

「設定」の「デザインCSS」から調整ができるみたいですが

マチミィが選んだ「デザインテンプレート(テーマ)」では対応していない事と

現在の「無料バージョン」では細かく設定するのは難しそうでした。

CSSが理解できる方なら上手く配置できるかもしれませんが><)

ついでにテーマはPCとスマホでデザインを統一させる為

レスポンシブ対応」のものを選んだ方が良いみたいです。

f:id:machimy:20190408133938j:plain

今回はどうしようもないので、

絵柄が見切れない様にデザインの方を調整しました。

今後Proバージョンにはアップグレードしたいなぁと考えてはいるので

その時に自分好みに細かく設定できたら

また記事にできればと思いますっ!(くやしいっ!)

©machimy All rights reserved.