うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

TypePadのユーザーインターフェースは良くできていてクリックやドラッグでデザインを変更することが出来ます。その代わり、テンプレートを修正したりカスタマイズしようとすると、一度上級テンプレートへ変換をしてからでないと行えません。

わたしはHTMLタグやcssの読み書きが出来るので、出来れば直接テンプレートをカスタマイズしたかったのですが、ユーザーインターフェースからはテンプレートを見ることが出来なかったので、今までサイドバーにgoogle AdSenseの広告を掲載したりすることが出来ないでいました。

最近はTypePadの使い方も覚えてきたので、これまで予期しない動作を起こさないようにクリックしていなかったアイコンやリンクをクリックして機能を確かめてみたところ、上級テンプレートに変換すればテンプレートを直接カスタマイズできることが分かりました。

注意:上級者テンプレート機能はプロ(Pro)プラン、TypePad ビジネスクラスで使う事ができます。
TypePadのよくあるお問い合わせの上級者テンプレートとはも合わせて参照ください。

上級テンプレートへ変換する画面
変換したいブログデザインデザインの管理
と選択してゆきます。
Tmpj1
ここでデザイン名が表示されるので、上級テンプレートに変換したいデザインにチェックマークを入れて、「上級テンプレートへ変換」ボタンをクリックします。

上級テンプレートへ変換しても指定したテンプレートのオリジナルはそのまま保持されるので、改めてバックアップを取ったりする必要はありません。この辺りの操作性は好感が持てます。

Tmpj2_3「上級テンプレートへ変換」をクリックするとポップアップ画面が現れますので、「変換する」をクリックします。
 

Tmpj3
再び
変換したいブログ > デザイン > デザインの管理
の画面に戻りますが、上級テンプレートが1行増えています。選択したデザインの下にAdvancedと書かれているのが上級テンプレートですので、この行の適用をクリックして、上級テンプレートを選択したブログに適用させます。

Tmpj5
デザイン名をクリックするとポップアップメニューでデザインを編集が現れますのでクリックします。

Tmpj4
変更したいテンプレート名をクリックします。
通常は

インデックス・テンプレート
では
Archive Index Template
Main Index Template
の2つ

アーカイブ・テンプレート
では
Category Archives
DateBased Archives
Individual Archives
3つを変更します。

参考例
インデックス・テンプレートのMain Index Templateです。

3カラム
のデザインの場合で右カラムにAdSenseなどを貼り付けたい場合には
<div id="gamma-inner" class="pkg">の中に貼り付けます。

<$MTWeblogIncludeModule module="head-index"$>
<body class="layout-three-column">
<$MTWeblogIncludeModule module="body-header"$>
<div id="container">
<div id="container-inner" class="pkg">
<$MTWeblogIncludeModule module="container-header"$>
<$MTWeblogIncludeModule module="banner"$>
<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
<!--#include virtual="/<$MTBlogDirname$>/sidebar1.inc"-->
</div>
</div>
<div id="beta">
<div id="beta-inner" class="pkg">
<$MTWeblogIncludeModule module="entry-list-sticky"$>
</div>
</div>
<div id="gamma">
<div id="gamma-inner" class="pkg">
<!--#include virtual="/<$MTBlogDirname$>/sidebar2.inc"-->
この位置に貼り付けます
</div>
</div>
</div>
</div>
<$MTWeblogIncludeModule module="container-footer"$>
</div>
</div>
<$MTWeblogIncludeModule module="body-footer"$>
<$MTStatsScript$>
</body>
</html>

変更を終えたら再構築をします。これで作業は終了です。

2カラム
2カラムのデザインの場合で右カラムにAdSenseなどを貼り付けたい場合には
<div id="beta-inner" class="pkg">の中に貼り付けます。

4月 28th, 2008

Posted In: TypePadの使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です