Facebookウィジェット(Like Box)の設置方法(ソーシャル連携機能活用術 - その6)
Facebook での活動をブログ上にも可視化(見える化)
Facebook(フェイスブック)とブログをつなぐ TIPS の締めくくりとして、Facebook の機能をブログ上で更に活用するための便利なブログパーツ「Facebookウィジェット(Like Box)」の設置方法をご紹介します。
Facebook(フェイスブック)とブログをつなぐ TIPS の締めくくりとして、Facebook の機能をブログ上で更に活用するための便利なブログパーツ「Facebookウィジェット(Like Box)」の設置方法をご紹介します。
Facebook とブログを連携させる機能の2つめは、Facebook へブログの更新(新着記事)を知らせる機能、クロスポストの手順をご紹介します。
前回までの Twitter(ツイッター)とブログを組み合わせる紹介をしてきましたが、今回からは Facebook(フェイスブック) とブログを連携させる機能をご紹介します。
ここまでは TypePad ビジネスに実装されている Twitter との連携機能を紹介してきましたが、今回は別方向から Twitter を活用する便利な機能をご紹介します。
TypePad ビジネスではたくさんのソーシャル連携機能を実装し、このTypePad ビジネスブログではその利用方法などを紹介してきました。
便利な機能の数々ですが、最近使いはじめたばかりでまだ TypePad ビジネスの機能をよく知らない、という方のために、過去に紹介したソーシャル連携機能をあらためてご紹介したいと思います。
まずはこちら…
こんにちは、TypePad ビジネスチームです。
今回は、TypePad ビジネスのブログで自動的に出力しているフィードを利用して「まとめページ」を作成する方法をご案内します。
今回の TBB では 2011年6月度の月例リリース で搭載された「zenback BIZ 連携機能」を使って、実際に標準テンプレートで構築されているブログの記事フッターに zenback BIZ ウィジェットを設置するまでの手順をご紹介します。
シックス・アパート製品同士シームレスに連携された利点を活かすことで、現在ご利用いただいている TypePad ビジネスへのソーシャルメディア最適化(SMO)施策をさらに一歩おしすすめてください。
今回は「TypePad ビジネス活用術紹介レクチャー」でいただいたご質問の中から、カスタム CSS を活用した「カスタムテーマで記事やサイドバーの横幅を変更する方法」をピックアップしてご紹介します。
2011年5月の月例リリースで追加された新機能「カスタム HTML」を利用すると、ブログのサイドバーへ自由に HTML を設置することができます。
HTML を挿入することで、企業のロゴ画像を表示したり、リンク集、自己紹介、サードパーティから提供されているブログパーツやウィジェットなどを表示することができます。
そこで今回の TBB では、カスタムHTMLの具体的な利用方法についてご紹介していきます。
今回の TBB では、二回にわたって企業サイトをソーシャル化するためのウィジェット zenback BIZ を、TypePad ビジネス で運営するビジネスブログに設置するための手順をご紹介します。
まずは第一回目として zenback BIZ への無料トライアル申請からユーザー登録までの手順をご紹介します。
今回利用する Google カスタム検索(beta)は、サイトに合わせてデザインを変更したり、上級者テンプレートを利用することで検索結果ページを自分のブログ内に設置できるなど、柔軟なカスタマイズが可能な無料のサイト内検索サービスです。
まずはこの TypePad ビジネスブログ の右上をご覧ください。
このように、「ブログの右上に検索ボックス」を設置し、「記事の上段に検索結果」を表示するまでの手順をご紹介します。
今回は、TypePad ビジネス で運営するブログと mixi(チェック、イイネ!)や Facebook(いいね!)など、ソーシャルメディアとの連携がさらにパワーアップする「Open Graph Protocol (以下 OGP)」についてご紹介します。
OGP は、ブログとソーシャルメディアをよりスムーズに連携させる仕組みとして昨今注目されつつあります。
TypePad ビジネスでは、すでに 先月2月22日のリリース にて OGP を標準実装し、対応が完了しました。早速ですがどのような効果があるのか詳しく見てみましょう。
続きを読む "Open Graph Protocol で mixi や Facebook などソーシャルメディアとの連携を強化" »
今回の TBB では、先日(2011年2月22日)リリースした2つの新テーマ「ニュースペーパー」と「フォトウォール」のデザイン設計を担当した 株式会社オレンジクラフト 代表の小林長武氏に、テーマ作りにまつわるプロジェクトの裏話をうかがったインタビューの様子をお届けします。

