Home > FC2ブログ > basic_white > basic_whiteテンプレート ブログタイトル左のアイコン画像を変更

basic_whiteテンプレート ブログタイトル左のアイコン画像を変更

 basic_whiteテンプレートのブログタイトル左横のアイコンを変更する方法です。

 サンプルとしていくつかの色違い画像を用意しました。

ブログタイトル

 色を選択するとコードが生成されるので、それをスタイルシートに追加してください。「マーク結合」にチェックを入れるとマークのデザインが変わります。

 コード内のアドレス部分がブログタイトル左に表示される画像になります。別の画像にする時はここを差し替えてください。

 アイコン画像などが正常に反映されない時は「;」の直前に「 !important」をつけてください。font-sizeなどについても同様です。

background-image: url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/bwh_title_blue2.png) !important;

画像のダウンロード

 必須ではありませんが、こちらで用意したアイコン画像が何らかの原因で表示されなくなる可能性もなくはないので、画像をダウンロードして自分のブログにアップロードすることを推奨します。

 次の画像を右クリックして保存します。

 アップロード後は追加したスタイルシートコードの画像アドレスを自分がアップロードした画像アドレスに変更してください。

 マークの大きさなどはご自身で画像を加工して調整してください。

生成コードを使わずにスタイルシートを直接変更する

 既存のスタイルシートを変更して画像を変える場合は以下の画像アドレス部分を変更してください。場所はCtrl+Fキーで『ブログタイトル前』を検索。

#header h1 {
  margin-bottom: 20px;
  padding-left: 15px;
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/blog_name.png) no-repeat left center; /* ブログタイトル前のアイコン */
}

 横に長いアイコンを指定する場合は「padding-left: 15px」の数値を増やして調整してください。

タイトル文字色・サイズの変更

文字色の変更

 タイトルの文字色を変更する時はスタイルシートのFont Colorにある以下の部分を変更してください。「333333」の部分で色を指定します。場所はCtrl+Fキーで『Font Color』を検索。

#header h1 a /* ブログタイトル */ { color: #333333; }

 正常に反映されない時は「;」の直前に「 !important」をつけてください。

color: #002244 !important;

 カーソルを重ねた時の色を変更する時は以下のコードを追加して色を指定してください。

#header h1 a /* ブログタイトル */ { color: #333333; }
#header h1 a:hover { color: #999999; }

太字にする

 追加したスタイルシートコードに「font-weight: bold;」を加えてください。

body #header h1 { /* ブログタイトルアイコン設定 */
  background-image: url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/bwh_title_default.png);
  font-weight: bold;
}

文字サイズの変更

 追加したスタイルシートコードに「font-size」を加えて数値を指定してください。文字サイズ調整で追加済みの場合は数値のみを変更してください。

body #header h1 { /* ブログタイトルアイコン設定 */
  background-image: url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/bwh_title_default.png);
  font-size: 25px;
}

 文字を小さくしてマークが正常に表示しきれない場合は「min-height: 33px;」を加えてください。数値はアイコンの高さと同じ値を指定してます。

body #header h1 { /* ブログタイトルアイコン設定 */
  background-image: url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/bwh_title_default.png);
  min-height: 33px;
}

 ブログ説明文の文字サイズはスタイルシートの以下の部分で調整してください。

#header p /* ブログ紹介文 */ { font-size: 115%; /* 21px */ }

関連記事
スポンサー リンク
コメント
#275 : No title
mayさん、こんにちわ。
こちらのカスタマイズをリクエストしただいです。

お蔭様でブログに彩りが与えられて大変満足してます。

お忙しい中、どうもありがとうございました。
#276 : 参考になりました。
このカスタマイズは行っていないのですが、他のカスタマイズ方法に関しては非常に参考になりました。
今後ともお世話になると思いますのでどうぞよろしくお願いします。
取り急ぎお礼まで。
#280 : はじめまして
いつも参考にさせていただいてます。
いきなり質問なんですが、h3やh4タグのデザインを変更する場合はどうすればいいでしょうか??
#281 : Re280: h3とh4
コンバンハ。
記事内に使用するh3やh4であれば、URLリンク先の別記事にある「記事本文内の見出しアイコンを変更」の部分で変更できます。
画像アドレス部分を生成したコードにあるアドレスと入れ替えるとマークが変わります。余白などはmarginとpaddingの数値を適当に調整してください。
サイドバーで使用する場合は.sidemenu_content h3{~}。フッタープラグインは#main .plg h3{~}で指定します。
#282 : ありがとうございました
丁寧な回答ありがとうございました。
今後も参考にさせていただきますのでよろしくお願いします!
#344 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered