5分でわかる Livefyre コメントの導入方法と使い方
Livefyre コメントシステムの導入方法から実際のコメント方法、さらに管理画面からのコメント管理方法まで 5分でわかるように解説します。 1つ前のエントリーで TechCrunch がコメントシステムを Facebook コメントから、Livefyre に変更した件について書いたんですが、その最後に、当 Blog もちょっと前から Livefyre に切り替えてるんで、その導入方法とか書きます予告をしました。 Facebook コメントにしたら荒らしと同時に有益なコメントまで減ったらしい なので、予告通り、Livefyre の導入から設定、実際にコメントを投稿するまでの流れについて解説してみます。久しぶりの 5分でわかるシリーズ。 Livefyre とは？ まずは Livefyre についてですが、日本語での紹介記事としては TechCrunch Japan の下記の記事が特徴的な部分
Microdata を使ってみよう。サンプルソースで学ぶ Microdata
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
Google+ プロフィールバナー画像作成用 PNG ファイル
Google+ のプロフィールページって、メインのプロフィール画像以外に最大 5つまでスクラップブック写真っていう画像を掲載することができるんですよね （プロフィールバナーと呼ばれているみたいですが）。で、ここに 1枚の画像を分割して掲載したかったので簡単にサイズ調べてスライス用のレイヤーを作ったんですが、折角なのでシェアしようかなと思います。 実際に設定するとこんな感じになります（画像クリックで実際のページが開きます）。下記はこの Blog の Google+ ページに設定してみた例です。 PNG でスライスレイヤーを設定済みですので、Fireworks で開いてもらって、スライスしたい画像に丸ごとコピペするなどしてもらえればあとは画像を書き出すだけです。 PNG ファイルのダウンロードは下記のリンクからどうぞ。 Google+ プロフィールバナー画像作成用 PNG ファイル （zip
HTML5 は SEO に有効なの？
「HTML5 でコーディングしたら SEO （検索エンジン最適化） 的に有利になりますか？」 っていう質問、たまに聞かれるんですけが、それに対する答えとして私がまとめて書こうと思っていた内容をすべて言ってくれてしまっている記事が Impressive Webs で投稿されましたので、便乗して簡単に訳しつつ紹介してみようと思います。 「HTML5 でコーディングしたら SEO （検索エンジン最適化） 的に有利になりますか？」 っていう質問、たまに聞かれるんですけどね。 個人的には "SEO のために" HTML5 にするか XHTML にするかなんて悩んでる暇があったら利用者に役に立つコンテンツの 1つでも考えた方がいいよと思うわけですし、聞かれたときはそのように答えているわけですが、折角なので簡単に考えをまとめて Blog に書いておいてみようかなと思ってダラダラと書き始めていたら、自分が
HTML5： ジャーナリスト、アナリストのための覚書
ちょっといつもと趣が異なる記事として、HTML5 Doctor で 「HTML5: briefing notes for journalists and analysts」 という記事が上がっていましたのでまたまた稚拙ではありますが翻訳など。 今回の記事は、ジャーナリスト、アナリスト （つまり、あまり技術的な話に精通していない人） 向けに、よくある質問とその答えをまとめたものです。技術者以外の人に 「HTML5 って何？」 って聞かれたときの参考になるかも。 原文 HTML5: briefing notes for journalists and analysts : HTML5 Doctor HTML5とは何ですか？ あなたが何を求めるかによりますが… 「HTML5」 という言葉には 3つの異なる用途があります。 HTML5 仕様 HTML5 の最も正確な意味は、W3C と WHATWG
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
常用中 Firefox 3 アドオンのまとめ
1年に 1回は書いているこのネタ、懲りずに私が個人的に日常利用している Firefox アドオン（+ Greasemonkey ユーザースクリプト）を挙げてみました。Firefox 3 対応のアドオンのみを集めています。 1年に 1回は書いているこのネタ、懲りずに私が個人的に日常利用している Firefox アドオン（+ Greasemonkey ユーザースクリプト）を挙げてみました。Firefox 3 対応のアドオンのみを集めています。 アドオンはあんまり数多くインストールすると結構重くなるので注意してくださいね。その場合は、インストールしても、使うとき以外は無効にしておくなど工夫しましょう。メモリてんこ盛り PC ならあまり気にならないと思いますが。 今回は数が多いので大まかにグループ分けして紹介してみます。あと、特定のアドオンに依存しているものもありますので、その辺はまとめています。
RDF Semantics （RDF意味論） 入門
RDF関連の W3C 文書群の中でも重要度が高い、にもかかわらず日本語訳がなくて苦労していた RDF Semantics の日本語訳を小出誠二氏が公開し、さらにこの小難しい文書を読むにあたって非常に役立つ、「「RDF意味論」を読むために」という連載記事を公開されていますのでご紹介します。 RDF （Resource Description Framework） とか言ってもあまりピンとこない人の方が多いと思うのですが、これを基礎とした 「セマンティックウェブ」 は個人的にとっても興味のある分野で、色々と書籍だの、Web 上のドキュメントだのを読んだりしてるわけです。その中でも基本となる W3C の文書群は重要なんですが難しい…… そんな文書群の中でも重要度高い、にもかかわらず日本語訳がなくて苦労していた RDF Semantics の日本語訳を小出誠二氏が公開し、さらにこの小難しい文書を読
<hr /> コンテスト？
Smashing Magazine で、hr 要素のデザインを競う 「<hr /> コンテスト」 が開催されてます。その名の通り、CSS と背景画像を駆使してクールな hr 要素を作っちゃおうという企画。単純に画像作成のスキルが勝敗を分けそうですが、試みとしては面白いかも。そういえば hr 要素とかってしばらく使ってないなぁ…… The <hr /> Contest ： Smashing Magazine Similar to our blog header contest we'd like to create a smashing gallery of freely available <hr /> graphics which every designer could use without any restrictions whatsoever. To achieve this w
MT の管理画面に Basic 認証 | WWW WATCH
.htaccess を使用して Movable Type の管理画面 「mt.cgi」 にのみベーシック認証かける方法と、管理画面 URL の変更方法。 知っている人には当たり前すぎて何をいまさらな話ですが、ちょっと質問されたのでメモついでのエントリー。 Movable Type の管理画面 （mt.cgi） が丸見えなんで、そこに Basic 認証をかけたいって場合、MT のインストールディレクトリ以下のディレクトリに普通に Basic 認証かけちゃうと、検索やらコメントやらトラックバックが軒並み認証通らないと使えなくなっちゃいますよね、mt.cgi にだけ認証かけれませんかというのがいただいた質問。 ということで、.htaccess で特定ファイルにのみ Basic 認証かける方法を。 Basic 認証自体がセキュリティ的にどうかという話もあるかもしれませんが、対象が Blog の管理
CSS&JavaScript 表現アイデア帖
ものすごく久しぶりに更新しといて宣伝かよという感じですが、MDN さんより今月発売された 「CSS & JavaScript 表現アイデア帖」 のご紹介。 このムック本は同じく MDN さんが発行する web creators 上で過去に掲載された特集や連載の中から、CSS と JavaScript に関する記事を選んで再編したもの。私やうちの会社の中の人が書いた記事もいくつか掲載されています。これ 1冊で 150件くらいの記事がまとまっているので、もう web creators のバックナンバー漁りから解放されるかも。 Webサイト制作でいまや必須の技術であるCSSを中心に、デザインに差をつけるJavaScriptのテクニックを紹介。CSSやJavaScriptでつくるデザインのTipsと、抑えておきたいCSSの知識をテーマごとにまとめました。今日から、明日からすぐに役に立つTipsと知
clip プロパティで画像をトリミング
phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。 いきなりですが、サンプル。 clip プロパティで画像トリミングサンプル 通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。 ソースは下記。まずは XHTML ソース。 <p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p> CSS は下記のとおり。今回のサンプルは画像のサイズが、240px ×
pre 要素に対する印刷用 CSS
サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。 さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」 を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。 なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト （Preformatted Text） として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
MT 向け Ajax サイト内検索
以前から暴想さんで公開されている Ajax を使用した Blog 向けサイト内検索を社内的なサイトで使わせて頂いたのでお礼を兼ねて紹介。実際にベースにしたのは暴想さんのスクリプトを元に Movable Type 向けにカスタマイズされた Dakiny さんバージョン。 そいつをさらにカスタマイズさせてもらって使用しましたが、そのバージョンを折角ですので公開してみようと思います。 今回使わせていただいた blog_ajax_json_search.js は、エントリーのタイトルや本文、コメント （コメントも検索対象にしたは風柳亭さんによるカスタマイズ） を全部 JSON で書き出しておいて、そいつを JavaScript で検索する仕組みなので、とにかく検索が早い。かなり便利なスクリプトです。もちろんそのままでも十分使えるのですが、個人的に気になった点とかをカスタマイズしています。 とりあえ
GRDDL で広がる XHTML の可能性
XHTML （XMLも） から XSLT （じゃなくてもいいんだけど） によって汎用的にメタデータを抽出するための仕様、GRDDL （Gleaning Resource Descriptions from Dialects of Languages） が 11日に W3C 勧告として公開されました。同時に W3C のプレスリリースにも GRDDL についての発表がされています。 GRDDL の公開について (W3C 勧告) ： W3C プレスリリース（日本語） 基本的に (X)HTML は人間様向けの言語であって、アプリケーション等、機械から利用するには微妙な存在。機械向けのメタデータを提供する手段としては RDF （Resource Description Framework） が存在するわけですが、人間向け、機械向け別々のデータが必要な場合、今までは両方とも制作者が用意するのが普通だっ
あなたのサイトはおいくら？
デジパでは Webサイトの売買を手がけるサイト流通サービス 「サイトストック」 を提供していますが、そのサイトストックの新機能として、簡単に自分のサイトの価格を...
12 のレイアウトを切替可能なテンプレート
1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 50KB） 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html （XHTML テンプレート） css （CSS ファイル格納フォルダ） img （画像ファイル格納フォルダ） js （JavaScript ファイル格納フォルダ） 基本的に
Movable Type 4 Beta レビュー
先日 Beta リリースされた次期 Movable Type である、「Movable Type 4」 ですが、早速 Beta 版を入手してテストしてみました。... 先日 Beta リリースされた次期 Movable Type である、「Movable Type 4」 ですが、早速 Beta 版を入手してテストしてみました。 今日たまたま SixApart の中の人と打ち合わせしている時に、デモを交えて色々見せて頂いたので、その中で特に気になった点などを挙げてみたいと思います。まだ英語版のみ （日本語の入力はもちろん可能） の Beta 提供ですし、正式リリースまでに変更される点もあるかもしれませんが。 Movable Type 4 開発者向けベータテスト ： Six Apart 利用規約にしっかり目を通してから使用しましょう。ファイルをダウンロードしたら解凍してサーバにアップ。いつも通
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
