アメブロヘッダー画像変更 ブログタイトルを表示させない方法

アメブロヘッダー画像変更 ブログタイトルを表示させない方法

アメブロのヘッダー画像。
最近のブログは素敵なヘッダー画像が
たくさんありますよね。

ヘッダー画像の中にブログのタイトルや、
ブログの説明を画像とした場合、
もとに合った、ブログタイトルやブログの説明が
かぶってしまいます。

表示させない方法をご紹介しますね。

 

 

 

アメブロでも、他のブログでもそうですが、
ヘッダー画像の設置をより簡単にするために、
CSSで、予めいろんな設定がしてあります。

 

ヘッダー画像にブログのタイトルや、ブログの説明などを入れた場合、
元のCSSを変更しないと、ブログタイトルやブログの説明などが、
ヘッダー画像に表示されたままです。

こんな感じね。

ヘッダー画像の設置

 

このテンプレートでは、普通にブログのタイトルや
ブログの説明を、基本設定で入力すると表示されるという
設定になっています。

 

 

普通のブログでも、だいたいこんな感じなんですよね。

 

 

ヘッダー画像を設置した場合、画像が邪魔にならないのであれば、
ブログタイトルの位置を変更するだけで、回避できますが、
ヘッダー画像に、ブログタイトル・ブログの説明を
画像として処理した場合は、このタイトル・説明部分がかぶってしまって、
美しくない!!

 

しかも、イメージ通りではなくなりますよね。

 

 

この回避方法は、CSSにチョイ足ししただけでできますので、
アメブロだけでなく、他のブログに応用できるので、
覚えておいてくださいね。

 

このような質問もありましたので、
解説していきますね。

 

 

ブログタイトル・説明を非表示にする方法

デザインの変更より、CSS編集を選びます。

CSSの中をちょっと検索してください。
(control + Fキー で、検索窓が開きます)

.skinTitle ← ブログタイトルのことです。

 

.skinDescription ← ブログの説明のことです。

 

 

この二つを非表示に設定します。

 

多分CSSの中に、
こんな感じの記述があるかと思います。

 

.skinTitle{
いろんな設定の記述

.skinDescription{
いろんな設定の記述

 

「いろんな設定の記述」とは?

  • ブログタイトル・説明の表示位置
  • ブログタイトル・説明のフォント指定
  • ブログタイトル・説明のフォントの色指定

などです。

 

それらの記述の最後に、下記のコードを追加してください。

display:none;

 

これだけです。

 

 

変更を保存して、いつものようにF5キーを押下して更新をかけてから、
ブログを確認しましょう。

 

こうなりますよ。

2013y05m19d_103152135

 

ね。
表示されなくなりましたよね。

 

display というのは、指定された要素(例えばブログタイトルなどね)を
表示するか・しないかを設定するものです。

 

いろんな場面で使えます。

 

例えば、アメブロではタグ指定などはできませんが、
他の無料ブログでは、タグなどを指定できる場合があります。

 

また、投稿日も隠しておきたいかも?
って、ブログのテーマによってはあるかもですよね。

 

 

CSSコードやHTMLの設定の部分を
バクっと削除してしまうということもできますが、
後から、やっぱり・・・・
表示させたくなったりね・・・

 

 

そういう時など、この「display:none;」をCSSに追加すると、
非表示になりますので、覚えておいてくださいね。

 

 

 

ヘッダー画像にブログタイトル・説明を画像として、
使う場合は、この方法が一番有効です。

 

 

アメブロの場合は、CSS編集可能なテンプレートしか
利用できませんが、他のブログでは、自由にCSS変更が可能ですので、
display:none; の使い方を覚えておくと便利です。

 

ぜひ、お試しあれ!!
 

 

 
A6A6

なにかお困りのことはありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

ちえぞうに直接届きます!!

 

 

 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