フルFlashのサイトにHTMLのフッターを付け加える。

2011.05.15 Sun

完全なフルFlashのサイトではなくて、一部だけHTMLを組み込むということがあります。今回はフルFlashのサイトに固定したHTMLのフッターを付け加える方法を紹介します。

1.HTMLにswfファイルを簡単に埋め込むことができるSWFObjectとウィンドウを指定したサイズよりも小さくした場合にスクロールバーを表示するようにするためにSWFForceSizeを使います。<head>内に下記を追加します。

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfforcesize.js"></script>

2.<body>内に下記を追加します。

<div id="flashcontent"></div>
<script type="text/javascript">var so = new SWFObject("xxx.swf", "xxx", "100%", "100%", "8", "#ffcccc");
  so.addParam("wmode", "transparent");
  so.addParam("menu", "false");
  so.addParam("scale", "noscale");
  if(so.write("flashcontent")){
    var forcesize = new SWFForceSize(so, 900, 700);
  }
</script>
<div id="footer_wrap">
  <div id="footer"></div>
</div>

今回はSWFObject1.5を使っているので、上記のような書き方になっています。「var forcesize = new SWFForceSize(so, 900, 700);」の部分は幅900pxで高さ700pxの領域は最低限表示するという指定をしていて、もしこの指定したサイズよりもウィンドウを小さくした場合はスクロールバーが表示されるようになっています。

3.下記のようにCSSを記述します。

html, body, #flashcontent {
  height: 100%;
}
body > #flashcontent {
  min-width: 900px;
  width: 100%;
  min-height: 700px;
  height: 100%;
  background: #ffcccc;
}
#footer_wrap {
  width: 100%;
  height: 105px;
  margin: -105px 0 0;
  position: absolute;
  left: 0;
  background: #ccffcc;
}
#footer {
  width: 900px;
  height: 105px;
  margin: 0 auto;
  background: #ccffcc;
}

幅100%で高さ100%のフルFlashなので、#footer_wrapにmargin:-105pxを指定してHTMLのフッターを持ち上げるというのがポイントです。


WordPressにソーシャルネットワークボタンを追加する。

2011.05.12 Thu

ブログの記事をTwitterやFacebookといったSNS(ソーシャル・ネットワーキング・サービス)、はてなブックマークやDeliciousといったSBM(ソーシャル・ブックマーク)で共有するためのソーシャルネットワークボタン、ソーシャルブックマークボタンをWordPressに追加するプラグイン『WP Social Bookmarking Light』があります。

このプラグインをインストールして、WordPressの管理画面にある「設定」から「WP Social Bookmarking Light」をクリックすると、上の画像のような設定画面があらわれます。

位置
ソーシャルネットワークボタンを追加する位置がWordPressで記事の内容を表示するテンプレートタグである<?php the_content(); ?>の「Top」なのか「Bottom」なのかを選択します。

個別ページのみ
個別ページ、つまりsingle.phpのみにソーシャルネットワークボタンを追加する場合は「Enabled」を選択して、トップページやカテゴリーページ、アーカイブページにも追加する場合は「Disabled」を選択します。

ページ
固定ページにソーシャルネットワークボタンを追加する場合は「Enabled」を選択して、追加しない場合は「Disabled」を選択します。

サービス
WordPressに追加するSNSやSBMを選択してドラッグ&ドロップします。

ソーシャルネットワークボタンのレイアウトに関してはCSSで調整してください。

このプラグインを使えば簡単にソーシャルネットワークボタンをWordPressに追加することができます。

WP Social Bookmarking Light
http://wordpress.org/extend/plugins/wp-social-bookmarking-light/


CSS3 textarea要素のリサイズを制御する。

2011.05.09 Mon

textarea要素とは、複数行のテキストを入力するエリアを作成するHTMLタグのことです。例えば、コメント欄ですね。

Firefox 4.0以降、Safari 3.0以降、Google Chrome 1.0以降では、そのテキストエリアをリサイズすることができます。Internet ExplorerやOperaではリサイズに対応していません。

下の画像のように右下にあるマークをドラッグすることによってテキストエリアのサイズを変更することができます。

Firefox

Safari、Google Chrome

でも、このリサイズの機能であるresizeプロパティは、なぜかデフォルトでリサイズができる状態になっていて、制御しないとデザインやレイアウトの崩れが起きます。

もしそれを避けたいのであれば、CSSでテキストエリアのリサイズを制御することができます。

<リサイズを無効にする>

textarea {
  resize: none;
}

<幅のリサイズだけを可能にする>

textarea {
  resize: horizontal;
}

<高さのリサイズだけを可能にする>

textarea {
  resize: vertical;
}

Twitterではこの高さのリサイズだけを可能にするようにCSSで制御していますね。
他だとFacebookではリサイズを無効にするようにしています。

個人的に自由にリサイズされるのが嫌だったので、このブログでもコメント欄のリサイズを制御してます。