MY CSS DESIGN

最新記事のRSS

FC2ブログのテンプレート配布・作成日誌。

PREV | PAGE-SELECT | NEXT

≫ EDIT

ブログタイトル画像化計画

うちのブログでやってる事なんだけどブログタイトルに透過GIFを利用して簡単にクオリティアップしてしまおうと言う計画です。英語タイトル仕様のブログならフォント次第で結構な見栄えアップすると思うので挑戦してみてください。
当ブログタイトル部分

まずはじめにブログタイトルを含んだ透過GIFを作成してください(透過GIFとは?=画像の一部分が透明になっているGIFの事です。)

透過を使ったタイトル画像
わかりやすく透過部分をオレンジにしてみました。このようにギリギリに切り出すと無用な余白が出来ずバランスが保てると思います。フォントはあまり大きくしたり小さくしないで下に表示されるブログ説明とのバランスを考えながら作ると良いでしょう。

完成したのならTOP画像差し替えと同じ要領でサーバーにアップロードします。アドレスは控えておいてください。次にHTMLソースに手を加えます。HTMLから下記記述を探し出してください。

<h1><a href="<%url>"><%blog_name></a></h1>

上記記述を下記のように書き替えます。

<h1><a href="<%url>"><img src="控えておいた画像のアドレス" alt="<%blog_name>" /></a></h1>

次にスタイルシートに下記記述を付け足してください。

#blogtitle img { border:none; }

更新を押せば完成です。ね、簡単でしょ?自分のブログに合った素敵なフォントを探し出してカスタマイズしてください。

※注:今回のカスタマイズの対象になるテンプレートは「menuシリーズ」「calendarシリーズ」です。dogやpureは「ブログタイトル文字画像化の手引き 」を参考にしてください。

| カスタマイズ | Permalink | comments:17 | trackbacks:0 | TOP↑

COMMENT

★ Uma*ちひろさん
カスタマイズ情報にあるので見てください。
http://hiyokokun.blog2.fc2.com/blog-entry-344.html

| ひよこ@管理人 | 2011/02/21 20:03 | URL | ≫ EDIT

二度目失礼します。
「背景を壁紙に使いたい」が見つからないのですが、URLとか教えて頂けますか?

| Uma*ちひろ | 2011/02/21 01:06 | URL |

★ Uma*ちひろさん はじめまして
テンプレートご利用ありがとう。
カスタマイズ情報の「背景に壁紙を使いたい」を参照してくださいませ。

★ ヨヨンさん
テンプレート利用してもらえるだけで十分なので
無理にリンクとかは貼らなくても大丈夫ですよ。
ブログがんばってください。

| ひよこ@管理人 | 2011/02/11 14:19 | URL | ≫ EDIT

http://hiyokokun.blog2.fc2.com/blog-entry-649.html
これと同じものです。

| Uma*ちひろ | 2011/02/10 15:01 | URL | ≫ EDIT

初心者です。

はじめまして。「hiyoko-menu950」のテンプレートを使用しているのですが、背景は変えることはできないのでしょうか??
できるとしたら、背景の画像の大きさと、HTMLの変更?の仕方を教えて下さい。
よろしくお願いします。

| Uma*ちひろ | 2011/02/10 13:51 | URL | ≫ EDIT

ありがとうございましたm(。。)m
解決いたしました。

また何かあったら宜しくお願い致します。

それと、素材提供とアドバイスなどの感謝のつもりで私のブログに素材提供者としてこのヒヨコさんのブログにリンクを貼りたいのですが宜しいですか?

| ヨヨン | 2011/02/10 09:51 | URL |

★ ヨヨンさん
問題なさそうですよ。
トップ画像の隙間に関してはトップ画像自体の横幅がたりてないような気がします。

| ひよこ@管理人 | 2011/02/09 00:09 | URL | ≫ EDIT

再びお邪魔します。

出来るとこまでやってみましたが、トップ画像の右側にあいた隙間が埋まりません。

HTMLの所を
<!-- ▼ヘッダ -->
<div id="header">
<h1><a href="<%url>"><img src="http://blog-imgs-45.fc2.com/h/o/u/hougayayoyogi/2011020708531327c.jpg" alt="<%blog_name>"border="0" /></a></h1></div>
<!-- ▲ヘッダ END -->

