Monthly Archives: January 2011

「メイリオ」をブログのフォントとして指定する

このブログを構築する際に、初めて試みた事がある。 それは、CSSでにフォントの指定に「メイリオ」を加えたことだ。 今まで構築した他のサイトでは、その様な事をした経験が無かったが、最近は、フォントとして「メイリオ」を指定しているサイトも増えて来た。 「メイリオ」とは、Windows Vista以降のマイクロソフトのOSに標準搭載されている日本語ゴシック体フォントで、可読性の高い美しい書体が特徴である。 下に様々なフォントサイズでの表示例を上げる。 このフォントは、ClearTypeの使用が前提となっており、アンチエイリアスを効かせることで滑らかな書体を実現している。 逆にアンチエイリアスが効かない環境では、美しさが失われる。 特にフォントサイズが小さい場合に不利になるだろう。 「メイリオ」はマイクロソフトのOS、しかもVista以降で標準搭載されたフォントであるため、MacやUnix系のOSの場合は勿論、Windows XPなどの古いOSには標準では搭載されておらず、「メイリオ」の恩恵は受けられない。 当然、CSSには、別のフォントも指定してある。 しかし、英数字も含む「メイリオ」を最も優先順位が高いフォントとして指定してあるため、「メイリオ」を搭載したPCであれば、英数字も「メイリオ」で表示されている筈だ。 アルファベットなどは、英文フォントで表示したいならば、本来は「メイリオ」より先に「Arial」などを指定すべきであろう。 Windos 7、Windows Vistaユーザーでなければ恩恵がない「メイリオ」ではあるが、もし、OSがWindows XPならば救いがある。 マイクロソフトは、Windows XP用の「メイリオ」を無償提供している。 インストールしていないなら、この機会に、ぜひ、試して欲しい。 Windows XP 向け ClearType 対応日本語フォント 個人的には「メイリオ」が好きなので、CSSで「メイリオ」を指定しているサイトが増えると有難い。 ・補足 日本語サイトの場合、最近は、以下のようにCSSで設定している。 * { font-family: “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3″, “Meiryo”, “メイリオ”, “Osaka”, “MS PGothic”, “MS Pゴシック”, sans-serif; } 決まりはないので、好みに応じて設定すれば良い。私の場合、末尾に英文フォントをもう少し付け加える場合もある。 WordPressで構築されたサイトの見ていると、テーマのフォント定義、そのまままのサイトも少なくない。 CSSで日本語フォントが定義されていないと、私のように日本語でないPCを使っている場合、美しくないフォントが使われ見栄えが非常に悪くなる。 WordPressの場合は、「テーマ編集」からスタイルシート内のフォントの定義を修正する。

Posted in WordPress, ネット・PC | Tagged , , | Leave a comment

WordPressに「zenback」を導入する

