ムラゴンブログは初めて使いますが・・・
いろいろクセを感じる作り、、、ww
ま、それでもできる範囲でやってみる♪
まずはデフォルトだと、
上部のヘッダー上にこういうバーが出てます。
これを非表示にするカスタマイズです。
ダッシュボード左側にあるメニューの、
デザイン変更をクリック。
カスタマイズページに入り、、、
一番下にCSSカスタマイズとあります。
このカスタマイズ遷移ページは、けっこうわかりやすいと思います。
古くはJUGEMブログ（今でもありますけどもw）＋はてなブログを合わせたような操作性で。
ダッシュボードに、バッと項目がわかりやすく出るのがグッド。
ってことは置いときまして…
このCSSカスタマイズをクリック、
もう一回クリックすると入力できるようになる。
そこへ以下のコードを記入します。
/* こっちも?ヘッダーバーに反応する箇所 */
#global-header {
display: none;
}
/* ヘッダーバーに反応する箇所 */
.global-header {
display: none;
}
ですが基本、
ココは変更・削除しないでね
と出るので、、お試しだけにとどめることといたします。
続いて、ヘッダーに画像を入れることはできるのか?トライです。
以下のコードをCSSへ盛り込みます。
/* ヘッダー背景画像 */
.blog-header {
background-image: url("〇〇"); /* 背景画像を指定 */
background-repeat: no-repeat; /* 繰り返しなし */
background-size: cover; /* 要素全体を覆う */
background-position: center; /* 中央に配置 */
}
background-image: url("〇〇");
〇〇のところに、
ヘッダーにしたい画像のURLを入力します。
ムラゴンに上げた画像を、コピペして持ってくるとよいでしょう。
といって、、
ここから先はちょっと説明が要りますね。
ムラゴンブログでは、
画像は記事を開いて…画像欄のトコから上げるようになっています。
他ブログサービスで見られるような、
画像だけを上げる項目がないからです。
なのでヘッダーにしたい画像も、
この場所の、、画像アップロードからアップします。すると画像一覧に入る。
その該当画像にマウスを置き、
右クリックで“画像リンクをコピー”します。
そのURLアドレスを、CSSの○○にペーストするわけです。
画像アドレスは、例えばこんな感じになると思います ⇩
https://public.muragon.com/**********/resize/184x184.png?dummy=12345678
ですがこのまま貼り付けても鮮明な背景にはなりません。
ここにある“resize/184×184”、
サイズが記事の画像一覧で見てるサイズだからですw
表示はされますが、画像がボヤけちゃいます。
な・の・で
ここにはムラゴンに上げる前のヘッダー画像のサイズを、入力するようにしてください。例えばこんな感じで…
https://public.muragon.com/**********/resize/1100x800.png?dummy=12345678
加えて、
うしろについた“?dummy=12345678”を削除して入力ください。
CSSへの入力こんな感じ、、
background-image: url("https://public.muragon.com/**********/resize/1100x800.png");
入力や修正のあとは保存 ⇨ 終了を押します。
これでヘッダー画像に
だいたい、、（完璧じゃないですが💦）反映されると思います。
なんとか入ったものの、
上部が不自然に空くので、ちょっと詰める用にこちらも入力。
.container-inner {
margin-top: -22px;
}
さらに画像との兼ね合いで、
真ん中にセンタリングされたブログタイトルの位置に調整が要るw
右寄せするために以下を入力します。
/* タイトルエリア全体 */
h1.blog-title {
text-align: right;
}
/* タイトル部分のみ（右空けはここで指定） */
a.blog-root-link {
padding-right: 40px;
}
正直言うとこの画像も、
中途半端にしか出てないのですが、ま、見れなくもないのでいいかな～と思ってますw
と、、ここまできて…
ヘッダー画像を上げられる箇所があることに気づきました🫢
ダッシュボード左にあるデザイン変更 ⇨ ヘッダをクリックすると、
ヘッダ画像をアップロードできる箇所があらわれます。
ファイルの選択に該当の画像を入れ、アップロードします。
拡張子“.jpgのみ”と出てきますが、
pngでも？とりあえず反映するように見えます。
そしてココに画像を上げるだけでは、
ヘッダに画像が反映せず。CSSカスタマイズにURL入力しないと出ないのは、記事画像と同じようです。
デザイン変更 ⇨ CSSカスタマイズへ
以下のコードに画像のURLを入力します。
ヘッダの項目からアップロードした画像上で、
マウスを右クリック“画像リンクをコピー”し入力します。
background-image: url("https://public.muragon.com/**********.png");
記事から上げるアドレスと違うのは、
URLのうしろにいろいろ付いてないトコ、、でしょかw
ただ、ヘッダタイトル部分に帯のようなエリアが引かれてる。
これをなくし、
背景画像を出すスタイルシートとして、このように入力したわけですが。
div#blog-header-inner.blog-header-inner {
background-color: transparent;
opacity: 0;
}
※div#blog-header-inner.blog-header-inner
開発者ツールから探ってみた、、ヘッダエリアの部分です。
今度はタイトル名が一緒に隠れてしまい、、🫠
いやいやタイトルは出したい、、苦笑）
なおも調べたあげく💦こちらを入力してみたところ。。
div#blog-header-inner.blog-header-inner {
background: none;
opacity: 0.8;
}
いい感じになりました😁👌
まずヘッダ画像から上げられるのを見落としてたのは何ですが💦
ヘッダ画像から…
もしくは記事画像から上げても、だいたい同じ感じになったのではないでしょーか。
コメント