しっくす・アパートの部屋

推奨環境 Internet Explorer 7 以上

Sorry, Japanese only!
ようこそ。しっくす・アパートの部屋においでました!
しっくす・アパートはアパートの会社ではありません(笑)ブログの会社です。
この部屋はエイプリルフールのためにつくりました。もう少しだけこのままにしておきます♪

Recently in テーマについて Category

New

# このテーマのインストールと使い方について

まずはスーパーホームページ1.0 のテーマをダウンロードしてね!

え?そもそもMovable Type 5 をインストールしてないって?

そんな人はここからダウンロードしてね。MT5のインストールはここを参考にしてね。

ダウンロードしたら、super_home_page.zip を解凍するんだよ。

そしたら、Movable Typeのインストールフォルダ(mt.cgiのある場所)以下の themes フォルダに、FTPソフトなどを利用して、テーマファイルをフォルダごとアップロードしてね。

MTインストールフォルダ/themes/テーマ名のフォルダ

super_homepage01.jpg

これでテーマのインストールは完了だよ!テーマ一覧メニューに、新しく追加されたテーマが表示されてるはずだよ。

sento002.jpg
あ、ここで注意だけど、君が大切に運営している既存のブログやウェブサイトにはテーマを適用しない方がいいと思うよ。

たぶん、後で元に戻せるはずだけど、何が起こるかわからないからね!しっくす・アパートは責任を負いませんからね。そこんとこよろしくお願いします!

じゃあ、新しく「ウェブサイトを作成」でスーパーなホームページをつくってみよう。

MT5からはブログを作る前に、まずは「ウェブサイト」をつくるようになってるんだ。

super_homepage02.jpg


ウェブサイトのテーマは何でもいいよ。とりあえずデフォルトの「クラシックウェブサイト」にしておこう。

ウェブサイト名、ウェブサイトURL、ウェブサイトパスを設定してね。これで「ウェブサイト」という"入れ物"ができたと思ってね。

ウェブサイトができたら次は「ブログ」を作成しよう!左の縦メニューから 「ブログ > 新規」を選んでね。
 
super_homepage03.jpg

ブログテーマで「スーパーホームページ」が選べるようになってるはずだよ。

選べてなかったらインストールに失敗してるから、自分の行いをよく振り返ってみてね。

ブログURLやブログパスは空っぽにした方がいいかもね!

ここで一回再構築!

再構築ができたらブログを見てみよう。

super_homepage04.jpg

わああ!すごいの出てきたね!だっさいなんだか懐かしいホームページが出てきたね!
マウスカーソルの動きに合わせてなんかくっついてくるよ!文字が動いてるよ!ワードアートでつくったようなボタンがついてるね。

すごいね、MT5のテーマ機能って!こんなだっさいなんだか懐かしいホームページもテーマにできちゃうんだよ。MTって何でもできるんねー。すごいよねー。

Movable Type 5 のテーマについてのドキュメントもぜひ見てみてね。

一通りホームページのデザインを眺めつくしから、今度はコンテンツを作っていくよ。

まずはホームページの説明の文章を入れてみよう。

左の縦メニューから「 設定 > 全般 」を選んでね。

super_homepage05.jpg

「説明」のところに一言メッセージや、ホームページの説明を書いてね。

ここに書かれた文章は、タイトルのロゴの下の動くテキストで表示されるよ。動く文字なんてかっこいいよね。

でもこれ、<marquee>という前世紀の技術ではなくて、jQueryという最新の技術を使って動かしているんだよ。すごいよね。

じゃあ次に記事を書いてみよう!

super_homepage06.jpg

縦メニューの「 ブログ記事 > 新規 」を選択、好きな記事を書いて公開してみよう。

super_homepage07.jpg
じゃん!

わー!それっぽくなってきたよ!こんななつかしいデザインだったら記事を書くのも楽しくなっちゃうね。

さて、他のページも完成させていこう。メニューの「アバウト」はまだ工事中だね。

super_homepage08.jpg

工事中だなんてかっこ悪いよ!では、「アバウトのページ」も作っていこう!

縦のメニューの「 ウェブページ > 一覧 」をみてみると、

「掲示板」「アバウト」のページがあるね。ここからページを編集できるんだよ。

super_homepage09.jpg

ページを編集して再構築で、「アバウト」のページが完成できました。
super_homepage10.jpg

同じような要領で掲示板も編集できるのは、もうわかるね?

コメントの許可 」のチェックのオン/オフでコメントをオンにすると、掲示板として使えるようになるよ~!
super_homepage11.jpg

最後に、テーマのおさらいだよ。
concept.png

sento003.jpg
MT5ではすべてのブログは必ず「ウェブサイト」に属することになるよ。今回の「スーパーホームページ1.0」はブログに対するテーマなんだよ。

ここまでできたらちょっとデザインを変えたりしたくなっちゃうよね!
次はちょっとしたホームページのカスタマイズ方法を教えてあげるね!

No TrackBacks

TrackBack URL: http://campaign.sixapart.jp/cgi-bin/mt/mt-tb.cgi/16

# テーマをカスタマイズしてオリジナルホームページをつくろう!

さて、テーマを適用して、自分のオリジナルのホームページができました。
次はちょっとカスタマイズして、オリジナリティ溢れるホームページの作り方を教えてあげます。

ポイントは4つ。

秘密のポエムの変更方法、ナビゲーションメニューの追加の仕方、マウスカーソルについてくる画像の変更方法、背景画像の変更方法方法だよ!


■秘密のポエムを変更する

気づいてたかな?トップページのソースの中には秘密のポエムが隠されているんだ。
super-homepage-customize01.jpg

このポエム、せっかくだから自分のオリジナルのポエムにしたいよね。見えないオシャレとはこのことだと思うんだよ。

左のメニューから、

デザイン > テンプレート > メインページ

を開いてね。

メインページはトップページのテンプレートだよ。
super-homepage-customize02.jpg

<mt:Include module="ソースポエム">
ここでソースポエムというモジュールを読み込んでいるのがわかるね。
右側の、「インクルードテンプレート」の一覧から「ソースポエム」のモジュールを開くことができるよ。

super-homepage-customize03.jpg

ここからポエムを編集できるよ。編集したら再構築で、秘密のポエムの変更完了だよ!


■新しくメニューを追加する


今のメニューは「HOME」「アバウト」「掲示板」ってなっているね。

ここに、新しく「お問い合わせ」というメニューを追加してみよう!

ウェブページで作成するよ。

ウェブページ > 新規

を開いて、お問い合わせページの中身をつくってね。

super-homepage-customize04.jpg

タグの部分に、@inquiry (タグ名は任意です)を入れるのがポイントだよ。

「お問い合わせ」用のメニューの画像も用意して、images/ の配下にアップロードしてね。

super-homepage-customize05.jpg

テンプレートモジュールを編集してナビゲーションを追加していくよ。

デザイン > テンプレート > テンプレートモジュールの"ナビゲーション"

を開いてね。

super-homepage-customize06.jpg



<mt:Pages tag="@inquiry">
<li><a href="<$mt:PagePermalink$>"><img alt="お問い合わせ" src="<$mt:BlogURL$>images/otoiawase.gif" /></a></li>
</mt:Pages>

こんな感じのソースを入れるよ。
MTPages は、ウェブページの一覧を表示させるブロックタグだよ。
tag="@inquiry" で、そのタグをつけたウェブページだけ表示させる、ということができるようになるよ。

MTBlogURL はブログの URL (サイト URL) を http:// から始まる絶対 URL で表示するタグだよ。
MTPagePermalink は現在のページのアーカイブへの絶対 URL を表示するタグだよ。

さて、モジュールを編集したら再構築してみよう。

super-homepage-customize07.jpg

お問い合わせのメニューが追加できました!

■マウスカーソルについてくる画像をカスタマイズする

このテーマではマウスカーソルにいろんなアイコンがついてくるんだ。正直ウザイんだけど、4月1日だけなら我慢できるよね。 このアイコンもオリジナルのものにしたいよね!

まずはアイコン画像を、
images/ 配下にアップロードしてね。

super-homepage-customize08.jpg

アイコン画像の変更は、

デザイン > テンプレート > テンプレートモジュールの"HTMLヘッダー"

から編集するよ。

super-homepage-customize09.jpg

15行目のあたりに画像のパスが書いてあるね。ここから編集するよ。
画像は無限に増やせるよ!

再構築してマウスカーソルについてくる画像、変更できましたね!

■背景画像を変更する

背景画像を変えれば一気にオリジナル感が出るよ!ぜひやってみよう~!

デザイン > テンプレート > インデックステンプレートの"スタイルシート"

ここにスタイルシートのコードを追加しよう。

ここに書いたスタイルシートのコードは、優先されて反映されるよ。

super-homepage-customize10.jpg


body {
background: transparent url(<$mt:BlogURL$>images/xxx.gif) ;
}


再構築して、デザインを確認してみよう。

super-homepage-customize11.jpg

だいぶいい感じだね!


次はせっかくカスタマイズしたテンプレートを、みんなにも使ってもらえるように、「テーマとしてエクスポートする方法」を教えてあげるよ!

sento003.jpg

No TrackBacks

TrackBack URL: http://campaign.sixapart.jp/cgi-bin/mt/mt-tb.cgi/6

# つくったホームページをテーマとしてエクスポートしよう!

せっかくカスタマイズしてつくったMT5のオリジナルのテンプレート、みんなにも使ってもらいたい!そんなアナタは「テーマのエクスポート」をやってみよう!

テーマは、

  • テンプレート、カスタムフィールド、カテゴリー、フォルダ、ファイルを、まとめて"テーマ"として保存できる!
  • 保存したテーマを、別のブログに適用できる!
  • 他のMovable Typeにインストールしたり、インターネットで配布できる!

というもの。ぜひチャレンジしてみてね。

左のメニューの、
ツール > テーマのエクスポート

を選択してね。

super-homepage-customize12.jpg

上のキャプチャみたいに、名前やファイル名など入力してね。

オプションは全部チェックしておいてね。

オプション > ファイルの詳細 」から、ディレクトリの指定に、「images」が入っているか、確認してね、

これをこのままエクスポート!
zipファイルが生成されましたね。

エクスポートしたテーマのファイルを、前の記事で説明したテーマのインストール方法に沿ってインストール!

どん。

super-homepage-customize13.jpg

自分で作ったテーマが見事適用されました!

sento003.jpg

No TrackBacks

TrackBack URL: http://campaign.sixapart.jp/cgi-bin/mt/mt-tb.cgi/8