スポンサーサイト

このエントリーをはてなブックマークに追加

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

SEO対策も考慮してブログのタイトルを画像に変える 

このエントリーをはてなブックマークに追加

ホームページやブログのタイトルを、オリジナルのロゴなど画像に変えると見栄えもいいし個性的でいいですよね。
このブログもタイトルは画像にしています。

ブログのタイトル(自分のブログ名)を画像に変えるためには、まず画像を用意してください。

ロゴを作成するには、画像作成ソフトなどを使います。
タイトルだけならソフトを買う必要もないし、無料ソフトや、無料ロゴが作成できるWebもたくさんあるので、「無料 ロゴ 作成」などで検索してみてください。

おばちゃんは「無料フォントで簡単ロゴ作成」で作りました。
作成した画像をアップロードします。

FC2ブログの場合、ツールのファイルアップロードでタイトルのところにブログタイトル名を入力し、サムネイルは作成しない設定にしてアップロードしてください。
あらかじめ画像URL(ファイルの場所)をメモしておくなどしておいてください。

次に、ブログの管理ページのテンプレートの設定などからHTMLを編集をします。

FC2ブログは管理ページの環境設定>テンプレートの設定で編集できます。

どこのブログサービスも概ね同にHTMLを編集できるページがあると思います。

忍者ブログ、ジュゲムなどは同じような感じです。

Seesaaブログの場合は、少しわかりにくくて、管理画面のデザイン> コンテンツ で、一番上にあるブログタイトルのパーツをクリック。
コンテンツHTML編集でHTMLを編集します。

テンプレートには、HTMLとスタイルシート(CSS)の編集の2種類あります。
簡単に説明すると、HTMLは、Web記述をするための言語で、スタイルシートは色や文字の大きさ、位置などの見栄えを指定するものです。

まずは、とりあえず簡単にタイトルを画像に変更できればそれでいい場合について説明します。

HTMLの最初のあたりに出てくる、<h1> ~ </h1>の部分がタイトル(ブログ)名を表しています。

HTMLを編集します。

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

 

上の記述の<%blog_name>部分を削除し、以下のように変更します。

<h1><a href="<%url>" name="top" accesskey="0" title="<%blog_name>"><img src="画像URL" alt="ブログ名" border="0" /></a></h1>



画像URLがよくわからないという人は、ファイルの管理のページでアップロードした画像の「この画像で記事を書く」をクリックしてください。
<img ~ />の部分をコピーしてください。<a href="http://~">と</a>はいりません。
コピーしたものを上の赤字の部分のところに貼りつけます。

これで、タイトルが画像に変わりました。

注意点は、タイトルがくる部分の背景に色指定や画像の指定があった場合、背景色を変更する。
またはロゴ作成時に背景色と同じ色の背景色を指定する、または透明化しておくこと。

これだけでもいいのでしょうが、SEO対策を考えたときはどうなんだろうってことです。
<h1> が画像だけってあんまりよくないんじゃないかと思ってしまうわけです。
画像が見られない場合、タイトルも表示されないし、そこで<h1>の記述は残しながらスタイルシートで変更する方法を考えてみました。

これは色んな方法があると思います。
おばちゃんは、わりと簡単な方法で変更してみました。
要するに、<h1>でテキストは記述されているけれど、スタイルシートで見えないようにしちゃうのです。

まずHTML部分は、もとのHTMLに画像をプラスします。

<h1><a href="<%url>" name="top" accesskey="0" title="<%blog_name>"><img src="画像URL" alt="ブログ名" border="0" /><%blog_name></a></h1>



次にスタイルシート、CSSを変更しフォントの大きさと色を変えます。

font-size が文字の大きさで、colorが色で#ffffffは白です。色は適宜変更します。

h1の部分を探し、変更します。サイズ指定はされていると思いますが、色指定はされていない場合もあるので追加します。

h1 { font-size:1px;
font-color:#ffffff;}



リンクの文字色も指定されている場合はそれも変更します。

h1 a {color : #fff;}

h1 a:hover {color : #fff;}

h1 a:visited {color : #fff;}



など。

これでSEO対策もばっちり(?)な方法でタイトルを画像に変更できました。

実際にはタイトルの文字が米粒のように小さくなり、背景と同化して、あるのにないように見えているだけなので、画像は見られるけれど、スタイルシートは反映されない状況だと、タイトルが2つ並んでるはずなんですけどね(笑)

ほかには、画像はCSSでh1の背景として使用するとか、位置変更するとか、できそうです。
関連記事

スポンサーリンク

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

http://obachanchie.blog.fc2.com/tb.php/64-07ddc489
この記事にトラックバックする(FC2ブログユーザー)

前の記事«  ホーム   »次の記事

最新記事

カテゴリ

暮らし
節約
家事
健康・美容・ダイエット
離婚
子ども
パソコン・インターネット
音楽
家電・電化製品
携帯電話・スマホ
オークション
食べたもの
雑貨
雑学
ゴルフ
おでかけ
映画
ミュージカル

全記事タイトル一覧

全ての記事を表示する

スポンサーリンク

プロフィール

書いてる人:ムミョン
アラフォーのおばちゃんです。

暮らしの手続きや気になることなど、おばちゃんの実体験や調べたことなど役立ちそうな情報から、あんまり役に立ちそうもない無駄知識まで、好き勝手に綴っている個人ブログです。

RSS

サイト内検索

Amazon

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