タイトルリンク&バナー部分を好きな画像に変えてしまおう。

標準
Pocket

以下、アメブロを利用するときに、

いっっっっつも検索して探す記事。

//ここから

アメブロのタイトルとバナー画像を好きな画像に変える方法は、以下でも紹介されているが。
http://ameblo.jp/ameblo-trend/entry-10003745394.html
これだけではタイトルがテキストで表示されてしまう。
タイトルを含めたバナー画像を設定する方法をメモ。

実のところ、タイトルや概要を表示させたくないなら、
/* header */内の#header h1と#header h2に
display: none;を入れるだけでよい。
が、これだとテキストに張られていたブログトップページへのリンクができない。
そこで。
CSSを以下のように編集する。

/*header */内に以下を追加。

#header h1 a{
font-size: 1px;
text-indent: -9999em;
display: block;
width: ○○px;
height: △△px;
}

※○○と△△には、それぞれバナーの幅と高さの数値を半角数字で入れる。

#header h2{
margin-left: 10px;
display: none;   ←この一文を追加。
}

************
#header h1 aでバナーへのリンクを作る。a要素はインライン要素なので、display: block;でブロック化。インライン要素には表示を消すためのdisplay: none;は使えないので、text-indent: -9999em;で、ブラウザの外へ表示をすっ飛ばす。

************
http://ameblo.jp/ameblo-trend/entry-10003745394.htmlで使っている「カスタマイズ画面」が使えない時は?
CSSの編集のみでバナーを差し替える。
しかしテンプレートによって少しづつidが違ったりしてるので、一概に「ここをこう」とは言い難かったり。
基本的には#header部分に
background-image: url(http://画像URL);
background-repeat: no-repeat;
background-position: left top;
と入れればいいのだが、元のバナー画像が他のところに入っている場合もあるので、それを消してやらないといけないかも。

//ここまで

あざーっす

http://ameblo.jp/sps-v/entry-10023114840.html

http://www.tagclick.net/ping

投稿者プロフィール

助田 正樹
株式会社イノセンティブ 取締役 :一般社団法人 日本ディレクション協会 理事 東京都品川区出身の1976年7月生まれ。桜美林大学経済学部を卒業後、ソニー株式会社にて、シックスシグマというマネジメントツールのR&D、広報などクリエイティブ業務に従事。2005年からインターネットベンチャーでWebディレクターとして数社経験。その後「LINKAGE」という商号でフリーランスとしてWebディレクション業務で活動。コーポレート、リクルート、モバイル、デジタルサイネージ、リアル連動など様々なWebサイト、システムの構築、新規事業プロジェクト企画、立ち上げを経験。(参照:実績)2012年6月に株式会社イノセンティブ取締役に就任。GARAGE AKIHABARAを立ち上げる。日本ディレクション協会ファウンダー。メンタルマネージャー資格保有。