レスポンシブ対応のナビメニューを導入!!・・・・・しているところ・・

う~~ん、ナビメニューが今いちまだうまくできない・・・・・・

 

Animenuってやつで、ドロップダウンに対応した、ナビメニューを新しいデザインに導入しようとしているのですが、まだ、うまく行かない・・・・・

 

一個一個問題を解決しては、また立ち止まる・・・・ま~スキルの問題なので、そんなにすぐにできるわけではないかもしれないけど、まだまだ知らないことがたくさんあって、いろいろ「へ~~~」って思って感心するところもあって、結構楽しんでいるところもあります。

 

ただ、自分で、MTのウェブページの更新情報を表示するを一から作ろうって思ったのが、ちっともうまくいかず、だんだん嫌になってきていたのですが、昨日やっと・・・・(これがやっとってことで自分のスキルが、まだまだまったくダメなのを再確認もしましたが・・・・)

 

MTの場合、

<MTPages lastn="5" sort_by="modified_on">

これで、MTのウェブページの更新情報を表示してくれます。これを、スクロールバーを付けたBOX表示するっていうのを自分で作ってみよっておもったののが以外を時間がかかりました。

 

結論からいうと、dlでやって、overflow:autoをうまく使えばできるっていうことでした。なんか素人くさい言い方ですが、なんかそうっか~って思うのですが、考えた人すごいな~と妙に感心しました。このことに気が付いたというか、もろにやり方が書いてあったのが、ここ

http://rensabanet.com/blog/hp/12113/

記事を書いてくださったかたありがとうございました<(_ _)>

 

それで、できあがったものがこれ!

<MTPages lastn="5" sort_by="modified_on">
 <mt:EntriesHeader>
  <section id="update">
    <h3>更新情報</h3>
      <dl>
        </mt:EntriesHeader>
          <dt><time datetime="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x"$ language="ja"></time></dt>
          <dd><a href="<$MTPagePermalink$>" title="<$MTEntryTitle$>"><$MTPageTitle$></a>を更新しました</dd>
         <mt:EntriesFooter>
      </dl>
        <nav>
          <a href="<mt:BlogRelativeURL>sitemap.html">Webページ一覧へ</a>
        </nav>
   </section>
 </mt:EntriesFooter>
</MTPages>

これを、テンプレートモジュールに、「ウェブページ更新」って名前で登録して、メインページに、<$mt:Include module="ウェブページ更新"$>を入れてやれば、更新情報が、表示されました。

 

CSSは、上記のサイトを基にして、自分のCSSに合わせて作りました。

こんな感じです。

#update {
 margin:0;
  padding:0;
  border:4px groove #fff;
}

#update h3{
 margin: 0;
}
#update dl.box{
  margin:0 10px 10px 10px;
  padding:5px 10px 2px 5px;
  height: 120px;
  font-size:90%;
  overflow: auto;
  border-top:1px groove #fff;
  border-bottom:1px groove #fff;
}

#update dl.box dt{
  float:left;
  width:120px;
  padding-left:5px;
  }
#update dl.box dd{
  margin:0 0 10px 0;
  padding: 0 0 10px 20px;
  border-bottom:1px dotted #aaa;
}

 

Track Back

Track Back URL

コメントする

※ コメントは認証されるまで公開されません。ご了承くださいませ。

公開されません

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)

このページの上部へ

ネットワーク、パソコン サーバ設定

ネットワーク構築ホリテック

 

紆余曲折しながら、独立して中小企業様向けのネットワーク構築
保守、パソコン サーバ、設定運用管理を行っています。ホームページの作成も行っています

ホームページ

 

facebook

 

icon icon

 

マウスコンピューター/G-Tune マウスコンピューター/G-Tune Microsoft Store (マイクロソフトストア) Microsoft Store (マイクロソフトストア)

サイト内検索

にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ ネットワーク・SEへ
にほんブログ村

最近のピクチャ

  • font_before.png
  • MOM_error.png

最近のコメント