MT underHat テーマ 004 - ぴくログ
更新情報
- 2010年10月 3日： Ver1.2から1.21に。
-
ページ分割部分のソースにミスが有ったので修正しました。レイアウトには影響がありませんが、文法的には間違っています...すみません。具体的には、
<mt:PageBefore delim="« 前"></li></mt:IfPageBefore>
となっていたのを、
<mt:PageBefore delim="« 前"></mt:IfPageBefore>
と </li> を取っています。
- 2010年9月11日 夜明け前頃 ： Ver1.13から1.2にアップしました。
-
- SSIが強制だったのをMTの設定から選べるようになりました。
- SSIを使用する場合は、左メニューの設定 → 全般 → モジュール設定 のサーバーサイドインクルードを「ApacheのSSI」を選択して「変更を保存」した後に再構築することで使用できます。
- SSIを利用すると、サイドバーやヘッダー、フッターなどが共通化されるので全再構築をかなり減らせます。
- テンプレートモジュール「セッティング」からTwitterIDの設定が可能に。
- 2010年9月9日 ： Ver1.0から1.13にアップしました。
-
- 最近のコメント部分の日付表記を他と統一するため変更（mm月dd日 → mm/dd）
- あわせて全ての日付フォーマットを %Y/%b/%e %k:%M → %Y/%m/%d %k:%M に変更
- テーマ用サムネイル名の変更
- templatesフォルダ内のmtmlファイルを整理
- コメント投稿のメールアドレス部分「公開されません」が不自然な位置で改行される場合の対応（br要素追加）
- テンプレートモジュール「セッティング」よりいくつかの設定が変更できるように。（機能や仕様の説明参照）
- 上記に伴い、ga.jsをインデックステンプレート化、同様にsetting.jsにもいくつかのMTタグを設置等。
- その他、細かい修正を行っておりますが、セッティング機能の追加と日付表記変更が主な目的のため運営に支障が生じるような修正は有りません。
4代目のテーマは、フォトな感じのブログを運営するのに適していると思われるフォトログです。
フォトログはかなーり昔から作りたくて、CSS HappyLifeでも「PhotoBlogを作ってみた」と言うエントリーを書いているように、とても作りたかったテーマの一つです。
でも、普通にフォトログを作るくらいなら、せっかくだしちょっと挑戦的？なテーマにしてみたくってこんな感じになりました。
最近は、低解像度の環境も増えてますが、高解像度の環境も増えておりフルHDのモニタも2万円台で買える時代です。
次のようなモニタ辺りがそんなお値段で買えるモニタですね！ぜひ買ってください。
と言う状況もあり、このテーマは高解像度な環境でより力を発揮する感じになっています。せっかくのフォトログですからね。大きな画像を楽しんでもらいたいって部分があったりするのです。
でも、単純にリキッドレイアウトにして、横幅MAXな感じだとさすがに可読性が落ちてしまうので、その辺りも考慮して個別ページなどのテキストが結構あるページでは、max-widthを変更していたりします。
あ、ここのテーマ全体に言えますが、IE6は対象外なので対策してません。ご了承ください。
今回のテーマでは、カスタムフィールドを利用しています。
そのため、最初にエントリー画面でフィールドが表示されるようにする必要があります。
設定関係は他に特に必要な部分はないので、面倒な初期設定は特に無いです。
必要なプラグイン
より快適に使うためなどの理由からプラグインを使用して実現している機能がいくつか有りますので、事前に以下のプラグインを導入してください。
各プラグインのバージョンはダウンロードするタイミングによっては違うかもしれません。
必須プラグイン
- MTTruncateURL 0.01
- http://から始まる絶対パスをルートパスに変換するプラグインです。色んなテンプレートで使っているので入れてください。
- Sort Categories And Folders 1.11
- カテゴリとフォルダを好きな順序に並べ替えることができるプラグインです。
- PageBute 3.5.0
- 静的ページ用ページ分割プラグインです。アーカイブページなどで使ってます。
上記プラグインは、必須と言っているように、無いと再構築時にエラーが出てしまうので、必ず入れてください。
あったら便利なプラグイン
- UploadDir 0.62
- フォトログを運営するにはかなり大事なプラグイン！必須と言えるくらいです。これは、ファイルの拡張子によってアップロード先のディレクトリを自動的に切り替えるプラグインです。
- Abs2Rel 1.00
- URLの表示をパス指定に変換してくれるプラグインです。今回上記のMTTruncateURLで動作しない部分にちょこっと使ってますが、無くてもエラーは出ません。
- TaggingHelper
- 過去に使われたタグを候補として表示し、選択することでタグを指定できるプラグインです。MT5で動作するのでタグを使う場合、入れておくと便利です。
テーマの適用方法
テーマの適用方法は、MT5のドキュメントも参考になるかと思います。
やることは、themes ディレクトリにアップしてテーマを適用させるだけです。
このテーマは、一部カスタムフィールドを使っていますが、普通に適用してもらえば特に問題なく使えると思います。
追加されるカスタムフィールドは全てブログ記事用なので、左メニューの設定 → 投稿 → 作成の規定値の記事フィールドに有る追加されたフィールドにチェックを付けてください。
- テーマの入手は、ページ下のダウンロードから行ってください。
ダウンロードしたテーマはzip形式にて圧縮されておりますので、適当な解凍ソフトで解凍してください。 - 解凍すると「underHat_theme_004_ver1.xx」と言うフォルダが出来ますので、このフォルダごと Movable Typeをインストールしたディレクトリにある「themes」ディレクトリ内にアップロードします。
-
アップロード後、ブログの管理画面の デザイン → テーマ に「MT underHat Theme 004 ぴくログ x.x」が追加されているかご確認ください。
- これで 適用 をクリックすると、テーマが適用されます。
もしくは、ブログの作成のブログテーマのプルダウンから「MT underHat Theme 004 ぴくログ」を選んで新規作成してもOKです。 - 適用は以上です。とっても簡単。
- テーマ適用後は前述したように、ブログ記事の作成画面でカスタムフィールドが表示されるようにしてください。
適用したテーマの戻し方
カンバスを適用してみたは良いけど、戻したいなぁと言う場合、別のテーマを適用すれば普通に戻ると思います。
その際、カスタムフィールドは残っているので不要な場合削除してください。
機能や仕様の説明
画像のアップロード
ピクチャと言う名前のカスタムフィールドが有るのでそこからアップロードしてください。
本文内は、基本的にリード文みたいな感じで短めなテキストを入れることを想定しているのと、画像をココに入れることを想定していないので、でかい画像を本文に使うとはみ出ます。仕様です。
なお、追記の続きでは普通に画像をアップロードして問題ないですが、自動リサイズされませんのでご注意を。
トップのエントリー表示件数
設定 → 投稿 の表示される記事数が反映されるようになっていますので、この部分の数値を変更してください。
ページ下部にあるメニューっぽい部分
デザイン → ウィジェットから変更したり色々出来ます。並び替えも出来ますが、jquery.vgrid.jsによってうにうにっとボックスの高さによって並び替えられるので、実際の順番と見た目がだいぶ変わる可能性もあります。
SSIを使っている場合はインデックスのみ再構築すればOK！
プロフィールなどの変更は、ウィジェットテンプレートを編集してください。
SSIの利用について
SSIを利用する場合は拡張子が「html」でSSIが動作するかご確認下さい。
動作しない場合は、.htaccess をちょこっといじる必要があります。具体的には下記のような感じです。
AddType text/x-server-parsed-html .shtml .html
拡張子が.shtmlで問題ないなら、その方がサーバ負荷的には良いと思います。（実際どの程度違うのかとかその辺りはあんまり詳しくないので分かりませんが...）
.shtmlでやる場合、全般設定のファイルの拡張子を「shtml」にし、インデックステンプレートのメインページとアーカイブインデックスの出力ファイル名、他にPicture Viewページにも大中小のリンクも .html から .shtml に変更してください。
.htaccessの設定が終わったら次に、管理画面の設定 → 全般 → モジュール設定 のサーバーサイドインクルードを「ApacheのSSI」を選択して「変更を保存」した後に再構築することで使用できます。
再構築後、実際の画面を確認して何も変わっていなければ問題なく動作しています。SSIが使えない状態だとCSSがあたっていなかったり、ヘッダーなどが表示されない状態になります。
問題なく動作していれば、ウィジェットからサイドバーの中身を変えてみたりして変更を保存した後に、インデックスのみ再構築すれば全ページに変更が適用されたり、ウェブページからページを追加したり削除した場合は、全再構築を行わずとも全ページのヘッダーとフッターにウェブページでの修正が反映されるのが確認できます。
これで、新規エントリーした際に、古いエントリーのサイドバーも常に最新になるため、ページによってサイドバーの情報が変わってしまうような事態を避けることが出来るようになり、全再構築を掛ける必要も無くなるので人間的にもサーバ的にもかなり負担が減らせます。
かなりオススメなのでぜひ一度使ってみてください。SSIはMT動くサーバならまず使えます。
- ワンポイント！
-
SSIを設定すると、MTが自動的にインクルード用のhtmlファイルを生成します。
この生成先はブログを設置したディレクトリ内に「includes_c」と言う名前でディレクトリが作られその中に生成されます。
画像とかのアイテムをアップロードしてサムネイルが作られる場合には「assets_c」と言うディレクトリを生成しますが、これらは mt-config.cgi から変更が可能です。AssetCacheDir img/thumbnail IncludesDir inc
こんな感じに設定すればOK！ 知らないと謎のディレクトリっぽくて、ディレクトリ名も微妙なので変えると分かりやすくなっていい感じです。
セッティング
左メニューのデザイン → テンプレート → テンプレートモジュール の セッティングよりいくつかの項目を設定できるようにしました。
各value値を変更することで簡易的な設定が出来ます。
下記の設定はSSIを利用している場合『インデックスのみ再構築』をかければブログ全体に反映されます。
SSIを利用していない場合、Picture View以外の設定はすべて再構築をする必要があります。
Picture Viewページのリンク先設定
初期設定では、ColorBoxによる拡大表示になっていますが、value値を「entry」と変更することで、エントリーページへリンクするようになります。
アクセス解析の設定
標準ではGoogle Analytics を使えるようにしております。
セッティング内の、nameがgoogleAnalyticsのvalue値を自身のウェブプロパティID（UA番号）に変更してください。
Twitterの設定
TwitterIDを設定すると、ヘッダーに「Follow me」のリンクと、下のメニューっぽいところに、最近のつぶやきが表示されます。
非表示にする場合は、デフォルト値の「twitter」にしてください。
ColorBoxの最大の高さ設定
標準ではウィンドウサイズに対して、縦幅が90%を超える画像の場合は自動的にリサイズされて画像が表示されるようになっています。
値を0～100の間で指定するか、offとするとウィンドウサイズより画像が大きい場合もリサイズしません。
高さに関しては、扱う画像によっては縦長が多いと思うのでoffにした方が良い場合もあります。
ColorBoxの最大の横幅設定
標準ではウィンドウサイズに対して、横幅が90%を超える画像の場合は自動的にリサイズされて画像が表示されるようになっています。
値を0～100の間で指定するか、offとするとウィンドウサイズより画像が大きい場合もリサイズしません。
横幅に関しては、リサイズをオフにしてしまうと横スクロールバーが表示される可能性も有るのでご留意ください。
ダウンロード
テーマのダウンロードをする前に、必ずライセンス・免責事項をご確認いただき、同意の上ご利用ください。