フォトログテーマの画像サイズを変更する

フォトログテーマの画像サイズを変更する

Posted at December 14,2010 1:55 AM
Tag:[Customize, MovableType, Photolog, Theme]

当ブログで配布しているフォトログテーマの画像サイズを変更する方法を紹介します。

1.メインページの中央画像のサイズを変更する

メインページの中央画像のサイズを変更するには、「デザイン」→「テンプレート」の「メインページ」をクリックし、以下の赤色部分を変更して、再構築してください。

…前略…
<mt:ignore>1カラムレイアウトの画像サイズとサムネイル表示枚数</mt:ignore>
<mt:SetVar name="photo_size" value="450" />
<mt:SetVar name="thumbnail_max" value="8" />
…後略…

変更前(450px)
変更前(450px)

変更後(300px)
変更後(300px)

2カラムレイアウトで利用している場合は、以下の赤色部分を変更します。

…前略…
<mt:ignore>2カラムレイアウトの画像サイズとサムネイル表示枚数</mt:ignore>
<mt:SetVar name="photo_size" value="400" />
<mt:SetVar name="thumbnail_max" value="5" />
…後略…

3カラムレイアウトで利用している場合は、以下の赤色部分を変更します。

…前略…
<mt:ignore>3カラムレイアウトの画像サイズとサムネイル表示枚数</mt:ignore>
<mt:SetVar name="photo_size" value="350" />
<mt:SetVar name="thumbnail_max" value="3" />
…後略…

2.メインページのサムネイルのサイズを変更する

デフォルトのサムネイル幅は70pxです。ここでは50pxに変更する例を示します。

変更前(70px)
変更前(70px)

変更後(50px)
変更後(50px)

サムネイルのサイズを変更するには、1項と同じテンプレートにある、以下の赤色の「70」の部分を「50」に変更します。行数は154行目です。

…前略…
<mt:Entries limit="$thumbnail_max">
  <mt:EntryAssets type="image" lastn="1">
        <li<mt:if name="counter" eq="1"> class="start"</mt:if> id="e<mt:EntryID />"><a href="<mt:EntryPermalink />" title="<mt:EntryTitle escape="html" />"><img src="<mt:AssetThumbnailURL width="70" square="1" />" class="asset-img-thumb" alt="<mt:EntryTitle escape="html" />" title="Change to <mt:EntryTitle escape="html" />" /></a></li>
    <mt:SetVar name="counter" op="++" />
  </mt:EntryAssets>
</mt:Entries>
…後略…

次に、上記のテンプレートの少し下にある、以下の赤色の「95」を「75」に変更します。「95」はサムネイルの横のマージンを追加した値です。サムネイル幅を「70」から「50」に変更する場合はその差が20なので、「95」から20を引いて「75」にします。サムネイル幅を拡大する場合は、逆に「95」に差分を加算してください。

…前略…
<mt:SetVar name="counter" op="*" value="95" />
…後略…

最後に「デザイン」→「テンプレート」→「スタイルシート」をクリックして、次のセレクタを追加します。heightプロパティには変更したサムネイルサイズを設定します。

#gallery2.main a, #gallery2.main a:link, #gallery2.main a:visited {
    height: 50px;
}

セレクタに「.main」を付与しているのは、他のアーカイブページに追加したスタイルを反映させないためです。このため、「メインページ」テンプレートの以下の部分にclass属性値「main」を追加してください。

変更前

…前略…
<div id="gallery2" class="photolist clearfix">
…後略…

変更後

…前略…
<div id="gallery2" class="photolist clearfix main">
…後略…

3.ブログ記事リスト(カテゴリアーカイブ/月別アーカイブ)の画像のサイズを変更する

カテゴリアーカイブ/月別アーカイブのデフォルトのサムネイル幅も70pxです。ここでは50pxに変更する例を示します。

変更前(70px)
変更前(70px)

変更後(50px)
変更後(50px)

サムネイルのサイズを変更するには、「デザイン」→「テンプレート」→「ブログ記事リスト」テンプレートにある、以下の赤色の「70」の部分を「50」に変更します(2ヶ所)。

<mt:if name="counter" eq="1">
        <li class="start"><a href="<mt:EntryPermalink />"><img src="<mt:AssetThumbnailURL width="70" square="1" />" class="asset-img-thumb" alt="<mt:EntryTitle />" title="Go to <mt:EntryTitle />'s page" /></a></li>
<mt:else>
        <li<mt:if name="counter" op="%" value="$thumbnail_max" eq="1"> class="start"</mt:if>><a href="<mt:EntryPermalink />"><img src="<mt:AssetThumbnailURL width="70" square="1" />" class="asset-img-thumb" alt="<mt:EntryTitle />" title="Go to <mt:EntryTitle />'s page" /></a></li>
</mt:if>

次に、上記のテンプレートの少し下にある、以下の赤色の「95」を「75」に変更します。「95」はサムネイルの横のマージンを追加した値です。サムネイル幅を「70」から「50」に変更する場合はその差が20なので、「95」から20を引いて「75」にします。サムネイル幅を拡大する場合は、逆に「95」に差分を加算してください。

…前略…
<mt:SetVar name="counter" op="*" value="95" />
…後略…

最後に「デザイン」→「テンプレート」→「スタイルシート」をクリックして、次のセレクタを追加します。heightプロパティには変更したサムネイルサイズを設定します。

#gallery2.archive a, #gallery2.archive a:link, #gallery2.archive a:visited {
    height: 50px;
}

セレクタに「.archive」を付与しているのは、ブログ記事リストに追加したスタイルを反映させないためです。このため、「ブログ記事リスト」テンプレートの以下の部分にclass属性値「archive」を追加してください。

変更前

…前略…
<div id="gallery2" class="photolist clearfix">
…後略…

変更後

…前略…
<div id="gallery2" class="photolist clearfix archive">
…後略…

4.ブログ記事ページの画像のサイズを変更する

ブログ記事ページの中央画像のサイズを変更するには、「デザイン」→「テンプレート」の「メインページ」をクリックし、以下の赤色部分を変更して、再構築してください。

…前略…
<mt:else>
  <mt:SetVar name="photo_size" value="600" />
  <mt:SetVar name="thumbnail_max" value="8" />
…後略…

変更前(600px)
変更前(600px)

変更後(450px)
変更後(450px)

2カラムレイアウトで利用している場合は、以下の赤色部分を変更します。

…前略…
<mt:elseIf name="page_layout" like="layout-two-column">
  <mt:SetVar name="photo_size" value="600" />
  <mt:SetVar name="thumbnail_max" value="5" />
…後略…

3カラムレイアウトで利用している場合は、以下の赤色部分を変更します。

…前略…
<mt:if name="page_layout" like="layout-three-column">
  <mt:SetVar name="photo_size" value="450" />
  <mt:SetVar name="thumbnail_max" value="3" />
…後略…
関連記事
zenback
人気エントリー
トラックバックURL


コメント

ありがとうございます。サイズ変更できました。
おかげさまで最高にクールなフォトログが出来そうです!

1点だけ確認させてください。
「メインページの以下の部分にclass属性値「archive」を追加」は
メインページではなくブログ記事リストで良いですよね?

[1] Posted by murakami : December 14, 2010 1:23 PM

>murakamiさん
ご連絡&ご指摘ありがとうございます。
コピペ後の修正もれでした。「ブログ記事リスト」が正解です。
それではよろしくお願い致します。

[2] Posted by yujiro logo : December 14, 2010 5:46 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)