フッターを追加してコピーライトを[MT3.2]

2006年3月20日

そうそう、忘れてた。コピーライト表示つけな。

またもやちょこっと検索を。

[参考サイト]

おじさんの備忘録>>MovableType3.2 フッタを追加する

 

ワシの場合は特に、コピーライトにリンクをつけたくないので・・・メインページのいっちゃん下の方に、下記を(青字部分)挿入。

</div>
<div id="footer">
Copyright &copy; 2006 Rappan, All rights reserved.
</div>
</div>
</div>
</body>
</html>

 

そして、スタイルシートへ、(ワシの場合はlayout-two-column-left)以下を追加。

.layout-two-column-left #footer
{
    padding:10px; /* 周りから文字までの上下左右の空白 */
    border-top: 1px solid #000000; /* 枠線 */
    color: #ffffff; /* 文字の色 */
    background: #7fa2ea; /* 背景色 */
    font-size: 11px; /* 文字の大きさ */
    text-align: center; /* 文字の配置 */
}

 

おぉ!成功成功。

なんか、プラグイン使ったり、自動で更新したりする方法もあるみたいやね・・・。まぁ、ページが増えてきたら考えるとしよかな。

[blog]ロ゜)ハッ これ、各ページにつけやなあかんのやんな・・・。もっとはようにしとくんやったな・・・。

サイドバーを左へ 3:モジュール化[MT3.2]

2006年3月17日

今まで、メインページを元に、サイドバーを左側へもっていったんやけど・・・。まぁ、アーカイブページは別にして、エントリーアーカイブ,カテゴリーアーカイブ,日付アーカイブの3つのアーカイブが表示さるページにも、サイドバーは表示させたいわけですよ。

しかも、サイドバーの作りはとりあえずは一緒でええと思ってるもんやから、できれば1つ変えれば(メインページをいじれば)、他のアーカイブページにも反映させたいと思い、どうしたもんかな~と思ってたんやけど・・・。以下のサイトを参考しました。

[参考サイト]

MovableType幼稚園>>MovableTypeのテンプレート・ モジュールは便利

 

小躍りするほどうまくこちらも出来ればええんですけど。

何をしていくかというと、alphaの内容部分(サイドバー)をモジュール化しまして、共通で表示させようということです。(不具合感じたらまた直せばええことやし。)

 

1)まず、テンプレートのページのモジュールをクリック。モジュールを新規作成を選択。

060317-1.gif

 2)テンプレート名に好きな名前 (ここではsidebarと付けたとします。)、 モジュールの内容はメインページのalpha部分、つまり 「検索表示」~「フィード説明・MTバージョン表示部(↓の青字部分)」をごっそりコピーして貼り付けます。 そして保存。

<div id="alpha">
   <div id="alpha-inner" class="pkg">
    <div class="module-search module">
   ・
   ・
   ・
        Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
      </div>
    </div>
   </div>
</div>
<div id="beta">

3)後は、それぞれの該当箇所に、 タグ(赤字部分)を貼り付けて保存。

メインページ↓

<div id="alpha">
  <div id="alpha-inner" class="pkg">
  <$MTInclude module="sidebar"$>
  </div>
</div>
<div id="beta">

エントリーアーカイブ,カテゴリーアーカイブ,日付アーカイブ↓

<div id="alpha">
  <div id="alpha-inner" class="pkg">
  <$MTInclude module="sidebar"$>
  </div>
</div>
<div id="beta">
  <div id="beta-inner" class="pkg">
    <p class="content-nav">

4)エントリーアーカイブ,カテゴリーアーカイブ,日付アーカイブの3つは、 </head>のすぐ下にある部分も書き替え。

<body class="layout-one-column"> を

<body class="layout-two-column-left"> に。

5)そして、再構築・・・。

うぉ~!っと大踊りしてしまいました。それにしても、 MovableType幼稚園さんは、テンプレートも配布してはるんですねぇ、すごいなぁ。

スタイルシートいじって、デザインも変えたいんやけど、なっかなか中身みても何をどう変えたらええんかチンプンカンプンやのに・・・。

メニュー群の並び替えもやりました。「検索」が一番上にあるんがちょといややったので。

サイドバーを左へ 2:いよいよ左側へ[MT3.2]

メインページの構成がわかったところで、どうすればサイドバーが左にいってくれんのやろか?と思って検索・・・。ってことで、 以下のサイトを参考に。

[参考サイト]

自宅サーバーを楽しもう!>>テンプレート

 

要は、今現在

id="alpha"
 「エントリー表示部」
id="beta"
 「検索表示部」
 「カテゴリー表示部」
 「アーカイブ表示部」
 「フィード説明・MTバージョン表示部」

となっているのを、

id="alpha"
 「検索表示部」
 「カテゴリー表示部」
 「アーカイブ表示部」
 「フィード説明・MTバージョン表示部」
id="beta" 
 「エントリー表示部」

てな感じで、入れ替えれば、ええっちゅうわけですわ。

 

まずは、</head>のすぐ下を下記のように書き換え。(赤字)

<body class="layout-two-column-right"> を

<body class="layout-two-column-left"> に。

 

次に上記のように、
「検索表示部」~「フィード説明・MTバージョン表示部」と「エントリー表示部」をごっそり入れ替え。

<div id="alpha">
   <div id="alpha-inner" class="pkg">
      <MTEntries>
      <$MTEntryTrackbackData$>
   ・
   ・
   ・
      </MTEntries>
   </div>
</div>
<div id="beta">
  <div id="beta-inner" class="pkg">
    <div class="module-search module">
   ・
   ・
   ・
        Powered by<br /><a href="Movable">http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
      </div>
    </div>
  </div>
</div>

を、

<div id="alpha">
   <div id="alpha-inner" class="pkg">
    <div class="module-search module">
   ・
   ・
   ・
        Powered by<br /><a href="Movable">http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
      </div>
    </div>
   </div>
</div>
<div id="beta">
  <div id="beta-inner" class="pkg">
      <MTEntries>
      <$MTEntryTrackbackData$>
   ・
   ・
   ・
      </MTEntries>
  </div>
</div>

に。

 

おぉ!無事左側へ移動成功!よかったよかった。

サイドバーを左へ 1:メインページの中身の把握[MT3.2]

2006年3月16日

どうも右にメニューがあるのが落ち着かない。サイドバーを左にもっていきたいのである。とにかく、メインページからまずやってみて、成功したら他のページも・・・と考え進めていこかな。

 

ついでに、メニュー群の並び替えも同時にしてしまおうと思ったりして。

  1. メインページの中身(構造)の把握。
  2. サイドバーをモジュール化する。
  3. 各ページにも反映。

この順序でやっていこうと思う。

 

メインページの中身て、ややこしいんちゃうかな~と思いつつ、順番に見ていくことに。間違った理解をしてないことを祈りつつ、まとめてみました。

 

メインページ構成

「タイトル表示部」↓ 

<div id="banner">
  <div id="banner-inner" class="pkg">
    <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
    <h2 id="banner-description"><$MTBlogDescription$></h2>
  </div>
</div>

 

「エントリー表示部」↓

<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader>
                     <a id="a<$MTEntryID pad="1"$>"></a>
   ・
   ・
   ・
   </div>
</div>
</MTEntries>

 

「検索表示部」↓

<div class="module-search module">
   <h2 class="module-header"><MT_TRANS phrase="Search"></h2>
   ・
   ・
   ・
      </form>
   </div>
</div>

 

「カテゴリー表示部」↓

<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">

		   <h2 class="module-header"><MT_TRANS phrase="Categories"></h2>

		   ・

		   ・

		   ・

		</div>

		</MTIfArchiveTypeEnabled>

 

「アーカイブ表示部」↓

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
   ・
   ・
   ・
</div>
</MTIfArchiveTypeEnabled>

 

「フィード説明・MTバージョン表示部」↓

<div class="module-archives module">
   <h2 class="module-header"><MT_TRANS phrase="Recent Posts"></h2>
   ・
   ・
   ・
   <div class="module-content">
      Powered by<br /><a href="Movable">http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
   </div>
</div>

とまぁ、こんな感じですな。

 

<body>部分をおおまかに書いてしまうと下のようになっているようです。

id="alpha"
 「エントリー表示部」
id="beta"
 「検索表示部」
 「カテゴリー表示部」
 「アーカイブ表示部」
 「フィード説明・MTバージョン表示部」