カスタム CSS とは? 上級者テンプレートを利用しなくても手軽にデザイン変更できる機能です
カスタム CSS とは、上級者テンプレートを利用しなくても、TypePad ビジネス でページの背景やバナー画像、文字色や行間などのデザイン要素を手軽に変更できる機能です。
ブログの見た目やイメージカラーに自社のブランドイメージを適用し、かつ標準デザイン・テーマを維持したまま編集したいという場合にはとても便利です、ぜひご利用ください ![]()
- カスタム CSS を利用する
- カスタム CSS ガイドテンプレート
カスタム CSS とは、上級者テンプレートを利用しなくても、TypePad ビジネス でページの背景やバナー画像、文字色や行間などのデザイン要素を手軽に変更できる機能です。
ブログの見た目やイメージカラーに自社のブランドイメージを適用し、かつ標準デザイン・テーマを維持したまま編集したいという場合にはとても便利です、ぜひご利用ください ![]()
今回は TypePad ビジネス のデザイン(CSS)編集を、もっと簡単に変更するためのツールをご紹介します。
CSS の編集を試すには、ウェブブラウザ Firefox のプラグイン Firebug の利用をお勧めします。Firebug を利用すると、CSS の編集を試す、ということと、どのような編集を行うとページがどのように見えるか、という確認作業(プレビュー)を同時に、リアルタイムにブラウザ上で確認することができます。
さらに、バナーサイズやサイドバーの横幅、記事本文表示幅のサイズも簡単に調べられるので、「バナー画像を変更したいけどサイズがわからない…」「サイドバーに画像を表示したいけど、どのサイズならぴったりはまるの?」など、そんな悩みもすぐに解決することができます。
※ 各ソフトウェアの利用規約ならびにサポート条件、登録商標などについては各ソフトウェアの開発元が掲示する内容をご参照ください
先日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日のリリースより TypePad ビジネス で使える <MTEntries> タグがパワーアップし、今までよりも簡単に「まとめブログ」が作れるようになりました ![]()
具体的には、 <MTEntries> タグに blog_ids という属性を追加し、記事を表示したいブログの ID を複数指定するだけで、指定したブログの記事を時系列順に並べて表示することができます。
ちなみに、ブログの ID は [ホーム] - [ブログ] - [(ブログ名)] をクリックした時 URL の最後に表示されている数字になります。

それではさっそく、まとめブログを作成するための具体的な手順を確認していきましょう。
※ この手順は、上級者テンプレートを利用しているブログでしか実行できません。上級者テンプレートを利用する手順は、以下ページをご確認ください。
以上の編集作業をおこなったあと、ブログ全体の再構築をおこなううと、以下のように表示させることができます。
このブログに投稿されている記事は [最近の記事] に表示されているものだけですが、メインには複数ブログの記事をまとめて、時系列順に表示するようにしています。
簡単すぎてごめんなさい!
でも、たったこれだけの作業で「まとめブログ」を作成できる機能( MTタグ → MTEntries )、これは活用しない手はないです ![]()
以下に参考ページへの URL も記載しましたので、この機会に皆さんも「まとめブログ」を作成してみるのはいかがでしょう?
※注意※ パスワード保護設定されているブログの扱いについて
include_blogs で表示するブログの中にパスワード保護されているブログが含まれている場合は、そのブログの記事は出力されますか?
出力されます。これが記述されているテンプレートの含まれるブログをパスワード保護しない限り、内容が出ていきます。
MTEntries:
ブログ全体の再構築:
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 でもご紹介していきますので、こうご期待 ![]()

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