スポンサーサイト

一定期間更新がないため広告を表示しています

ヘッダーにロゴを設置する方法【対象:Psychedelic / Pink Birds / Manly Stag】

先日公開したテンプレート(Psychedelic / Pink Birds / Manly Stag)に「ナマムギ」ブログのようにロゴをドーン!と設置する方法をざっくりと紹介します。

※編集後にレイアウトなどおかしくなっちゃうと大変です。編集前の内容は必ずどこかに保存してください。


1) ロゴの画像を用意

サイズ
  • 横750ピクセル以内×縦200ピクセル以内
背景色(WEBカラーコード)png画像で背景を透過させる場合は飛ばしてください。
  • Psychedelic #000000
  • Pink Birds #D8C4C7
  • Manly Stag #333333


2) ロゴのアップロード

[データ管理]→[画像管理]からロゴ画像をアップロードしてください。


3) CSSの編集

CSSの中から下記の「変更前」を探して、「変更後」の内容に差し替えてください。
※*****の部分はそれぞれ任意のものにしてください。

変更前======================================
#header h1 {
    padding-top: 75px;
}
#header h1 a {
    font-size: 24px;
    font-weight: bold;
}

変更後======================================
#header h1 {
    background-image: url(http://*****); /*ロゴの画像パス*/
    background-repeat: no-repeat;
    background-position: left center;
    text-indent: -9999px;
    height: 200px;
    width: *****px; /*ロゴの横幅*/
}
#header h1 a {
    display: block;
    height: 100%;
    font-size: 24px;
    font-weight: bold;
}
#header p {
    display: none;
}


4) プレビューで確認

テンプレート一覧ページの[確認]から編集したテンプレートの動作確認をしてください。
これでOK!ってなったら適用させてください。

カスタマイズでデザインが崩れてしまったり元に戻したい場合には、カスタマイズ前に保存した内容に置き換えるか、テンプレートの再設置をしてください。

スポンサーサイト

コメント

   

この記事のトラックバックURL

トラックバック