ウェブ家の備忘録

ウェブデザイナーの備忘録

タイトル用の画像の上に文字を載せるコード

PHP HTML CSS

実行結果
サブタイトル


<style>
.example {
  position: relative;
}
.example p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /* 文字装飾は省略 */
}
.example img {
  width: 100%;
}
</style>

<div class="example">
  <img src="(文字乗せる用に編集した画像).jpg" />
  <center><p>
    <font size="6px"><b>実行結果</b></font>
    <br><font color="green"><b>サブタイトル</b></font>
  </p></center>
</div>

下記は私の仕事用のコード。スマホとタブレットとPCで表示分けるためにPHPでHTML扱いました。可読性は期待しないで。
コメントにPHPを使う理由はブラウザに乗っけた時にソースに残らないからです。


<?php /* ■■■↓↓↓タイトル↓↓↓■■■ */ ?><?php /*190502*/ ?>

<?php
$image="■■■.jpg";
$title="■■■";
$titleFontSize="6px";
$titleFontSizeSmartphone="4px";
$subTitle='<br><font color="green"><b>■■■</b></font>';
?>
<?php
//タブレット・PC用
$css='
<style>
.example {position: relative;}
.example p {position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0;
  /* 文字装飾は省略 */
}
.example img {width: 100%;}
</style>
';
?>

<?php $ua = $_SERVER['HTTP_USER_AGENT']; if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) { ?>
  <?php /* ●スマホ● */ ?>
  <?= $css; ?>
  <div class="example">
    <?= '<img src="' . $image . '" />'; ?>
    <center><p><?= '<font size="' . $titleFontSizeSmartphone . '">'; ?><b><?= $title; ?></b></font></p></center>
  </div>

<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?>
  <?php /* ●タブレット● */ ?>
  <?= $css; ?>
  <div class="example">
    <?= '<img src="' . $image . '" />'; ?>
    <center><p><?= '<font size="' . $titleFontSize . '">'; ?><b><?= $title; ?></b></font><?= $subTitle; ?></p></center>
  </div>

<?php } else { ?>
  <?php /* ●PC● */ ?>
  <?= $css; ?>
  <div class="example">
    <?= '<img src="' . $image . '" />'; ?>
    <center><p><?= '<font size="' . $titleFontSize . '">'; ?><b><?= $title; ?></b></font><?= $subTitle; ?></p></center>
  </div>
  
<?php } ?>

<?php /* ■■■↑↑↑タイトル↑↑↑■■■ */ ?>

行数は悪という思考で作られたコピペ用ソース


<?php /* ■■■↓↓↓タイトル↓↓↓■■■ */ ?><?php /*190502*/ ?>
<?php
$image="■■■.jpg";
$title="■■■";
$titleFontSize="6px";
$titleFontSizeSmartphone="4px";
$subTitle='<br><font color="green"><b>■■■</b></font>';
?>
<?php /*タブレット・PC用css*/ $css='<style>.example {position: relative;} .example p {position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0;}.example img {width: 100%;}</style>';?><?php /* ●スマホ● */ ?><?php $ua = $_SERVER['HTTP_USER_AGENT']; if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) { ?><?= $css; ?><div class="example"><?= '<img src="' . $image . '" />'; ?><center><p><?= '<font size="' . $titleFontSizeSmartphone . '">'; ?><b><?= $title; ?></b></font></p></center></div><?php /* ●タブレット● */ ?><?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?><?= $css; ?><div class="example"><?= '<img src="' . $image . '" />'; ?><center><p><?= '<font size="' . $titleFontSize . '">'; ?><b><?= $title; ?></b></font><?= $subTitle; ?></p></center></div><?php /* ●PC● */ ?><?php } else { ?><?= $css; ?><div class="example"><?= '<img src="' . $image . '" />'; ?><center><p><?= '<font size="' . $titleFontSize . '">'; ?><b><?= $title; ?></b></font><?= $subTitle; ?></p></center></div><?php } ?>
<?php /* ■■■↑↑↑タイトル↑↑↑■■■ */ ?>

