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

解決済

質問者：bobmaje
質問日時：2014/09/10 09:54
回答数：1件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2014/09/10 11:22

ウェブページで、「見出し部分(例えば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-html4 … )

【全文です】
★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>