画像を使わずに HTML + CSS3 だけで影付きの付箋みたいのを作る

以前、HTML CSS ってカテゴリを作ったんだけど、あんまりそのカテゴリの記事を書いてないことに気がついて、たまには書いてみようかと書いた記事です。

今回の内容は、だいぶ前に書いたやつで、今でも割とアクセスが多い「ブログタイトルをテキストだけで、しかもちょっとオシャレに」という記事の二番煎じに近いですが、パッと見たときに、「あれ、これ画像じゃないの?」って思ってしまうような、HTML と CSS のテクニックです。

まずは、以下のサンプルを見てください。

付箋みたいでしょ?

どうですか?画像みたいでしょ。画像ですからね(瀑)
ところがこの画像、HTML と CSS で作ったものをキャプチャーしただけなんです。左が Chrome、右が FireFox のキャプチャーです。

それでは、早速、作り方を。

[1] divで四角を作る

HTML

<div id="sakitabox"><p>テキスト</p></div>

(以後、HTML 部分は変わらないので、省略します)

CSS

#sakitabox {
	width:250px; /* 四角の幅  */
	height:50px; /* 四角の高さ  */
	background-color:#eee; /* 四角の色  */
}

ポイント

アレンジは後でするとして、とりあえず、縦横サイズの指定もしてください。

表示確認(右:Chrome、左:FireFox)

[1] divで四角を作る

[2] 影付きの擬似要素を重ねる

CSS

#sakitabox {
	width:250px;
	height:50px;
	background-color:#eee;
	position: relative; /* 位置指定(普通の位置に表示) */
}
#sakitabox:after {
	width:200px; /* 擬似要素の幅  */
	height:45px; /* 擬似要素の高さ  */
	content: ""; /* 擬似要素の内容 */
	position: absolute; /* 位置指定 */
	top: 0px; /* 上から */
	right: 3px; /* 右から */
	-webkit-box-shadow: 0 5px 5px #555 ; /* 影(Chrome、Safari) */
	-moz-box-shadow: 0 5px 5px #555 ; /* 影(FireFox) */
	box-shadow: 0 5px 5px #555 ; /* 影(CSS3) */
}

ポイント

最初に作った四角に「position: relative;」の指定を追加してください。
「:after」を使って擬似要素で四角を作ってます。
擬似要素は影にしか使わないので、「content: “”;」でカラにしてください。
「position: absolute;」「top: 0px;」「right: 3px;」で位置を指定します。
「box-shadow」で影をつけます。

表示確認(右:Chrome、左:FireFox)

[2] 影付きの擬似要素を重ねる

[3] 影付きの擬似要素をズラす

CSS

#sakitabox {
	width:250px;
	height:50px;
	background-color:#eee;
	position: relative;
}
#sakitabox:after {
	width:200px;
	height:45px;
	content: "";
	position: absolute;
	top: 0px;
	right: 3px;
	-webkit-box-shadow: 0 5px 5px #555 ;
	-moz-box-shadow: 0 5px 5px #555 ;
	box-shadow: 0 5px 5px #555 ;
	-webkit-transform: rotate(2deg); /* ズラす(Chrome、Safari) */
	-moz-transform: rotate(2deg); /* ズラす(FireFox) */
	-o-transform: rotate(2deg); /* ズラす(Opera) */
	-ms-transform: rotate(2deg); /* ズラす(IE) */
	transform: rotate(2deg); /* ズラす(CSS3) */
}

ポイント

「transform: rotate(2deg);」で擬似要素の四角を2度回転させ、ズラします。

表示確認(右:Chrome、左:FireFox)

[3] 影付きの擬似要素をズラす

[4] 影付きの擬似要素を後ろに送る

CSS

#sakitabox {
	width:250px;
	height:50px;
	background-color:#eee;
	position: relative;
}
#sakitabox:after {
	width:200px;
	height:45px;
	content: "";
	position: absolute;
	top: 0px;
	right: 3px;
	-webkit-box-shadow: 0 5px 5px #555 ;
	-moz-box-shadow: 0 5px 5px #555 ;
	box-shadow: 0 5px 5px #555 ;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	z-index: -1; /* 重なり順を背面へ */
}