190617追記。文字背景追加など。


<?php /* ▼▼▼タイトル▼▼▼ */ /*190617*/ ?>
<?php
$image="■.jpg";
$title="■";
$titleBold=false;
$titleFontSize="6px";
$titleFontSizeSmartphone="4px";
$subTitle='<br><font color="green">■</font>';
$trTF=true;//TF:文字背景透過するか
$translucent='background-color: rgba( 255, 255, 255, 0.8 );';
if($trTF){$title='　　'.$title.'　　';}

//タブレット・PC用
$css='
<style>
.example {position: relative;}
.example img {width: 100%;}
.example p {position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; font-family: Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /* 文字装飾は省略 */
}
</style>
';
if($trTF){$css=$css.'<style>.example p {'.$translucent.'}</style>';}

//出力
$ua = $_SERVER['HTTP_USER_AGENT']; if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
  /* ▼▼▼スマホ▼▼▼ */
  echo $css;
  echo '<div class="example">';
    echo '<img src="' . $image . '" />';
    echo '<center><p><font size="' . $titleFontSizeSmartphone . '">'; if($titleBold){echo '<b>';} echo $title; if($titleBold){echo '</b>';} echo '</font></p></center>';
  echo '</div>';
  /* ▲▲▲スマホ▲▲▲ */
} elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) {
  /* ▼タブレット▼▼▼ */
  echo $css;
  echo '<div class="example">';
    echo '<img src="' . $image . '" />';
    echo '<center><p><font size="' . $titleFontSize . '">'; if($titleBold){echo '<b>';} echo $title; if($titleBold){echo '</b>';} echo '</font>'. $subTitle . '</p></center>';
  echo '</div>';
  /* ▲▲▲タブレット▲▲▲ */
} else {
  /* ▼▼▼PC▼▼▼ */
  echo $css;
  echo '<div class="example">';
    echo '<img src="' . $image . '" />';
    echo '<center><p><font size="' . $titleFontSize . '">'; if($titleBold){echo '<b>';} echo $title; if($titleBold){echo '</b>';} echo '</font>'. $subTitle . '</p></center>';
  echo '</div>';
  /* ▲▲▲PC▲▲▲ */
}
?>
<?php /* ▲▲▲タイトル▲▲▲ */ ?>


<?php /* ▼▼▼タイトル▼▼▼ */ /*190617*/ ?>
<?php
$image="■.jpg";
$title="■";
$titleBold=false;
$titleFontSize="6px";
$titleFontSizeSmartphone="4px";
$subTitle='<br><font color="green">■</font>';
$trTF=true;//TF:文字背景透過するか
$translucent='background-color: rgba( 255, 255, 255, 0.8 );';
if($trTF){$title='　　'.$title.'　　';}

$css='<style>.example {position: relative;}.example img {width: 100%;}.example p {position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; font-family: Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}</style>';if($trTF){$css=$css.'<style>.example p {'.$translucent.'}</style>';}  $ua = $_SERVER['HTTP_USER_AGENT']; if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {  echo $css;  echo '<div class="example">';    echo '<img src="' . $image . '" />';    echo '<center><p><font size="' . $titleFontSizeSmartphone . '">'; if($titleBold){echo '<b>';} echo $title; if($titleBold){echo '</b>';} echo '</font></p></center>';  echo '</div>';} elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) {  echo $css;  echo '<div class="example">';    echo '<img src="' . $image . '" />';    echo '<center><p><font size="' . $titleFontSize . '">'; if($titleBold){echo '<b>';} echo $title; if($titleBold){echo '</b>';} echo '</font>'. $subTitle . '</p></center>';  echo '</div>';} else {  echo $css;  echo '<div class="example">';    echo '<img src="' . $image . '" />';    echo '<center><p><font size="' . $titleFontSize . '">'; if($titleBold){echo '<b>';} echo $title; if($titleBold){echo '</b>';} echo '</font>'. $subTitle . '</p></center>';  echo '</div>';}
?>
<?php /* ▲▲▲タイトル▲▲▲ */ ?>