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

関連記事

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

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

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

livedoorblogのタグのページが404 Not Found

別のブログとしてライブドアのものを使っているのですが、タグを編集していた際に特定のタグ一

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

さくらとロリポップのcronについての比較

私は今さくらのレンタルサーバーとロリポップのレンタルサーバーを両方試してみているのですがそのcron

記事を読む

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

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

記事を読む

かわいい女の子のアイコンやアバター画像を作れるサイト

TwitterやFacebookなどでアイコンが欲しくなることってあるかと思います。私も色々検索して

記事を読む

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

→もっと見る

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