ポイント

「z-index: -1;」で擬似要素の四角を背面に送ります。

表示確認(右:Chrome、左:FireFox)

[4] 影付きの擬似要素を後ろに送る

これで完成です。簡単でしょ?

最後に、これのアレンジについてなんだけど、最初の四角の幅と、擬似要素の幅と、影の大きさ、回転の角度などを微調整しないと使えません。まあ、幅を大きくするくらいなら大丈夫かな。影は大きくならないけど、右ハジがめくれてるってイメージは変わらないので大丈夫なんじゃないでしょうか。影付きの部分を大きくするためには擬似要素の幅を大きくすればいいんだね。大きくし過ぎると、サンプルでいうと左上のカドが最初の四角からはみ出しちゃうかも。そしたら回転の角度を1度にしてみるとか、影の大きさを小さくしてみるとか。なんにしても微調整はめんどくさいと思う。なので、可変のところでは使いにくいね。


Time Machine(その3)

Time Machine(その1)Time Machine(その2)と続いてきて、その3はどうなったの?と思った方もいるかも知れません。どうなったかといいますと、どうもなりませんでした。

一行で書くと、「つないだら戻った」で終わりです。

Time Machine

あまりにも普通すぎて「なんということでしょう」も出ませんでした。


WPtouch で Google アドセンス以外の広告を表示させるカスタマイズ

WordPress の表示をスマートフォン用に変換してくれる、とっても便利なプラグイン「WPtouch」。WordPress でブログをやっているなら、使っている人も多いのではないでしょうか。この sakitamax blog も無料版を使っています(多機能な有料 WPtouch Pro もあります)。

今日は、その WPtouch が書き出すスマートフォン用の画面に Google アドセンス以外の広告を載せるっていうお話だよ。

WPtouch には、標準で Google アドセンスの広告を表示してくれる機能があるので、Google アドセンスに登録して、設定画面で「pub-」から始まる Google アドセンス ID を入力するだけで、きちんと Google アドセンスの広告が表示されます。

しかし、Google からアボセンスされちゃった人が、Google 以外の広告を載せたいときにどうするかっていうと、これが標準では設定できないのです(有料版だとできるみたいですけど)。

というわけで、今回の記事の本編 WPtouh(無料版)に Google アドセンス以外の広告を載せちゃうカスタマイズのスタートです。

管理画面から書き換えるファイルを選ぶ

まず、WordPress の管理画面から「プラグイン編集画面」へアクセスし、左上右上に表示されてる「編集するプラグインを選択」のセレクトメニューから「WPtouch」を選んで「選択」をポチッ。そして、その下に表示された「プラグインファイル」の一覧から「wptouch/include/adsense-new.php」(画像の右側真ん中あたり、色が変わってるところ)をポチッ

WPtouch の編集

そうすると、以下のコードが表示されるのでこれを編集します。

表示された編集前のコード

