Blog ブログ・ブログ構築
テンプレートで<MTIf name="main_index">として設定するだけで、その部分は「メインページのみで表示されるもの」となる。
例:
<MTIf name="main_index">
メインページのみで表示させたいもの
</MTIf>
もし、「 メインページのみで表示させたいもの」、「メインページ以外で表示させたいもの」が同時にある場合は
例:
<MTIf name="main_index">
メインページのみで表示させたいもの
<MTElse>
メインページ以外で表示させたいもの
</MTIf>
これで、メインページでは「 メインページのみで表示させたいもの」、それ以外のページでは「メインページ以外で表示させたいもの」、が表示されるようになる。
では、メインページのみ表示させたくない場合はどうするか。
例:
<MTIf name="main_index">
空白
<MTElse>
メインページ以外で表示させたいもの
</MTIf>
上に習い、上記のようにしておけば、メインページは「空白」、となり、それ以外のページでは「メインページ以外で表示させたいもの」、が表示されるようになるが、もっと簡単にできるように関数が用意されている。
例:
<MTUnless name="main_index">
メインページ以外で表示させたいもの
</MTUnless>
これだけでいい。「If」に対しての「Unless」ということ。
サイトマップの作成は、GoogleやYahoo!やMSNにクロールされやすくなり、SEO対策としてはとても有効な手段。
Movable Type 4を使っているなら、簡単にテンプレートの追加で作成できるから、是非作成してSEOに役立ててもらいたい。
サイトマップ用テンプレートの作り方(Movable Type 4)
管理ページにログイン
「デザイン」→「ブログのテンプレート」→「インデックステンプレートを作成」
設定(一例)
テンプレートの名称→Google Sitemaps
テンプレートの種類→カスタムインデックステンプレート(そのまま)
出力ファイル名→sitemaps.xml
インデックステンプレートを再構築するとき、このテンプレートも再構築する→チェック
テンプレート
※いろいろなサイトで公開されているから「MT4 google sitemap/0.9」等で検索するといい。
pc2mを通したサイトを、通常の携帯サイトと比較した場合、どうしても「ツールを使っている感じ」がする場所。
- 設(設定)
さまざまなユーザーのアクセスが予測される場合は、ユーザーにより「パケット定額」ではない場合もあるが、ユーザーやサイトの方針で、「半角にしない」「画像は表示」と規定するのであれば、「設定」のメニューは削除してしまうといい。
設定ファイル:Template.inc.php
ただし、そのままではデフォルトの「カタカナ半角」「画像はリンク」のままなので、別の設定を望む場合は、以下のファイルを修正する。
設定ファイル: index.php
if ($local_args['v'] === null and isset($_SESSION['settings']['v'])) {
$local_args['v'] = $_SESSION['settings']['v'];
}
if ($local_args['l'] === null and isset($_SESSION['settings']['l'])) {
$local_args['l'] = $_SESSION['settings']['l'];
}
if ($local_args['k'] === null and isset($_SESSION['settings']['k'])) {
$local_args['k'] = $_SESSION['settings']['k'];
}
の部分を
if ($local_args['v'] === null and isset($_SESSION['settings']['v'])) {
$local_args['v'] = 1;
}
if ($local_args['l'] === null and isset($_SESSION['settings']['l'])) {
$local_args['l'] = 1;
}
if ($local_args['k'] === null and isset($_SESSION['settings']['k'])) {
$local_args['k'] = 1;
}
とすれば、デフォルトで「カタカナ全角」「画像表示」になる。
アクセス制限設定(踏み台対策)(その4)参照 を施していても100%安全とは言えないため、 URLに自分のサイト以外のURLが書かれた場合は無効になるようにしておくと安心。
設定ファイル:index.php
function sendRequest($_url, $_client_param = array(), $_post_data = array(), $_is_framesrc = false){
の部分、各種 global の次あたりに
if (!ereg("^http://digital-gate.com/", $_url)){$_url = "";}
を追加。
※http://digital-gate.com/は、自分のサイトのURL
これで、http://digital-gate.com/を含まないURLが記入された場合、$_urlの値は空になる。
この修正を施したものでURLのテキストボックスに他のURLを入れてみると、
「〜から応答がないわけで、サーバが見つからないとかDNSエラーとかそんなんだと思われ」
とエラーが表示されるようになる。
このエラーメッセージが気になる人は、
修正ファイル:ErrorMessages.inc.php
'ERROR_SERVER_NORESPONSE' => '<a href="r.php?{%1}">{%1}</a>から応答がないわけで、サーバが見つからないとかDNSエラーとかそんなんだと思われ',
の部分を修正するといい。
pc2mを通したサイトを、通常の携帯サイトと比較した場合、どうしても「ツールを使っている感じ」がする場所。
- URL記入ボックス
通常のサイトであれば、そこから他のサイトに行くのは本来の目的とは違うはず(検索サイトや変換サービスとして構築の場合を除く)なので、URL記入ボックスは削除してしまうといい。
修正ファイル:Template.inc.php
同様に、配布サイトにおいて「アクセス制限設定(踏み台対策)」として書かれているように、このスクリプトを悪意をもって利用されることは防がなくてはいけない。
モバイルキャリアのネットワーク以外からのアクセスを禁止は設定として用意されているから簡単にできる。
修正ファイル:Config.inc.php
// define('ALLOW_ONLYMOBILE', true);
↓
define('ALLOW_ONLYMOBILE', true);
当然のことながらPCからの確認も出来なくなるから、ちゃんと動くことを確かめてから設定すること。
(カスタマイズ編)
元になるスクリプトはこれ
PC2M Website Transcoder for Mobile Clients
「PCサイト->携帯変換スクリプト」
http://www.rcdtokyo.com/pc2m/note/
インストール他は(その1)参照
pc2mを導入して、MovableTypeで作成しているDigital Gateも携帯で見られるようになったが、デフォルトの設定のままではいくつかの不具合がある。
- 不要なパーツの表示(その2)参照
- 見出しタグのサイズ
今の携帯は見出しタグ(<H1>や<H2>)にある程度表示するため、見出しタグを使ったページを表示した場合、逆に見づらくなってしまうことがある。
デジタルゲートの場合も、記事タイトルのフォントサイズが妙に大きく格好悪い。
そこで、見出しタグは置き換えてしまうことにする。
修正ファイル:FormatRule.inc.php
このファイルの、
'h1' => array(
'type' => 'block',
'children' => array('#PCDATA', 'a', 'br', 'span', 'img', 'map', 'i', 'b', 'u', 'big', 'small', 'font', 'em', 'strong', 'dfn', 'code', 'q', 'samp', 'kbd', 'var', 'cite', 'abbr', 'acronym', 'sub', 'sup', 'input', 'select', 'textarea', 'label', 'button'),
'attributes' => array('align')
),
'h2' => array(
'type' => 'block',
'children' => array('#PCDATA', 'a', 'br', 'span', 'img', 'map', 'i', 'b', 'u', 'big', 'small', 'font', 'em', 'strong', 'dfn', 'code', 'q', 'samp', 'kbd', 'var', 'cite', 'abbr', 'acronym', 'sub', 'sup', 'input', 'select', 'textarea', 'label', 'button'),
'attributes' => array('align')
),
'h3' => array(
'type' => 'block',
'children' => array('#PCDATA', 'a', 'br', 'span', 'img', 'map', 'i', 'b', 'u', 'big', 'small', 'font', 'em', 'strong', 'dfn', 'code', 'q', 'samp', 'kbd', 'var', 'cite', 'abbr', 'acronym', 'sub', 'sup', 'input', 'select', 'textarea', 'label', 'button'),
'attributes' => array('align')
),
'h4' => array(
'type' => 'block',
'children' => array('#PCDATA', 'a', 'br', 'span', 'img', 'map', 'i', 'b', 'u', 'big', 'small', 'font', 'em', 'strong', 'dfn', 'code', 'q', 'samp', 'kbd', 'var', 'cite', 'abbr', 'acronym', 'sub', 'sup', 'input', 'select', 'textarea', 'label', 'button'),
'attributes' => array('align')
),
'h5' => array(
'type' => 'block',
'children' => array('#PCDATA', 'a', 'br', 'span', 'img', 'map', 'i', 'b', 'u', 'big', 'small', 'font', 'em', 'strong', 'dfn', 'code', 'q', 'samp', 'kbd', 'var', 'cite', 'abbr', 'acronym', 'sub', 'sup', 'input', 'select', 'textarea', 'label', 'button'),
'attributes' => array('align')
),
'h6' => array(
'type' => 'block',
'children' => array('#PCDATA', 'a', 'br', 'span', 'img', 'map', 'i', 'b', 'u', 'big', 'small', 'font', 'em', 'strong', 'dfn', 'code', 'q', 'samp', 'kbd', 'var', 'cite', 'abbr', 'acronym', 'sub', 'sup', 'input', 'select', 'textarea', 'label', 'button'),
'attributes' => array('align')
),
の部分をコメントアウトし、
'h1' => array(
'replace' => 'div'
),
'h2' => array(
'replace' => 'div'
),
'h3' => array(
'replace' => 'div'
),
'h4' => array(
'replace' => 'div'
),
'h5' => array(
'replace' => 'div'
),
'h6' => array(
'replace' => 'div'
),
を記入。
これで見出しタグはdivとなりフォントサイズは本文と同じになる。
(カスタマイズ編)
元になるスクリプトはこれ
PC2M Website Transcoder for Mobile Clients
「PCサイト->携帯変換スクリプト」
http://www.rcdtokyo.com/pc2m/note/
インストール他は(その1)参照
pc2mを導入して、MovableTypeで作成しているDigital Gateも携帯で見られるようになったが、デフォルトの設定のままではいくつかの不具合がある。
- 不要なパーツの表示
- 見出しタグのサイズ
pc2mには、ページの任意の箇所を非表示にする方法が用意されているから、それを利用することにする。
なお、以下はDigital Gateでの場合。
修正するのは「テンプレートモジュール」内にある「サイドバー (3カラム)」
Digital Gateではメインコンテンツのメニューは上部にまとめてあるので、右の2カラムを丸ごと非表示にしても支障が無い。
そこで「サイドバー (3カラム)」のファイルを開き、最上部に、<!--pc2m_void-->を挿入し、最下部に<!--/pc2m_void-->を追加する。
保存、再構築を経て、携帯から確認すると、ちゃんと本文記事のみになっている。
なお、MovableTypeではボトムに
Copyright © 2001-2007 Six Apart. All Rights Reserved.
等が入っているが、携帯では機種により© が文字化けし、また、表記も長いので、「テンプレートモジュール」内にある「フッター」のファイルを開き、上記部分を<!--pc2m_void-->と<!--/pc2m_void-->で囲む。
ただし、このままでは何も表示されないので、
Template.inc.phpのファイルを開き、</body>の前に
(c) Digital Gate
と追加し保存。
これでボトムの表記もすっきりした。
見出しタグの変更は次回。
PC2M Website Transcoder for Mobile Clients
「PCサイト->携帯変換スクリプト」
http://www.rcdtokyo.com/pc2m/note/
ライセンスを確認すると、
- Free Software FoundationによるGNU General Public Licenseのバージョン2あるいはそれ以降のバージョン(以下「GPL」と言う)に基づきライセンスされます。
動作環境は「PHP 4.3.9/5.0.1以降」だから、多くの環境で使える。
サイトのマニュアルが詳しく書いてあるからインストールは簡単。
携帯でアクセスすると、上に「設下」や下に「上写直履TOP」と表示されているから、文字化けしているのかと錯覚するが設定メニューを省略して表示しているだけなので、これでOK。
利便性から、pc2m.phpはindex.phpに変更。(以降、修正ファイル名はindex.phpと表記)
MT4i
http://www.hazama.nu/pukiwiki/index.php?MT4i
ケータイキット for Movable Type
http://www.ideamans.com/keitaikit/
MT-Mobile
http://lab.fancs.com/download.html
その他、一度のエントリーで携帯用ページを書き出すという方法もあるが、単純に読めるようにするだけなら、もっと簡単にできるかもしれない。
まずはcssでのコントロールあたりから試してみよう。
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld">
のようにして携帯はmobile.cssを適用させる。
新たにmobile.cssを設定して、Operaの「スモールスクリーン表示」で見てみると、ちゃんとmobile.cssが反映されている。
display: none;Javascript か PHPで振り分けるのがよさそう。
の項目もちゃんと非表示。
しかし、携帯からチェックしてと media="handheld" に対応している携帯では無いためPCのまま表示。
※このエントリーは順次更新していきます。
ご利用のサーバー環境にあったシステムのご提案から、ホスティングのご案内までご紹介いたします。
オープンソースのシステムを使えば、高価なライセンス費用や、プログラム開発費用をかけずに構築することが可能です。
このサイトもMovable Type version 4.01をベースとして構築しています。
Movable TypeによるBlog作成例:03style Blog
Geeklogの場合、<title>部分の表記順が
例:サイト名 - 各ページタイトル
となっているが、SEOに配慮した場合、各ページのタイトル(カテゴリ名など)が先に来る方がいい。
例:各ページタイトル - サイト名
修正ファイル:lib-common.php
if( !empty( $pagetitle ))
{
$pagetitle = ' - ' . $pagetitle;
}
$header->set_var( 'page_title', $_CONF['site_name'] . $pagetitle );
の部分を
if( !empty( $pagetitle ))
{
$pagetitle = $pagetitle . ' - ';
}
$header->set_var( 'page_title', $pagetitle . $_CONF['site_name'] );
にすればいい。
<a href="http://digital-gate.com/">HOME</a>
> <a href="{story_topic_url}">{story_topic_name}</a>
> {start_storylink_anchortag}{story_title}{end_storylink_anchortag}
修正ファイル:featuredstorytext.thtml(注目記事のテンプレート)
修正ファイル:storytext.thtml(記事のテンプレート)
特にMacのSafariでは気になることが多い。
ブラウザのキャッシュをコントロールするmetaタグは以下のもの。
これを<head>〜</head>の間に挿入しておくといい。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
修正するファイル:header.thtml
修正ファイル名:config.php
$_CONF['hideemailicon'] = 1; // 記事を友人に送るアイコン(1:隠す 0:隠さない)
$_CONF['hideprintericon'] = 1; // 記事を印刷するアイコン(1:隠す 0:隠さない)
それぞれを修正
『本ページのすべての商標と著作権はそれぞれの所有者に帰属します。』
という文章が適合しない場合は、以下の方法で修正が可能。
文章を修正したい場合
修正ファイル: private/langeage/japanese_utf-8.php
文章を削除したい場合
修正ファイル:lib-common.php
$footer->set_var( 'copyright_notice', ' ' . $LANG01[93] . ' © '
. $copyrightyear . ' ' . $_CONF['site_name'] . '<br> '
. $LANG01[94] );
↓
$footer->set_var( 'copyright_notice', ' ' . $LANG01[93] . ' © '
. $copyrightyear . ' ' . $_CONF['site_name'] );