サイドメニューに新しい共通部分を追加

エントリもいくつか書いて、サイトの外観もStyleCatcherを用いることによって納得のいくものになりました。 そして、にやにや「ただてと」(略してみました)を眺めてたんですが、何か足りないな、と。

そうだ、プロフィール欄がない!

画像と、HNとあとメールアドレスぐらいは表示したいなと思い
しかしどうやって追加すればいいんだろうと途方にくれていました
(筆者は過去にHTMLとCSSをちょろっと手習いした経験しかないので)

とにかくHTMLのソースを見なくては、と メイン・メニュー>環境設定>テンプレート を選択してメインページテンプレートの中身を見てみました。

なにこれ・・・

とにかく、<div>がたくさんあります。
未知の領域です
重厚です。
ごめんなさい、失礼しましたと帰りたかったんですが
ぐっと踏ん張ることにしました

HTMLタグやstyle定義だけではなく、見慣れない
<$MT~$>というものもあります。
これがMTタグというものでしょう。
HTMLタグと違ってわりと直接的な表現のタグが多いように見えます。

眺めてるうちに構造が見えてきました。
<div>構造でalphaとbetaのクラスがあります
これがきっとページ全体を2カラムに(左右に)内容を配置してるんだな。
<div id="beta">の中身がサイドメニューだ!

こう気づくと後は早かった。
サイドメニューの最上部の
「検索フォーム」のボックスは

<div class="module-search module">
  <h2 class="module-header">検索</h2>
  <div class="module-content">
    <form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
      <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
      <label for="search" accesskey="4">ブログを検索: </label><br />
      <input id="search" name="search" size="20" />
      <input type="submit" value="検索" />
    </form>
  </div>
</div>

その下の「最近のエントリー」のボックスは

<div class="module-archives module">
  <h2 class="module-header">最近のエントリー</h2>
  <div class="module-content">
    <ul class="module-list">
    <MTEntries lastn="10">
      <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
    </MTEntries>
    </ul>
    <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
    [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]
  </div>
</div>

と記述されている。

この間にプロフィールを埋め込もう!
こんな風にしました。

<div class="module-profile module">
  <h2 class="module-header">profile</h2>
  <div class="module-content">
    <p><img alt="prof.jpg" src="http://tadateto.net/img/prof.jpg" width="176" height="190" /><br />melondog<br />melondog@hotmail.com</p>
  </div>
</div>

module-profileというクラス名はスタイルシートファイルで定義づけてなかったんですが
なんとかトップページにプロフィール欄が表示されました

あとは

  • メインページ index.html
  • アーカイブページ archives.html
  • エントリー・アーカイブ
  • カテゴリー・アーカイブ
  • 日付アーカイブ

以上の5枚のテンプレートにこのコードを埋め込んでやることで何とか「ただてと」内すべてのページに「profile」欄が表示される運びとなりました(保存後は再構築を忘れずに!)
「何とか」といったのは、カテゴリー・アーカイブページにだけはなかなか反映されなかったからです。他のページも反映されるのに時間差がありました。

素直にMovable Typeの参考書を買ってきます。もりもり読むぞ!

Trackback URL

Leave Your Words





画像の中に見える文字を入力してください。

▲このページの最上部に戻る

購読 (FEEDBURNER)

購読って何?→説明はこちら(製作中)

Twitter Updates

Powered By