やっと引越し後の後片付けも落ち着き、さぁ
これから、「Movable Type」を楽しむぞ。
【本日の作業記録】
■セキュリティ対策
□管理画面下にある
・mt-config.cgi のパーミッションを、400に。
□（当面）Trackback な無し、とし
※以前、スパムで懲りた
□コメントは、サインイン無しで受け付けられるように
※第三者のサインインはあり得ない
＞（参考）Q. サインインなしでコメントを投稿できますか
□コメント投稿時に、Movable Type 標準の
・画像認証（CAPTCHA 認証）を利用。
＞（参考）コメントに CAPTCHA 認証を利用する
■デザイン
□スタイルのリポジトリ機能を利用
※素晴らしい リポジトリ公開サイト
◆STYLE LEAVES（スタイルリーブス）
素敵なデザインがたくさん。
クリエイティブ・コモンズ
・ライセンスで公開。
この「家」をモチーフにしたデザインがお気に入り！
※この原稿は、以前のブログから移植されたもので
内容が、今のブログにそぐわないものもございます。
ずっと、「白ベース」のままだったので、デザインを考える。
ただし、今回は
・テンプレートを大きくカスタマイズする というものではなく
全体的な基本のデザインカスタマイズに終始した。
【目標・目的】
******************************
【実行】
******************************
◆１：背景の写真
++++++++++++++++++++++++++++++
・前から海外のサイトで
超高品質の画像を無料でダウンロードさせてくれる
サイトをいくつか知っていた。
その中のひとつ
◆InterfaceLIFT: Wallpaper sorted by Date
・一応このサイトは
壁紙(Wallpaper)用の画像の
無料配布サイトなのだが、
壁紙というくらいなので、
大きな高品質の画像が
たくさん用意されている。
ほんと、驚くほど高画質で
センスのいい写真がずらっと並ぶ。
サイズは
（背景全面に敷くつもりなので 1600×1200 で探した。
これが落とした画像だ。
※この上部の「空」の部分を利用したかった。
※この上部の「空」の部分を利用したかった。
■ダウンロード後、（最初はbitmapなので）
jpgファイルに変換して、
ブログの管理画面からアップロード
※本当は、自身のサイトでFTPアクセスできるから
それでもいいのだけれど、
・ブログの利用方法を習得しているわけだから・・・
■bodyタグへの指定
まず、スタイルシートで
body タグに画像を背景で利用するよう記述
background: url(画像のURL) no-repeat 0 0 #fff;
background-attachment:fixed;
◆２：各ブロックを少し透かす
++++++++++++++++++++++++++++++
■次に現在利用しているテンプレートの
主要な４つのブロック
・ヘッダー
・中央メインエリア
・サイドバー(左右）
・フッター
それぞれに
background:#fff;
opacity: 0.9;filter:alpha(opacity=70);zoom:1;
◆３：ヘッダーはさらに別の背景画像
++++++++++++++++++++++++++++++
※私がメインブログ「創るmetaboy」で利用している
デザインに近づけることにした
background-image : url(画像のURL);
ところが、このままでは妙におかしい
・左右のサイドバーが情報が少ないため
下まで、背景が延びず
途中で切れてしまうのだ。
◆４：サイドバー左右の長さを揃える
++++++++++++++++++++++++++++++
※これを可能にしてくれたのが
メインブログ「創るmetaboy」でも紹介した
◆ハムさんのプラグイン「jQuery SameHeight Plugin」
・簡単に、揃えてくれる
jQuery.js が必須だが
競っては驚くほど簡単
高さを揃えたいボックスを指定のクラス
で囲むだけだ・・・
<div class="sameHeight">
<div id="alpha"></div>
<div id="beta"></div>
<div id="gamma"></div>
</div>
すると、こうなる
▼
ＯＫ！
◆５：リンク廻り
++++++++++++++++++++++++++++++
リンク部分を標準の青色ベースにして
マウスオーバーの際
（最近よく利用している、「ちょこっ」と右下に下がる
アクションを加えた
a:hover{
text-decoration: none;
position:relative;
top:1px;
left:1px;
color: #003DAF;
}よし、今日はここまででいいか・・・
記録しておこう。
【2008/11/27 の 創るブログ】
******************************
※この原稿は、以前のブログから移植されたもので
内容が、今のブログにそぐわないものもございます。
サイトに「パンくずリスト」は必須だ。
・サイト利用者のためにも
・SEO対策の目的でも
・サイトの構造も把握できる
組み込むにあたり、
・できるだけ 将来 楽になりたい ために
できうる限り「テンプレートモジュール」を利用する
・ここ１ヶ所に記述し
各テンプレートからincludeするのだ。
◆１：テンプレートタイプの判別
・Movable Type3 の頃は大変だったようだが
4では、いろいろと変数も整備されているようで、簡単。
・アーカイブテンプレートに設定される予約変数
（Movable Type4 ドキュメント)
にある変数を利用する
・「パンくずリスト」を用意するのは
・カテゴリ（category_archive）
・各アーカイブの年別・月別・週別・日別アーカイブ
（datebased_archive）
・ブログ記事（entry_archive）
・ウェブページ（page_archive）
で、それぞれ（）の中の変数がセットされている
◆２：テンプレートモジュールの準備
・pankuzu_links の名前で（なんでもいいけど）
次のソースを準備
<mt:If name="main_index"><mt:Else>
<div id="pankuzu_links"><a href="<$MTBlogURL$>">トップページ</a>
<mt:If name="category_archive">
<!-- カテゴリ -->
>
<MTParentCategories glue=" > ">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>
</MTParentCategories>
</mt:If>
<mt:If name="datebased_archive">
<!-- 各アーカイブの年別・月別・週別・日別アーカイブ -->
>
<$MTArchiveTitle$>
</mt:If>
<mt:If name="entry_archive">
<!-- ブログ記事 -->
>
<MTParentCategories glue=" > ">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>
</MTParentCategories>
> <$MTEntryTitle$>
</mt:If>
<mt:If name="page_archive">
<!-- ウェブページ -->
>
<$MTEntryTitle$>
</mt:If>
</div>
</mt:If>
◆３：スタイルシートの編集
・スタイルシートテンプレートに追加
#pankuzu_links{
margin:5px 0px 5px 10px;
padding:5px 0px 5px 10px;
}◆４：各テンプレート
・上記の４つに関係する（私の場合は）
・カテゴリ（カテゴリ別ブログ記事リスト）
・各アーカイブの年別・月別・週別・日別アーカイブ
（月別ブログ記事リスト）
・ブログ記事（ブログ記事）
・ウェブページ（ウェブページ）
※（）内はテンプレート名
に、
<div id="content-inner">
<$mt:Include module="pankuzu_links"$>
<div id="alpha">
▼
（実行）
無事、「パンくすリスト」が表示された！
使えるプラグインを探して、
ブログのエディタをもう少し高機能にしたい・・・
（最初に）
MOvable Type の管理画面 [ ツール ] ＞ [ プラグイン ]
で、「プラグインを探す」をクリックして探す
リストの中に
-------------------------------------------------------------------
・TinyMCE4MT
-------------------------------------------------------------------
これを調べる、と・・・
こちらの「エムロジック」で提供されているものだが
残念ながら「有償」のようだ。
今回、コストをかけたくはないので、他を探す。
オープンソースのままで紹介されている
「TinyMCE-MTPlugin（Technology on Information）」さんの
記述を参考にさせていただき、
（ありがとうございました）
-------------------------------------------------------------------
・TinyMCE-MTPugin
-------------------------------------------------------------------
・Release 0.1.5.1 for Japanese (ZIP) をダウンロード
2ヶ所にアップロード
・mt-static/plugins/inyMCE
・plugins/TinyMCE
管理画面 [ ツール ] ＞[ プラグイン ]で
表示される（もう、使用可能だ）、
・TinyMCE 0.1.5.1
最初、
こんな感じだったのが
こうなった。・SourceForge.JP のサイトから
MT-Plugin-FCKeditor-1.2.zip を
-------------------------------------------------------------------左右のカラムの中に何を表示するかを決めるのは
・左右カラムの内容を変更（ウィジェット）
-------------------------------------------------------------------
-------------------------------------------------------------------
・新しく ウィジェット を追加してみる
-------------------------------------------------------------------
これから、サイドエリアには色々と貼ってゆきたく
まず、私のメインブログへのリンクを
貼っておこう
【 手順 】
・管理画面 [ デザイン ] ＞ [ ウィジェット ] で
「ウィジェットテンプレートを作成」
・名前を "ようこそ" とし
創るmetaboy へのバナーリンクをソースに入力
・左カラム用のウィジェットセットである
・3カラムのサイドバー(サブ) をGUIで編集する
※画像は、
[ 新規作成 ] ＞ [ ファイルアップロード ] で
簡単にアップロードできる
-------------------------------------------------------------------現在適用されている「テンプレート」は
・ソースを表示して、構造をおおまかに理解
-------------------------------------------------------------------
【 手順 】
・表示されているブログの最初の頁で、ブラウザのソース表示
を行う。
・エディタでソースを整理し、divタグ以外を削除 ＞ こうなる
（※DreamWeaver とかで読み込み、ソースフォーマットの適用
などでやれば、早い）
※この確認は意外と重要で、
（特に他の方が作った構造を理解するには不可欠の作業だ）
さぁ、この構造を踏まえて
サイトデザインを触ろう
-------------------------------------------------------------------
・CSSファイルの確認
-------------------------------------------------------------------
@import url を利用して２つのCSSファイルを組み込まれている
それぞれエディタで開いて確認してみる。(Movable Typeのインストールされたディレクトリ)mt-static/themes-base/blog.css
(Movable Typeのインストールされたディレクトリ)mt-static/support/themes/cityscape-london/cityscape-london.css
（おっ！?と、その前に）複写して、必ずバックアップをとっておく。
・themes-base/blog.css
こちらは、ベースになるもののようで、この後に
スタイルごとのCSSが組み込まれており、現在のスタイルのものが
・support/themes/cityscape-london/cityscape-london.css
だ。こちらを編集してみる
（※もちろん、すぐに元に戻せるよう 複写バックアップとって）
-------------------------------------------------------------------
・テンプレートCSSファイルの編集
-------------------------------------------------------------------
support/themes/cityscape-london/cityscape-london.css の中で
今回編集したのは、
[ 背景画像をはずす ]
・白ベースにしたかったので、
body { に記述があった
background: #628642 url(body.gif) repeat-y top center;
をコメントアウト
[ 右カラムの背景画像をはずす ]
・右カラムを、白ベースにしたかったので、
.layout-twt #content-inner {
background: transparent url(content-twt.gif)
repeat-y scroll left top; }
を、左カラムのみの指定で
.layout-twt #content-inner #beta-inner {
background: transparent url(content-twt.gif)
repeat-y scroll left top; }
と変更
[ フォントの変更 ]
・元々が海外版のテンプレートなので、
font-family: "trebuchet ms", arial,
"hirakakupro-w3", osaka, "ms pgothic", sans-serif; という表示を
font-family: "ＭＳ Ｐゴシック", Arial, Verdana;
に変更
カラムの幅など基本的な部分は、ベースのCSSファイルの
編集だ。
-------------------------------------------------------------------
・ベースCSSファイルの編集
-------------------------------------------------------------------
themes-base/blog.css
今回編集したのは、
[ カラムのサイズ調整 ]
・スタイルで、「３カラム（小・大・小）」を選択しているので
layout-twt が該当する
左カラムが、#beta
中央が #alpha
右カラムが #gamma にあたる
その他、いくつか微調整。
いづれも、上記２ファイル(CSSファイル）を直接編集して
アップロード、するだけだ。
※ただ、いつでも、スタイルを変更できるように
汎用的な（利用していない）記述も多く、ある程度
確定したら、必要な部分のみにして、ファイル名変えて
組み込むことを考えよう。
これからいろいろとカスタマイズ・実験を行ううえで、
最初に環境を整えておこう。
プログラムをいろいろと組み込む予定なので、
まず
-------------------------------------------------------------------
・PHPが、利用できる必要がある
-------------------------------------------------------------------
これについては、（例によって）非常に丁寧な解説で
・WEBデザインストック | WEBデザイン・Movable Type等の備忘録
・Movable Type 備忘録 - MovableTypeをPHP化する
などによって、具体的な詳細を知ることができた。
ありがとうございます。
※ただ、私の場合は、
.htaccess 自体で、.html および .htm ファイル内でPHPを利用できる
仕様にしているので、そこの部分は知識として享受した。
次に
-------------------------------------------------------------------
・ソースをできるだけ汎用的な部品化としたい
-------------------------------------------------------------------
PHP で、require や include を利用して、できるだけ部品化、オブジェクト化
して構築したく、これは極めたい。
これに関しても、
・Movable Type 備忘録 - MovableTypeをPHP化する
さんの解説が非常に役立った。
※ただ、現在私が利用しているMovable Type4.21 とは
管理画面のインターフェイスが少し違うようで、その手順を記しておく。
驚くほど簡単だった。
【 手順 】
・管理画面 で
・[ デザイン ] ＞ [ テンプレート ] を選択
■エントリー・本文 テンプレート を作成
・[ アーカイブ・テンプレート ] で、アーカイブテンプレートを作成: ブログ記事
を クリック
・"エントリー・本文" と入力し、ソースには
<$MTEntryBody$> と入れる
＞ これで一度 保存
・すると、[ テンプレートの設定 ] をクリックすると
アーカイブ。マッピング ができるようになる
・[ 新しいアーカイブマッピングを作成 ] をクリック
・[ 追加 ] をクリック
＞ パスの設定ができるようになるので ・・・
・パスのプルダウンリスト で "カスタム..." を選び
Movable Type 備忘録 さんで教えていただいたように
%y/%m/entry%E-body%x と入力する
※この時、左側の "ブログ記事" のチェックボックスは
チェックを入れない。入れると、そのまま置き換わってしまう。
＞ これで保存
■エントリー・追記 テンプレート を作成
同じように
・[ アーカイブ・テンプレート ] で、アーカイブテンプレートを作成: ブログ記事
を クリック
・"エントリー・追記" と入力し、ソースには
<$MTEntryMore$> と入れる
＞ これで一度 保存
・[ 新しいアーカイブマッピングを作成 ] を行い
・パスのプルダウンリスト で "カスタム..." を選び
%y/%m/entry%E-body%x と入力する
＞ これで保存
■ブログ記事 テンプレート の編集
・[ アーカイブ・テンプレート ] で、ブログ記事テンプレートをクリック
ソースの中で、
・<$mt:EntryBody$> となっているところを
<?php include('<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m"$>/entry<$MTEntryID$>-body.html');?> に変更する
※前述のように、私は、.htaccess 指定で、ファイル拡張子は.htmlのまま
PHPが動作するようにしているので、ここの拡張子も、.html だ。
・同じく <$mt:EntryMore$> の部分を
<?php include('<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m"$>/entry<$MTEntryID$>-more.html');?>
に変更する
・（併せて）[ テンプレートの設定 ] で
アーカイブマッピングで "カスタム..." を選び
%y/%m/entry%E-body%x と入力する
＞ これで 保存
■再構築
・全体を再構築する
■ファイル名形式が変わったので、前に用意したファイルが
残っていれば削除する
まずはここまでの方法で、テンプレート分割の方法は
おおまかにつかめた。
MovableType は基本的に 「静的生成」 だから、
Google Sitemap を自動生成する仕組みを組み込んでおく。
すでにサイト上に、先人の丁寧で確かな情報があり、参考にさせていただく。
次の手順で用意した。
管理画面において
１：[デザイン] ＞ [インデックステンプレート] において
・テンプレートの作成