昨日(2011年2月22日)ベータ版として公開した新デザインテーマ「ニュースペーパー」と「フォトウォール」に、標準テーマのまま(上級者テンプレートに変換せず)さらにカスタマイズして利用するためのTIPSとして、サイト上段の共通ヘッダーにオリジナルのロゴを追加する方法をご紹介します。

今回の TBB では、TypePad ビジネス の 上級テンプレート を使って構築しているブログの中で、記事の概要(要約)として入力したテキストを、記事ごとに固有(ユニーク)な Meta Description(メタタグ)として反映させるための TIPS をご紹介します。
SEO(検索エンジン最適化)施策の一つとしてぜひ取り組んでみてください。
TypePad ビジネス の標準テンプレートとして提供している Mosaic、手軽にオリジナリティが出せるテーマとしてすでにたくさんのサイトでご利用いただいています。
利用方法や、無料で配布しているサンプル・バナーなどは以下のチュートリアル記事をチェックしていただくとして。
今回の TBB では、実際にこの Mosaic テーマを使って運用している TypePad ビジネス の導入事例をピックアップしてご紹介します。
先日 10 月 19 日の月例リリース にて、上級者テンプレートの編集画面がより編集しやすく、さらに使いやすくなりました。
具体的には、上級者テンプレートの編集画面を、タグごとに色分けして表示することが可能になります。
色分け表示を有効にするための設定は、以下になります。
今回の TBB では、上級者テンプレートを利用している場合のみに利用できる Evernote サイトメモリーボタンの設置方法をご紹介します。
TypePad ビジネス では、標準テンプレートを利用いただいている方にも 2010年11月16日に Evernote 連携機能を提供開始予定ですが、今回は先行して上級者テンプレート用のデザイン TIPS としてご紹介します。
今回 10 月 19 日の月例リリースから TypePad ビジネス で上級者テンプレートを利用しているブログにも、ブログのフッターに mixi の「mixi チェック」ボタンが設置できるようになりました。

※ mixi チェックボタンを設置できるのは、個別ページのみです。(ブログ全体には設置できません。)
※ 標準ドメイン「---.typepad.jp」、「---.weblogs.jp」いずれかを利用中のサイトのみで設置できます。
独自ドメインを設定しているサイトではこのページで紹介している手順は利用できません。以下の手順にて設置を行ってください。
今回の TBB では、ブログ記事本文の見出し要素(Headline)にデザイン(スタイル)を施したい場合に使える、ちょっとクールな カスタム CSS テクニック をご紹介します。
具体的には、文中の HTML で定義する <h4> と <h5> に、それぞれ個別の見出し用デザインを設定していきます。

※ TBB 記事本文中の <h4>、<h5> で施している見出しデザイン例
※ TBB で利用している Mosaic テーマ内のパーツではすでに <h1> 〜 <h3> 要素が使われているため <h4> と <h5> を本文の見出し要素として利用
今回は、前回紹介した「TypePad ビジネスが mixi チェックに対応」に引き続き、記事フッターに設置できるシェアボタンに追加された新機能のご紹介です。

すでに多数ご利用いただいている Twitter のシェアボタンが、今週おこなわれた月例リリースで Twitter 公式のボタンデザインに変更され、より高機能になりました。
本日のリリースで TypePad ビジネス にも mixi チェックボタンを設置できるようになりました!
今回のリリースではまず(上級者テンプレートではない)標準テンプレートのブログをご利用のお客様のみに、先行してご利用いただけるようになっています。
後述する設置方法をご確認の上、ぜひご利用ください。

