Webサイト制作

投稿日:2017年4月17日 更新日:

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml
<h1 class="sitename"><a href="http://~">サイト名</a></h1>
で、こちらがスタイルシート
.sitenameS a{
	display:block;
	width:320px;
	height:320px;
	background:url(http:画像のパス)no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	}
widthとheightは置換画像のサイズに合わせて指定してください。

- Webサイト制作
-

関連記事

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 目次1 まずはHTMLでメニュー作成2 スタイル ...

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...

スライドショーの画像を切り抜いたように表示する

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回 ...

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...