Movable Type: 2008年1月アーカイブ

ホームページの更新作業は思ったよりも重労働ですよね。


1.ソフトを起動する
2.テキストもしくは画像を用意しhtmlに書き込む
3.リンク先のページを作成
4.元ページからリンク先のページにリンクを貼る。
5.古くなったページをバックナンバーページに移動する。
6.リンク先を変更する。
7.FTPアップロードをする。


【デメリット】
1.ソフトのある環境でしか更新ができない。
2.古くなったページを別ページに移動してリンク先を変更しなければいけない。
3.テンプレートの更新に時間がかかる
4.外出先からはリアルタイムな更新ができない。
5.RSS配信ができない。


他にも数えるといくつか出てきますが、これまでのホームページ管理は時間と労力が非常にかかっていました。
しかし、「ブログ」が普及し始めてからはCMSの利用が拡大してきました。


「CMS(コンテンツ・マネージメント・システム)」
Webコンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築したり編集したりするソフトウェアのこと。広義には、デジタルコンテンツの管理を行なうシステムの総称。


簡単に説明すると、ホームページ作成ソフトが無くてもホームページの更新ができ、ホームページの更新の際は管理画面から記事を入力するだけで良い。と言うことです。


実際に更新の手順を見てみましょう。(Movable Type)
1.インターネットで管理画面にアクセスする。
2.IDとPWを入力してログインする。
3.記事のタイトルを書く
4.記事のカテゴリを選ぶ
5.記事の内容を書く。
6.記事を保存する。


29_mt_flow.gif


後は自動的にページを生成してくれますし、携帯電話からの投稿も可能です。
これだけ作業内容が短縮されると時間が有効的に使えます。


また、このCMSを導入することによりSEO対策(検索エンジン最適化)が自動的に行われます。
今現在、ホームページの作成をお考えの方、または更新をもっと楽にしたいをお考えの方はCMSの導入を是非お勧めします!


Movable Typeカテゴリー
Movable Type(ムーバブル・タイプ)は、シックス・アパート社が開発・提供するブログソフトウェアであり、ブログソフトウェアとしては定番的存在である。


WordPress
WordPress(ワードプレス)はデータベースにMySQLを利用し、PHPで書かれたオープンソースのブログソフトウェアである。

おおお!
これは非常に便利なものを見つけました!


それは更新情報などで強調させるNEWマークを日程指定して表示させるPHPです。
「投稿してから?日間表示させる」と言う指定が簡単にできます。
しかも設置が非常に簡単です。


まず、<head>~</head>内に
<?php
function disp_new($d1,$n){
$d3=date( "Ymd", mktime( 0,0,0,date("m") ,date("d")-$n, date("Y") ) );
if($d1>=$d3) print "<img src=\"<$MTBlogURL$>img/icon_new.gif\">";
}
?>
を挿入します。


次に、NEWマークを表示させたい<MTEntries>~</MTEntries>内に
<?php disp_new("<$MTEntryDate language='en' format='%Y%m%d'$>",3); ?>
を挿入します。


たったのこれだけ!
表示日数を変更したい時は「3」の部分を変更して下さい。


この技を開発されたのは「アロマネット株式会社」様です。
http://www.aromanet.co.jp/devphp/000183.php

画像のアップロード先を変更する方法はバージョンによって様々です。
今回はMT3.3の変更方法について書きます。


今までは、サイトパス/images/(任意のファイル名)
と言う設定でしたが
サイトパス/tmpl/cms/upload.tmpl
のスクリプトを編集することにより


サイトパス/images/年/月/(任意のファイル名)


と言うように自動的に年と月を生成してくれる方法です。
まずは、ファイル先頭のJavascriptを編集します。


【編集前】


<TMPL_INCLUDE NAME="header-popup.tmpl">

<script type="text/javascript">
<!--
function setExtraPath(sel) {
var opt = sel.options[sel.selectedIndex];
var path = opt.getAttribute("middle_path");
if (!path) path = '';
var middle = sel.form['middle_path'];
if (middle) middle.value = path;
}
//-->
</script>


【編集後】


<TMPL_INCLUDE NAME="header-popup.tmpl">

<script type="text/javascript">
<!--
var today = new Date();
var num_year = today.getYear();
var str_year = String((num_year < 2000) ? num_year + 1900 : num_year);
var num_month = today.getMonth() + 1;
var str_month = (num_month < 10) ? "0" + num_month : String(num_month);

function setExtraPath(sel) {
var opt = sel.options[sel.selectedIndex];
var path = opt.getAttribute("middle_path");
if (!path) path = '';
var middle = sel.form['middle_path'];
if (middle) middle.value = path;

if (path) {
document.forms[0].extra_path.value = "images/";
} else {
document.forms[0].extra_path.value = "images/" + str_year + "/" + str_month;
}
}
//-->
</script>


そして、オプションでパスを入れる入力フィールドの部分の直後の部分も修正を加えます。



/ <input name="extra_path" id="extra_path" />

<script type="text/javascript">
<!--
document.forms[0].extra_path.value = "images/" + str_year + "/" + str_month;
//-->
</script>


これでオプションでアップロード先を選択し忘れても、
日付で分けられたフォルダが作成され、そこにアップロードされます。

Webコンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築したり編集したりするソフトウェアのこと。広義には、デジタルコンテンツの管理を行なうシステムの総称。


Webサイトを構築するには、テキストや画像を作成するだけでなく、HTMLやCSSなどの言語でレイアウトや装飾を行ない、ページ間にハイパーリンクを設定するなどの作業も行なう必要がある。これらの要素を分離してデータベースに保存し、サイト構築をソフトウェアで自動的に行なうようにしたものがCMSである。


CMSを導入すれば、テキスト制作者はHTMLなどの知識を習得する必要はなく、デザイナーはテキストが更新されるたびに作業を行なう必要はなくなり、それぞれ自らの作業に集中することができる。また、サイト内のナビゲーション要素なども自動生成するため、ページが追加されるたびに関連するページにリンクを追加するといった煩わしい作業からも解放される。CMSの中には、サイトのデザインを「テンプレート」(ひな型)としてあらかじめいくつか用意しているものもあり、これを使えば画像の作成やデザインなどを行なうことなくサイトを構築することができる。

特定のカテゴリで使われている画像をサムネイル化してサイドバーなどに表示するプラグインです。

まずはEntryImages_1_04.zipよりプラグインをダウンロードしpluginフォルダにアップロードする。


標準設置例
<div class="module-images module">
<h2 class="module-header">最近の画像</h2>
<div class="module-content">
<MTEntryImages img_lastn="5">
<p><a href="<MTEntryImageEntry><$MTEntryPermalink$></MTEntryImageEntry>"><img src="<$MTEntryImageSrc$>" width="140" height="105" alt="<$MTEntryImageAlt$>" /></a></p>
</MTEntryImages>
</div>
</div>


マウンテンブック設置例
<div class="module-archives module">
<h2 class="module-header">制作実績</h2>
<div class="module-content">
<MTEntryImages img_lastn="5"include_cats="制作実績">
<p><a href="<MTEntryImageEntry><$MTEntryPermalink$></MTEntryImageEntry>"><img src="<$MTEntryImageSrc$>" width="140" height="140" alt="<$MTEntryImageAlt$>" /></a></p>
</MTEntryImages>
</div><!--module-content-->
</div><!--module-archives module-->

【タグ解説】
img_lastn="5" … 最新5件を表示
include_cats="カテゴリ名" … 表示させるカテゴリを指定する

今までは使っていませんでしたが、これからはタグクラウドも使っていこうと思います。
「mt タグ」と検索するとタグリファレンスが表示されて参りましたが、タグクラウドを検索して何とか探していたものがヒットしました。
設置は物すごく簡単です。


htmlには以下を貼り付け
<ul id="tag-cloud">
<MTTags>
<li class="tag">
<a class="tag level<$MTTagRank$>" href="<$MTTagSearchLink$>" title="<$MTTagName$>(<$MTTagCount$>)" rel="tag"><$MTTagName$></a>
</li>
</MTTags>
</ul>


CSSには以下を貼り付け
/* Tag cloud */
ul li.tag {
margin-right: 5px;
display: inline;
list-style: none;
}

li.tag a.level1 {
font-size: 175%;
}

li.tag a.level2 {
font-size: 160%;
}

li.tag a.level3 {
font-size: 145%;
}

li.tag a.level4 {
font-size: 135%;
}

li.tag a.level5 {
font-size: 120%;
}

li.tag a.level6 {
font-size: 110%;
}


引用ページはpur*logさん

このアーカイブについて

このページには、2008年1月以降に書かれたブログ記事のうちMovable Typeカテゴリに属しているものが含まれています。

前のアーカイブはMovable Type: 2007年12月です。

次のアーカイブはMovable Type: 2008年3月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。