「zenback」は、自動的に記事を解析し、関連性の高い記事やソーシャルメディアの反応をブログに表示してくれるブログパーツだ。 「Movable Type」などで知られる「Six apart」が提供している。 今回は、ブログのカスタマイズの一環として、この「zenback」を導入した。 現在、数多くのソーシャルメディア関連のツールが存在するが、その殆どが海外のものであり、必ずしも日本の状況に即したものであるとは言えない。 ソーシャルメディアのシェアにしても、国によって大きな違いがあり、日本も特殊な事情を抱えている。 「mixi」の存在もその1つであるし、日本では「Facebook」のシェアが低いこともそうだ。 対応するソーシャルメディアの数を謳ったツールも少なくないが、これらは、必ずしも使い易いとは言い難い。選択肢が多い分、使い方を誤ると逆効果になる。 その点、「zenback」は、けして高機能とは言えないが、魅力的な機能を提供してくれるツールと言える。 機能的には「LinkWithin」に類似しているが、対応するサービスも日本の事情を意識したものになっているので使い勝手が良い。 まず、「zenback」は、ブログに「ツィート」、「はてなブックマーク」「mixiチェック」、「Evernoteサイトメモリー」、Facebook「いいね!」といったソーシャルボタンを提供してくれる。 ソーシャルボタンについては、正直、強力とは言えないが、あまり数を求めるより、これくらいの方が使い易いかもしれない。 しかし、「zenback」の真骨頂は、ソーシャルボタンではない。 「zenback」は、記事を解析し、 関連キーワード 関連記事 関連リンク Twitter(での言及) はてなブックマーク(への登録) を自動的に抽出し、一覧表示してくれる。 「関連キーワード」の項目では、記事から主要なキーワードを抽出し、表示する。また、キーワードをクリックすると、そのキーワードを含む「zenback」ユーザーの記事の一覧が表示される。 これは外部へのアクセスを促す機能とも言えるが、逆に言えば、同じキーワードを持つ外部の記事からの訪問を促す機能でもある。 「関連記事」では、自分のブログ内の関連性の高い記事を抽出、一覧表示してくれる。これには、自ブログ内での動きを活性化する効果があるだろう。 「関連リンク」では、関連性のある「zenback」ユーザーの記事を一覧表示してくれる。これは外部へのリンクであるが、自分の記事へのリンクも同様に、どこかの「zenback」ユーザーの記事に表示される可能性がある。 「Twitter」では、記事に対して言及したツィートを一覧表示してくれる。「はてなブックマーク」では、「はてなブックマーク」への登録状況を知ることができる。これらは、記事への反響を知る需要な指標になる。 すべての機能を使うと、ブログパーツとしては、かなり場所を取る類のものになるので、短い記事をたくさん投稿するスタイルでは、アンバランスになるかも知れない。 導入も簡単と言いたいところだが、実は、一癖ある。 「zenback」では、1つのアカウントで、複数のブログ用のコードを発行できるようになっている。 設定画面も至ってシンプルだ。 「WordPress」への導入は、単純に、発行されたコードをテンプレートに貼り付けて行う。 ※2011/4/17 当ブログで公開中のプラグイン「EZ zenback」を利用すれば、「zenback」の導入が簡単になる。 コードを貼り付ける場所は、使用しているテンプレートやWordPressバージョンによっても異なってくる。 このブログの場合、テンプレートは「2010 Weaver 1.5.4」。コードは「単一記事の投稿(single.php)」というテンプレートに貼り付けた。 <!– #content –> の直前に貼り付け、先に導入した「DISQUS」コメントシステムの直後に「zenback」が表示されるようにしている。 もし、コメントより、先に「zenback」配置するなら、 <!– #nav-below –> の直後に貼りつけても良い。 以上で、コードは導入できたが、「zenback」を活かすためには、これだけでは不十分で、関連記事の精度を上げる「zenbackタグ」をテンプレートに追加する必要がある。 まず、「単一記事の投稿(single.php)」というテンプレートの <?php the_title(); ?> という部分を <!– zenback_title_begin –><?php the_title(); ?><!– zenback_title_end –> に変更する。 続いて <?php ttw_the_content_featured_single(); ?> という部分を <!– zenback_body_begin –> <?php ttw_the_content_featured_single(); ?> <!– zenback_body_end –> <!– zenback_date –> に変更する。 これで作業は完了だが、やや厄介だ。 プラグインの形で導入出来れば有難いところだ。 記事の投稿後、解析が完了し、実際に表示が開始されるまでに若干の時間を要するが、それも許容の範囲だ。 —————————————————————- ・補足1 テーマ「Weaver 1.7」でも、「単一記事の投稿(single.php)」の同様の場所にコードを貼り付ける。 「zenbackタグ」の追加は、 <!– zenback_title_begin –><?php weaver_post_title(true); ?><!– zenback_title_end –> と <!– zenback_body_begin –> <?php weaver_the_content_featured_single(); ?> <!– zenback_body_end –> <!– zenback_date –> と言った具合になる。 ・補足2 テーマ「Weaver 2.0」を例に説明するが、「<!– … 続きを読む →

Posted in WordPress, ネット・PC | Tagged , , , , , , | 7 Comments

高度なコメントサービス、「DISQUS」をWordPressに導入する

