Web備忘録

ｃｓｓスクロール（擬似インラインフレーム）

表示例

2006.07.25
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text

2006.06.25
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text

2006.05.25
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text

2006.04.25
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text

2006.03.25
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text

ソース

<style type="text/css">
<!--
body{
  margin: 0;
  }
  
div.textbox{
  font-size: 10pt;/*全体の文字サイズ*/
  color: #212125;/*全体の文字色*/
  margin: 0 10%;/*左の余白*/
  width: 570px;/*全体の横幅*/
  height: 100%;/*全体の高さ。コンテンツ量によって増やしてください。*/
  }

.waku-2{/*見出し枠の設定*/
  font-size: 9pt;
  color: #FFFF99;
  background-color: #990000;
  padding: 10px 5px 5px 5px;/*waku内の余白*/
  }

.waku-1{/*外枠全体の設定*/
  background-color: #EFEFF2;/*背景色*/
  padding: 5px 10px;

  }
.waku-3{
  background-color: #FFFFFF;
  border: solid 1px #777785;/*枠色*/
  }
.waku-1 .diary{/*Diary部分の設定*/
  padding: 5px;
  height: 100px;/*高さ*/
  overflow: auto;
  scrollbar-3dlight-color: #FFFFFF;/*□上と左の線の色*/
  scrollbar-arrow-color: #990000;/*▲の色*/
  scrollbar-darkshadow-color: #FCFCFD;
  scrollbar-face-color: #FFFFFF;/*背景色*/
  scrollbar-highlight-color:#FCFCFD;
  scrollbar-shadow-color: #ABABAC;/*□下と右の線の色*/
  scrollbar-track-color: #FFFFFF;
  }
/* For IE Box */
*{ box-sizing : border-box}
*{ -moz-box-sizing : border-box}
-->
</style>

</head>
<body>

<div class="textbox">
<div class="waku-1">
<div class="waku-3">
<div class="waku-2">&lt;見出し、タイトルとか&gt;</div>
<div class="diary">
2006.07.25<br>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
<br>
2006.06.25<br>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
<br>
2006.05.25<br>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
<br>
2006.04.25<br>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
<br>
2006.03.25<br>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br>
</div>
</div>
</div>

</div>
</div>

</body>

HTTP-EQUIV=KeyWords　について

meta name="keywords"はHTTP-EQUIVとほとんど一緒
HTML Response Headerとしてのやり取りは行われないという違いあり

HTMLメルマガについて

■HTMLメールへの切替えの注意点

【メリット】
ユーザーに与えるインパクト大
開封率を測定できる
アンケートなどのフォームを本文中に入れることもできる
＝ブラウザーを開かなくてもその場で質問内容がわかるので、ユーザーの回答率向上が期待できる

【デメリット】
ストレス、負荷
無断計測のPP問題
オプトインを再確認する手間がかかる
メールソフト設定をNGにしているユーザーへの対策要

■HTMLメールの配信方法

①ファイル添付型
HTMLメールインターネットに接続していなくても、直ぐに画像を見ることができるファイル添付によるウイルス拡散の危険性があるメールサイズが大きい
↓
あまり良くない

②フルパス型
HTMLメールメールサイズが小さいファイル添付によるウイルス拡散の危険性がないインターネットに接続していないと、画像などが表示されない
↓
文字やレイアウト情報だけを電子メールで送り、画像ファイルは電子メールが読まれたときにサーバーからダウンロードしてもらう「フルパス型HTMLメール」。この時、ファイルのダウンロードの有無を調べるとメールの開封状況が分かる。

※無断で計測するのは問題との指摘もあるので、計測することをあらかじめプライバシーポリシーなどに入れておいた方がよい。

■HTMLメール切替え時の注意点：テキスト、HTMLを選べるように（マルチパート配信）

□マルチパート配信---------------------------------------------
　HTMLが表示できるメーラー（ＭＳアウトルック等）の方はHTML形式
　で表示、textのみのメーラーの方へはtext形式で表示する
---------------------------------------------------------------

HTMLメールに対応していない古いメールソフトを使っている人や、
HTMLメールに対応していてもテキスト形式で受信するようメールソフトを設定している人
への対策↓
テキストとHTMLメールをユーザーが選べるようにしたほうがよい。
また、すでに送っているテキストのメルマガをHTMLメールに変更する場合には、オプトイン
を再確認する必要がある。切替え方法としては次の3つの方法が一般的。

ｃｓｓスクロール（擬似インラインフレーム）

HTTP-EQUIV=KeyWords について

HTMLメルマガについて

HTTP-EQUIV=KeyWords　について