top

StyleCatcherテーマ「ストライプ・1カラム」

080906.jpg

MT4デフォルトのテンプレートをフォトログに最適化することを目標に作ってみた1カラムテーマです。ということで、MT4でもやっと1カラムが用意出来ました。私の好きな変わり種テーマです♪ 今回はあまり無理をせず、サイドバーを素直に下部に配置することで1カラムを実現。おかげで実用性も(たぶん)増したと思います。

StyleCatcherの管理画面から選べるレイアウトは「大小小」「大小」の2種類。どちらを選んでも1カラムになりますが、「大小小」の方はサイドバーが2列になります。「大小」だと1列だけなので、そのままサイドバー部分が下へ下へ伸びていく形になります。「大小」はおまけで付けたようなレイアウトですが、工夫次第で面白く使えるかも…と思いたい(^^;。

サンプルは3種類用意しました。左からフォトログとして使用した場合(カテゴリアーカイブ)、通常使用の場合(トップ頁)、「大小」の見本を兼ねたブログ記事。

サンプル頁1(フォトログ)  サンプル頁2(通常使用)  サンプル3(個別頁「大小」)

■このテーマを使ったフォトログの作り方
デフォルトテンプレートのままで簡単なフォトログを作る覚え書き。フォトログなので、どの記事にも必ず画像が存在するという前提で書いてます。

1.各頁の記事数を最新の1件のみにする
メインインデックス、カテゴリ、月アーカイブを<MTEntries lastn="1">として、最新の1件だけ表示するようにします(2件目以降はサムネイルで表示します)。こうすることにより、大きな画像を1頁に何枚も載せて頁表示が重くなることを防ぎます。

2.ウィジェットの作成
サムネイルから記事に飛べるよう、以下のウィジェットを新規作成。トップ頁とブログ記事には最新の8件を、カテゴリ・月別ではそのアーカイブに属する全てのリストが出るようにしてあります(このテーマはサムネイルを正方形にするカスタマイズに対応済みです)。

ウィジェット名:サムネイルリスト

<MTUnless name="archive_index">
<div class="widget-recent-assets widget">
<div class="widget-content">
<MTIf name="entry_template"><MTSetVar name="n" value="8"><MTElse>
<MTIf name="archive_template"><MTSetVar name="n" value="0"></MTIf></MTIf>
<MTIf name="main_index"><MTSetVar name="n" value="8"></MTIf>
<MTEntries lastn="$n">
<MTEntriesHeader><ul></MTEntriesHeader>
<MTEntryAssets type="image" lastn="1">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<li class="item">
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<MTIf name="imgw" gt="$imgh">
<img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTElse>
</MTIf>
</a></li>
</MTEntryAssets>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>
</div>
</div>
</MTUnless>

3.サイドバーにウィジェットを配置
3カラムのサイドバー(メイン)のトップに「サムネイルリスト」を配置。後は好きなウィジェットを好きなところに配置すればOK。サンプルでは以下のように配置してます。

3カラムのサイドバー(メイン) :サムネイルリスト, About, タグクラウド, ページ一覧, 購読
3カラムのサイドバー(サブ) :カテゴリアーカイブ, 月別アーカイブ(ドロップダウン), 最近のコメント, 検索, Powered By

4.スタイルを適用
レイアウトは「大小小」を適用。これでフォトログ化完了です。投稿する際は、「本文」には写真だけ、文章は「続き」に書くとトップ頁の見栄えがよくなると思います。

5.オプション:アーカイブインデックスのカスタマイズ
上の4項までで十分フォトログ仕様になりますが、余力があればアーカイブ頁をちょっとカスタマイズして、全記事一覧をサムネイルで表示すればよりフォトログらしくなります。

インデックステンプレートのアーカイブインデックスを開き、まずは月別・カテゴリリストを<mt:Ignore>で囲んでコメントアウト。月・カテゴリリストはサイドバーにもあるので重複するし、なくしてしまった方がスッキリします。
次にタイトル<h1 id="page-title" class="archive-title">アーカイブ</h1>の下に以下のタグを追加。

<MTEntries lastn="0">
<MTEntriesHeader><ul style="margin: 0px -5px 0px -5px;"></MTEntriesHeader>
<MTEntryAssets type="image" lastn="1">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<li class="item">
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<MTIf name="imgw" gt="$imgh">
<img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTElse>
</MTIf>
</a></li>
</MTEntryAssets>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>
こんな感じになります。フォトログのアーカイブ頁らしくなりました。 ただし、サムネイルといえども数が多くなってくると頁表示が重くなってくるので、こちら(4.2以降)こちら(4.1以前)を参考に適当なところで分割表示するといいと思います。

■仕様とか利用規約とか■
・MT4以降のデフォルトテンプレートに合わせて作っています。それ以前のバージョンだと表示が崩れる恐れがあります。
・サイドバー2列型1カラム(大小小)/サイドバー1列型1カラム(大小)の2通りから選べます。
・IE7/Firefoxで動作確認しています。マック環境は分かりません。
・カスタマイズはご自由にどうぞ。
・再配布は禁止です(カスタマイズされたものも含む)。

■リポジトリアドレス
http://wing.w-museum.com/wmstyle4

StyleCatcherの使い方はこちら

 

コメント

待ってましたぁ。
これで本格的に「フォトブログ」構築に向けて進んでいけそうです。
ただ・・・ブログシステムは素晴らしくても写真素材がひどかったらどうしようもないのですが・・・(笑)
早々に導入してイメージテストしてみます。
いつもいろいろとありがとうございます・・・

こんにちは。
デフォテンプレとStyleCatcherだけで簡単にフォトログを作れたらいいな…と前から思っていたので、トライしてみました。
サイドバーを下に2列にする1カラムもけっこういけますね。^^

はじめまして。とてもステキなテンプレートに一目惚れしました。
が、Firefox3.03では、サンプル頁1(フォトログ)とサンプル3(個別頁「大小」)の記事内の画像が表示されません。
サンプル頁2(通常使用)の記事内のサムネイル画像は表示されています。
IE7で確認したところ、すべて表示されています。
ぜひ、使わせていただきたいので、解決策があれば教えていただければと思います。
ちなみにWinユーザーです。

初めまして。気にいっていただけて嬉しいです。
Firefox3はまだ持ってないのでよく分からないのですが、どのような感じなのでしょう?
画像が×印になる、あるいは真っ白になって何も表示されない、それとも崩れて正しい表示ではないということでしょうか。記事内と書かれてますが、大きい桜の画像も表示されませんか?
サンプル1とサンプル2のサムネイルは同じcssで表示されているので、cssのせいならサンプル2で表示されるのも変ですよね…。Firefox2では全部問題なく表示されてます。具体的な症状を詳しく教えていただけたら嬉しいです。

お返事ありがとうございます。
まず最初に訂正があります。
サンプル3はIEでもFirefoxでも同じように表示されます。すみません。

わかりやすいようにスクリーンショットを撮ってみました。
URL欄に画像のアドレスを記入しました。
お忙しいところお手数お掛けしますが、よろしくお願いします。

あ、サムネイルはどれも表示されていたのですね。
すみません、スクリーンショット見て気がついたのですが、サンプル頁を作る際に画像のHTMLの書き方にミスがあった(^^;ようなので、MTの管理画面から挿入したものと同じになるように修正しました。
これで確認してみて下さい。

こんばんは。
修正していただいたようですが、やはり画像が見えません…。
素敵なテンプレート、ぜひ使わせていただけたらと思いますので、自分でも解決策を調べてみます。
お忙しいところ、ありがとうございましたm(__)m

あれから夫のパソコンのFirefox3で確認してみたところ、桜の大きな画像は問題なく表示されていました。もしかしたらお使いのFirefox3の設定か何かが関係してないでしょうか。

問題にされている画像もこのスタイルテーマとは全然関係のない部分なので、お使いのMTで画像の表示に問題がないのなら大丈夫ではないかと思います。もし今まで表示されていた画像がこのテーマを入れたら見えなくなったということであれば、またご連絡下さい。よろしくです。

たびたびすみません。
おっしゃる通り、私のブラウザの設定(リファラの可否)のせいでした。
早速使わせていただいたので、お礼とお詫びを…。
お騒がせして申し訳ありませんでした。

ああ、リファラでしたか。無事使えたようでよかったです。^^
そういえば大きな画像は直リンク対策をしていたフォルダから引っ張ってきていたのを思い出しました。私の方こそサンプルにはリファラ設定に関係なく見える画像を使うべきでした。関係のないところで混乱させてしまいすみません。サンプル用画像はサンプル専用フォルダに移してから使うように気を付けていきますね。