はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログカスタマイズ ~ブログ名を画像に変更~

2008/03/30 Sun [Edit]

ブログで配布中のテンプレートh007-3middle」をカスタマイズ中の方から下記のご質問を頂きました。

タイトル画面を画像にする事はできますか?

詳細をお聞かせ頂いたところ、今回のタイトル画面とはページ上部(ヘッダー)にあるブログ名が表示されている部分でした。

表示させる場所から考慮すると、テキストで表示されている「ブログ名」をロゴ画像に変更されたいと捉えました。

既に質問者様が試された方法で画像は表示されそうに思えたのですが、上手く表示されなかったご様子なので、注意点などをなるべく多く交えつつ解説したいと思います。

また、より多くの方が今回のカスタマイズ「ブログ名を画像に変更」が実現出来るよう、初歩的な説明も記載したいと思います。興味のある方は続きをどうぞ!
※カスタマイズの説明は当ブログで配布中のテンプレートh007-3middle」を使用中の方が対象です。

それではまず、ブログ名のテキストの代わりに表示させたい画像を用意します。使い慣れたグラフィックソフトでも、インターネット上のサービスを利用しても良いです。

フリーソフトをお探しでしたら GIMP が高機能で有名です。インターネット上のサービスだと Logo Maker : Web 2.0 StylrWeb2.0 - Logo Creatr などで簡単に png 画像を作れます。

フリーソフトなどを使い画像を Web 用に書き出す際は、jpggifpng の何れかで書き出します。それぞれのファイルフォーマットの特徴は jpg は複雑で色数の多い写真のようなグラフィックに向いています。gif は単純で色数の少ないグラフィックに向いており、アニメーションが作成可能です。png はアルファチャンネル(半透明)を使えます。

書き出した画像のファイル名は半角英数字ハイフン(-)とアンダースコア(_)で分かりやすい名前にします。また、拡張子も必須です。ファイルフォーマットが jpg なのに拡張子が gif とか捻くれたことをしないようにします。
※ファイル名に全角が混じったり、半角スペースも駄目ですよ。

画像が用意できましたら、ファイルを FC2 のサーバーにアップロードします。

管理画面にログインし、左メニューの「ツール」の項目にある「ファイルアップロード」から、ご自身のローカルにある画像ファイルをアップロードします。アップロードが完了しましたら、アップロードした画像のサムネイル(小さな画像)が表示されていると思うので、ソレをクリックします。

すると、アップロードした画像がブラウザの別ウィンドウに表示されます。

希にアップロードに失敗することもあるので、失敗している時は同じ手順でアップロードし直します。

アップロードした画像が無事に別ウィンドウに表示された場合は、そのウィンドウは残したままにしておきます。追々そのウィンドウのアドレスバーに表示されている「画像の URL(絶対バス)」が必要になります。

続いてテンプレートHTML のカスタマイズに入ります。

管理画面の左メニュー「環境設定」の項目にある「テンプレートの設定」をクリックします。カスタマイズに入る前にテンプレートの複製(バックアップ)をしておくと安心です。

テンプレートの設定ページにある HTML の編集画面から全てのソースコードをコピーし、使い慣れたエディタにペーストします。HTML 編集画面から直接カスタマイズ作業を行っても良いですが、後述する「ソースの行番号」でサクッと編集されたい方はエディタにソースコードをペーストしましょう。

ペーストしたソースコードの「39行目」付近(※デフォルト時)に下のソースがあります。今回のカスタマイズで編集する部分です。

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

上のソースコードのオレンジ色の部分 FC2 の独自変数「<%blog_name>」でブログ名をテキストで表示しています。
なので、その部分を先程アップロードした画像を表示するソースコードと置換します。

下のソースコードがアップロードした画像を表示する為に必要なソースコードです。

<img src="画像のURL" alt="<%blog_name>" />

上のソースコードのい部分「画像のURL」に、ブラウザの別ウィンドウで開いて残しておいたアドレスバーに表示されている「画像の URL(絶対バス)」が入ります。

