Webサイト制作日報

2018/11/11(sun)　朝までWebってますｗ

ウェブサイトに、YouTubeをiframeで貼るのは良いのですが、
YouTubeの再生終了後に、別の関連動画が映し出されるのは痛いですよね・・・
以前は、オプションや?rel=0タグなりで非表示にしていたのですが、
あれ？ 表示されている！
YouTube公式によると、Googleさんの方針で効かなくされてしまったようです・・・

<dd class="frame-wrapper__video">
<iframe width="560" height="315"
 src="https://www.youtube.com/embed/〜〜?rel=0"
 frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</dd>

/* CSS  YouTube 幅100％レスポンシブ */
.frame-wrapper__video {
  position: relative;
  width: 100%; height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}
.frame-wrapper__video iframe {
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0;
}

ついでに上記のCSSは、YouTube レスポンシブ100％表示の例です。

| コメント(0) | HTML | |

m²の記号表示

10m² （10平方メートル）などの記号の表示方法がわからないで、
10m2と書くと意味まで不明になってしまいますよね・・・
かといって、キーボードで変換した機種依存文字もNGですので、
ウェブ上で記号を表示させる場合（不動産屋の物件紹介で利用しますが）、HTMLタグか文字実体参照で表示する事ができます。

m2 → m<sup>2</sup>
m² → m&sup2;

（m²だと、音声ブラウザ的にはNGなマークアップですがｗ）
その他で、立法メートルの表示も m³ → m³　m³ → m³
²　³
span.sup{ vertical-align:super;font-size:80%;}などでも表示可能です。
X²+Y³ , KYON²なんてパターンもありますｗ

ところが、パソコンの各種ブラウザでは問題ないのですが、スマホ(Android)で見た時に、
文字実体参照の²だと一部のブラウザで表示されません。
（これ今頃気付いたのですが、このバグ情報/報告が無い・・・）

左：²　右：²

Y!ブラウザとGoogle Chromeで、²の部分が表示されません。
ベストではないですが、しばらくは、²がベターなようです・・・

<sup>は、大昔にネスケで問題ありましたし、
個人的には、&sup2;の方が小さく行高差がないので好きなのですが、
モバイル版Chromeのレンダリング性能が嫌になってきた・・・

追記（2015/7/22）　これで良いかも

㎡ →  ㎡

| コメント(0) | HTML | |

2014年暮れ
毎年恒例ですが、忙しすぎて想像する方の脳が半分逝ってますｗ
作業脳はバリバリで、マシーン化しています！
体も結構ボロボロですが、あと９日間がんばります。

先日、原稿を頂いたのですが、英数字が全部全角でした・・・
（最初にお願いしておいたのに）
ウェブ関係者にとっては信じられない事でしょうが・・・
聞くと、全角と半角がわからないとか！？　慣れの問題でしょうか？
スクリプトで半角に変換できますが、ここは心を鬼にして、
今の全角の文章と、半角の文章を比較するようお願いしました。

ダメでは無いですが、やはり英語や数字は元々の英数字・半角が妥当ではないでしょうか？
丁度、あと数日で年が変わり、年号をメールで書いたりする機会が多くなると思います。
２０１４．１２．２３
2014.12.23
どちらが良いかは見ての通りです。
但し、わざと目立つように全角を使う場合もあります。
上記の例でいえば、見出しを年号にする場合、
2015年
２０１５年
とした方が目立って良いかもしれませんね。ケースバイケースです。
数字が１桁の場合には、全角を利用する場合もあります。
３月　５桁　８枠
3月　5桁　8枠

結論としては、
ユーザーはどちらが読みやすいのだろう？という事で、試に比較してみる事です。

因みに、弁護士先生の原稿で、句点は「、」ではなく「，」です。
これは職業病ｗ（訴状などの規定なのでしょう？）
ウェブサイトでも、あえて全カンマを使った方が職業色が出て良いかもしれませんね。

それでは、良い年をお迎えください。
2015年も宜しくお願いします。

| コメント(0) | HTML | |

Twitterのタイムラインをブログのサイドバーに表示には、
Twitterの管理画面でタイムラインのソースを生成し、ブログに貼り付けます。
Twitterでツイートした最新情報が表示されますので、商用サイトなどで特価情報や最新情報などをツイートしていると無料で有効な宣伝手段になります。

Twitterのタイムラインをブログのサイドバーに表示する方法

1. Twittterの公式サイトにログイン、右上の「歯車」
   
2. プルダウンの「設定」
3. 左サイドバーの「ウィジェット」
4. 右上の「新規作成」
5. 「ユーザータイムライン」のタブで、以下の項目を設定
   • ユーザー名
   • オプション
   • 高さ
   • テーマ
   • リンクの色
6. 下部の「ウィジェットを作成」
7. 生成されたソースコードをコピーする
8. ソースを修正して、ウェブサイトやブログに貼り付け
   例： WordPress
   外観 → ウィジェット
   　右側のウィジェットエリアの▼でソースが出る
   （Tweetableとか便利なプラグインもありますね・・・）

<p><a class="twitter-timeline" href="https://twitter.com/アカウント名"  data-widget-id="乱数" width="238">@アカウント名 からのツイート</a>
<a href="https://twitter.com/アカウント名" class="twitter-follow-button" data-show-count="true" data-lang="ja" data-show-screen-name="false">@アカウント名さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>

