Movable Typeの最近のブログ記事

そんなにタイムリーに更新もしていないのですが、携帯からブログを更新出来たらもう少し更新するようになるのかな、と。

特徴(提供元のスカイアークより引用)



  • MTのプラグインでメール投稿(ブログ記事)が出来るようになる(別途Gmailなどのメールボックスが必要)
  • メールに添付されたファイルはアイテムに登録される

  • 添付ファイルが画像の場合(jpg / gif /png)、管理画面で指定したサイズで画像を自動縮小する

  • 添付ファイルの表示位置を指定できる(文章の上か下)

  • 投稿設定はMTの設定に準拠するので、公開状態を標準で下書きにすると、下書き保存が可能。即時公開の場合は、メール投稿が確認できた場合にすぐに再構築が走ります。

  • MTに登録されているユーザーのメールアドレスと、送信元のメールアドレスが合致した場合のみMTに投稿されるので、スパムメールの投稿がされません。

  • 管理画面からメールの投稿設定を簡単に行える

  • ブログ毎、カテゴリ毎に投稿を振り分けることが出来る(複数のメールボックスが必要です)

  • メール投稿が成功した場合に通知メールを飛ばすことが出来る。

そんなに機会はないかもしれないけど、これで旅先などからタイムリーに更新できるかもです。

Movable Typeをアップグレードしました。
バグフィックスが目的みたいなのですが、アップグレード前にバグに遭遇していなかったので(気がついてないだけかも)変わったのは一番下のバージョンナンバーくらいな気がします。

4.24から4.25へアップグレードしてなかったのですが、その時はセキュリティの強化とかあったみたいですね。
アップグレードで余計な不具合が出るのが嫌だったので毎回敬遠してしまいます。

そうこうしている間に4.3もリリース間近ですし、MT5も10月に正式版がリリースされるみたいです。

せっかく書籍を買ってもどんどん新しくなっていきますね。
頭が追い付く限りは食いついていきたいものです。

便利な機能を使う際に敷居が低くなるのは喜ばしいことです。
まだカスタマイズの「カ」の字にも届いてないのですが、もう少しスピードをアップしていかないと駄目ですね。

/* Layout ----------------------------------------------------------------- */

body {
text-align: center; ---- IE5.5以下でも「#content-inner」をセンタリングするための指定
background: #fff; --- body要素の背景を白色に設定
}

#container-inner {
width: 940px; --- 幅を940pxに設定
min-height: 100%; --- 高さの最小値を100%に設定
margin: 0 auto; --- ボックスをセンタリングする設定
text-align: left; --- body要素のIE5.5対策でテキストをセンタリングしているのを戻している
}

#header, #content, #alpha, #beta, #gamma, #footer {
position: relative; --- 相対配置にしている
}

#alpha, #beta, #gamma {
display: inline; --- IE6.0以前で発生するマージン関連を解消するための指定
float: left; --- 左側にfloatさせる設定
}

#header-inner, #content-inner, #footer-inner,
#alpha-inner, #beta-inner, #gamma-inner {
position: static; --- 入れ子になっている要素を普通の状態に戻す
}

#header-inner, #content-inner, #footer-inner {
padding-top: 20px;
padding-bottom: 20px; --- 上下のパディングを20pxに設定
}

#header-inner, #footer-inner,
#alpha-inner, #beta-inner, #gamma-inner {
overflow: hidden; --- ボックスからはみ出た部分は表示されないように設定
padding-right: 20px;
padding-left: 20px; --- 左右のパディングを20pxに設定
}


/* Wide-Thin-Thin */ --- 「3カラム、大・小・小」の幅と配置位置を設定。今選択しているテンプレート

.layout-wtt #alpha {
width: 560px;
}

.layout-wtt #beta {
left: 190px;
width: 190px;
}

.layout-wtt #gamma {
right: 190px;
width: 190px;
}


/* Thin-Wide-Thin */ --- 「3カラム、小・大・小」の幅と配置位置を設定。

.layout-twt #alpha {
left: 190px;
width: 560px;
}

.layout-twt #beta {
left: -560px;
width: 190px;
}

.layout-twt #gamma {
width: 190px;
}


/* Wide-Thin */ --- 「2カラム、大・小」の幅と配置位置を設定。

.layout-wt #alpha {
width: 750px;
}

.layout-wt #beta {
width: 190px;
}


/* Thin-Wide */ --- 「2カラム、小・大」の幅と配置位置を設定。

.layout-tw #alpha {
left: 190px;
width: 750px;
}

.layout-tw #beta {
left: -750px;
width: 190px;
}


/* Medium-Wide */ --- 「2カラム、中・大」の幅と配置位置を設定。

.layout-mw #alpha {
left: 330px;
width: 610px;
}

.layout-mw #beta {
left: -610px;
width: 330px;
}

/* Wide-Medium */ --- 「2カラム、大・中」の幅と配置位置を設定。

.layout-wm #alpha {
width: 610px;
}

.layout-wm #beta {
width: 330px;
}

----------------------------------------------------------

今回はここまで。
次回は"blog.css"のコンテンツに関しての記述部分を調べていきます

テーマを選択した時に共通して読み込まれる"blog.css"の指定内容
以下"blog.css"の内容と解説

/* Base Theme ============================================================= */

/* Reset ------------------------------------------------------------------ */

/*
reset.css - resets default browser styling
http://tantek.com/log/2004/09.html#d06t2354
http://www.vox.com/.shared/css/base.css by beausmith.com
http://developer.yahoo.com/yui/reset/
*/

:link,:visited {
text-decoration: none; ←すべてのリンクの下線を消している
}
html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td {
margin: 0;  ←
padding: 0; ←各要素の余白を0にしている
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;  ←
font-weight: normal;←見出し要素のサイズと太さを標準にしている
}
table {
border-spacing: 0; ←table要素の各セルのボーダー同士の間隔を0にしている
}
fieldset,img,abbr,acronym {
border: 0; ←各要素のボーダーの太さを0にしている
}
/* strict reset by uncommenting lines below */
address,caption,cite,code,dfn,em,strong,b,u,s,i,th,var {
/* font-style: normal; */
/* font-weight: normal; */
}

ol,ul {
list-style: none; ←リストの各項目のリストマーカーを消している
}
caption,th {
text-align: left; ←tableのキャプションと見出しセルの内容を左揃えに設定
}
q:before,q:after {
content: ''; ←インラインでの引用部分を示す"q"要素の前後に引用符が表示されないようにしている
}
a {
text-decoration: underline; ←a要素に下線を表示させている
outline: none;         ←a要素にアウトライン(点線の枠など)が表示されないように設定
}
hr {
border: 0;           ←
height: 1px;         ←
background-color: #000; ←
color: #000;         ←横線を1ピクセルの黒い線(#000)に設定している
}
a img,:link img,:visited img {
border: none; ←各種状態での画像のボーダーを消している
}
address {
font-style: normal; ←斜体で表示されるaddress要素を標準状態に戻している
display: inline; ←address要素の表示方法がインライン要素と同様になるように設定
}


/* Utilities ----------------------------------------------------------------- */
↓ここから
.pkg:after, #content-inner:after {
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
.pkg, #content-inner { display: block; }
/* no ie mac \*/
* html .pkg, * html #content-inner { height: 1%; }
.pkg, #content-inner { display: block; }
/* */
↑ここまで"clearfix"と呼ばれるCSSハックを#conntent-inner等に適用

.inline { display: inline; } ←表示方法をインライン要素と同様にするための指定
.hidden { display: none; } ←表示を消すための指定

=================================

以上までが"base.css"の最初の部分の内容と解説でした。
次回は同様に"base.css"のレイアウトに関する内容を調べていきたいと思います。

基本構造を知る

| コメント(0) | トラックバック(0)

このテンプレートもMT4.25の標準テンプレートを使って構築しています。

基本からしっかりわかる Movable Type 4.2 カスタマイズブック(Web Designing Books)(クリックでamazonにリンクします)

という書籍を購入したところ、始めはスタイルシートの基本構造からでした。
あえて、載ってないテンプレートを選択したので、ここで基本構造などを調べていこうと思います。


まず、このテンプレートスタイルは『プロフェッショナル ウェブサイト』の『Professional Black』です。

読み込み専用スタイルシート『style.css』が『blog.css』、『screen.css』という二つのスタイルシートを呼び出しています。
これは標準テンプレートを選択した場合は必ずこうなるようです。

今日はこの辺で。

次回は『blog.css』の内容を調べていきたいと思います