※ mixi チェックボタンを設置できるのは、個別ページのみです。(ブログ全体には設置できません。)
※ 現在は標準ドメイン「---.typepad.jp」、「---.weblogs.jp」いずれかを利用中のサイトのみで設置できます。(独自ドメインを設定しているサイトには設置できません。)
※ 上級者テンプレートへの実装方法については「上級者テンプレートを利用したブログでも「mixi チェック」が利用可能に」をご覧ください。(2010/10/21 追記)
今回は Twitter が公式に配布しているブログパーツ「プロフィールウィジェット」を TypePad ビジネス で運営するブログのサイドバーに設置する方法をご紹介します。
このブログパーツを設置すれば、自社の Twitter アカウントでつぶやいた最新の情報を、ブログ訪問者にもリアルタイムに伝えていくことができます。
もしも TypePad ビジネスでブログを運営していて、かつ Twitter も使われている方はぜひ今回紹介する手順を参考にして、設置にチャレンジしてみてください。
※ 今回紹介するサービスやソフトウェアの利用規約ならびにサポート条件、登録商標などについては各開発元が掲示する内容をご参照ください
今回は多くの TypePad ビジネス ユーザーから「設置したい!」というご要望の多い、ツールバーの設置方法についてご紹介します。
ツールバーとは、よく利用するメニューを抜粋したものになります。ページのヘッダやフッタによく用いられます。
今回ご紹介する設定を施していただければ、以下スクリーンショットのようなイメージのツールバーを各ページの最上段に設置することができます。
今週からこの TBB でも最上段にツールバーを設置開始したのでご覧いただけることでしょう。
とてもカスタマイズしやすいソースコードなので、設置するページに合わせてメニューの内容を書き換えてご利用ください ![]()
好きなバナーをアップするだけで簡単にデザインをカスタマイズできるデザインテーマ「Mosaic」、すでにいくつもの TypePad ビジネス を使ったサイトでご利用いただいています。
※ 右のサムネールの赤線でかこんだ箇所の画像がバナーです
われらが TBB も、今週からこの Mosaic テーマに切り替えてみたのでお気づきになったことでしょう。
このテーマをさらに使ってみていただくために、今回は特別に以下11の業種別にイメージしたバナー画像を準備し、無料でダウンロードいただけるようにしました。
こちら、わたしたち TypePad ビジネスチームからの(ちょっと遅めの)ささやかな夏のお中元です。ぜひ試してみてください ![]()
今回は前々回の記事で紹介した Blog It ブックマークレット を早速使い、 TypePad ビジネス ユーザーにも参考になる SEO(検索エンジン最適化)関連の TIPS をご紹介します。
特にデザインを上級者テンプレートに変更して利用されている方は『必ず
』このポイントを見逃さないでください ![]()
先日2010年6月15日にリリースされた新機能で、上級者テンプレートの編集が断然便利になったことは 前回ご紹介 させていただきました。
さっそくお試しいただいた方も多いかと思いますが、カスタマイズ中の TypePad ビジネス で運営するブログに、さらにもう "一手間" 加える TIPS をご紹介します。
2010年6月15日のリリース にて、テンプレートモジュールを使った上級者テンプレート編集が格段にしやすくなりました。
今までのテンプレートモジュールは、TypePad ビジネス のシステムに保存されている共通テンプレートを読み込んでいたため、編集を行うまでに以下の手順が必要でした。
自分で書いていて言うのもなんですが、これがとても煩雑なのです… ![]()
今まで TypePad ビジネス で上級者テンプレートの編集をされたことがある方ならきっと、「フッター項目をちょっと編集したいだけなのに、編集するまでの道のりが遠い!」なんて思いをされたことがあるでしょう。
今回のリリースでは、そんな悩みを改善しました。
なんと、既存テンプレートを上級者テンプレートに変換するだけで、テンプレートモジュールが自動的に展開されるようになったのです。
この追加機能により、たとえば「全部の記事のフッターに、共通する定型文を表示したい」と思った時に、既存のテンプレートから上級者テンプレートに変換するだけで、修正が必要となるテンプレートモジュール「entry-list」や「entry-list-sticky」の編集がすぐに開始できるようになりました。
既存のテンプレートから上級者テンプレートに変換する具体的な手順と、テンプレートモジュールが展開される場所は以下の通りです。



以上で、既存テンプレートを上級者テンプレートに変換する作業は完了です。
テンプレートを適用すると、そのデザインに含まれている上級者テンプレートが一覧表示されたデザイン編集画面に移動します。
すでにテンプレートモジュールが展開されているので、すぐに編集が開始できます ![]()

