ベストアンサー

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

2014/09/10 09:54

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

bobmaje
お礼率65% (60/92)

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

回答全件

ベストアンサー

ウェブページで、「見出し部分(例えばh3)を飾りたい」ということですね…

2014/09/10 11:22

みんなの回答 （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>

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

画像にテキスト文字
あるホームページに画像を貼り付け、そこにHTMLでテキスト文字を入れたのが添付画像です。私はテキスト文字を中央に配置したいのですが、そのやり方がわかりません。画像にHTMLでテキスト文字を入れるとき、その配置方法はどうするのでしょうか？例えば、イラストレーターでは、中央配置にしたり、座標で正確な位置を決めれます。同じようなことは、HTMLでは無理なんでしょうか？よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
ワードにテキスト画像を貼り付けると文字がにじむ、かすれる
こんにちは。昨日テキスト画像を作成しワードに貼り付けをしていました。その時には問題なく画像の文字もはっきりと鮮明に見えていました。しかし、本日ワードファイルを開いてみると、文字が全く見えなくなっていました＞＜黒いインクが出ていない感じで、かすれてにじんでしまって全く読めません。元のgif画像をフォトショップなどで開いたり、新たにワードを作成して同じ画像を貼り付けても結果は同じでした。何か解決策はありますでしょうか？よろしくお願い致しますm(__)m
- ベストアンサー
- オフィス系ソフト
テキストを画像に
テキストを画像に PS3でテキストを見るために、大量の文字（約３万）をjpgやgif形式の画像にしたいのですが、いい感じのソフトウェアが見つかりません。皆さんが知っている「これは便利」というソフトウェアを知りませんか？
- 締切済み
- その他(ソフトウェア)
画像とテキストを一列に並べる。高さを画像の真ん中に
Wordで画像とテキストを一列に並べて書く際、添付画像のようになってしまいます。画像の下辺に合わせた位置にテキストが配置されます。そうではなく、高さ的に画像の中央にテキストを配置したいのですが、可能でしょうか？アドバイスよろしくお願い致します。
- ベストアンサー
- Word（ワード）
テキストを画像に
ホームページ作成初心者です。よろしくお願いします。文字を画像にしたいのですが、イラストレーター等で文字を入力してそれを画像にすると、どうもボヤけたように見えます。（小さい文字など特に。アウトライン化しても。）たまに、見た目はテキスト入力（？）しているように見えて、実際は画像というものを見かけます。その方法を試してみたいのですが、どのようにすればよいのでしょうか？なにか特別なソフトは必要でしょうか？正式な名称や、方法が全く分からず、あいまいな内容の質問で申し訳ありませんがよろしくお願いします。当方　ビルダー１０、ドリームウィーバーＭＸをホームページ作成に使っています。ちなみに、ドーリームウィーバーは、まだほとんど使いこなせていません。
- ベストアンサー
- ホームページ作成ソフト
添付の画像のテキストの折り返しが四角にならない
Wordの文書にある画像の一つをコピーし、別ファイルのWordに貼り付けました。その画像のテキストの折り返しを四角に設定しましたが左側に文字列が回り込みません。（添付画像をご覧ください。）同じWordの文書の他の画像は、問題なく四角になります。そのようになった経験のある方はおられますか? その原因と折り返しを四角にする、すなわち、左側に文字列を回り込ませる方法をご存知の方教えて下さい。ちなみにWord2003、2007、2010のいずれのバージョンでも同じようになります。
- ベストアンサー
- その他MS Office製品
illustratorで画像のようなテキストを……
illustrator CS5を使っています。テキストを縁取りする方法はわかるのですが、添付画像（上）のように、右下の方の縁を太くして、テキストを立体的に見せるにはどうすればよいでしょうか？できればテキストをアウトライン化せずにこのような加工をしたいのですが、できますか？ドロップシャドウを使ってみたのですが、文字の縁とシャドウに段差ができてしまい（添付画像下）、きれいになりません。角を丸くきれいに見せたいんです……。どなたか教えてください。（イラレ初心者なので、お手やわらかにお願いします＞＜）
- ベストアンサー
- 画像・動画・音楽編集
画像で背景透明のテキストがにじむのです
こんにちは。いつもお世話になります。 webのバーをイラストレーターCS3で作成してます。別途、背景に模様の画像を配置しておるのでここは背景が透明のテキストだけの「画像」にしたいのですが gifで保存をいくら試しても文字がぎざぎざしてしまいます。 pngでも変わらず。背景の画像が黒っぽいので、テキストは白で 0.5～1ほど黒の縁取りをしたりしても同じです。画像にせずテキストのみのバーにしてもいいのですがデザイン上ちょっと避けたいのです。なんとか解決策は無いでしょうか。もしかしたらとんでもなく初歩的なことを聴いてて恥ずかしいのですがちょっと急ぎで困ってます。よろしくお願いいたします。
- ベストアンサー
- CSS
テキストを画像に自動変換
皆さまこんにちは。ネット上で、テキスト入力したものを「変換」というボタンなどをおすことで、そのテキストを画像出力したいとおもっています。－－－－－－－－－－－－－－－－入力したテキスト文字を画像化（できればモノクロGIF、フォントはMSゴシックやOsakaなど）　　↓ 画像として保存－－－－－－－－－－－－－－－－このような挙動を実現するためにはどのようなプログラム・環境を準備するべきでしょうか…？どなたか教えてください。
- ベストアンサー
- PHP
Wordのテキストボックスの文が消えてしまいます
テキストボックスや画像が入ったWordの文章をPDF化したところ、添付画像のようにテキストボックス内の文字が一部消えてしまいます。原因に思い当たる方いらっしゃいましたらご教示願います。
- ベストアンサー
- その他MS Office製品

logitec LDR -PMH8U2PBKを購入しましたが、DVDが再生できません。どうすれば良いですか？

2023/10/14 01:25

このQ&Aのポイント

logitec LDR -PMH8U2PBKを購入してAndroid12のスマートフォンに接続しましたが、Logitec DVD Playerアプリを起動してもDVDが再生できません。対象のドライブを接続してくださいと表示されます。
購入したlogitec LDR -PMH8U2PBKをAndroid12のスマートフォンに接続し、Logitec DVD Playerアプリを起動してもDVDが再生できません。ドライブを接続してくださいと表示されます。
logitec LDR -PMH8U2PBKを購入しましたが、Android12のスマートフォンでLogitec DVD Playerを使用してDVDを再生すると、対象のドライブを接続してくださいというメッセージが表示されます。

回答を見る