ブログ名をテキストで表示させている FC2 の独自変数と上のソースコードを置換したら、エディタの全てのソースコードをコピーし、管理画面の HTML 編集画面にペーストします。
※上書きでペーストすると言う意味です。管理画面の HTML 編集画面内のソースコードを全て選択状態にしてからペーストするか、全て削除してからペーストします。

ソースコードのペーストが済みましたら、管理画面の HTML 編集画面の下にあるボタン「更新」をクリックします。

ブラウザでご自身のブログを確認してみましょう。きっと画像が表示されていると思います。

いかがでしたか?
画像の大きさによってはレイアウトの調整が必要かも知れません。

その時は先程クリックした「更新」ボタンの下の方「スタイルシート編集」画面内にあるソースコードを編集します。HTML を編集した時と同様、全てのソースコードをコピーし、エディタの新規ファイルにペーストします。

ペーストした CSS のソースコードの「359行目」付近に下のソースコードが見つかると思います。

/* ブログ名 */
div#branding h1 {
	font-weight : bold;
	margin : 0;
	padding : 32px 0 0;
	font-size : 153.9%;
	line-height : 1;
	border : none;
}

上のソースコードのい部分 32px が画像の上の余白になります。数値を増やせば余白が広がり、数値を減らせば余白も縮まります。 適宜で調整し、エディタのソースコードをスタイルシート編集画面に全て上書きペーストし「更新」をクリックで完了です。

説明は以上ですが、他にご質問やご不明な点あれば遠慮なくどうぞ!

Prev
docomo のロゴデザイン
Top
はじめてのブログデザイン
Next
FC2ブログカスタマイズ ~新着マーク~

Comments

詳しい説明有難うございました。
そのとおりにやったところ上が黒になってしまいました。
やり方はそのトウリにやったんですが・・・

これ改善できますかね・・・
出来なかったら諦めますので・・・
長文御苦労さまでした。
サイトのタイトル画像は失敗したままにしておきますので、
見終わったら一言よろしくお願いします。

色々改造したらヤバくなったので
通常に戻します。

Kuwabara さんこんにちは!

いえいえ^^
こちらこそご報告ありがとうございます。

>>黒になってしまいました

から思いついたのは、表示させたい画像はアルファチャンネル(半透明な部分)を持った png で、黒く表示されたブラウザは IE6 ではないでしょうか?

もし上が正解でしたら、当ブログの記事「透過 PNG を IE6 でも奇麗に表示するクリスマス☆」が参考になるかも知れません。CSS で IE6 だけに filter を適用させると奇麗に png 画像を表示可能です。

的外れでしたらお聞き流しください^^

恩師!hajime様へ

hajime様!!ご無沙汰しております!!
DioZXと申します。

お忘れに・・・・・・・・・・なってないですよね^^;
以前は大変お世話になりました!!
あの時のご恩は今でも脳裏に焼きついてございますm(__)m

バイクの免許はまだちょっと…行ってないんですが…すいません^^;

ところで!ところで!、タイトルの画像素晴らしいです!!
ピンクを基調としたシンプルなデザインに、少し透過性がある感じでしょうか?
とても品の良さがうかがえます!!
さすがでございます!!

私の一番の問題は、センスがないこと…。
画像で作るにしてもそこが難問です(爆)
恩師を見習わなくては…〆( ̄  ̄*)

手順についても見た感じ、簡単に出来そうですね!!
(といいつつ、また躓くんだこれが…)

それでちょっと疑問があるんですが、今までテキストで表示されてたタイトルを画像にすることによって、SEO対策とかには不利にならないのでしょうか?
title属性や、alt属性をしっかり記述しておけば大丈夫なんですかね??
どうぞ宜しくお願い致します!!

DioZX 様ご無沙汰です!

忘れていませんよ~^^
私の方こそ、その節はご質問頂けた事、色々ご報告頂けた事に感謝しています。

バイクの免許はどうぞお好きな時にチャレンジしてみて下さい^^

