ベストアンサー

小タイル「画像バックで、テキスト」にしたい

2014/09/10 09:54

ホームページの小タイルに添付画像のように　「画像バックで、テキスト」の組み合わせを入れたいのですが、　この組み合わせのことをなんというかわかりません。　完全にテキスト情報なし（文字も画像組込）、GIFなどならわかります。　テキスト情報を残して、バックが画像の組み合わせをつくりたいです。　ホームページは、ワードプレスを使用しています。プラグイン等で対処できるのでしょうか？

bobmaje
お礼率65% (60/92)

ホームページ作成ソフト
回答数1
ありがとう数8

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/09/10 11:22 回答No.1

ウェブページで、「見出し部分(例えばh3)を飾りたい」ということですね。あくまで、そのように考えるのがポイントです。例えば、下記のようなHTMLがあったとします。　けっして、デザイン目的でHTMLは書かない!!後でデザイン変更できなくなります。 <body> 　<div class="header"> 　　<h1>このページのタイトル</h1> 　　<div class="nav">ナビゲーション</div> 　</div> 　<div class="section"> 　　<h2>本文</h2> 　　<div class="section"> 　　　<h3>欠席された理由について</h3> 　　　<p>記事の段落</p> 　　</div> 　　<div class="section"> 　　　<h3>サブ項目</h3> 　　　<p>記事の段落</p> 　　</div> 　　<div class="section"> 　　　<h3>サブ項目</h3> 　　　<p>記事の段落</p> 　　</div> 　</div> 　<div class="footer"> 　　<h2>記事のフッタ</h2> 　</div> </body> スタイルシートで、デザインをしたい要素を文書構造に従ってセレクタで指定して、スタイルを書くことになります。 [例] div.section div.section h3{ /* sub sectionの見出し */ border:gray solid 1px;/* 枠を描く */ border-radius:5px;/* 丸める */ background: linear-gradient(white,silver);/* 背景を線形グラデーション */ padding:5px;/* 枠とのすきま */ position:relative;/* 位置の基準 */ z-index:10;/* 手前に */ } div.section div.section h3:before{/* sub sectionの見出しの前に */ content:"| ";/* 文字を追加する */ font-weight:bold;color:red;/* 太字で赤 */ } div.section div.section h3:after{/* sub sectionの見出しの後にに */ content:"■■";/* 文字を追加、画像の場合はurl()となる */ letter-spacing:-5px;/* 字間を縮めて */ color:aqua;/* 色を指定して */ z-index:-1;/* 後にまわす */ position:relative;/* 本来の位置より */ left:-2em; /* 左に２文字 */ font-size:1.1em;/* 少し大きめに */ } と言う風に。　あなたのHTMLの文書構造が分からないので、実際のHTMLソースを見てセレクタ記述する。　文書構造をマークアップするHTMLとどのように表現するかのプレゼンテーションは、独立していますから、HTMLは率直なもので良いです。スタイルシートにすべて任せましょう。参考) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 【全文です】 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　で検証済みのHTML4.01strict + CSS3 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h2>本文</h2> ＿＿＿<div class="section"> ＿＿＿＿<h3>欠席された理由について</h3> ＿＿＿＿<p>記事の段落</p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>サブ項目</h3> ＿＿＿＿<p>記事の段落</p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>サブ項目</h3> ＿＿＿＿<p>記事の段落</p> ＿＿＿</div> ＿＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>