質問: 小タイル「画像バックで、テキスト」にしたい ホームページの小タイルに添付画像のように 「画像バックで、テキスト」の組み合わせを入れたいのですが、 この組み合わせのことをなんというかわかりません。 完全にテキスト情報なし(文字も画像組込)、gifなどならわかります。 テキスト情報を残して、バックが画像の組み合わせをつくりたいです。 ホームページは、ワードプレスを使用しています。 プラグイン等で対処できるのでしょうか?
回答: ウェブページで、「見出し部分(例えばh3)を飾りたい」ということですね。 あくまで、そのように考えるのがポイントです。 例えば、下記のようなhtmlがあったとします。 けっして、デザイン目的でhtmlは書かない!!後でデザイン変更できなくなります。 このページのタイトル ========== ナビゲーション 本文 ### 欠席された理由について 記事の段落 ### サブ項目 記事の段落 ### サブ項目 記事の段落 記事のフッタ スタイルシートで、デザインをしたい要素を文書構造に従ってセレクタで指定して、スタイルを書くことになります。 [例] 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-html401j/intro/intro.html#h-2.4.1 ) 【全文です】 ★another html lint - gateway( http://www.htmllint.net/html-lint/htmllint.html# ) で検証済みのhtml4.01strict + css3 ★タブは_に置換してあるので戻す。 _ _サンプル _ _ _ _ _ _ _ __タイトル ==== __このページでは・・・・ _ _ __見出し __本文はsection __ ___本文 ___ ____### 欠席された理由について ____記事の段落 ___ ___ ____### サブ項目 ____記事の段落 ___ ___ ____### サブ項目 ____記事の段落 ___ __ _ __文書情報 __ ___first published ___2013-03-03 __ _