MT導入基礎知識

Movable Typeとは?

ドメイン取得とサーバー確保

Movable Typeをインストールしよう

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

どんどんモジュール化しよう

pingを有効に活用しよう

テンプレートの基本的な構成

デザインのカスタマイズ

カスタマイズの前に

タイトルバナーの雰囲気をかえる

タイトルバナーを画像にする

H1~H6タグの見え方

サイトの背景を変更する

文字の色や大きさをかえる

サイドバーの見た目をかえる

表示内容のカスタマイズ

カテゴリーの並び順序を変更する

エントリーの並び順序を変更する

最近のエントリー一覧を表示する

サイドバーを右から左に変更する

サイドバーに表示する要素を変更する

カテゴリー一覧にエントリーも表示する

カテゴリーページにも最新エントリー一覧を表示する

入れておきたいプラグイン

cutfirstchar⇒変数タグの最初の数文字を削除する

CatEntries⇒特定カテゴリーを表示させないようにする

Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る

MailForm⇒メール問い合わせフォームを表示する

Mapper⇒地図画像を表示する

TinyMCE⇒ワープロ感覚でエントリー記事が作れる

参考になるサイト・情報

WWWの基本を勉強する参考サイト

Movable Typeに関するサイト

ブログアクセスアップにつながるランキングサイト

相互リンク

エラーが起きたときはチェックしてみよう

よもやま話

サイト立ち上げのきっかけ

ブログランキングに登録

メールフォームが機能しない・・・

グーグルマップを表示してみる







« テンプレートの基本的な構成 | メイン | Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る »

サイドバーを右から左に変更する




Movable Typeの標準テンプレートでは、サイドバー(ナビ)は右側についています。
通常のブログであれば特に不自然ではないのですが、いわゆるホームページとして活用する場合は、リンクナビなどのサイドバーは左側に配置されていることの方が多いですよね?

ということで、右側についているサイドバーを、左側に移してみましょう。

この作業は、各ページテンプレートそれぞれに行う必要がありますが、とりあえずメインページを参考に説明します。
インデックステンプレートの中の『メインページ(index.html)』を開いてください。

<body>~</body>タグの中をじっくり見てみると、次のような大きなくくりがあることがわかるでしょうか。

<div id="pagebody"> <div id="pagebody-inner" class="pkg"> <div id="alpha"> <div id="alpha-inner" class="pkg"> : : </div> </div> <div id="beta"> <div id="beta-inner" class="pkg"> : : </div> </div> </div> </div>

最初の2行(+最後の2行)が、メインページのボディとなるコンテンツをくくっているタグです。
その次の行に『alpha』という表現が入っていますが、この <div id="alpha">~該当する</div> がメインの記事部分、その次の <div id="beta">~該当する</div> がサイドバーの部分です。

※テンプレートの全体構成については、こちらを参考にしてください。
 ⇒ テンプレートの基本的な構成

現在右にあるサイドバーを左に移すには、単純に、サイドバーの部分を先に記載すればよいだけです。
つまり、 <div id="alpha">~該当する</div> と <div id="beta">~該当する</div> の位置を逆にします。以下のようになります。

<div id="pagebody"> <div id="pagebody-inner" class="pkg"> <div id="beta"> <div id="beta-inner" class="pkg"> : : </div> </div> <div id="alpha"> <div id="alpha-inner" class="pkg"> : : </div> </div> </div> </div>

これで、サイドバー部分が先(左側)に、記事部分が後(右側)に表示されるようになりました。
メインページ以外のページテンプレートも同様の構成になっていますので、同じように順序を入れ替えておきましょう。



最新記事一覧