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

関連記事

美人画像を表示してくれるブログパーツまとめ

美人時計など有名なものもありますが、美人画像を表示してくれるブログパーツをまとめました。暦や時刻を表

記事を読む

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

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

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

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

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

記事を読む

さくらサーバーにフォルダをアップロードする方法

さくらサーバーにフォルダをアップロードする…という機能は無いみたいで個別にFTPソフトを使う必要があ

記事を読む

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

LinkWithinについて ブログに関連記事を表示するパーツ『LinkWithin』を紹介します

記事を読む

指定URLのWebサイトの画面全体をキャプチャする方法

Webサイトのスクリーンショットを撮る方法としてはいくつかありますが、各方法ごとに調べたものを紹介し

記事を読む

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

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

記事を読む

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

後で読みたい記事を保存することのできるPocketのソーシャルボタンの設置方法についてです。このボタ

記事を読む

【PHP】Twitterのツイート数やはてぶ数を取得する

指定URLのTweet数の取得 Twitterでツイート数を取得するには指定のURLにアクセスする

記事を読む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

→もっと見る

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