このブログでは、万年筆や革製品などの私にとって愛おしいモノたち、こだわりの製品、優れたツールなどについて語って行こうと思う。 新規にブログを立ち上げるにあたって、今回は「WordPress」を選択した。 以前は、「Movable Type」なども使ったことがあったが、今更「Movable Type」でもないし、使った事がないものを使ってみたかったという気持ちも、「WordPress」の選択を促した。 「WordPress」は、SQLサーバーが必須となり、多少の面倒もあるが、殆どのレンタルサーバーが、SQLサーバーを標準機能として備えているので問題ない。 「WordPress」と言えども、素の状態での利用は厳しい。色々とカスタマイズが必要になるが、ソーシャルメディアを意識したカスタマイズを行いたいと考えていた。 また、以前から、どうしても導入したかったサービスがあった。 それが「DISQUS」である。 「DISQUS」は、ブログのコメント機能にあたる部分のみを提供しており、「WordPress」にも導入できる。 自身が管理する複数のブログやHP上に投稿されたコメントを独立して一元管理できると言うサイト運営上のメリットもあるが、「DISQUS」の場合、コメントする側にとっても同様のメリットがある。 他のブログに投稿したコメントも、そのブログへアクセスすること無く、「DISQUS」上で一元管理できるのである。 「DISCUS」によって提供されるコメント欄では、「DISCUS」アカウントでログインしてコメントする以外に、Twitter、Facebook、OpenID、Yahoo!のアカウントでもログインが許されている。 勿論、ゲストとしてコメントを投稿を許すことも出来るが、登録ユーザーとして投稿した方が色々と面白い。 登録ユーザーのプロフィールでは、「フォロー」機能が提供されている他、自身のTwitterやFacebookのIDなども表示され、従来のブログのコメント欄とは比較にならない程、投稿者の顔が見えてくる。(当然、これを嫌う方も少なくないだろうが・・・。) TwitterやFacebookのアカウントを持っているなら、コメントを共有することも可能だ。その他のサービスとの連携も出来る。 「DISQUS」では、登録ユーザー同士で、ちょっとしたソーシャルネットワークが構築できる仕組みになっている。 ユーザー同士のコミュニケーションを意識してか、返信が分かりやすいスレッド型のコメント欄を採用しており、Ajaxを用いることで、コメント投稿時にページの再読込が発生せず、スムーズは投稿が可能となっている。 特徴やメリットをまとめてみた。 (投稿されたもの、投稿したものを含めて)複数のサイトのコメントが一元管理できる。 様々なサービスのアカウントでログイン出来る。 外部サービスとの連携。 投稿者同士でソーシャルネットワークの構築ができる。 ブログやサイトではなく、むしろコメントの投稿者に光を当てるシステムになっている。 ゲスト投稿を許可することで、従来の様な匿名性の高い投稿も可能。 これだけ面白そうな「DISQUS」を使わない手はない。 ただし、問題もある。「DISQUS」が提供するコメント欄自体は、日本語に対応しているが、その管理画面が日本語に対応していない。 英語の画面を見ながら、登録、設定、管理を行うことになる。 「DISQUS」のアカウントを作成したら、プロフィールの設定で、「DISQUS」と連携する外部サービスを設定しておくと便利だ。TwitterとFacebookでは、コメントを共有できる。 アバターも登録しておいた方が良いだろう。 プロフィールの設定は、主として投稿者としての設定になるが、自身のブログやサイトのコメント欄の設定も必要になる。 サイトの設定で重要な部分は、「General」というタブに集中している。 出だしに下記のような設定項目がある。 Twitter@Replies・・・コメントをツィートした場合のリプライ先となるTwitter ID。 Disable Like Buttons・・・Likeボタンを表示しない。 Media Attachments・・・画像、動画の添付を許可する。 Trackbacks・・・トラックバック機能を追加する。 Akismet・・・スパムフィルタ「Akimet」を有効にする。要API Key。 Reactions・・・記事への言及を外部サービスから探し、表示する。検索対象のサービスを指定する。 Display login buttons with comment box・・・外部サービスのIDでのログインを許可する。ログインを許可するサービスにチェックする。 Who Can Comment?・・・コメントを許可する条件。「Anyone」の場合、ゲスト投稿が許可される。   下の方を見てゆくと言語とタイムゾーンの設定がある。 更に下には、FacebookのAPI Keyの設定項目がある。 Facebookにログインした状態で、「Click here to get one」をクリックすると、Facebook上で、アプリが自動的に作成され、API Keyが入力される。 作成されたアプリは、下記で参照、修正、削除できる。 http://www.facebook.com/developers/ 以前は、Facebookでのログインを許可する場合の必須入力項目だったが、現在は、自分で作成したアプリを経由させない限りは必要ないのかもしれないが、テストしていないの詳細は分からない。 他にも設定項目はあるが、ここまで設定しておけば、通常は問題ない。 続いて「WordPress」への組み込みを行う必要があるが、「プラグイン」の形で提供されているので、難しくはない。 プラグインは、サイトの管理画面の「Install」からダウンロードできるが、「WordPress」の管理画面から「Disqus Comment System」で検索したほうが早いかもしれない。 プラグインを有効にしたら、後は指示に従って設定すれば良い。 ちなみに、一覧にないサービスや一般のサイトに「DISQUS」を組み込む場合は、「Universal Code」を使うが、コード中の「var disqus_shortname = ‘example’」の「example」をサイト登録時に設定した「short name」で置き換えてから使うこと。 実物が、この記事の直ぐ下に表示されているので、そちらを見て欲しい。

Posted in WordPress, ネット・PC | Tagged , , , , , | 64 Comments