前回のリリースに続いて、さらに強化された上級者テンプレートの編集機能はいかがでしたでしょうか?
次回は、展開されたテンプレートモジュールを利用して、さらに便利に使う方法をご紹介します。お楽しみに![]()
5月19日から TypePad ビジネス でのサポートが開始された MT タグ のなかから MTIf と MTSetVarBlock の使い方(ユースケースとサンプルコード)を、ProNet に所属する Six Apart ソリューションパートナー であり、TypePadデザインカスタマイズ というサービスも展開している 合同会社アライアンス・ポート が運営する「#Fairground」という web マガジンにてご紹介いただきましたので報告します。
5 月 19 日のリリースで強化された上級者テンプレート編集機能、便利な 3 つの機能のうちの 2 つは 前回の記事 でご理解いただけたかと思います。
今回は 3 つの中で、実は一番大きく変わった残りの新機能について、じっくりご紹介していきます。
この機能、一度使うと病みつきになりますよ。使いなれてしまうと、「この機能無しには上級者テンプレートの編集はできない!」というぐらいに大事な機能になること間違いなしです。そんな機能が、具体的にどう動くかというと…
たとえば、[Main Intdex Template] の編集画面を開いた時、以下のように [テンプレートの内容] の右側に、今開いているテンプレート内にインクルードしているモジュール一覧が表示されます。
テンプレート内にインクルードしているモジュールが一覧で表示されて、しかもモジュール名をクリックすると、そのモジュールの編集画面に移動することができます。
この機能を利用すると、複数のモジュールをインクルードしていても、まるで 1 つのテンプレートを編集するような感覚でいくつものモジュールを編集することが可能です。
そして、さらに便利にモジュールを編集(作成)するための機能も追加されました。
モジュール一覧が表示されている部分をよく見ると、 [entry-list (作成)] という表記があります。
これは、[Main Index Template] にインクルードする、という指定をしているけれど、インクルード先がまだ作成されていないモジュールです。
これがとても便利!
以前は、インクルード先のモジュールを作成してから、そのモジュールをインクルードするための指定をインクルード元のテンプレートに記入する、という手順が必要でした。
もしその手順を間違えて、先にインクルード元のモジュールに「このモジュールをインクルードする」という指定だけを記入すると、テンプレートを [保存] し再構築を行った時にエラーとなっていたのですが…
この機能が追加されたおかげで、今後は [保存] をクリックした時点で、まだ未作成のモジュールまで教えてくれます。
さらに、未作成モジュール名の右側に表示される [作成] という部分をクリックすると、未作成であるそのモジュールの新規作成画面に移動するので、いちいちテンプレート一覧画面に戻ってモジュールの作成ボタンをクリックして…なんて手間も無く、スムーズにモジュールの追加が可能です。
以前はモジュールの中身を編集(もしくは追加)するとなると、以下のような手順が必要でした。
文章だとたったの 3 ステップですが、実際にやると、テンプレート一覧画面とテンプレート新規作成(編集)画面を行ったり来たりの繰り返しがあったり、作成したいモジュールが多いと意外と大変で、いつの間にかどこまでやったかわからなくなってしまったり… ということがあったかと思います。
けれど、今後はインクルード元のテンプレート内に、編集したいモジュールを先にインクルードする指定を行って(上記 2 と 3 の手順を先におこなって)テンプレートを保存する、表示されたモジュール一覧から 1 つずつモジュールを作成・編集する、というような作業が可能です。
1 つのテンプレートを元に作業ができるので、複数のモジュールを編集したい場合でも、どこまで作業したかがわかりやすく、インクルードしているモジュールが一覧でわかるので、管理もしやすくなりますよ。
この機能は、今まで上級者テンプレートを使いこなしてきた方も、これから上級者テンプレートを利用する方にも、とても便利な機能として利用できるかと思います。
前回の記事 で紹介した機能とあわせて、強化された「上級者テンプレート編集機能」を、ぜひこの機会にお試しください ![]()
TypePad対応MTタグ:
上級者テンプレート:
上級者テンプレートでブログのデザインを管理している方や、これから上級者テンプレートを利用しようとしている方に朗報です。
先日 5 月 19 日のリリースで TypePad ビジネス の上級者テンプレート編集に役立つ機能が 3 つも追加されました。
これらは、上級者テンプレートの編集がぐんと楽になる便利な機能です ![]()
具体的にどのように便利か、どのように利用するのか、詳しくご紹介いたします。
この機能は、たとえば <MTEntries> タグを利用する場合、今までは <MTEntries> の MTE の部分を小文字で記入すると <MTEntries> タグとして正常に動作しませんでした。
けれど今後は
<mtentries> と記入してもエラーにならず、正常に動作します。
これにより、「大文字と小文字を間違えた!」というような、後から探し出すのには苦労するような記入ミスがあっても大丈夫。大文字か小文字か、という細かい部分にとらわれず、存分にテンプレートの編集をおこなうことができます。

