【HTML/CSS】タイトルロゴ画像の設定の方法

公開日: : 最終更新日:2014/08/14 CSS, サイト制作

スポンサーリンク

自分のブログやサイトのタイトル部分にトップ絵画像を設置する方法です。方法としてはimgタグをHTMLに書き込む方法もしくはCSSに記述する方法がありますが、いずれの方法にしてもタイトルを記述するh1タグについて変更を加えます。

また、最後にタイトルロゴ作成の手助けになるサイトも少し紹介してあります。

imgタグを設定する方法

こちらはHTMLソースを直接変更してh1タグ内を直接変更します。画像をクリックする形にしたいと思うのでimgタグはaタグ内に記述します。

<h1><a href="○○"><img src="△△" /></a></h1>

○○は自分のサイトのリンクで、元々あるであろう部分。△△は置き換えたい画像のアドレスです。

もしこれで表示がおかしいなとなった場合はもしかしたら適用しているテンプレートのスタイルで画像タグに対して何か行っているという可能性が大きいので、その時はh1のimgタグに別途CSS記述を行う必要があります。

例)

h1 img{
 margin: 0 !important;
}

CSSに記述する方法

imgタグを設置する方法は画像がドラッグドロップできてしまうというのが欠点の一つだと思いますが、この方法であれば元のHTMLソースを変更することなくかつ画像もドラッグドロップできない形になります。(もちろんソースを見れば画像の場所はわかるのでWebに表示している以上コピー防止というのはできません。)

FC2であれば「テンプレートの設定」からスタイルシートの編集で行います。おそらく多くのテンプレートでははじめからh1、h1のaタグに何らかの記述を施していると思うのでその部分に手を加えるか、CSSは前の記述を上書きしていく方式なのでスタイルシートの一番下に次のソースを改編したものをコピペするかしてください。

どうしても駄目であれば末尾のセミコロン(;)の前に「!important」を書き足せば強制的に合わせることができます。

h1{
 width: ○○px;/*画像の横幅*/
 height: ○○px;/*画像の高さ*/
 background: url(画像パス) no-repeat;
 /*background: url(画像パス) no-repeat !important; 強制的に合わせる場合*/
}
h1 a{
 display: none;	/*元あった文字はこれで消す*/
}

簡単に説明すると画像のサイズを指定して、backgroundで画像パスとリピートをしない指定を書き込みます。後は、元の文字が表示されないようh1のaタグを非表示にしてあげます。こうすることでaタグが消えるのでタイトルのクリックは出来なくなりますが、文字も消えて画像だけ表示されるようになります。

画像の位置はmarginの値を変更することで調整することができます。

タイトルロゴ画像を作りたい

タイトルロゴ画像の設置の方法を紹介してきましたが、そもそもタイトルロゴ画像を自分で作るというのはとても難しいことだと思います。GIMPなどのペイントソフトに精通している方であればおしゃれなロゴも簡単に作れると思いますがそういうことはできないという方も多いと思います。

そこで、ロゴ部分はジェネレータの力を借りるという方法もあります。


http://raki.st/

これは『がぞ☆つく』というサイトで作成したらきすた風ロゴ画像です。


http://magi.md/

そしてこちらは『まどか★マギカ風タイトルロゴジェネレータ』というサイトで作成したまどかマギカ風ロゴ画像です。

他にも色々なロゴジェネレータは数多くあり、それをまとめて紹介されているサイトもあるので参考にしてみてください。

『アニメ風のロゴ作成ジェネレーターまとめ 27』:http://prime-time.info/index.php?QBlog-20121215-1

『ロゴジェネレーターまとめ』:http://girlsnet.ninpou.jp/logo.html

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

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