背景画像をブラウザ全画面使ってスライド表示させるためのあれこれ
前々から使ってみたかった背景画像全画面スライド表示できるjQuery。
ちょっとお手伝いしてるサイトで試しに使ってみることにしたので紹介がてら私的まとめ。サンプルサイトはTEE STORE終了とともに遊んでるドメインindividuallocker.netにて。
サンプル: http://www.individuallocker.net/
かつてWebサイトの背景画像全画面表示といえばFlashだったわけですが、最近はjavascriptでやれちゃったりします。検索すればいろいろ出てきますが、中でもわかりやすかったのが『maxImage Scaling Plugin』。スライドできちゃう優れもの。
maxImage Scaling Plugin: http://www.aaronvanderzwan.com/maximage/
デザイン的には、ブラウザサイズによって画像サイズが可変するので、文字配置はおのずと四隅に寄せるのがベターになるわけですが、一箇所の隅に固めるよりもフッター部分を分離させて下部固定させるのが良いなと思い、サンプルのようなhtml/cssにしました。
確認済ブラウザ: Mac (Chrome, Safari, FireFox) / Win (IE7, Chrome)
ただ、全画面にする意味というのは、その背景画像を大きく見せて印象に残すことにあるわけで、デザインよりも写真のクオリティが重要になってきます。この場合のクオリティとは『何を印象に残したいのか、演出したいのか』ということになるのですが、解像度的なクオリティを落としたくないというのも正直なところ。
プロならPhotoshopを使って上手く減色すればいいかもですが、もっと手軽にJPEG再圧縮して容量を軽くできるWebサービス『JPEG mini』が便利です。
JPEG mini: http://www.jpegmini.com/
色数にもよりけりですが、50%ぐらいは圧縮されます。
全画面に使う写真の大きさとサイズですが、大きさは横1200px〜1600pxぐらいでサイズは200KB以下(できれば100KBぐらい)を目安にすると良いと思います。思い切ってモノクロにするとグッとサイズも落ちますし、文字の色などにも悩まなくて済みます。
TwitterやFacebook、mixiなどのSNSでコミュニケーションを深めるのが普通になり、ホームグラウンドであったはずの自分のWebサイトがすっかり放置状態だな〜という人も多いと思います。そんなとき、この全画面表示を使ったトップページで自分の世界観を演出して、あとはTwitterやFacebookへと導くのも一つの方法かなと思いますです。
function.phpでプロフィール項目の追加と削除
個人がWebサイト持つってのもオールドスクール気分になりつつある昨今、久しぶりにWordPressにふれる。
管理してるサイトの投稿者別プロフィールを固定ページにまとめようと思い立ったのですが、メタデータ(the_author_meta)で扱える項目がなんとも微妙。AIMとか要らんのですよ。今時プロフィールつったらTwitterとかFacebookの項目がないと！
自分一人のプロフィールなんてのは固定ページに直接書けば済むことですが、投稿者が複数いる場合、追加・変更を各人でやれないのがちょっと面倒。
ちょろっと検索してみましたら、プロフィール項目の追加(削除)はfunction.phpを使えば良いんですね。最初wp-includesの中のfunctions.phpと勘違いしましたゴメンナサイ。テーマフォルダに入れとくやつだったとです。
今まで人の作ったテーマはもちろんデフォルトテーマすら使ったことないし、中身を見たこともなかったんで、存在すら知りませんでしたよ！あは…あははは…は…。
概出しまくりでわざわざここにコード載せるまでもないけど、忘れた時の自分に向けて。
<?php
function update_profile_fields( $contactmethods ) {
$contactmethods['twitter'] = 'Twitter';
$contactmethods['facebook'] = 'Facebook';
unset($contactmethods['aim']);
return $contactmethods;
}
add_filter('user_contactmethods','update_profile_fields',10,1);
?>
このコードをfunction.phpに追加すればよろし。というかこれしか書いてない。
<div class="profile">
<dl>
<dt><?php the_author_meta('last_name', 1); ?>
<?php the_author_meta('first_name', 1); ?></dt>
<dd class="italic"><?php the_author_meta('nickname', 1); ?></dd>
<dd class="italic"><?php the_author_meta('occupation', 1); ?></dd>
<dd>Web site : <a href="<?php the_author_meta('user_url', 1); ?>">
<?php the_author_meta('user_url', 1); ?></a></dd>
<dd>Facebook: <a href="<?php the_author_meta('facebook', 1); ?>">
<?php the_author_meta('facebook', 1); ?></a></dd>
<dd>Twitter : <a href="<?php the_author_meta('twitter', 1); ?>">
<?php the_author_meta('twitter', 1); ?></a></dd>
</dl>
</div>
表示させるページテンプレートの記述はこんな感じにした。
(1の部分はユーザーID。通常、追加ユーザーは追加順で1から連番)
ほんとはurl部分を自動でハイパーリンクしてくれるAdvanced-Make-Clickableプラグインが使えればスッキリするんだけどね…。
それにしてもこのfunction.phpはいろいろカスタマイズコードがあるみたいで、使い方次第で、プラグインを使うほどではない、ちょっとした気になる部分とか解消できそうです。
3.0からfunction.phpを使った機能追加が増えてるみたいですね。
【参考サイト】
WebDesignRecipe : WordPress のよくあるカスタマイズコード
http://webdesignrecipes.com/wordpress-customize-with-functions-php/