上級者テンプレートの記述内容に誤りがあった場合、 [保存] ボタンをクリックした後、または [公開] ボタンをクリックした後(再構築後)のいずれかのタイミングで、どのような誤りがあるかをエラーの内容として表示するようになりました。
たとえば <MTEntries> というブロックタグ内に記入しなければならない MT タグを <MTEntries>~</MTEntries> の外に記入してしまった、など、MT タグの記述形式に沿っていない書き方をしてしまった場合、今 までは、どのような記述が問題になっているか、ブログを管理しているお客様には見えませんでした。
今後はどのようなミスがあるかをテンプレートの [保存] 時や [公開] (再構築)時にすぐ確認できるので、素早く対応が可能です。

いかがでしょうか? 今回は 3 つの新しい機能のうち、2 つの機能をご紹介しました。これだけでも上級者テンプレートの編集がとてもやりやすくなりますよね。
次回は、3 つのうちの残り 1 つ、「テンプレートの編集画面にインクルードしているモジュールの一覧とそのモジュールへのリンクを表示」機能についてご紹介します。
次にご紹介する機能は、さらに上級者テンプレートを使いこなすために重要な機能となるので、記事を読んで、ぜひマスターしてくださいね。それでは、次回をお楽しみに ![]()
今回の TBB では 5月19日にリリースされた新機能のなかから新テーマ「Mosaic」の使い方をご紹介します。
このテーマを使うためには、管理画面のなかから「ブログ」>「デザイン」>「テーマを選択」を開き、「Mosaic Dark」もしくは「Mosaic Light」を選んでください。
ためしにこの TBB に「Mosaic Light」を適用し、「3列(右サイドバー) 」レイアウトを選択すると以下スクリーンショットのようなデザインができあがります。
このデザインを叩き台にして、上段バナー画像(デフォルトで組み込まれている花の写真)を別の「カスタムバナー」へ変更していくことで、手軽にオリジナリティを発揮することができます。
本日(5月19日)の月例リリースで TypePad ビジネス に新しいテーマが 12種類 合計 24個 追加されましたのでご紹介します。
今回追加されたなかでも特に個人向け TypePad で人気のある「Mosaic」というテーマは、指定のサイズの画像バナーをアップロードするだけでオリジナルなブログデザインが簡単につくれる優れものです。
その他にも「Journal」「Pico」など、シンプルにつかえて応用範囲の広いテーマも盛りだくさん。ぜひチェックしてみてください。

その他、今回リリースされた新機能や「Mosaic」の使い方などは追ってこの TBB でもご紹介していきますので、こうご期待 ![]()
今回は 4 月 13 日に実装された新機能の1つ、
サイドバーの「アーカイブ」項目に「もっと読む」リンクを表示するための設定手順をご紹介します。
TypePad ビジネス のブログでは過去の記事を蓄積し、まとめて閲覧するために「アーカイブ」機能を利用します。
この「アーカイブ」機能を使うことで、月ごとなど特定の期間(条件)で記事を分類・集約し、指定された期間(条件)に属する記事を一覧表示できます。
ひとまず TypePad ビジネスを使いはじめたら「標準デザインテーマ(テンプレート)を活用しよう!」ということで今回は数ある導入事例の中から、標準デザインテーマ が的確にアレンジされている秀逸な活用例をご紹介していきます。(順不同)
Copyright 2003- Six Apart, Ltd. All rights reserved.