<?php global $wptouch_settings; global $wpdb; ?>
<?php echo '<div id="adsense-area">'; ?>
<script type="text/javascript"><!--
window.googleAfmcRequest = {
  client: 'ca-mb-<?php echo $wptouch_settings&#91;'adsense-id'&#93;; ?>',
  ad_type: 'text_image',
  output: 'html',
<?php if ( !isset( $wptouch_settings&#91;'adsense-channel'&#93; ) ) { ?>
  channel: '',
<?php } else { ?>
  channel: '<?php echo $wptouch_settings&#91;'adsense-channel'&#93;; ?>',
<?php } ?>
  format: '320x50_mb',
<?php if ( $wpdb->charset ) { ?>
  oe: '<?php echo $wpdb->charset; ?>',
<?php } else { ?>
  oe: 'utf8',
<?php } ?>
};
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>
<?php echo '</div>'; ?>

表示されたコードを編集

まずは、残す部分。最初の二行。

<?php global $wptouch_settings; global $wpdb; ?>
<?php echo '<div id="adsense-area">'; ?>

これはそのまま使います。<div id=”adsense-area”>を残しておけば、GoogleAdsense用のスタイルシートがそのまま適用されます(予想)。

その次の行から広告表示用ソースコードを挿入します。オレの場合は i-mobile ってところのを使いました。i-mobile から支給された広告表示用ソースコードは以下の通り。

<!-- i-mobile for SmartPhone client script -->
<script type="text/javascript">
	imobile_tag_ver = "xx"; 
	imobile_pid = "xxxx"; 
	imobile_asid = "xxxxx"; 
	imobile_type = "inline"; 
</script>
<script type="text/javascript" src="http://spad.i-mobile.co.jp/script/adssp.js?xxxxxxxx"></script>

以下はいらない部分です。コメントアウトするなり、削除するなりして下さい。

<script type="text/javascript"><!--
window.googleAfmcRequest = {
  client: 'ca-mb-<?php echo $wptouch_settings&#91;'adsense-id'&#93;; ?>',
  ad_type: 'text_image',
  output: 'html',
<?php if ( !isset( $wptouch_settings&#91;'adsense-channel'&#93; ) ) { ?>
  channel: '',
<?php } else { ?>
  channel: '<?php echo $wptouch_settings&#91;'adsense-channel'&#93;; ?>',
<?php } ?>
  format: '320x50_mb',
<?php if ( $wpdb->charset ) { ?>
  oe: '<?php echo $wpdb->charset; ?>',
<?php } else { ?>
  oe: 'utf8',
<?php } ?>
};
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>

コメントアウトする場合は以下の感じでやればいいんじゃないでしょうか。

<!--
<script type="text/javascript">//--><!--
window.googleAfmcRequest = {
  client: 'ca-mb-<?php echo $wptouch_settings&#91;'adsense-id'&#93;; ?>',
  ad_type: 'text_image',
  output: 'html',
<?php if ( !isset( $wptouch_settings&#91;'adsense-channel'&#93; ) ) { ?>
  channel: '',
<?php } else { ?>
  channel: '<?php echo $wptouch_settings&#91;'adsense-channel'&#93;; ?>',
<?php } ?>
  format: '320x50_mb',
<?php if ( $wpdb->charset ) { ?>
  oe: '<?php echo $wpdb->charset; ?>',
<?php } else { ?>
  oe: 'utf8',
<?php } ?>
};
//--><!--</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>//-->

で、最後にこれを入れます。

<?php echo '</div>'; ?>

完成したコード

というわけで。以下が完成形。

まずは、いらないコードを削除しちゃったバージョン。

<?php global $wptouch_settings; global $wpdb; ?>
<?php echo '<div id="adsense-area">'; ?>

<!-- i-mobile for SmartPhone client script -->
<script type="text/javascript">
	imobile_tag_ver = "0.2"; 
	imobile_pid = "xxxx"; 
	imobile_asid = "xxxxx"; 
	imobile_type = "inline"; 
</script>
<script type="text/javascript" src="http://spad.i-mobile.co.jp/script/adssp.js?xxxxxxxx"></script>

<?php echo '</div>'; ?>

いらないコードをコメントアウトしたバージョンはこちら。

<?php global $wptouch_settings; global $wpdb; ?>
<?php echo '<div id="adsense-area">'; ?>

<!-- i-mobile for SmartPhone client script -->
<script type="text/javascript">
	imobile_tag_ver = "0.2"; 
	imobile_pid = "xxxx"; 
	imobile_asid = "xxxxx"; 
	imobile_type = "inline"; 
</script>
<script type="text/javascript" src="http://spad.i-mobile.co.jp/script/adssp.js?xxxxxxxx"></script>

<!--
<script type="text/javascript"><!--
window.googleAfmcRequest = {
  client: 'ca-mb-<?php echo $wptouch_settings&#91;'adsense-id'&#93;; ?>',
  ad_type: 'text_image',
  output: 'html',
<?php if ( !isset( $wptouch_settings&#91;'adsense-channel'&#93; ) ) { ?>
  channel: '',
<?php } else { ?>
  channel: '<?php echo $wptouch_settings&#91;'adsense-channel'&#93;; ?>',
<?php } ?>
  format: '320x50_mb',
<?php if ( $wpdb->charset ) { ?>
  oe: '<?php echo $wpdb->charset; ?>',
<?php } else { ?>
  oe: 'utf8',
<?php } ?>
};
//--><!--</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>//-->
<?php echo '</div>'; ?>

編集が終わったら、「編集を更新」をポチッとして終了です。

実際にスマートフォンで表示を確認してみる

iPhoneで表示するとこんな感じに広告が表示されます。

iPhone用カスタム広告

さあ、どうぞ、皆さんもお試しあれ。

あ、そうそう、最後にお約束のこと書くけど、失敗したからってこの記事のせいにしないでね。

それと、こうやってプラグインのソースを書き換えた場合、プラグインをアップデートすると、ソースを書き換えたファイルが上書きされちゃうから、気をつけてね。バックアップとったり、その都度、書き換えたりしないとね。

えっと、あと、なんか書くことないか・・・。今回、この記事を書くにあたり、参考にした WPtouch のバージョンは 1.9.32 と 1.9.33 です。

といったあたりで終わりです。お休みなさい。


Time Machine(その2)

昨日の記事の続きです。

昨日の記事を一行でまとめると・・・MacOS標準の装備のバックアップソフト Time Machine を使ってみようとしたら、外付けハードディスクのフォーマットが違うので危うくすべてのデータを消されそうになった・・・です。はい、三行ですね。気にしない。

Time Machine の言うことにゃ、あなたのハードディスクのフォーマットが今のままじゃ、オイラ働けないよってことらしい。というわけで、Time Machine に気持よく働いてもらうためにハードディスクをフォーマットし直すことにしました。昨日はその準備のために、外付けハードディスクに保存してあったデータをiMacにコピーするところまで書きました。

いや、もっと書いたな。昨晩は、iMacにデータのコピーが終わって、その後、Time Machine を使って外付けハードディスクをフォーマットして、そんで、外付けハードディスクにiMacに避難させてたもとのデータを外付けハードディスクに戻すところまで書いたんだった。

ちなみに、Time Machine によるフォーマットは、昨日も掲載した、この写真のように、Time Machineが気に入らないフォーマットは全部消去しちゃうって機能を使って消去(再フォーマット)しました。

Time Machine

フォーマットってなに?って人いる?
解説しよう。フォーマットいうのは、一言でいうと、データの保存方法かな。データの保存方法って一つじゃなくて、いくつかあるんだよね。あれ式、これ式、いろいろあって、コレが違うとデータが読めなくなっちゃう。というか、保存できなくなっちゃうんだ。たとえれば、英語と日本語の言語の違いみたいな。英語でやりとりするって決まり(フォーマット)のところに日本語しか話せないやつが来ても、書くことも読むこともできない。逆に、日本語でやり取りするって決まりのところに英語しか話せないやつが来ても、同じく何も出来ない。さらには、日本語の中にも関西弁のフォーマットとか東北弁のフォーマットとかあって、ここらへんも若干違いがあるんだけど、まあ、全く読み書きができないってわけでもない。

Time Machine

ということで、外付けのハードディスクをTime Machineが希望するフォーマットにして、iMacに一時避難していたデータを外付けハードディスクに戻したあと、iMac上にある一時避難データを消して、iMacのデータ量を約500GBに戻した。これ、一時避難したデータを削除しないとiMacのデータが700GB強あって、さらに外付けハードディスクに200GB強で、合わせると外付けのハードディスクの容量1TBにギリギリになっちゃうところだったんだよね。だから、わざわざ、一時避難データを消してから、Time Machineで保存させることにしたの。

Time Machine

ジャーン。Time Machine保存中です。
Time Machineの同期を始めたのが朝8:00くらいかな。

そして、仕事から帰ってきてみると。

Time Machine

「まあ、なんということでしょう」(←まだ早い)同期はきっちりと終わっていました。12:10が最古のバックアップって書いてあるから、500GBのHDDを約4時間かけて転送してたわけか。さらに、一時間に一回、オレが仕事に行ってるにもかかわらず、健気にバックアップをし続けてるではありませんか。

「ああ、これがTime Machineのある生活なのね」って、思いません。正直、全く実感がわきません。バックアップって、困ったときに役に立つ機能だから、困っていない今は、全くありがたくもありません。

Time Machine が役に立って本当に「まあ、なんということでしょう」と言えるのは、明日から修理に出すiMacがHDDを交換されて帰ってきたときだろうね。HDDの中身が空っぽのはずなのに、Time Machineを使えば、最後に同期した状態になるんでしょ?そいつは凄そうだ。


Time Machine(その1)

かくかくしかじかな理由から、初めて Time Machine を使ってみることにしました。

Time Machine っていうのは最近のMacOSに標準で付いてるバックアップソフトです。

バックアップなんてのは、自分で使いやすように好き勝手にやるのが一番さって思ってたのですが、実は一年ほど前、iPhone が壊れちゃって SoftBank のお店で新しいのと交換してもらったんですね。つまり、使っていた iPhone が突然新品になっちゃったわけです。iPhone って携帯電話ですからね、電話帳やメールアドレスがないとなんの意味のない、しかしそれでも便利なガジェットなんですけど・・・。いや、しかし、やっぱり電話は電話らしくしっかり電話帳を保存しておいてもらわないと、なんて思ったり、思わなかったりしながら、母艦である、今は亡き iMac G5 に接続すると、なんと、前回、iMac に接続したときの状態と寸分たがわぬ状態に戻っているじゃありませんか。

いや、これはあくまで iPhone の話なんですけど。だけど、同じ Apple の商品ですから、きっと、同じように最後に Time Machine でバックアップを取った状態をしっかり記憶しておいてくれて、HDDを交換したあとのiMacを、元の状態に魔法のように戻してくれるのではないのでしょうか。

劇的ビフォーアフター風の「まぁ、なんということでしょう」が聞きたい。オレの心の声で。

と、まあ、淡い期待を胸に抱き・・・、なんかオレ、今日、饒舌だな。っていうか饒筆か、いや、むしろ、饒タイプ。

とにかく、淡く期待しながら始めたわけですよ。Time Machine。というわけで、ここからが本編です。

まずは Time Machine 起動。

Time Machine

アップルのアプリってのは、説明書なんて見なくても直感でなんとかなるって言う人がいるけど、オレもそう思う。画面を見ての通り、バックアップディスクを指定して「入」にすればいいんでしょ?

次に「バックアップディスクを選択」をクリック。

Time Machine

あれ?なに?小さくてちょっと読めない。

再フォーマットが必要(互換性のないファイルシステム)」って書いてないよね?

書いてある?

Time Machine

・・・うん。書いてあるね。たしかに。けど、いいさ。見なかったことにして、次に進もう。

まさか、大事なデータを勝手に消すなんてことしないでしょ?アップルさん?

えーい、イチかバチか「バックアップに使用」をクリーーック!!

Time Machine

あー、はいはい。わかってたよ。さっきから、そんな気がしてたよ。やっぱり、消そうというんだね、オレの大切なデータを、妻の iTunes ファイルを、家族旅行の写真を。

消去しないでください。おとなしく「消去しない」をクリックするので消去しないでください。

ということで、まずは、いま使ってる外付けHDDのバックアップを取ることが先だな。それから外付けのHDDをフォーマットし直して。ええっとそれから、なにするんだっけ。あそうそう、Time Machine を起動して・・・バックアップ!

なんだよ、この流れ!バックアップ取るために、バックアップってなんだよ!

しかし、ここまできたら、もう諦められない。Time Machine が使ってみたい。そのためには外付けのHDDをフォーマットしなおさなきゃならない。はい、やりますよ、フォーマット。いま保存してあるデータなんて200GBちょっとだからね。昔だったら何日もかかったかもしれないけど、今なら、まあ、2〜3時間だろ。さっさとやっちまおう。いいさ、いいさ、その間にブログの更新でもしてりゃあ、いいんだから。

コピー中

つーことで、ただ今、バックアップ中。

これからの予定。
・外付けのデータをiMacにコピー。
・外付けをMacOS拡張(大文字/小文字を区別、ジャーナリング)でフォーマット。
・iMacに一時避難したデータを外付けに戻す。
・iMac上の一時避難データを削除。
・Time Machine 開始。