［ムラゴンブログ］ ヘッダーに画像を指定するには?

ムラゴンブログは初めて使いますが・・・
いろいろクセを感じる作り、、、ww

ま、それでもできる範囲でやってみる♪

まずはデフォルトだと、
上部のヘッダーにこういうバーが出てます。

ムラゴンブログのヘッダーバー画面

これを非表示にするカスタマイズです。

 

ダッシュボードの項目画面

ダッシュボード左側にあるメニューの、
デザイン変更をクリック。

カスタマイズページに入り、、、
一番下にCSSカスタマイズとあります。

 

カスタマイズできる選択画面

このカスタマイズ遷移ページは、けっこうわかりやすいと思います。

古くはJUGEMブログ（今でもありますけどもw）＋はてなブログを合わせたような操作性で。

ダッシュボードに、バッと項目がわかりやすく出るのがグッド。
ってことは置いときまして…😁

 

CSSの記述箇所

このCSSカスタマイズをクリック、
もう一回クリックすると入力できるようになる。

そこへ以下のコードを記入。

CSS
/* こっちも?ヘッダーバーに反応する箇所 */
#global-header {
display: none;
}

/* ヘッダーバーに反応する箇所 */
.global-header {
display: none;
}

ですが基本、
ココは変更・削除しないでね
と出るので、、お試しだけにとどめることといたします。

 

続いて、ヘッダーに画像を入れることはできるのか?トライです。
以下のコードをCSSへ盛り込みます。

CSS
/* ヘッダー背景画像 */
.blog-header {
background-image: url("〇〇"); /* 背景画像を指定 */
background-repeat: no-repeat; /* 繰り返しなし */
background-size: cover; /* 要素全体を覆う */
background-position: center; /* 中央に配置 */
border: 1px solid #cccccc;
}

 

background-image: url("〇〇");

〇〇のところに、
ヘッダーにしたい画像のURLを入力します。

ムラゴンに上げた画像を、コピペして持ってくるとよいでしょう。

 

ブログヘッダー画像の上部分

なんとか入ったものの、
上部が不自然に空くので、ちょっと詰める用にこちらも入力。

.container-inner {
margin-top: -22px;
}

 

さらに画像との兼ね合いで、
真ん中にセンタリングされたブログのタイトル位置に調整が要るw

右寄せするために以下を入力します。

/* タイトルエリア全体 */
h1.blog-title {
text-align: right;
}

/* タイトル部分のみ（右空けはここで指定） */
a.blog-root-link {
padding-right: 40px;
}

 

 

ヘッダーに画像を設定できた画面例

正直言うとこの画像も、
中途半端にしか出てないのですが、ま、見れなくもないのでいいかな~と思ってますw

コメント