以上の様にしてスタイルシート編集で

/* ----------------トップ背景画像用設定 */

#header {
height: 153px;
margin: 0px; 
padding: 0px;
position: relative;
background-color: #FFFFFF;
}

#header img {
border: none;
margin: 0px;  
padding: 0px;
}

#header h1 {
margin: 0px;
padding: 0px;

と致しました。

不自然だったヘッダーの

<p id="adminmenu"><span class="adminmenu">ADMIN MENU ≫</span> | <a rel="nofollow" href="<%server_url>control.php?mode=control&process=upload" title="画像管理" target="_blank">IMAGE</a> | <a rel="nofollow" href="<%server_url>control.php?mode=editor&process=new" title="記事を書く" target="_blank">WRITES</a> | </p>
</div>

は省き、スタイルシートのheightを200pxから153pxにしてみました。

| ヨヨン | 2011/02/08 06:39 | URL |

★ ヨヨンさん
「テンプレートのブログタイトル文字画像化」ってトップ画像にブログタイトルを直に挿入するって事ですよね?

基本はカスタマイズ情報にあるのと大体同じなので、出来るところまでやってもういちど報告ください。拝見した後にミスしてる部分を指摘します。

| ひよこ@管理人 | 2011/02/07 23:40 | URL | ≫ EDIT

あ、説明を間違えました。

「hiyoko-news」版テンプレートのブログタイトル文字画像化の手引きを教えてください

| ヨヨン | 2011/02/07 19:09 | URL |

管理人ひよこさま。

テンプレートお借りしておりますm(_ _)m

実は「hiyoko-news」版のテンプレートでブログタイトルを画像化したいのですが、htmlの構造が違うようなので教えて頂ければと存じます。

| ヨヨン | 2011/02/07 09:53 | URL |

★ さちままさん
現在のテンプレートをリネームするか削除し、同じテンプレートをダウンロードしてカスタマイズしなおしてくださいませ。

| ひよこ@管理人 | 2011/01/17 21:43 | URL | ≫ EDIT

突然の質問申し訳ありません…
いろいろいじくっていたら、なぜか最新記事の下の広告が
びっくりするくらい大きな表示に変わってしまったのですが…
私がどこか変なところを触っちゃったと思うのですが
どこをどうしたら直りますか?

| さちまま | 2011/01/16 11:22 | URL |

★ はるさん こんにちは
コマーシャライザーと言うものがいまいちわかりませんがHTMLの<div id="header"></div>の間にそのプラグインのタグを挿入すればTOP画像の位置に表示されると思います。

| ひよこ@管理人 | 2009/02/05 20:46 | URL | ≫ EDIT

こんにちは。
いつも利用させて頂きましてありがとうございます。
いま、プラグインでコマーシャライザーを入れたのですが、幅が全然合わないので、トップ画像に入れたいのですが、それは可能でしょうか?
よろしくご指導お願い致します。

| はる | 2009/02/04 17:52 | URL |

★ ゆいちゃ
初めはフォント指定してやってたよ。でもやっぱ画像が無難だわ。
画像に変えて慣れてしまうと、デフォルトフォントに戻した時に違和感あるよね。
「あらら(苦笑)」みたいなw

| ひよこ@管理人 | 2009/02/02 23:19 | URL | ≫ EDIT

タイトルが画像だって知らなかった頃は
一文字ずつ色を変える指定してるのかと思ってたw
教えてもらって作って以来 変更はしてないけど
気に入ってます♪
小さなことでもオリジナルって部分があると
それだけで大きな満足があるよねぇ(´- `*)

| ユイ | 2009/02/02 00:01 | URL | ≫ EDIT

※重要告知
カスタマイズの質問に対するサポートは多忙なためお休み中です。ご理解の程よろしくお願い致します。

TRACKBACK URL

言及リンクの無いトラックバックは受け付けておりません。

http://hiyokokun.blog2.fc2.com/tb.php/621-895615f2

TRACKBACK

PREV | PAGE-SELECT | NEXT