今どきのホームページの作り方

特定のカテゴリの記事だけトップページに表示

2011-08-16T10:01:03Z

私の仕事の一つが写真撮影なのですが、仕事以外でも写真を撮ることで自己啓発を促しています。ただ撮った写真をほかの人にも見てもらえたらと思い、写真のサイトを持っています。このサイト同様MovableTypeで構築しています。

ただし趣向を少し変えて、いわゆる文章のブログはサイドメニューから見に行くようにして、「写真」というカテゴリの記事だけをサイトのトップページに表示するようにしました。こうすることでトップページは写真だけの記事が表示されています。

方法はいたって簡単でテンプレートの「メインページ」の記事を表示する部分を下記のようにしただけです。

要はmt:Entriesタグにcategoryというパラメータを追加しただけです。意外と便利な機能です。

トップページの表示を変更しました

2011-08-08T16:03:52Z

サイトのトップページはPageButeのおかげで各ページに飛ぶようにしましたが、固定されたトップページの写真と文章がついて回ります。2ページ目以降に表示しない、という技もあるかもしれませんが、今回は自分が以前から使っている方法にしました。

トップページ下部を見てわかるとおり、ブログの日にちとタイトルがリストで表示されているだけです。クリックすれば記事のページへ行きます。

方法の詳細は割愛しますが、テンプレートで「ブログ記事の概要2」というのを別途作り、メインページのソースにある「ブログ記事の概要」を「ブログ記事の概要2」に変更しました。「ブログ記事の概要2」の中身は記事のエントリーの日付とタイトルだけをリストで表示させています。何件表示させるかは、PageButeの設定で取りあえず20件としてあります。20件を超えると2ページ目以降が作られるという具合です。

スタイルシートでulを使うと黒丸が付くようにしていたのですが、ブログのリスト部分は黒丸無しになるようにclassをつけて指定しています。当初の「ブログ記事の概要」はメインページ以外でも使われているため、敢えて別なブログ記事の概要のテンプレートを追加しました。

こうすることで、トップページは一見ブログには見えないスタイルになります。長い記事のブログをエントリーしてもトップページが巨大化することはありません。あくまでも記事のタイトルだけが変更されるだけです。一般的なサイトのWhat's Newのようなイメージでしょうか...。

それから多くの人に見てもらえたらと、アーカイブテンプレートの「ブログ記事」の下方にzenbackという色々なサイトとつながりが持てるツールを追加しました。自動的に関連するページなどを表示してくれます。

という改良を今日は施しました。下の写真は昨日の雷の写真です。雨が降る直前までカメラを構えてました。5秒間シャッターを開けっぱなしで撮影したので少しぶれてますが...。

PageButeプラグインを入れました

2011-08-08T02:42:33Z

MovableTypeでは定番のプラグイン「PageBute」を入れて、メインページのブログを指定した記事数ごとに次のページ、前のページに移動できるようにしました。

PageBute3.4.4というバージョンで、手順は簡単です。

PageBute3.4.4をスカイアーク社の「静的ページ用ページ分割プラグイン:PageBute」というページからダウンロードします。
ダウンロードしたzipファイルにあるPageBute.plというファイルをFFFTPなどで、サイトのmtフォルダ内のpluginsというフォルダにアップロードします。
システムメニューのプラグイン設定画面にPageBute3.4.4が表示されていればOKです。

ブログのダッシュボードに戻って、デザインのメインページのテンプレートを開き、小粋空間さんのサイトを例にタグを追加します。
設定画面のブログ記事表示数は0日分にしておくとよいでしょう。実際の表示件数は前記のメインページタグ内で設定できます。

以上で設定完了です。ブログ全体を再構築するとページ下にリンクが追加されていると思います。便利な機能です。

iPhoneでも読めるようになりました

2011-08-06T15:27:37Z

昨日に引き続きこのサイトの修正をしました。主な変更点はフォントサイズの小型化、pタグのマージンとline-heightの変更、メインコンテンツの中のulとolタグの点と番号の表示化などです。なぜリストの点や番号が非表示なのか疑問です。

それからスマートフォンでスマートフォン用に表示をするスタイルシートを追加しました。スクリプト文でスマートフォンから見たときはスマートフォン用のスタイルシートが適用される仕組みです。これはMovableTypeの公式サイトで見つけました。ほぼ一発OKです。iPhone4では下の写真のように見えます。

写真などのimgも大きくても通常のブログ記事内であれば幅を調節してくれます。メインページなどで、直接追加した画像もasset-bodyというclassで囲んでおけば同じように幅を調節してくれます。

管理画面には非対応ですが、記事投稿であればメールから投稿するプラグインのようなものが確か有ったと思います。iPhoneで専用画面で読める、というのが自分にとっては新鮮です。下の写真は今朝のあさやけです。5時前くらいでしょうか。

MovableTypeの体裁を色々変更

2011-08-05T12:55:15Z

今日はこのサイトの見た目とHTMLソースの一部変更をしました。見た目はスタイルシート、ソースはテンプレートの中身を一部書き換えることで行いました。

スタイルシートの変更は都度スタイルシートをアップロードしていると時間がかかるので、ホームページ作成ソフトDreamWeaverにトップページのHTMLファイル（index.html）とスタイルシートをダウンロードしてPC上で修正していきました。

それでもdivが何段にも重なり、idやclassといったものが山ほどあるのでかなりの時間を要しました。

MovableType4.2のカスタマイズを行う上でidやclassがどこを囲っているのかなどが懇切丁寧に書いてある「基本からしっかりわかるMovableType4.2カスタマイズブック」という本があります。カスタマイズするときに辞書代わりに置いておくと大変助かります。

HTMLソースの変更はweb上で行いました。多くの変更はしていないので、こちらは1時間程度で終わりました。まあ、お呪いのような変更ですので詳細は割愛します。ただ、HTML5に対応...しているかわかりませんが、HTMLファイルの最初のほうの宣言文は全頁それ用に変更しています。HTML5対応といっても、文字コード（UTF-8）と言語（jaつまり日本語）だけ書いておけばよいので従来よりわかりやすくなっています。

あとはタイトルバックをオリジナルに変更して、タイトルの文字列がh1タグだったものを最上段に移動して、タイトルのロゴを作ってHOMEボタンの代わりにさせました。

まだバランスが悪い部分も多々あるため、もう少し改良する予定です。改良した各テンプレートは新たにMTOSのサイトを作るときに、ほぼそのまま使えるため、ここで時間を割いておくことが意外と大切です。また全頁で同じ体裁になるようにするためにも、しっかりと修正します。

今日は日差しも強く、夏らしい雲が出ていました。

MovableType4.292(Open Source)をインストール

2011-08-04T14:40:54Z

MTOS4.292をインストールしました。個人で持つ1つのブログなのでMT4で良いかなと...データベースもSQLiteです。あ、でもこのサイトはMovableTypeのカスタマイズとかではなく、あくまでもごく普通のオリジナルのホームページの作り方とか、トレンドなどの話題を書くサイトにするつもりです。

で、ここはまだスタイルシートもテンプレートも一切変更していない状態ですが、時間を見つけて少しずつ変えていく予定です。

WordPressにシェアを奪われているとはいえ、長い間MTを使っていると、やはりMTをインストールしてしまう、保守的な自分にも気づきました。

私も持っていますがiPhoneなどのスマートフォンでサイトを見る人も今後増えていくことを考えると、一工夫必要な気もしますが、あえて従来通りのホームページを作って、コンテンツで勝負...大げさ...のつもりです。

MTだけでなく一般的な無料ブログにお願いしたいことは、こうしてブログ記事を書いて、写真などを挿入する際、写真は別途アップロード、というスタイルやめて、ドラッグアンドドロップで写真が挿入できればありがたいなと思っています。またidやclassだらけでスタイルシートの変更もいつも混乱するのですが、このあたりもデフォルトではもっとシンプルにしてもらえたら、カスタマイズできる人も増えるのではなかろうかと思っています。

もっともドメイン取得から、サーバーレンタル、MTのインストール...という初心者からすると大きな壁がいくつもあり、なかなか思うように行かない環境は一向に変化していない感じもしていますが。

デジタルディバイドなどと言われていますがITに疎いがために損をする、そんな社会環境の改善にもホームページやブログの開設が容易にできるようになることが必要なのかなと考えています。

と、色々思うところもありますが、昨日PCのシステムディスクのHDDをSSDに変更してPCやソフトの立ち上がりがエラく早くなって気を良くしています。SSD化も時間の問題かもしれないですね。下の写真は息抜きで撮ったJR八高線の線路です。雑草まみれです。

で、今日はMT4.292をインストールしたわけですが、自分の備忘録として手順を書いておきます。

サーバーのルートディレクトリ（●●.com/、の位置）にmtという名前のフォルダをFFFTPで作る
MTOS4.292のファイルの中身全てをmtフォルダにアップロード...2000以上のファイルがあり、15分くらいかかる
アップロードした.cgiの拡張子がつくファイルの属性をすべて700に設定
同mtフォルダにデータベース用のdbという名のフォルダを作る
ブラウザ（今回はGoogle Chrome）にhttp://www.●●.com/mt/mt.cgiと入力して、MovableTypeのベース作りをスタートさせる
データベースの選択はSQLite、ブログの名前はMy First Blogにデフォルト設定されているのを取りあえず自分用の名前に書きかえる（後で変更可能）
ブログの置かれる位置がデフォルトではmtフォルダ内になっているのを、ルートディレクトリに変更する（URLはhttp://www.●●.com/mt/のmt/を消す、同様にサーバーのほうも同じように最後のmt/を消す
後は流れに沿って進んで、自動で入る最初のエントリー記事を削除、テンプレートのバナーフッターのリンクを削除して、自分用に変更
ウィジットでいらないのを移動して非表示にする
テンプレートのメインページにサイトトップの説明文を書き入れておく

以上が取りあえずやったことです。この記事を書く時間を除けば、概ね1時間かかりました。興味のある人はぜひMovableTypeのOS（Open Source）を使って、サイトを作ってみてください。