【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

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

関連記事

ブログのコメント欄をTwitterやFacebook、はてなのコメントで代用する方法

最近になってコメント欄にスパムっぽいものが大量に飛んでくるようになったのでどうにかしないと、と思い一

記事を読む

【CSS】beforeのcontentで改行する

.bsample1:before{ content:"★参考★\A"; } .bsampl

記事を読む

なるべく安くロリポップを申し込む方法

ロリポップというレンタルサーバーは元々比較的安く、よくキャンペーンなどで割引をやっているので安価にC

記事を読む

関連記事を表示するブログパーツまとめ

これまでいくつか関連記事を表示させる方法について記事を3つの記事投稿してきましたが、ここで簡単にまと

記事を読む

Twitterのフォロワーが有効かどうか評価するツール

ツイッターの自分のフォロワーがスパムや活動休止中か判定することのできるツールに『Status Peo

記事を読む

FC2ブログからWordPressへの引っ越しについて

今までFC2ブログでメモを残していましたが、WordPressに移行することにしました。理由としては

記事を読む

お名前.comのでサブドメインを取得してロリポップで使う方法

タイトルどおりなのですがお名前.comで取得した独自ドメインからサブドメインを取得し、ロリポップで使

記事を読む

ソーシャルボタンをブログやサイトに設置する方法

TwitterやFacebookなどのソーシャルボタンを付ける方法です。ソーシャルボタンを付けるには

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

関連記事を表示させるブログパーツOutbrainの導入方法

関連記事を表示させるブログパーツOutbrainの紹介です。 このOutbrainの長所は

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

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