- ベストアンサー
文字入りの画像を複数作りたいのですが。
添付画像のような感じでメンバー紹介のための画像を作りたいと考えています。 しかし、メンバーが多いので 文字の位置・サイズ・フォントを固定して、 半透明の白い四角形とカギカッコも固定で、 画像の選択と文字の入力だけで類似のものをたくさん作成できる、 ジェネレーター的なものがあればいいなと考えています。 何か良い方法はありませんか？ 現在、自分が考えているのは、ホームページ・ビルダーで 画像の上に文字を挿入していって、それぞれの位置を合わせていく という方法ですが、これでは手間が掛かり過ぎるので 少しでも簡略化できないかと思い質問させていただきました。 よろしくお願いいたします。
- 0-dog
- お礼率33% (50/149)
- 画像・動画・音楽編集
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
たとえビルダーを使おうと、HTMLやCSSの知識は必要ですよ。それどころか、テキストエディタで作成する以上にHTMLやCSSの知識が必要です。 なぜなら、HTLには文書構造だけを書き、スタイルシート(CSS)はプレゼンテーションを書くものですから、ツールでは不可能なのです。 HTMLでは、<h1>ここは見出し</h1><p>ここから段落。続き・・</p><p><p>新しい段落で<strong>重要</strong>と言うように、機械でもスクリーンリーダーでも中身が分かるようにマークアップするのがHTML。そしてh1{font-size:200%;}とどのように表現するかがスタイルシート。【文書の内容を読み取って理解して最適なタグを選択】なんてツールにはできるはずもありませんし、div.section p{color:green;}なんて「本文中の段落の文字は緑」なんて指定もツールには不可能です。そのうえに、それぞれのツールの欠点や癖をマニュアルを読んで理解しないとならないという余計な知識も必要。 ★お仕着せのデザインをそのまま使うのでない限り、ツールは使わないほうが簡単です。 手抜きしたいならテキストエディタで書く事です。 [サンプル] ※タブは＿に置換してあるので戻す。 ※スタイルシートはまた後で暇が出来たら・・ (用意する物) ・840px程度の幅の背景となる画像 ・すべての画像を見るの部分の画像100px□に円形の透明GIF ・同様なデータを書いたHTMLをいくつか・・ <!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"> <!-- 共通なスタイルシートを読み込む --> ＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/aa.css"> ＿<style type="text/css"> <!-- /* 画像だけここで書き換える */ div.section{background-image:url(./images/picture/kukimonshiro.png);} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>細かい事は言わん。だまって我についてこい。</h1> ＿＿<p><a href="./all.html">画像全体を見る</a></p> ＿</div> ＿<div class="section"><!-- 本文(section)内を書き換える --> ＿＿<h2>九鬼紋白(くきもんしろ)</h2> ＿＿<p>CV </p> ＿＿<dl id="profile"> ＿＿＿<dt>身長</dt><dd>148センチ<dd> ＿＿＿<dt>3サイズ</dt><dd>76 53 77</dd> ＿＿＿<dt>血液型</dt><dd>B型</dd> ＿＿＿<dt>誕生日</dt><dd>12月1日</dd> ＿＿＿<dt>あだ名</dt><dd></dd> ＿＿＿<dt>好きな食べ物</dt><dd>金平糖</dd> ＿＿</dl> ＿</div><!-- ここまでを好きに書き換える --> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
なるほど!！ テキストで書けばかなり楽ですね。 おもいつきませんでした。採用させて頂きます。 早速の回答、非常に助かりました。 どうもありがとうございます。