2009年11月アーカイブ: 大阪 ホームページ制作 Signature! - STUDY STYLE -

2009年11月16日

WordPress Lightbox 2 プラグイン 日本語版

wordpressで元画像拡大のリンクをページ遷移なしにポップアップ表示する、最近ではもはや定番になった「Lightbox」を導入するプラグインです。

紹介するモノは日本語版に直されたモノなので設定がわかりやすいです。

ダウンロードは
http://wppluginsj.sourceforge.jp/i18n-ja_jp/lightbox-2-wordpress-plugin/
のダウンロードからできます。

例によってプラグインフォルダに放り込んで→プラグイン有効→個別設定の手順です。

特長は
  • オーバーレイする背景色をカラー指定できる(サイトに合わせられるのは汎用性高し)
  • [rel="lightbox"]の記述をイチイチ書かなくても画像リンクに適用できる。適用する範囲も指定できる。
  • 記事ごとにグループをまとめて自動的にギャラリー形式にしてくれる設定あり。
と、おまけ機能がかなり使える感じになっていると思います。

なんせページいちいち切り替わるのウザいので必携です。

2009年11月14日

WordPressブログでのYouTubeの埋め込み方法

もはやmixiなどでも日記でyoutubeの動画の埋め込みサポートしたり、企業がプロモーションに積極的にyoutubeを活用したりと、いまや市民権を得た「ネット配信動画」。

もちろんビジネスブログにおいても、その有用性は明らかです。画像以上のアイキャッチ、訪問者の理解を深めるツールとしては欠かせません。

そこでWordPressの動画埋め込みプラグインです。youtubeのほか、Google Video、 DailyMotion、Vimeo、Veoh、Viddler、Metacafe、Blip.tv、VideoPress aka WordPress.com Video 、Flickr videos、Spike.com/IFILM、MySpaceTVにも対応しているようです(ほとんど知りませんけど。。)

Viper's Video Quicktags

http://wordpress.org/extend/plugins/vipers-video-quicktags/

です。例によってプラグインフォルダにFTPでアップロードして、プラグイン有効の設定をするだけです。
(最新版のViper's Video Quicktagsのバージョン6.2.14を動作させるには、WordPressのバージョンが2.8.4以上であることが条件です。)

なお、プラグインを使わなくても動画を貼り付けることは可能です。

編集モードを「ビジュアル」から「HTML」に切り替えてyoutubeの「埋め込み」欄のタグをコピー、本文中にペースト、でOKです。

詳細は
http://www.0gram.com/entry/158
を参照してください。

2009年11月13日

WordPressで絵文字を使用するプラグイン

携帯メール等でもそうなのですが、絵文字が担う役割というのは「かわいい」とか「面白い」というだけではなく、アイキャッチをつけて文章を読みやすくしたり、親近感をわかせたり、色んな効果があると思われます(個人的には使いすぎはウザいですが)。

WordPressでは比較的、簡単に絵文字を取り入れる事ができるので紹介します。

WordPress Plugins/JSeries » emoji (絵文字挿入)

で配布されているプラグインを導入します。

MovableTypeもそうなのですが、デフォルトで用意されている絵文字はいわゆる「外国テイスト」で女子目線でいうと「かわいくない」(笑)と思われますので、素材配布サイトから取ってきて自分で追加することもできます。

素材配布サイト例
http://www.fuchu.or.jp/~tenshi/1kb/sozai/blog.html
1キロバイトの素材屋さん

などで好みのモノをダウンロードして、FTPで「wp-includes/images/smilies配下」にアップロードすると使えるようになります。

くれぐれも男性のみなさんは使いすぎると気持ち悪いと思われることも少なくないと思うので気を付けましょう。。


2009年11月11日

WordPressブログの投稿をmixiにも同時に投稿するプラグイン

このブログは「MovableType」で構築されていますが、別のブログを「WordPress」で構築しています。

プライベートブログでもビジネスブログでも「同時にmixiに記事を投稿できればいいのに」と思うことがあると思います。

mixiをビジネスコミュニケーションツール、ある団体のコミュニティツールとして活用するためにIDを作成している例も多くみられ、こういうニーズは多分に発生する可能性があると思います。

そこで登場が
publishToMixi
ksnn diary » publishToMixi

です(WordPress2.8にも対応)。

「記事の冒頭と末尾に自分で決めた定型の文言を入れることができる」
「投稿ごとにmixiにも投稿するかどうかを切り替えることができる」
「投稿内で使用されている画像も自動的にmixiへ投稿できる。」

らへんが特長です。

特に定型文を入れることができるので、元の記事へのURLを貼ってそちらに誘導することも可能です。

使い方もプラグインフォルダに一式をアップロードするだけのお手軽さです。

他にもmixiへの同時投稿ができるものとして

Wp-MixiPublisher 1.0.0 RC2

yujilog » Wp-MixiPublisher 1.0.0 RC2 をリリース

があるのですがWordPressの新しいバージョンには対応していないようです。

あと、念のためSEO的な部分を言っておくと、同じ内容の記事がWEB上に2つあるというのは検索エンジンの「ペナルティ対象(検索結果順位が極端に下がる)」なのですが、mixiはもちろん、ページ自体が検索エンジンにクロール、インデックスされることはない(<meta name="robots" content="nofollow,noindex" />指定されている)ので、問題はありません。

2009年11月 9日

ブログ ping送信先一覧

用途にもよりますが、ブログを運営する目的である「より多くの来訪者があったほうがよい」ということに関して、外せないツールがping送信です。

要は新しい記事を作成したときに色んなところ(有名なところでいくとyahooやgoogle)に「新しい記事を作成しましたよ~。」と自ら発信して検索結果に反映されやすいようにしたり、訪問者を呼び込んだりする作業がping送信です。

無料ブログにも付いていたりしますが、「Movabletype」「WordPress」では自分で送信先を設定できます。

ビジネスブログをはじめ、より多くの人のブログ訪問を期待する場合は、できればできるだけのping送信先を設定した方がよいでしょう。

「Movabletype」の場合
「設定」→「ウェブサービス」→「更新通知」の「更新通知先・・・その他」の欄に送信通知先を改行で入力

「Wordpress」の場合
「設定」→「投稿設定」→更新情報サービスの欄に送信通知先を改行で入力

で設定できます。

ping送信一覧
をとりあえず挙げときます。

まず、めんどくさい人はとりあえずこの2つ(yahoo、google)は必須でしょう。

http://blogsearch.google.co.jp/ping/RPC2
http://api.my.yahoo.co.jp/RPC2

とりあえず送れるとこには送っとく!!という人は下記も追加しましょう。

http://blog.goo.ne.jp/XMLRPC
http://ping.blo.gs/
http://ping.bloggers.jp/rpc/
http://ping.myblog.jp
http://ping.weblogalot.com/rpc.php
http://rpc.blogrolling.com/pinger/
http://rpc.pingomatic.com/
http://rpc.weblogs.com/RPC2
http://www.blogpeople.net/servlet/weblogUpdates

ただ、このサービス自体が頻繁に新設、廃止されることが多々あるので、送信エラーを度々チェックして、送信先を入れ替える必要があると思われます。

エラー送信先が含まれると記事作成に時間がかかってしまいます。

2009年11月 6日

IE6用透過png対策 DD_belatedPNG(背景画像リピート可)

WEBデザインをする上で非常に自由度を広げてくれるpng形式の画像。

jpgと違い、アルファチャンネルを利用した透明や半透明の表現を可能としているため、複雑な背景の上に切り抜き文字や画像を配置する場合や、半透明を活かしたレイヤーデザインなど飛躍的にデザイン、レイアウトの幅が広がります。

が、このpng、比較的新しい画像形式のため、IE6ではサポートされておらず透明部分がグレーになってしまいます(IE7以降、その他、firefoxなどのモダンブラウザでは問題ありません)。

まだまだ、最近の統計でもIE6のユーザーは全体の1~2割はいると思われるのでこれを無視するわけにもいきません。

そこで様々な「対IE6用のPNG対策」が用意されています。

様々な方法を探して使ってみましたが、使い勝手が良さそうだったのが

「DD_belatedPNG」
ダウンロード先↓
Drew Diller's blog

JAVASCRIPTファイルなのですが、特長としては
「背景の繰り返し(バックグラウンドリピート)に対応」
「指定が簡単」
「a要素のロールオーバーにも対応・・・ただしCSSでの指定に限る)」
なことです。

