Webデザイン事務所のKappAmigo

 
   

WordPressのグローバルナビ(navi)を画像に置き換える方法

WordPressのナビを画像に置き換えようとしても、文字が表示されることがあります。

グローバルナビ(navi)の画像から文字が見えている

これは「外観」→「メニュー」の中でナビゲーションラベルとういものが表示されているからです。
ちょっと、変なので文字は表示させたくないですよね。

ナビゲーションラベル

だったら、ナビゲーションラベルを消せば良いのか! と思うかもしれませんが、消してしまうとメニューからその項目が削除されてしまいます。

ナビゲーションラベルを変えて画像に置き換える

ナビゲーションラベルにリンク、画像URLを入力する方法があります。

[html]
<a href="リンク先"><img alt="代替文字" src="画像URL" width="横幅" height="縦" /></a>
[/html]

というふうにすると、画像に置き換えられます。
名前がリンク、画像のURLになってしまうので「なんのメニューだったっけ?」となってしまうのが難点ですが、HTMLが分かればできるので、一番簡単な方法かなと思います。

CSSで設定をする

私が使っているのはCSSで設定するやり方です。

画像は表示されるけど、文字も表示されてしまうという方は、CSSが

[css]
nav ul li#menu-item-1304 a{
display: block;
background: url(images/home_nav.png) no-repeat left center;
width: 119px;
height: 110px;
}
[/css]

こんなかんじになっているんじゃないでしょうか?

「ここまでさえできない!」という方に簡単に説明しておきます。
リストに「id」が自動でついていると思いますので、その「リンク(a)」に対してCSSを設定します。

display: block; 「a」タグはインライン要素ですが、ブロックレベル要素に変換しています。

background: url(images/home_nav.png) no-repeat left center; 背景画像を設定し、no-repeat(繰り返しなし)、left center(位置を左寄せ、上下は中央に配置)。

width、height: 縦横のサイズを設定しています。

そこに

[css]
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
[/css]

を追加するだけで表示されなくなります。

text-indent: 100%; テキストを枠外に飛ばします。

white-space: nowrap; white-space(ホワイトスペース)はスペースや改行などを指定するCSSです。nowrapを指定しないとボックスのサイズに合わせて改行されますが、指定すると改行を禁止します。

overflow: hidden; ボックスからはみ出た部分を非表示にします。

グローバルナビを画像に置き換える

これで、上の方にはみ出ていた文字が消えて画像だけのグローバルナビができます。

1つ1つのナビに画像を設定する場合は、それぞれのリストの「a(リンク)」にCSSを設定しましょう。

«

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ページTOPへ