【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
  • このエントリーをはてなブックマークに追加

関連記事

DSC_04611-600x401

【さくらサーバー】htaccessを使って拡張子無しでアクセスする

さくらサーバーで拡張子なしのアクセスする方法について非常に苦労したのでつづっておきます。私は

記事を読む

41e9FqN1XjL._AA180_

人気記事表示ブログパーツの忍者レコメンドを使ってみる

忍者レコメンドとは 今回は忍者レコメンドという人気記事表示のブログパーツを紹介します。忍者レコメン

記事を読む

wwwimage

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

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

記事を読む

_rtm0919_tp_v

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

adobe-blueprint-15

【CSS】:hover疑似クラスで指定要素とは別の要素にスタイルを適用する

CSSの「:hover」疑似クラスを使えばマウスオーバー時にその要素に対して何らかのスタ

記事を読む

zenbackcomment1

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

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

記事を読む

zenbackpage

関連記事を手軽に表示できるzenbackの導入方法

関連記事を手軽に表示できるZenbackというサービスの紹介です。 関連記事の表示を手助けして

記事を読む

61m2fdbtoTL._AA180_

ニコニコ動画の検索APIについて調べたのでメモ

ニコニコ動画にはAPIがあり、動画の情報(タイトルとか再生数とか)を取得したり、ランキング情報(RS

記事を読む

06e31cae7a98a98fc5ad6d5a5f2bef0a_s

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

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

記事を読む

question

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

encodingtype
【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

_rtm0919_tp_v
スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

rssimage
【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

rssimage
フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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