細かい使い方等は
ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点
に書いてくださっています。

ヘッダーに下記を読み込み。適応させたい「タグ」「クラス」「ID」を指定します。
下記でいうと「img」と「class=png_bg」に指定が効いています。

<!--[if IE 6]>
    <script src="○○○/DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('img, .png_bg');
    </script>
<![endif]-->
と非常に簡単。

その他でpng対策として手軽で優れているのが

「alphafilter.js」
アルファ画像を扱うalphafilter.jsライブラリ[to-R]

です。

これもJAVASCRIPTファイルなのですが、特長としては
「指定が簡単。要素に(class="alphafilter")とつけるだけ」
「a要素のロールオーバーにも対応・・・ただしimg要素の置換指定に限る)」
「背景の繰り返しに未対応」
なことです。

ケース バイ ケースで使い分けですね。
ただ、alphafilter.jsのほうは、とあるサイト制作に使ったのですがa要素の挙動が若干不安定です。

で、これらが正しく動作するのかどうか?を調べるのに必須が

「multiple ie」
http://tredosoft.com/Multiple_IE

です。IE6がない環境下でも仮想でIE6を立ち上げて検証することができます。
ただし、このMultipleIEはVISTAでは動作しません。xpでないと立ち上がりません。

似た趣旨のソフトで「スタンドアローンIE6」がありますが、「png関連の検証」は仕様により、できません。あくまで「CSS関連の挙動を検証」する事しかできないようです。

2009年11月 2日

段落の両端をそろえるCSS text-justify


段落の両端を揃えるCSS指定。

P要素の両端を揃える場合は

p{
text-align: justify;
text-justify: inter-ideograph;
}

をCSSで指定。
text-align: justify; がfirefox、safari用の指定
text-justify: inter-ideograph; がIEの独自拡張の指定。種類は


auto
    ブラウザに依存します。IE5やIE6では、半角スペースや全角スペースを調整して均等割付するようです。
distribute
    単語間隔と文字間隔を調整して均等割付します。
distribute-all-lines
    単語間隔と文字間隔を調整して均等割付します。途中の改行や最終行などの文字数が一行に満たない行も均等に割り付けます。
inter-cluster
    アジアの言語などの単語間隔を持たない言語のテキストを均等割り付けします。
inter-ideograph
    日本語・中国語・韓国語など表意文字のテキストの、単語間隔と文字間隔の両方を調整して均等割付します。
inter-word
    単語間隔のみを調整して均等割付します。
kashida
    アラビア文字のテキストの均等割り付けを意図しています。
newspaper
    単語間隔と文字間隔を調整して均等割付します。英文などラテンアルファベットに最適な指定方法です。


という感じです。