重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：bobmaje
  • 質問日時：
  • 回答数：1件

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

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

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

ウェブページで、「見出し部分(例えば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">
<!--
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が見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報