タイトル画像のお褒めの言葉、本当に嬉しいです♪
ロゴ自体は手抜きですが、色味に関しては手前味噌ですが気に入っています。
先日見て来た「夜桜」が奇麗だったので、それを思い浮かべながら着色してみました^^
『桜にしてはちょっとピンクが強い気が・・・』
なんて思われるかも知れませんが、提灯の明かりに照らされた桜を見て来たので・・・
ってどうでも良いですよね^^

でも DioZX 様も苦手意識なんてお忘れになって、奇麗だと感じたものを自分と言うフィルターを通して再現するんだ!なんて気持ちで取組むと楽しめるかも知れませんよ・・・
ってちょっと偉そうですね^^

恩師なんて言われ有頂天になってしまいましたw

SEO の件ですが
Google などの有名なロボット型検索エンジンのクローラーは alt 属性もキーワードとして拾ってくれるそうですよ。
画像にすることで SEO 的に有利にもならないと思いますが、不利になる要素もないと思います。
絶対とは言い切れませんが、Google の PageRank が 10 の W3C のサイトのトップページでも、丁度同じようにサイト名(ロゴ)に画像を使用していますし・・・多くのサイトで同じような例は見られると思いますので、私は大丈夫だと思っています。
alt 属性(必須属性)に正しいキーワードを入れている限り、SEO スパムと判断されることもないでしょうし、W3C の規定に準拠した HTML だと思います。

しかし、装飾のみが目的の画像を img タグで表示させてしまうと、HTML ソース内に検索エンジンのクローラーにとって意味の無い要素が増えるので、SEO 的には不利と言えるのかも知れません。そうした視覚的構造はなるべく CSS で指定したほうが良いと思います。

補足を付け加えるなら、サイト内で画像を沢山使用する場合は、アクセシビリティを保ちつつ HTML を最適化する狙いで、CSS で要素の背景に画像を指定する方法がとられているのも事実です。
img タグで溢れかえった HTML ソースと、CSS で要素の背景に画像を指定した HTML ソースのどちらが最適化されているかを比較した時、HTML ソースが短くなる後者の方法でコーディングするよう薦める書籍も多いです。
これは SEO と言うより、アクセシビリティや管理面での最適化が本来の目的かも知れませんが、検索エンジンの開発を進める上で W3C の規定やアクセシビリティはやはり重要視されていると考えられ、W3C の規定に準拠した HTML は SEO 的に不利になることはないと思えます。
唯一の不安は「隠しテキスト」として SEO スパムと判断される恐れが発生することでしょうか。
しかし、alt 属性と同様、正しいキーワードでしたらその心配も杞憂となるような情報がネット検索で見つかると思います。

歯切れの悪い返答ですいませんm(__)m

hajime様へ

こんにちは!!
hajime様のお元気そうなお言葉が聞けて、大変嬉しく思います!!

なるほど、夜桜をヒントにされたのですか!
ビューティフルです!!
よぉーし!私も頑張ってみます!!

SEO対策につきましても、大変有益なお話しをいただき感謝、感激でございます!!
とても勉強になりました!

近々タイトル画像作成に挑戦してみたいと思います!
hajime様もどうぞお体にお気をつけて、これからの益々の御活躍をお祈り致しております!

また、お邪魔致します!
ありがとうございました。

DioZX 様こんばんは☆

DioZX 様もお元気そうで何よりです^^

お褒めの言葉ありがとうございます!
はい。夜桜をヒントに着色しました。
もしも林家ペー・パー子夫妻をヒントにしていたら、また少し違う着色になっていたと思います^^
仕事で制作する時は、キチッとした理由を見つけつつ色計画などを立てますが、趣味では自己満足で楽しんでいます。
是非、DioZX 様も楽しんでみて下さい♪

SEO の件、どういたしまして^^
このブログに関してはあまり実践していませんが、SEO はアクセス解析と睨めっこすることが大切だと思います。
もし、タイトル部分を画像に変更した為に、アクセスログに悪い変化がありましたら『嘘つき!』とコメントください。
お詫びの言葉をご用意してお待ちしていますw

DioZX 様のブログ、こっそり楽しませて頂いています。次はいよいよ挙式当日ですね^^

また、遊びに来てください♪

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。