ドメイン設定

パソコン備忘録 by わらっち




リプラの忍者ブログ版のヘッダー画像(背景透過バナー)変更方法

記事公開日:2014年1月10日

最終更新日:2017年3月7日


久々に無料ブログでのサテライト分散作業をした。

 

で、ふとルレア購入時に先行販売だったので忍者ブログ版のテンプレが特典で付いていたのを思い出した。

 

さっそくより自然を装うIP分散の為、忍者ブログ版でのリプラテンプレートを使用。


Sponsored Link

 

あまり使い慣れていない忍者ブログ

 

順調にPDFを見ながら2カラムのテンプレ導入に成功

 

1記事を入れ、せっかくなので先日の背景透過バナー(gifファイル)をヘッダーに使用する事にした。

 

そこまでPDFには細かい解説が記載なかったが、おおまかSeesaaブログ版の導入時とやり方は変わらなかった。

 

まず推奨されている940に幅を変更。1000px幅を変更。

 

先日の経験で「Shukusen」や「ペイント」では、gifファイルが縮小できない事を学んだので

GIMPでサイズ変更。

 

そして忍者ブログにアップロードして、そのURLをメモ

 

管理ページの上段にある「デザイン」から「PC用テンプレート」を選び、使用中のテンプレートの「修正」でHTMLとCSSの編集画面がある。

 

今回は、リプラの忍者ブログ版にヘッダーを入れるだけなので、Seesaaブログ版同様にCSSの変更をする。

 

変更箇所は↓

 

#myd-header-inner {
display:table;
width: 940px;
margin:0 auto ;
}

 

上記のタグ真下に先ほどメモしたヘッダーのURL入れ下の2行を赤枠に挿入する。

 

 

background: url(画像のURL:さっきコピーしたURL);
height: ●●●px;

 

あとは保存を押して完了。

 

ルレアの購入者専用ページのリプラカスタマイズ(Seesaa版)を参照。

 

一応、ここまででヘッダーを忍者ブログにはめ込むのは完了するはずなんだけど今回は背景透過バナー(gifファイル)をヘッダーを使用したせいか、上記のままではなぜか背景透過バナーの画像が下から繰り返し出てきてしまう。

 

こんな感じ。↓

 

ねっ!おかしいでしょう(笑)

 

理由はすぐに分かったタイトルのサイズを多くしていたのが理由だ。

 

バナーにもよるかもしれませんが、CSSの文字サイズをヘッダー下から出てきた顔が消えるぎりぎりまでが42pxだった。備忘録としてメモしておきます。

 

#site-title-description h1 {
color:#333;
font-size: 42px;
font-weight:bold;
line-height: 1.3;
}

 

それと不要だったかもしれませんがヘッダー位置を微調整する為に、

 

※クリックすると拡大

 

26px 0 0 0; ⇒ 0 0 0 0;

0 20px 5px 0; ⇒ 0 0 0 0;

 

上記のタグを変更した。

 

詳しくはリプラカスタマイズ講座の

 

「タイトルを入れたヘッダーバナーを設置する方法(FC2ブログ)」

 

の下段部分の記載を参考にしてみて下さい。

 

今日も学びのあった1日♪(^o^)丿


Sponsored Link

 

この記事を読んだ人は以下の記事も読んでいます(関連記事)

アフィリエイト関連    コメント:0

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: