カスタマイズの最近のブログ記事

ブログ改造計画の第二弾のページ分割です。

現在のブログは、Pagenateプラグインを使ってますが、今回はスカイアークさんのPageButeプラグインを使ってみました。

結論から言うと、こっちの方が簡単です。

テンプレートの変更例は、Classic Blogのテンプレートになってます。

1.スカイアークさんのPageButeダウンロードページから、Ver3.5.0をダウンロード。

2.アーカイブを解凍後、PageBute.plを、サーバーのpluginsディレクトリにアップロード。

3.メインインデックステンプレートの変更

青色のタグを追加します。

MTPageContentsタグのモデファイアcountで、1ページに表示する記事数を指定します。モデファイアnavi_countで、ページリンクの数を指定します。例では省略してます。デフォルトでは、11件になります。

MTPageBeforeとMTPageNextタグのモデファイアdelimで、ページリンクの前後ページへのリンク表示を指定します。


・・・前略・・・
                        <div id="alpha-inner">

	<MTPageContents count="10">

<mt:Entries>
                            <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
                            <$mt:Include module="ブログ記事の概要"$>

	<$MTPageSeparator$>

</mt:Entries>


	</MTPageContents>
	<MTPageEmpty><p>記事は未登録です</p></MTPageEmpty>

	<div class="content-nav">
	<MTIfPageBefore>
	  <span><$MTPageBefore delim="<"$></span>
	</MTIfPageBefore>
	<$MTPageLists$>
	<MTIfPageNext>
	  <span><$MTPageNext delim=">" $></span>
	</MTIfPageNext>
	</div>

・・・後略・・・

4.月別アーカイブテンプレートの変更

MTEntriesタグのモデファイア「limit="$limit"は削除します。

・・・前略・・・                    
		<div id=" alpha">
                        <div id="alpha-inner">


                            <h1 id="page-title" class="archive-title"><$mt:ArchiveTitle$>アーカイブ</h1>


<mt:Ignore><!-- Limit number of entries to the number set in Blog Entry Settings --></mt:Ignore>
<mt:Unless name="datebased_archive"><$mt:Var name="limit" value="auto"$></mt:Unless>


	<MTPageContents count="10">

 	<mt:Entries limit="$limit">


                            <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
                            <$mt:Include module="ブログ記事の概要"$>
	<$MTPageSeparator$>
</mt:Entries>


	</MTPageContents>
	<MTPageEmpty><p>記事は未登録です</p></MTPageEmpty>

	<div class="content-nav">
	<MTIfPageBefore>
	  <span><$MTPageBefore delim="<"$></span>
	</MTIfPageBefore>
	<$MTPageLists$>
	<MTIfPageNext>
	  <span><$MTPageNext delim=">" $></span>
	</MTIfPageNext>
	</div>


                            <div class="content-nav">
・・・後略・・・

5.カテゴリーアーカイブテンプレートの変更

MTEntriesタグのモデファイア「limit="$limit"は削除します。


・・・前略・・・
<mt:Ignore><!-- Limit number of entries to the number set in Blog Entry Settings --></mt:Ignore>
<mt:Unless name="datebased_archive"><$mt:Var name="limit" value="auto"$></mt:Unless>

	<MTPageContents count="10">

 	<mt:Entries limit="$limit">

                            <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
                            <$mt:Include module="ブログ記事の概要"$>

	<$MTPageSeparator$>

</mt:Entries>


	</MTPageContents>
	<MTPageEmpty><p>記事は未登録です</p></MTPageEmpty>

	<div class="content-nav">
	<MTIfPageBefore>
	  <span><$MTPageBefore delim="<"$></span>
	</MTIfPageBefore>
	<$MTPageLists$>
	<MTIfPageNext>
	  <span><$MTPageNext delim=">" $></span>
	</MTIfPageNext>
	</div>



                            <div class="content-nav">
・・・後略・・・

6.ブログの「設定」-「投稿」の”表示される記事数”を"0"にします。

これは、メインインデックスで、全部の記事をページ分割したい場合です。全部の記事が必要なければ、表示したい値にすればOKです。

7.再構築して終了です。

只今、久々にブログデザインの更新を密かに実行中です。

方向性としては、以下の方針で活動中です。

  1. 3カラムデザインにする。
  2. 少しだけおしゃれにする。
  3. 見やすくする。
  4. 他の日々をまだらに取り込む。

で、現在は1と2がほぼ終了して、3のためにカスタマイズを実施中です。

カスタマイズ第一弾として、4を見据えてカテゴリリストの折りたたみを行いました。

カテゴリリストの折りたたみには、小粋空間さんのmenufolder.jsを使わせていただきました。

こちらのサイトには色々とお世話になっています。ありがとうございます。

スクリプトの組み込みは、小粋空間さんの記事通りに行えばいいんですが、その記事がMT4用なので、MT5に適用する場合には、テンプレートの修正方法が少し違います。

おやじは、MT5のClassicBlogテンプレートからカスタマイズを始めましたが、ウィジットの「カテゴリアーカイブ」を変更しました。

こちらは、ウィジットになっているので、小粋空間さんのサンプルとは少し違いますが、両方を見比べて行けば簡単に修正出来ると思います。

今後の予定は、

  1. ページ分割
  2. アクセスカウンター設置
  3. アフェイエイト関係のウィジット化
  4. デザインのテーマ化

などなど予定してますが、何時になったら本体に適用出来るか?

お楽しみに(^O^)/

IE7環境でIE6を動かす方法の御紹介。

colissさんの記事を参考にさせていただきました。

このブログの作成やカスタマイズはIE7でやってましたが、テトさん達からIE6で表示がおかしいとの指摘。

確かに、別PCのIE6で見てみると表示が崩れているので、仕方なく(?)IE6の対応も始めましたが、これが結構面倒臭い。

普段のカスタマイズ確認方法は、サイトをIEで表示させて、IEの「表示」→「ソース」メニューでHTMLのソースをローカルに保存。CSS等、必要なリンクをローカルのリンクに変更して、ローカルのHTMLをIEで表示させながら確認を行ってましたが、メインのPCとIE6がインストールされているサブPCの間でファイルのコピーが煩わしかった。どうにかならんものかとネット検索してみると、colissさんの記事を発見。早速試させていただきました。

  1. まずは、evolt.orgからie6eolas_nt.zipをダウンロード
  2. 解凍して出来たフォルダの中のiexplore.exeを実行。

たったこれだけで、あら不思議!IE6が立ち上がります。解凍したフォルダを適当な場所に保存して終了です。レジストリ等も使用していなよう何で安心(?)です。

上記サイトには、他のバージョンのIEもあるので、必要に応じてそれぞれのIEが使えるみたいですが、おやじの目的にはIE6だけでOKなので、他のIEは試してないです。(^。^)y-.。o○

試しに、ヘルプからバージョンを確認するとIE7とのこと。IE7のエンジンを使用して、コンテンツの表示部分のみIE6になっているらしい。仕組みは良くわからないが、表示はちゃんとIE6と同じに崩れているので、おやじの用途には十分です。

これで随分とカスタマイズの確認が楽になりました。

ただ、テンプレートを変更した場合には、やはりMTで保存してから再構築という手順を踏まなくてはいけないので面倒。何かいい方法はないのか考え中です。

外部スタイルシートを2つ読み込んだ際に、後に読み込んだスタイルシートが反映されないので色々試した結果、文字コードをSHIFT-JISからUTF8にすると正常に反映されるようになった。

でも、最初に読み込んでいるスタイルシートはSHIFT-JISなんだよね。

何故、最初のスタイルシートは大丈夫で2番目がSHIFT-JISだとダメなんだ!

ブラウザ界の常識なのかな?

取りあえず良くわからないけど、全部文字コードをUTF8にしました。

只今、各ブログの色と背景を個別にカスタマイズできるように、外部CSSを追加して、デフォルトの色や背景を上書き出来るようにする作業をしています。

具体的には、共通のCSSから、色と背景関係を指定しているクラスを抜きだして、別CSSファイルにコピーして、こちらのファイルでカスタマイズできるようにしている最中。

取りあえず、ひな形が出来たので、IE6で試してみるとどうも上手くいかない。そんじゃ、他のブラウザはどうよ?ということで、IE7とFireFoxで試してみると、こちらは狙った通に動作する。

なんでじゃ~!(?_?)

と、書式間違ってないかとか色々確認したが、間違ってないし、IE7とFireFoxでは設計通りに動作してるので問題ないはず。

さらに色々悩んだが、最後の手段として、一つのクラスで色をデフォルトと変えたクラスを作って、そのクラスの定義位置を色々試した結果、設定が有効になる位置と無効になる位置がわかったので、その前の部分を検証したが特に問題はなさそう。

さらに色々悩んだ挙句、テスト用のクラスを挿入して効果が出なくなった位置の前にあるコメントを少し消してみると、なんとちゃんとテスト用クラスの効果が反映されるようになった。

なんじゃ!こりゃぁ~!

只今、色々コメントのパターン等試しているが、まだ法則が見つからない。明日も引き続き調べる予定。

それにしてもIE6はおかし過ぎ。IE7の推奨アップデートも始まったし、IE6ってもう対応しなくていいかな?などと思う今日この頃です。(ー_ー)!!

当サイトは、1つのMTで6個のブログを立ち上げて管理しています。現在は、すべてのブログで同じデザインと構成を使っていますが、カスタマイズが同時進行していたこともあり、MT4.01では結構テンプレートの管理が大変でした。

MT4.1がリリースされた時、グローバルテンプレートなるものが追加されたと聞き、小踊りして早速アップグレードして使い始めましたが、グローバルテンプレートでは、インデックステンプレートとアーカイブテンプレートが共有できない事が分かり、少しがっかりしつつモジュールテンプレートの共有にみ行い、インデックステンプレートとアーカイブテンプレートはしこしこ全ブログへコピーしてました。

そんなある日、ふと思いつきました。

アーカイブテンプレートやインデックステンプレートで、モジュールテンプレートをインクルードすればいいんじゃない?

ということで、本日アーカイブテンプレートで試したところ上手くいきました。

手順は、

  1. グローバルテンプレートのモジュールテンプレートを新規作成。
  2. 共有したいアーカイブテンプレートの内容を、1で作成してモジュールテンプレートへコピー。
  3. アーカイブテンプレートには、1のモジュールテンプレートのインクルードのみ記述。

まだ、ブログ記事リストしか試してませんが、今後共有する必要のなるその他のテンプレートで順次試して行きます。

「当たり前じゃん」というツッコミが聞こえてきそうですが、気づいた時には嬉しかったです(^。^)y-.。o○

ブログの構成がほぼ決まってきてホッと一安心していたのですが、よく見てみると何か変なことに気付きました。

  1. トップページから過去の記事へ行く手段がアーカイブリストまたは、月別アーカイブしかない。新着から順番に読んで行って、最後の記事になったらそのまま以前の記事に行きたいですよね?
  2. サイドバーのカテゴリアーカイブを選んでも、記事が10個しかなくて、1と同じ様に過去の記事を見ようとすると、アーカイブリストから行くしかない。

1については、トップページの記事数を減らして、続きは月別アーカイブを選んでもらうという手段も検討しましたが親切じゃないですよね。

2については、MT4から何やら仕様が変わったらしく、以前はカテゴリーアーカイブでそのカテゴリーの全記事を見れたらしいのですが、MT4からは標準ではシステム設定で設定している記事数のみになり、他の記事が見たければ、月別カテゴリーアーカイブを使うようになっているそうです。色々事情があってそのような仕様になったのでしょうか、それは少しユーザーフレンドリーじゃないような気がします。もちろんテンプレートをいじれば、カテゴリーアーカイブに全記事を出力することは可能なのですが、それも少しユーザーフレンドリーじゃない。

というわけで、困った時には、いつもお世話になっている小粋空間さんへ。

今回は「ページ分割」の一連の記事を参考にさせていただきました。

PaginateプラグインがMT4.1で動作するか少し不安でしたが、やってみると簡単にできました。また、ページ分割するということで、再構築するページ数が増えることで再構築時間が長くなるか不安でしたが、今のところ体感できる程の違いはありませんでした。

こちらも、ページ分割の仕方について、おやじが理解した内容を紹介しようと思いますが、まだ小粋空間さんがやっていらっしゃるように、ソースの領域をスクロールさせる方法がわからないので、その方法を調べてから更新しようと思います。

各ブログのトップページにある「他の日々の新着記事」に新着表示(現在はNew!!という表示)を付けました。

参考にさせて頂いた記事は、いつもお世話になっている小粋空間さんの、「新着表示」の一連の記事です。

おやじは元々組み込みソフトのエンジニアなので、JavaScriptは専門ではないけれど、参考書片手に何をやってるかぐらいは解読できるので、小粋空間さんのScriptを転用させて頂きました。

解読した結果と使いかを少し紹介しようかと思いましたが、まだ小粋空間さんがやっていらっしゃるように、ソースの領域をスクロールさせる方法がわからないので、その方法を調べてから更新しようと思います。

IE7環境でIE6を動かす方法の御紹介。結構有名な話らしいです。

メインPCがIE7なので、このブログのカスタマイズはIE7でやってましたが、テトさん達からIE6で表示がおかしいとの指摘。確かに、サブPCのIE6で見てみると表示が崩れている。

普段のカスタマイズ確認方法は、サイトをIEで表示させて、IEの「表示」→「ソース」メニューでHTMLのソースをローカルに保存。必要なリンクをローカルのリンクに変更して、ローカルのHTMLをIEで表示させながら確認、という手順で行っているが、メインPCとPCの間でファイルをコピーしながらの確認になるので煩わしかった。どうにかならんものかとネット検索してみると、「IE6とIE7を共存させる」という記事を発見。早速試させていただきました。

まずは、「evolt.org」からie6eola_nt.zipをダウンロード。

解凍して出来たフォルダの中のiexplore.exeを実行する。

すると、あら不思議!IE6が立ち上がります。

試しに、ヘルプからバージョンを確認するとIE7とのこと。IE7のエンジンを使用して、コンテンツの表示部分のみIE6になっているらしい。仕組みは良くわからないが、表示はちゃんとIE6と同じに崩れているので、おやじの用途には十分です。

これで随分とカスタマイズの確認が楽になったけど、テンプレートを変更した場合には、やはりMTで保存してから再構築という手順を踏まなくてはいけないので面倒。何かいい方法はないのか考え中です。

今日は最近にしては珍しく20:30過ぎまで本業をしてから帰宅。

デビルメイクライ4に手を伸ばしかけたものの、何故かMTにログインして、シコシコとテンプレート編集してしまいました。(^。^)y-.。o○

本日のレシピはアクセスカウンターの追加。

材料:

 ・F2Cカウンター ID一杯

 ・根気       特大さじ 三杯

 

調理方法:

 ・まずは、ヘッダー部分にF2CカウンターのURLを追加。

 ・再構築してみると左揃えの上に、タイトルの下にカウンターが来てバランスが良くない。

 ・右揃えにしてみると、カウンター画像がはみ出してNG

 ・取りあえずヘッダーは諦めて、サイドバーの先頭に追加。

 ・こちらも左揃えになってしまってバランスが良くない。

 ・ここで、根気を250度まで予熱してからカット&トライの開始(^_^;)

 ・NETでイメージのセンタリングを調べて数候補行ってみるも表示変わらず。
  「mergin: auto;」も駄目だし、「text-align: center;」も効果なし。
  ブロックのくくりも数パターン試してみるも効果なし。

ここで根気が見事に焼き上がってしまったため本日は終了。

それでも諦め切れずに、レシピを再度チェックしてみたところ、多分、イメージ部分を囲むブロックに、「width: auto;」を設定して、その外側にまたブロック追加して、そのブロックを「mergin: auto;」にすればセンタリングされるんじゃない?というヒラメキを得たものの、本日は再度調理する気になれないので、明日以降試してみようと思います。

FireFoxで表示すると、サイドバー部分のコメントが一部そのまま表示されている問題も付け合わせにしましょう(T_T)

それにしても、いつになったらデビルメイクライ4の封が空くんだろう・・・ 

Powered by Movable Type 5.02