width="238"は、サイドバーの幅に合う数値にします。
複数のウィジェットを表示する場合、<script>は１つだけでOKです。

| コメント(0) | HTML | |

2013/8
YouTubeにて、埋め込みコードを表示させると、
iframeのコードは表示されるが、
以前の旧埋め込みコード（object）を表示するボタンがない！
また、YouTubeの仕様変更かｗ・・・

http://www.youtube.com/embed/〜ID〜?
を
http://www.youtube.com/v/〜ID〜?
のように、
/embed/のパスを/v/に変更すれば、
旧埋め込みコードの object＋param にも対応可能です。

| コメント(0) | HTML | |

2012年7月に、
「Another HTML-lint gateway サービス終了か？」
の記事を書いた通り、
惜しまれつつ閉鎖されたと思われたAnother HTML-lint gatewayサービスですが、
先日から再公開されているようです。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
一応、ダウンロードはしてありますが（未インストール）、
こういう有益なサイトは、継続運営してくれるとありがたいですね。

| コメント(0) | HTML | |

HTMLの構文チェックで有名な、Another HTML-lint gateway
本家サイトが2012年7月11日をもってサービスを停止した。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
（数日前からアクセスが出来なかったらしい）
有名サイトでアクセス集中のせいか、たまに落ちていたり、
放置気味でしたが、今回は何か訳ありの閉鎖かも・・・

こんな時の避難所、慶應のミラーサイトにアクセスが集中するが、
昨日（7月12日）、同サービス終了のアナウンス。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
「http://www.htmllint.net/などで提供されている新しいサービスをご利用ください。」
と誘導しているものの、
2011年開始のHTML5用のゲートウェイにもアクセスできない・・・

著作権などの問題が絡んでるのだろうか、
その他のゲートウェイ公開サイトはどうなるのかな？

最近は、エディタ自体で簡易チェックができたりするので、
需要がないのでしょうか。結構使わせてもらいました。

| コメント(2) | HTML | |

Opera ol listのバグに引っ掛かったｗ
序列リスト（olリスト）の中の１行目がブロック要素だと、２行目のインラインが自動改行されず、nowrap状態で枠からハミ出る・・・
ulリストだと問題ない。※ 最新の Opera v12.00 でも確認済 2012/06/17

<ul style="width:150px;">
<li><p>オペラのテスト　オペラのテスト</p>
オペラのテスト　オペラのテスト</li>
<li>オペラのテスト　オペラのテスト
<p>オペラのテスト　オペラのテスト</p></li>
</ul>
<ol style="width:150px;">
<li><p>オペラのテスト　オペラのテスト</p>
オペラのテスト　オペラのテスト</li>
<li>オペラのテスト　オペラのテスト
<p>オペラのテスト　オペラのテスト</p></li>
</ol>

先頭項目として、<h3>などで見出しだけを簡易マークアップすると起る現象ですｗ
手抜きせずに、List内の全てをブロック要素でマークアップ。
（とはいえ、小さなリストなら良くあるパターンかも・・・）
今回は、List内を定義リストでマークアップし直して回避しました。（これもIE6-7でバグる）

ブロック要素に続くテキストをブロック要素にしていないのが問題ですが、
１行目のブロック要素を display: inline; でも回避だけならできるかな。

List関係のバグは、旧IEも酷いですが、
Operaでも、olリストをネストすると番号が違ってくるバグもあります。

| コメント(0) | HTML | |

取引先の商品紹介の動画らしいのですが、新記事追加の際、
YouTubeの動画埋め込みコードを取得したら、iframeになっていた。
旧コードのobjectタグ＋embedも取得できますので書き換えました。

<iframe width="640" height="360" src="URL" frameborder="0" allowfullscreen></iframe>

<object style="height: 360px; width: 640px">
<param name="movie" value="URL">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="URL" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object>

<object data="URL" type="application/x-shockwave-flash" width="640" height="360">
<param name="movie" value="URL" />
<param name="wmode" value="transparent" />YouTube</object>

ついでに調べてみましたが、参考サイト： 成功例/失敗例が興味深いです。

| コメント(0) | HTML | |

某サイトのリニューアルに伴い
ディレクトリの変更やら画像分けと画像名変更など、
制作というより画像を確認しながらの手作業、結構大変です・・・
（忘れていたが、canonicalも変更しなければ）

メインの数ページは、XHTMLだが、
子ページはクラさんが自己編集し易いようにHTML4.01で作った。
（元々もHTML4.01で、ホームページビルダー14を利用との事で）
でも、やっぱXHTMLにしておくべき。※ 後で設定変更を教えてあげないと。

ところが、既に子ページの1/3ファイル（20ページ）程度をHTML4.01で制作済み・・・
とりあえず、DTDと半角スペース＋スラッシュ
DWでドキュメント設定を変えるだけだったかな？ 忘れた。
いや、正規表現で全ファイルを置換えしてやれ！
（置換機能は毎回慎重に行う・・・）

置換機能

<meta(.*)">　→　<meta$1" />

<link(.*)">　→　<link$1" />

<img(.*)">　→　<img$1" />

| コメント(0) | HTML | |