利用規約の変更について

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

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

このQ&Aに関連する最新のQ&A

A 回答 (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; /* 左に2文字 */
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">
<!--
html,body{margin:0;padding:0;}
body{background-color:gray;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;background-color:white;}
div.section div.section{min-width:0;width:95%;margin-right:0;}

/* ここから */
div.section div.section h3{
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{
content:"| ";
font-weight:bold;color:red;
}
div.section div.section h3:after{
content:"■■";
letter-spacing:-5px;
color:aqua;
z-index:-1;
position:relative;
left:-2em;
font-size:1.1em;
}
-->
_</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>
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング