Loading

デザイン

2011年10月14日 (金)

Twitterウィジェットの設置方法(ソーシャル連携機能活用術 - その3)

ここまでは TypePad ビジネスに実装されている Twitter との連携機能を紹介してきましたが、今回は別方向から Twitter を活用する便利な機能をご紹介します。

続きを読む "Twitterウィジェットの設置方法(ソーシャル連携機能活用術 - その3)" »

2011年10月12日 (水)

Twitter へのシェアボタンを設置する(ソーシャル連携機能活用術 - その1)

TypePad ビジネスではたくさんのソーシャル連携機能を実装し、このTypePad ビジネスブログではその利用方法などを紹介してきました。

便利な機能の数々ですが、最近使いはじめたばかりでまだ TypePad ビジネスの機能をよく知らない、という方のために、過去に紹介したソーシャル連携機能をあらためてご紹介したいと思います。

まずはこちら…

続きを読む "Twitter へのシェアボタンを設置する(ソーシャル連携機能活用術 - その1)" »

2011年6月 9日 (木)

カスタムテーマで記事やサイドバーの横幅を変更する方法

カスタム CSS を活用して段組みレイアウトをより柔軟に設定

今回は「TypePad ビジネス活用術紹介レクチャー」でいただいたご質問の中から、カスタム CSS を活用した「カスタムテーマで記事やサイドバーの横幅を変更する方法」をピックアップしてご紹介します。

  • 変更手順
    • 2列(左サイドバー)の場合
    • 2列(右サイドバー)の場合
    • 3列の場合
    • 3列(右サイドバー)の場合
    • 1列の場合
  • 各要素に関する補足事項
    • 注意事項
    • 関連ナレッジベース

続きを読む "カスタムテーマで記事やサイドバーの横幅を変更する方法" »

2011年6月 3日 (金)

カスタムHTML機能を利用したサイドバー装飾方法

標準テンプレートのサイドバーを自由にカスタマイズ

2011年5月の月例リリースで追加された新機能「カスタム HTML」を利用すると、ブログのサイドバーへ自由に HTML を設置することができます。

HTML を挿入することで、企業のロゴ画像を表示したり、リンク集、自己紹介、サードパーティから提供されているブログパーツやウィジェットなどを表示することができます。

そこで今回の TBB では、カスタムHTMLの具体的な利用方法についてご紹介していきます。

続きを読む "カスタムHTML機能を利用したサイドバー装飾方法" »

2011年2月24日 (木)

新テーマデザインを担当したオレンジクラフト小林長武氏へのインタビュー

ブログのテーマを作るというプロジェクトとは?

今回の TBB では、先日(2011年2月22日)リリースした2つの新テーマ「ニュースペーパー」と「フォトウォール」のデザイン設計を担当した 株式会社オレンジクラフト 代表の小林長武氏に、テーマ作りにまつわるプロジェクトの裏話をうかがったインタビューの様子をお届けします。

小林長武

続きを読む "新テーマデザインを担当したオレンジクラフト小林長武氏へのインタビュー" »

2011年2月23日 (水)

オリジナルロゴを追加 - 新テーマ「ニュースペーパー」「フォトウォール」をさらにカスタマイズ

標準テーマを維持したままオリジナリティを演出

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

Logo_on_new_theme

続きを読む "オリジナルロゴを追加 - 新テーマ「ニュースペーパー」「フォトウォール」をさらにカスタマイズ" »

2011年2月17日 (木)

Google Font APIを使ってフォントを変えてみよう

文字装飾にWebフォント(Webfonts)を活用

Google font directory 今回の TBB では、無料のWebフォント(Webfonts)サービスである「Google Font API(Beta)」を使って、ウェブコンテンツ(ブログやホームページ)に表示させるフォントの種類を変更する方法をご紹介します。

通常、特殊なフォントを使ってデザインする場合、適用させるコンテンツのテキスト部分のみを画像に変換してアップロードする必要がありますが、Webフォントを使えば、手軽に、簡単にフォントの種類を変更することができます。

しかもWebフォントを使うことで、表示するクライアント側にインストールされていない種類のフォントも指定することができるうえに、たとえ Webフォントに対応していないブラウザであっても標準フォントに自動代替されて表示されます。

もちろん文字装飾後もテキスト情報が維持されるので、検索エンジンのクローラーからも文字列として認識されます。実装ステップも少ないので、ご興味ある方はぜひトライしてみてください。

※ この記事は実際にWebフォントを利用して執筆しています
※ 一部Webフォントに対応していないブラウザでは表示されません
※ 現在 Google Font API では英字フォントのみが提供されており日本語には適用されません
※ 今回紹介するサービスの利用規約ならびにサポート条件、登録商標などについては各サービス開発元が掲示する内容に依拠します

続きを読む "Google Font APIを使ってフォントを変えてみよう" »

2010年12月 2日 (木)

タイプリストの便利な使い方

TypePad ビジネスには、タイプリスト という機能があるのをご存知でしょうか?
タイプリストとは、サイドバーに以下のような項目を簡単に追加できる機能です。

  • 友達のブログやサイトへのリンク
  • お気に入りや欲しい本、音楽のリスト
  • アフィリエイトやソースコードを貼り付けるだけで動作するタイプのブログパーツ

タイプリスト

続きを読む "タイプリストの便利な使い方" »

2010年11月30日 (火)

Mosaic テーマをつかった秀逸な事例

Mosaic_sample2_tbb250_2  TypePad ビジネス の標準テンプレートとして提供している Mosaic、手軽にオリジナリティが出せるテーマとしてすでにたくさんのサイトでご利用いただいています。

利用方法や、無料で配布しているサンプル・バナーなどは以下のチュートリアル記事をチェックしていただくとして。

今回の TBB では、実際にこの Mosaic テーマを使って運用している TypePad ビジネス の導入事例をピックアップしてご紹介します。

  • 株式会社アイタス
  • Avid Japan Music Blog
  • 『hibiki1973』五感に響く家づくり。第一建設本社Blog
  • splash

続きを読む "Mosaic テーマをつかった秀逸な事例" »

2010年11月11日 (木)

自社ブランドにあわせオリジナルなファビコン(Favicon)設置

ブラウザのタブやブックマークにもブランディングを徹底

みなさんブログやホームページのファビコン(Favicon)をオリジナルな画像に変更していますか?

ファビコンとは、ブラウザのタブやブックマークのアイコンとして表示される 16 x 16 ピクセルの小さな画像です。TypePad ビジネス を利用している場合、デフォルト(何も変更しない状態)では TypePad のロゴマーク(通称:青いハスの葉っぱ)が表示されています。

Tbb_favicon

これをせっかくなので自社ブランドにあった画像に変更してみませんか?

手順は以下のとおりです。

続きを読む "自社ブランドにあわせオリジナルなファビコン(Favicon)設置" »

2010年10月28日 (木)

上級者テンプレートの編集画面をタグごとに色分けする

より直感的に、より効率的にテンプレートを編集

先日 10 月 19 日の月例リリース にて、上級者テンプレートの編集画面がより編集しやすく、さらに使いやすくなりました。

具体的には、上級者テンプレートの編集画面を、タグごとに色分けして表示することが可能になります。
色分け表示を有効にするための設定は、以下になります。

続きを読む "上級者テンプレートの編集画面をタグごとに色分けする" »

2010年10月26日 (火)

Evernote サイトメモリーボタンを設置する〜上級者テンプレート編

ブログ記事から直接 Evernote へ記事を保存(クリップ)

Evernote03

今回の TBB では、上級者テンプレートを利用している場合のみに利用できる Evernote サイトメモリーボタン設置方法をご紹介します。

TypePad ビジネス では、標準テンプレートを利用いただいている方にも 2010年11月16日に Evernote 連携機能を提供開始予定ですが、今回は先行して上級者テンプレート用のデザイン TIPS としてご紹介します。

続きを読む "Evernote サイトメモリーボタンを設置する〜上級者テンプレート編" »

2010年10月21日 (木)

上級者テンプレートを利用したブログでも「mixi チェック」が利用可能に

今回 10 月 19 日の月例リリースから TypePad ビジネス上級者テンプレートを利用しているブログにも、ブログのフッターに mixi の「mixi チェック」ボタンが設置できるようになりました。

記事のフッターにmixiチェックボタンを設置する方法

※ mixi チェックボタンを設置できるのは、個別ページのみです。(ブログ全体には設置できません。)

※ 標準ドメイン「---.typepad.jp」、「---.weblogs.jp」いずれかを利用中のサイトのみで設置できます。
独自ドメインを設定しているサイトではこのページで紹介している手順は利用できません。以下の手順にて設置を行ってください。

  1. mixi にてコーポレートアカウントを取得する
  2. mixi チェック利用の申請を行い、チェックキーを取得する
  3. mixi チェック表示用のスクリプトを手順 9 で紹介しているテンプレート内にある <$MTMixiCheck$> の代わりに [テンプレートの内容] に挿入する

続きを読む "上級者テンプレートを利用したブログでも「mixi チェック」が利用可能に" »

2010年10月12日 (火)

見出し要素(h4、h5)のカスタムCSSテクニック

文章の段落分けをちょっとクールに

今回の TBB では、ブログ記事本文の見出し要素(Headline)にデザイン(スタイル)を施したい場合に使える、ちょっとクールな カスタム CSS テクニック をご紹介します。

具体的には、文中の HTML で定義する <h4><h5> に、それぞれ個別の見出し用デザインを設定していきます。

H4 と h5 見出しサンプル
※ TBB 記事本文中の <h4>、<h5> で施している見出しデザイン例
※ TBB で利用している Mosaic テーマ内のパーツではすでに <h1> 〜 <h3> 要素が使われているため <h4> と <h5> を本文の見出し要素として利用

続きを読む "見出し要素(h4、h5)のカスタムCSSテクニック" »

2010年9月16日 (木)

記事フッターに表示できる Twitter ボタンが多機能な公式 Twitter ボタンになりました

今回は、前回紹介した「TypePad ビジネスが mixi チェックに対応」に引き続き、記事フッターに設置できるシェアボタンに追加された新機能のご紹介です。

Tbb10091501_3

すでに多数ご利用いただいている Twitter のシェアボタンが、今週おこなわれた月例リリースで Twitter 公式のボタンデザインに変更され、より高機能になりました。

続きを読む "記事フッターに表示できる Twitter ボタンが多機能な公式 Twitter ボタンになりました" »

2010年9月 9日 (木)

Twitter公式「プロフィールウィジェット」をサイドバーに設置する方法

自社アカウントの最新タイムラインをサイドバーに表示

Twitter 公式 プロフィールウィジェット今回は Twitter が公式に配布しているブログパーツ「プロフィールウィジェット」を TypePad ビジネス で運営するブログのサイドバーに設置する方法をご紹介します。

このブログパーツを設置すれば、自社の Twitter アカウントでつぶやいた最新の情報を、ブログ訪問者にもリアルタイムに伝えていくことができます。

もしも TypePad ビジネスでブログを運営していて、かつ Twitter も使われている方はぜひ今回紹介する手順を参考にして、設置にチャレンジしてみてください。

※ 今回紹介するサービスやソフトウェアの利用規約ならびにサポート条件、登録商標などについては各開発元が掲示する内容をご参照ください

  • 自社アカウントのプロフィールウィジェットを作成
  • 作成したソースコードをタイプリストのメモとして保存
  • 保存したタイプリストをサイドバーに設置
  • 補足:サイドバーにあわせてデザインを調整

続きを読む "Twitter公式「プロフィールウィジェット」をサイドバーに設置する方法" »

2010年8月31日 (火)

ブログのヘッダーにツールバーを設置する

今回は多くの TypePad ビジネス ユーザーから「設置したい!」というご要望の多い、ツールバーの設置方法についてご紹介します。

ツールバーとは?

ツールバーとは、よく利用するメニューを抜粋したものになります。ページのヘッダやフッタによく用いられます。

今回ご紹介する設定を施していただければ、以下スクリーンショットのようなイメージのツールバーを各ページの最上段に設置することができます。

Toolbar01
※ 画像がみにくい場合は画像をクリックしてください。

今週からこの TBB でも最上段にツールバーを設置開始したのでご覧いただけることでしょう。

とてもカスタマイズしやすいソースコードなので、設置するページに合わせてメニューの内容を書き換えてご利用ください pencil

続きを読む "ブログのヘッダーにツールバーを設置する" »

2010年8月24日 (火)

デザインテーマ「Mosaic」専用バナーを無料プレゼント

Mosaicテーマ好きなバナーをアップするだけで簡単にデザインをカスタマイズできるデザインテーマ「Mosaic」、すでにいくつもの TypePad ビジネス を使ったサイトでご利用いただいています。

※ 右のサムネールの赤線でかこんだ箇所の画像がバナーです

われらが TBB も、今週からこの Mosaic テーマに切り替えてみたのでお気づきになったことでしょう。

このテーマをさらに使ってみていただくために、今回は特別に以下11の業種別にイメージしたバナー画像を準備し、無料でダウンロードいただけるようにしました。

こちら、わたしたち TypePad ビジネスチームからの(ちょっと遅めの)ささやかな夏のお中元です。ぜひ試してみてください present

  • 一般企業系
  • コンピュータ・IT系
  • 士業(弁護士・税理士・会計士・コンサルティング)
  • 飲食業(レストラン・カフェ)
  • 雑貨・物販
  • 医療系
  • 鍼灸・マッサージ
  • ファッション・アパレル系
  • 美容・理容・ネイルサロン
  • ライター
  • 写真家

続きを読む "デザインテーマ「Mosaic」専用バナーを無料プレゼント" »

2010年8月19日 (木)

ツイッター「まとめ記事」機能がバージョンアップ 〜 タイトルに日付けを付けたりCSSでデザイン変更できるようになるなど設定がより柔軟に

Twitterまとめ記事サンプル 7月の新機能として追加された ツイッターの1日のつぶやきを「まとめ記事」にする機能 が、8月17日の月例リリースでさらに強化されました!

早速いくつかのサイトで使われており、Google で「今日のつぶやき typepad」と検索するとその様子の一部がご覧いただけるかと思います。

今回はバージョンアップによって強化されたポイントを中心に、この「ツイッターまとめ記事機能」をより柔軟に運用していくための「カスタマイズの肝」をご紹介していきますflag

  • 設定できるようになった項目
  • カスタム CSS を使って「まとめ記事」のデザインを変更
  • デザインを変更したときの様子
  • 追記するためのサンプル CSS

続きを読む "ツイッター「まとめ記事」機能がバージョンアップ 〜 タイトルに日付けを付けたりCSSでデザイン変更できるようになるなど設定がより柔軟に" »

2010年7月22日 (木)

カスタム CSS を使って記事本文の行間を広げる方法

可読性をアップさせるためのカスタム CSS 活用テクニック

デザインは TypePad ビジネス のベーシックデザインのまま(= 上級者テンプレートに変更せず)、記事の行間だけを広げて『ブログの文章をもっと読みやすくしたい!ということはありませんか?

そんな時は、ぜひ 前回の記事 でも紹介した カスタム CSS を使って「記事本文の文字の行間を調整する」ことをオススメします。

たった1つの CSS を指定し変更するだけで、ブログの記事が格段に読みやすくなりますよ cancer

  • 記事本文のデザインを変更するための要素名
  • 読みやすさと全体のバランスを考えて行間を調整

続きを読む "カスタム CSS を使って記事本文の行間を広げる方法" »

2010年7月20日 (火)

カスタム CSS とは? 上級者テンプレートを利用しなくても手軽にデザイン変更できる機能です

カスタム CSS とは、上級者テンプレートを利用しなくてもTypePad ビジネス でページの背景やバナー画像、文字色や行間などのデザイン要素を手軽に変更できる機能です。

ブログの見た目やイメージカラーに自社のブランドイメージを適用し、かつ標準デザイン・テーマを維持したまま編集したいという場合にはとても便利です、ぜひご利用ください art

  • カスタム CSS を利用する
  • カスタム CSS ガイドテンプレート

続きを読む "カスタム CSS とは? 上級者テンプレートを利用しなくても手軽にデザイン変更できる機能です" »

2010年6月24日 (木)

Firefox のプラグイン Firebug を使ってデザイン(CSS) 編集をもっと簡単に

今回は TypePad ビジネス のデザイン(CSS)編集を、もっと簡単に変更するためのツールをご紹介します。

CSS の編集を試すには、ウェブブラウザ Firefox のプラグイン Firebug の利用をお勧めします。Firebug を利用すると、CSS の編集を試す、ということと、どのような編集を行うとページがどのように見えるか、という確認作業(プレビュー)を同時に、リアルタイムにブラウザ上で確認することができます。

さらに、バナーサイズやサイドバーの横幅、記事本文表示幅のサイズも簡単に調べられるので、「バナー画像を変更したいけどサイズがわからない…」「サイドバーに画像を表示したいけど、どのサイズならぴったりはまるの?」など、そんな悩みもすぐに解決することができます。

  • Firebug でバナー画像のサイズを調べる
  • バナー画像を変更した際の表示を確認する

※ 各ソフトウェアの利用規約ならびにサポート条件、登録商標などについては各ソフトウェアの開発元が掲示する内容をご参照ください

続きを読む "Firefox のプラグイン Firebug を使ってデザイン(CSS) 編集をもっと簡単に" »

2010年6月22日 (火)

上級者テンプレートを利用してヘッダーにナビゲーションメニューを設置

先日2010年6月15日にリリースされた新機能で、上級者テンプレートの編集が断然便利になったことは 前回ご紹介 させていただきました。

さっそくお試しいただいた方も多いかと思いますが、カスタマイズ中の TypePad ビジネス で運営するブログに、さらにもう "一手間" 加える TIPS をご紹介します。

続きを読む "上級者テンプレートを利用してヘッダーにナビゲーションメニューを設置" »

2010年6月17日 (木)

上級者テンプレートに変換するだけでテンプレートモジュールが自動的に展開

上級者テンプレート編集をより簡単にはじめられます

2010年6月15日のリリース にて、テンプレートモジュールを使った上級者テンプレート編集が格段にしやすくなりました。

今までのテンプレートモジュールは、TypePad ビジネス のシステムに保存されている共通テンプレートを読み込んでいたため、編集を行うまでに以下の手順が必要でした。

  1. TypePad ビジネスのシステムに保存されたテンプレートモジュールの内容(スクリプト)を手動でコピーし、自分のアカウント内に編集したいテンプレートモジュールを新規作成し、ペーストする
  2. 新規で作成したテンプレートモジュールを編集する
    ※ ここまでだと、新規作成、編集したテンプレートモジュールは反映されません。
    なぜなら、インデックステンプレートやアーカイブテンプレートには、作成したテンプレートモジュールではなく、TypePad ビジネスのシステムに保存されたテンプレートモジュールがインクルードされていたからです。
  3. 作成、編集したテンプレートモジュールの内容を反映させるために、インデックステンプレートやアーカイブテンプレートに、上記「1.」で作成したテンプレートモジュールをインクルードする

自分で書いていて言うのもなんですが、これがとても煩雑なのです… catface

今まで TypePad ビジネス で上級者テンプレートの編集をされたことがある方ならきっと、「フッター項目をちょっと編集したいだけなのに、編集するまでの道のりが遠い!」なんて思いをされたことがあるでしょう。

今回のリリースでは、そんな悩みを改善しました。

なんと、既存テンプレートを上級者テンプレートに変換するだけで、テンプレートモジュールが自動的に展開されるようになったのです。

この追加機能により、たとえば「全部の記事のフッターに、共通する定型文を表示したい」と思った時に、既存のテンプレートから上級者テンプレートに変換するだけで、修正が必要となるテンプレートモジュール「entry-list」や「entry-list-sticky」の編集がすぐに開始できるようになりました。

既存のテンプレートから上級者テンプレートに変換する具体的な手順と、テンプレートモジュールが展開される場所は以下の通りです。

  1. [ホーム] - [ブログ] - [(ブログ名)] - [デザイン] - [デザインの管理] を開く
  2. 上級者テンプレートに変換したいデザインのテンプレートを選択し [上級者テンプレートへ変換] をクリックする
  3. Tbb10061501

  4. 確認画面が表示されるので、もう一度 [変換する] をクリックする
  5. Tbb10061502

  6. デザイン一覧画面に戻るので、変換した上級者テンプレートの [適用] をクリックする
  7. Tbb10061503

以上で、既存テンプレートを上級者テンプレートに変換する作業は完了です。

テンプレートを適用すると、そのデザインに含まれている上級者テンプレートが一覧表示されたデザイン編集画面に移動します。

すでにテンプレートモジュールが展開されているので、すぐに編集が開始できます pen
Tbb10061504

前回のリリースに続いて、さらに強化された上級者テンプレートの編集機能はいかがでしたでしょうか?

次回は、展開されたテンプレートモジュールを利用して、さらに便利に使う方法をご紹介します。お楽しみにheart02

2010年6月 7日 (月)

MTIf、MTSetVarBlock タグの使い方

MT タグを使ってカテゴリ毎に違ったスタイルを適用する方法

5月19日から TypePad ビジネス でのサポートが開始された MT タグ のなかから MTIfMTSetVarBlock の使い方(ユースケースとサンプルコード)を、ProNet に所属する Six Apart ソリューションパートナー であり、TypePadデザインカスタマイズ というサービスも展開している 合同会社アライアンス・ポート が運営する「#Fairground」という web マガジンにてご紹介いただきましたので報告します。

Fairground

続きを読む "MTIf、MTSetVarBlock タグの使い方" »

2010年6月 4日 (金)

MTEntries タグの便利な使い方 - まとめブログを簡単作成

サポートされている MT タグを使うとこんな恩恵が

5月19日のリリースより TypePad ビジネス で使える <MTEntries> タグがパワーアップし、今までよりも簡単に「まとめブログ」が作れるようになりました notes

具体的には、 <MTEntries> タグに blog_ids という属性を追加し、記事を表示したいブログの ID を複数指定するだけで、指定したブログの記事を時系列順に並べて表示することができます。

ちなみに、ブログの ID は [ホーム] - [ブログ] - [(ブログ名)] をクリックした時 URL の最後に表示されている数字になります。

blog_ids という属性

それではさっそく、まとめブログを作成するための具体的な手順を確認していきましょう。

※ この手順は、上級者テンプレートを利用しているブログでしか実行できません。上級者テンプレートを利用する手順は、以下ページをご確認ください。

MTEntries タグを使ったまとめブログ作成手順

  1. [ホーム] - [ブログ] - [(ブログ名)] - [デザイン] 開く
  2. [新しくテンプレート・モジュールを作成] をクリック
  3. ナレッジ・ベースの [テンプレートモジュールについて(上級者テンプレート)] に記載されている [entry-list] の中身をコピーして貼り付け
  4. <MTEntries> を以下のように書き換え
    <MTEntries blog_ids="記事をまとめたいブログの ID(複数設定する場合はカンマ(,)で区切ります。)" limit="30(まとめて表示したい記事の件数)">
  5. [Main Index Template] 内にある以下の文字列を
    <$MTWeblogIncludeModule module="entry-list"$>
    以下に書き換え
    <$MTInclude module="entry-list"$>
  6. 必要に応じて [entry-list] で表示する項目を変更し(たとえば、記事タイトルのみを表示するなど)、CSS で文字サイズを調整

以上の編集作業をおこなったあと、ブログ全体の再構築をおこなううと、以下のように表示させることができます。

このブログに投稿されている記事は [最近の記事] に表示されているものだけですが、メインには複数ブログの記事をまとめて、時系列順に表示するようにしています。

Tbb100502

簡単すぎてごめんなさい!

でも、たったこれだけの作業で「まとめブログ」を作成できる機能( MTタグ → MTEntries )、これは活用しない手はないです wrench

以下に参考ページへの URL も記載しましたので、この機会に皆さんも「まとめブログ」を作成してみるのはいかがでしょう?

※注意※ パスワード保護設定されているブログの扱いについて

mobaq include_blogs で表示するブログの中にパスワード保護されているブログが含まれている場合は、そのブログの記事は出力されますか?

flair 出力されます。これが記述されているテンプレートの含まれるブログをパスワード保護しない限り、内容が出ていきます。

参考ページ

MTEntries:

ブログ全体の再構築:

2010年6月 1日 (火)

テンプレート編集画面にインクルードしているモジュールを一覧表示する機能 - 上級者テンプレート編集時に役立つ新機能紹介その2

5 月 19 日のリリースで強化された上級者テンプレート編集機能、便利な 3 つの機能のうちの 2 つは 前回の記事 でご理解いただけたかと思います。

今回は 3 つの中で、実は一番大きく変わった残りの新機能について、じっくりご紹介していきます。

テンプレートの編集画面にインクルードしているモジュールの一覧とそのモジュールへのリンクが表示されるようになりました

この機能、一度使うと病みつきになりますよ。使いなれてしまうと、「この機能無しには上級者テンプレートの編集はできない!」というぐらいに大事な機能になること間違いなしです。そんな機能が、具体的にどう動くかというと…

たとえば、[Main Intdex Template] の編集画面を開いた時、以下のように [テンプレートの内容] の右側に、今開いているテンプレート内にインクルードしているモジュール一覧が表示されます。

インデックステンプレート内にインクルードしたモジュールの一覧

例:Main Index Template に自分で作成した [container-footer] と [body-footer] をインクルードしている場合

テンプレート内にインクルードしているモジュールが一覧で表示されて、しかもモジュール名をクリックすると、そのモジュールの編集画面に移動することができます。

この機能を利用すると、複数のモジュールをインクルードしていても、まるで 1 つのテンプレートを編集するような感覚でいくつものモジュールを編集することが可能です。

モジュールを編集(作成)するための機能

そして、さらに便利にモジュールを編集(作成)するための機能も追加されました。

インデックステンプレート内にインクルードしたモジュールの一覧

モジュール一覧が表示されている部分をよく見ると、 [entry-list (作成)] という表記があります。

これは、[Main Index Template] にインクルードする、という指定をしているけれど、インクルード先がまだ作成されていないモジュールです。

これがとても便利!

以前は、インクルード先のモジュールを作成してから、そのモジュールをインクルードするための指定をインクルード元のテンプレートに記入する、という手順が必要でした。

もしその手順を間違えて、先にインクルード元のモジュールに「このモジュールをインクルードする」という指定だけを記入すると、テンプレートを [保存] し再構築を行った時にエラーとなっていたのですが…

この機能が追加されたおかげで、今後は [保存] をクリックした時点で、まだ未作成のモジュールまで教えてくれます。

さらに、未作成モジュール名の右側に表示される [作成] という部分をクリックすると、未作成であるそのモジュールの新規作成画面に移動するので、いちいちテンプレート一覧画面に戻ってモジュールの作成ボタンをクリックして…なんて手間も無く、スムーズにモジュールの追加が可能です。

以前はモジュールの中身を編集(もしくは追加)するとなると、以下のような手順が必要でした。

  1. 編集したいモジュールを作成する。
  2. 作成したモジュールを読み込むテンプレートを開く。
  3. <$MTWeblogIncludeModule module="モジュールの名前"$> を <$MTInclude module="モジュールの名前"$> に書き換える。

文章だとたったの 3 ステップですが、実際にやると、テンプレート一覧画面とテンプレート新規作成(編集)画面を行ったり来たりの繰り返しがあったり、作成したいモジュールが多いと意外と大変で、いつの間にかどこまでやったかわからなくなってしまったり… ということがあったかと思います。

けれど、今後はインクルード元のテンプレート内に、編集したいモジュールを先にインクルードする指定を行って(上記 2 と 3 の手順を先におこなって)テンプレートを保存する、表示されたモジュール一覧から 1 つずつモジュールを作成・編集する、というような作業が可能です。

1 つのテンプレートを元に作業ができるので、複数のモジュールを編集したい場合でも、どこまで作業したかがわかりやすく、インクルードしているモジュールが一覧でわかるので、管理もしやすくなりますよ。

この機能は、今まで上級者テンプレートを使いこなしてきた方も、これから上級者テンプレートを利用する方にも、とても便利な機能として利用できるかと思います。

前回の記事 で紹介した機能とあわせて、強化された「上級者テンプレート編集機能」を、ぜひこの機会にお試しください pc

参考ページ

TypePad対応MTタグ:

上級者テンプレート:

2010年5月28日 (金)

記述ミス表示機能など - 上級者テンプレート編集時に役立つ新機能紹介その1

上級者テンプレートでブログのデザインを管理している方や、これから上級者テンプレートを利用しようとしている方に朗報です。

先日 5 月 19 日のリリースで TypePad ビジネス の上級者テンプレート編集に役立つ機能が 3 つも追加されました。

上級者テンプレート編集時に役立つ新機能
  • MT タグの大文字と小文字を区別しない
  • 上級者テンプレートの記述内容に誤りがあった場合、どの部分に誤りがあるかをエラー内容として表示
  • テンプレートの編集画面にインクルードしているモジュールの一覧とそのモジュールへのリンクを表示

これらは、上級者テンプレートの編集がぐんと楽になる便利な機能です wrench
具体的にどのように便利か、どのように利用するのか、詳しくご紹介いたします。

MT タグの大文字と小文字を区別しなくなりました

この機能は、たとえば <MTEntries> タグを利用する場合、今までは <MTEntries> の MTE の部分を小文字で記入すると <MTEntries> タグとして正常に動作しませんでした。

けれど今後は <mtentries> と記入してもエラーにならず、正常に動作します。
これにより、「大文字と小文字を間違えた!」というような、後から探し出すのには苦労するような記入ミスがあっても大丈夫。大文字か小文字か、という細かい部分にとらわれず、存分にテンプレートの編集をおこなうことができます。

Tbb10052702

上級者テンプレートの記述内容に誤りがあった場合、どの部分に誤りがあるかをエラー内容として表示

上級者テンプレートの記述内容に誤りがあった場合、 [保存] ボタンをクリックした後、または [公開] ボタンをクリックした後(再構築後)のいずれかのタイミングで、どのような誤りがあるかをエラーの内容として表示するようになりました。

たとえば <MTEntries> というブロックタグ内に記入しなければならない MT タグを <MTEntries>~</MTEntries> の外に記入してしまった、など、MT タグの記述形式に沿っていない書き方をしてしまった場合、今 までは、どのような記述が問題になっているか、ブログを管理しているお客様には見えませんでした。

今後はどのようなミスがあるかをテンプレートの [保存] 時や [公開] (再構築)時にすぐ確認できるので、素早く対応が可能です。

記述エラー

いかがでしょうか? 今回は 3 つの新しい機能のうち、2 つの機能をご紹介しました。これだけでも上級者テンプレートの編集がとてもやりやすくなりますよね。

次回は、3 つのうちの残り 1 つ、「テンプレートの編集画面にインクルードしているモジュールの一覧とそのモジュールへのリンクを表示」機能についてご紹介します。

次にご紹介する機能は、さらに上級者テンプレートを使いこなすために重要な機能となるので、記事を読んで、ぜひマスターしてくださいね。それでは、次回をお楽しみに sign01

2010年5月27日 (木)

新テーマ「Mosaic」で手軽にオリジナリティを

今回の TBB では 5月19日にリリースされた新機能のなかから新テーマ「Mosaic」の使い方をご紹介します。

このテーマを使うためには、管理画面のなかから「ブログ」>「デザイン」>「テーマを選択」を開き、「Mosaic Dark」もしくは「Mosaic Light」を選んでください。

ためしにこの TBB に「Mosaic Light」を適用し、「3列(右サイドバー) 」レイアウトを選択すると以下スクリーンショットのようなデザインができあがります。

このデザインを叩き台にして、上段バナー画像(デフォルトで組み込まれている花の写真)を別の「カスタムバナー」へ変更していくことで、手軽にオリジナリティを発揮することができます。

Mosaic Light を適用したTBB

  • 指定サイズの「カスタムバナー」画像を準備
  • 画像をアップロードして適用
  • カスタムバナーを適用した様子

続きを読む "新テーマ「Mosaic」で手軽にオリジナリティを" »

2010年5月19日 (水)

新テーマ 12種類 合計24個 追加

本日(5月19日)の月例リリースで TypePad ビジネス に新しいテーマが 12種類 合計 24個 追加されましたのでご紹介します。

今回追加されたなかでも特に個人向け TypePad で人気のある「Mosaic」というテーマは、指定のサイズの画像バナーをアップロードするだけでオリジナルなブログデザインが簡単につくれる優れものです。

Mosaic

Mosaics_3

その他にも「Journal」「Pico」など、シンプルにつかえて応用範囲の広いテーマも盛りだくさん。ぜひチェックしてみてください。

Journal

Journals400

Pico

Picos

その他、今回リリースされた新機能や「Mosaic」の使い方などは追ってこの TBB でもご紹介していきますので、こうご期待 libra

2010年5月13日 (木)

サイト構築やデザインに悩んだらまずはプロに相談

餅は餅屋に、専門家の技術や知識は伊達じゃない

皆さん TypePad ビジネス でサイトを運営していたり、これから構築をしようとしているときに、デザインや細かい設定、SEO への取り組みについて悩んだり、相談したくなったことはないでしょうか wobbly

そんなときこそ Six Apart のパートナー制度 ProNet に所属していて、Movable Type(MT)は勿論のこと、TypePad を使ったサイト構築についても知見や経験が豊富で、とてもたよりになる専業のプロに相談してみてはいかがでしょう。

TypePad パートナー一覧

実績あるパートナー企業

まずは TypePad ビジネス のサイトでもパートナー企業としてリストアップしている以下 5 社のなかから選んでいただくのをオススメします、これらの企業であれば TypePad ビジネス のカスタマイズや構築をサービスメニューの1つとして提供していますし、実績としても申し分ありません。

そしてどのパートナー企業からも TypePad ビジネス のライセンスを購入することができますので、もしもこれから新規導入される際にはあわせて相談してみてください。

どの企業に相談したら良いのか判断つかなかった場合

もしもどの企業に相談したらいいのか判断つかなくて、『案件にあった制作会社を Six Apart から紹介してほしい』という場合は、以下のお問い合わせフォームから質問を送信してください。案件を判断し、1営業日以内にご返信いたします。

せっかくサイトを運営するのであれば、効果を最大化するためにもデザインやサイト構造にはこだわりたいですよね。これらのパートナー企業であればそんな要望に的確にお応えできますので、お気軽に相談してみてください flair

2010年4月22日 (木)

サイドバーの「アーカイブ」項目に「もっと読む」リンクを表示する

過去の記事をより見つけやすくするために

今回は 4 月 13 日に実装された新機能の1つ、new サイドバーの「アーカイブ」項目に「もっと読む」リンクを表示するための設定手順をご紹介します。

TypePad ビジネス のブログでは過去の記事を蓄積し、まとめて閲覧するために「アーカイブ」機能を利用します。

この「アーカイブ」機能を使うことで、月ごとなど特定の期間(条件)で記事を分類・集約し、指定された期間(条件)に属する記事を一覧表示できます。

  • 月別アーカイブを表示させたときの様子
  • 「もっと読む」リンクを表示 〜 ベーシックテンプレート編
  • 「もっと読む」リンクを表示 〜 上級テンプレート編

続きを読む "サイドバーの「アーカイブ」項目に「もっと読む」リンクを表示する" »

2010年3月23日 (火)

携帯閲覧ページの CSS を操作してデザインにオリジナリティを

TypePad ビジネスサポート担当の野原です。
お待たせしました。前回 に引き続き今回は、携帯閲覧ページカスタマイズ方法後編… CSS で携帯閲覧ページをカスタマイズする方法をご紹介します。

  • CSS を使ってデザイン適用させた携帯閲覧サイトの様子
  • 下準備:ブログを上級者テンプレートにする
  • 携帯閲覧ページの CSS を編集する

続きを読む "携帯閲覧ページの CSS を操作してデザインにオリジナリティを" »

2010年3月19日 (金)

携帯閲覧ページのカスタマイズ方法(バナー画像設置編)

TypePad ビジネス サポート担当の野原です、
いつもご利用いただきありがとうございます。

今回は、TypePad ビジネス をご利用の方向けに、
2回に分けて携帯閲覧ページのカスタマイズ方法をご案内します。

  • 携帯閲覧ページの上段にバナー画像設置
  • 設置した様子
  • 携帯閲覧ページにオリジナルのバナー画像を表示する手順
  • さらなる携帯閲覧ページのカスタマイズ

続きを読む "携帯閲覧ページのカスタマイズ方法(バナー画像設置編)" »

2010年1月13日 (水)

プロフィール背景へのスタイル適用

今回紹介する TIPS は「プロフィール背景へのスタイル適用」です。これも TypePad ビジネス で運用されている既存ブログサイトを見ていると、想像していた以上に「プロフィール背景にスタイルが適用されていない」サイトを多く見かけるため、ふたつめの「落とし穴」として取りあげてみることにしました。

  • スタイルを適用させる手順
  • サイドバーへのプロフィール設置
  • スタイルが適用されていない場合
  • プロフィールを表示する意図とは

続きを読む "プロフィール背景へのスタイル適用" »

2010年1月 7日 (木)

サイドバーから自社サイトへのリンク設置

昨年末におつたえしたとおり、今月の TBB のテーマは「TypePad ビジネス つい見逃しがちな落とし穴...」ということで、すでに運用開始されているブログサイトを見回したときに散見されるある種の「失敗例」からヒントをえて、よりビジネスに貢献させていくためにはどの企業でも必須となるであろう設定項目、そしてその効能などをご紹介していきます。

そして今回とりあげるのは、「サイドバーからの自社サイトへのリンク設置」です。「そんなまさか?」っと思われるかもしれませんが、せっかく運営しているブログサイトから自社サイトへリンクされていないケースをとても多く見かけるので、まず1つめのトピックとしてとりあげてみることにします。

  • タイプリスト「リンク」を作成
  • サイドバーへの設置
  • あえて自社サイトへリンクさせる意図とは

続きを読む "サイドバーから自社サイトへのリンク設置" »

2009年12月25日 (金)

TypePadによる商用サイト構築の可能性(後編)〜 アライアンス・ポート 大和氏・山辺氏に聞く

前編 にひき続いて、アライアンス・ポートが TypePad を利用して構築したもう一つの事例を見てみよう。

  • 東京綜合写真専門学校オフィシャルサイト
  • 法人向けウェブサイト用 CMS としての選択肢
  • TypePad を選ぶことのメリット
  • サイトを更新していくことの大切さ

続きを読む "TypePadによる商用サイト構築の可能性(後編)〜 アライアンス・ポート 大和氏・山辺氏に聞く" »

2009年12月10日 (木)

標準デザインテーマが活用されている秀逸な事例

ひとまず TypePad ビジネスを使いはじめたら「標準デザインテーマ(テンプレート)を活用しよう!」ということで今回は数ある導入事例の中から、標準デザインテーマ が的確にアレンジされている秀逸な活用例をご紹介していきます。(順不同)

  • プレジャーフォレスト・スタッフブログ
  • 輪太郎くん ブログ
  • 編集チーフの真夜中の事情
  • グッドデザイン賞公式ブログ

続きを読む "標準デザインテーマが活用されている秀逸な事例" »

企業にも選ばれるブログサービス

法人向けラインナップ

プロフィール

Twitter アカウント

@TypePadBiz つぶやきまとめブログ

Facebook ページ

運営会社

  • シックス・アパート株式会社
    住所: 東京都 港区 赤坂5-2-39 円通寺ガデリウスビル7F
    電話番号: 03-5549-2080(代表)

    35.672097 139.732425

Copyright 2003- Six Apart, Ltd. All rights reserved.