ホームページを作ろう!WordPress編(10)メニューを作る(2)

0

    JUGEMテーマ:ホームページ作成
    JUGEMテーマ:wordpress

    w026

    そうそう、こんなメニューを作りたいのでした。現状のメニューはこんな感じ。

    w042

    これをこれからcssで整形していきます。

    globalと名付けたメニューは「menu-global-container」というクラスでくくられますので、このクラスをターゲットにいじっていきます。まず結果から。以下のコードをcssに追加します。

    #Header .menu-global-container ul {
        list-style: none;
    }
    #Header .menu-global-container ul li {
        width: 189px;
        border-right: 1px solid #a0836e;
        display: block;
        float: left;
    }
    #Header .menu-global-container ul li a {
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 8px 0;
        font-size: 14px;
        color: #fff;
    }
    #Header .menu-global-container ul li a:link,
    #Header .menu-global-container ul li a:visited {
        background: #77543a;
        background: -webkit-gradient(linear, center top, center bottom, from(#77543a),to(#362111));
        background: -moz-linear-gradient(top, #77543a,#362111);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff77543a', endColorstr='#ff362111');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0)";
        background: linear-gradient(to bottom, #77543a,#362111);
    }
    #Header .menu-global-container ul li a:hover,
    #Header .menu-global-container ul li a:active {
        background: #362111;
    }

    まず2行目、リンクのリストの左に出ていた「●」を消します。

    4〜9行目:メニュー項目を横並びの四角いメニューボタンに整形します。中身の幅は全体950pxを5つに分けた190pxから仕切り線の1pxを除いた189px、右側だけに仕切り線を1pxの少し明るい茶色で追加、display: block;で四角いブロック要素に設定して、float: left;でそのブロックを左から右へ積み上げます。

    10〜17行目:メニューバーのリンクの設定です。まずは一般設定として、下線なし、ブロック要素、中央ぞろえ、上下のパディング設定、フォントサイズの設定、フォントの色の設定を順に行っています。

    18〜26行目:ここで、マウスがメニューに乗っていないときの色を指定します。グラデーションを指示するのですが、この指定方法が使うブラウザによって異なります。まずChromeやSafari、Lunascape等のwebkitを用いたブラウザ用のコマンドが21行目。次いでFirefox等Mozilla系のブラウザ用が22行目、23〜25行目が各バージョンのIEで、どれでもないものはグラデーションをあきらめて20行目の明るい茶色になるようになっています。

    27〜30行目:マウスをメニューに載せた時とクリックしたときの色を指定します。濃いこげ茶色です。

    ではこれで画面を再読み込みしてみましょう。こんな風にグローバルメニューが出来上がりました。

    w043

    続いて、サイドバーにカテゴリーメニューを置きます。まず、head.phpの最後の行の前に下記の1行を追加してください。

    		<div id="Contents" class="parallel">
    			<div id="Side"><?php get_sidebar(); ?></div>  
    			<div id="Main">

    これで、ヘッダーを読み込むとそこからさらにsidebar.phpが読み込まれます。まずはこのまま画面表示を見てみましょう。

    w044

    sidebar.phpを作らずに表示しようとすると、WordPressが自動的にそれなりのメニューを作ってくれるのです、大したもんです。

    まあこれはこれ位にして、sidebar.phpを作ってみましょう。まずは結果から。

    <?php
    
    echo'<h3>ご紹介</h3>
    <div class="menu-about-container">
    	<ul>
    		<li><a href="http://papercraft.techikun.com/?page_id=25#category_a">このサイトについて<a></li>
    		<li><a href="http://papercraft.techikun.com/?page_id=25#category_b">管理人について</a></li>
    	</ul>
    </div>';
    
    echo'<h3>ブログ</h3>';
    wp_nav_menu('menu=blog-type');
    
    echo'<h3>ギャラリー</h3>';
    wp_nav_menu('menu=gallery-type');
    
    echo'<h3>ダウンロード</h3>';
    wp_nav_menu('menu=download-type');
    
    echo'
    <h3>リンク/インデックス</h3>
    <div class="menu-link-container">
    	<ul>
    		<li><a href="http://papercraft.techikun.com/?page_id=34">リンク集</a></li>
    		<li><a href="http://papercraft.techikun.com/ypindex.php">ゆるキャラペパクラインデックス</a></li>
    	</ul>
    </div>';
    
    ?>

    今回、後のことを考えて、全部を<?php〜?>で囲んで書いています。

    3〜9行目がご挨拶ページ。これはカテゴリーもないので直接ページのアドレスを指定して書いてしまってあります。HTMLの全体を’’で囲い、echo文で書き出しています。classは、次のカテゴリーページで自動的に振られるclass名に準じて付けています。

    11〜18行目が、先ほど作ったカテゴリー・タクソノミーメニューを呼び出しているところです。書式はコードにある通りで、カッコ内にmenu=******と先ほど作ったメニュー名称を指定指定しています。

    20行〜がリンクページ。WordPress外で作ったページもここへ並べて書いてしまってあります。

    ではまた一旦これを表示させてみましょう。

    w045

    こんな風に表示されたでしょうか?ではこれをまた整形していきます。

    またまた結論から、cssに以下を追加します。

    #Contents #Main {
        float: right;
        width: 685px;
        margin-right: 15px;
    }
    #Contents #Side {
        float: left;
        width: 200px;
    }
    #Contents #Side h3 {
        font-size: 16px;
        margin-left: 15px;
        color: #77543a
    }
    #Contents #Side div.menu-blog-type-container,
    #Contents #Side div.menu-gallery-type-container,
    #Contents #Side div.menu-download-type-container,
    #Contents #Side div.menu-about-container,
    #Contents #Side div.menu-link-container {
        margin-left: 15px;
    }
    #Contents #Side ul {
        list-style: none;
        border-top: 1px solid #ccc;
        margin: 5px 0 20px;
    }
    #Contents #Side ul li {
        display: block;
        border-bottom: 1px solid #ccc;
    }
    #Contents #Side ul li a {
        color: #333;
        text-decoration: none;
        display: block;
        padding: 5px 0;
        font-size: 12px;
    }
    #Contents #Side ul li a:hover,
    #Contents #Side ul li a:active {
        background: #eee;
    }

    そして古いContentsの指定は削除します。

    #Contents {
        min-height: 400px;
        margin: 0 auto;
        text-align: left;
    }

    では追加分の解説です。

    1〜9行目:メインのコンテンツとサイドバーはそれぞれMainとSideというidが付きます。まずはこれを左右に配置します。全体の幅950pxに対し、サイドバーが200px、50px空けて、メインが685pxにマージンが15pxという風に配分しました。サイドバーはfloat: leftで左寄せ、メインはfloat: rightで右寄せにしています。

    10〜14行目:見出しです。文字サイズと左マージンを設定し、文字色はこげ茶色にしています。

    15〜21行目:全てのメニュー項目に左マージンを設定します。

    22〜30行目:各メニューリストの見た目を設定しています。

    31〜37行目:メニューのリンクの見た目を設定しています。

    38〜41行目:メニューにマウスを載せた時に、背景色が少し変わるように設定しています。

    以上でいいでしょうか?ちょっと表示を見てみましょう。

    w046

    あれー?左のメニューが上のグローバルメニューにめり込み、フッターがまたずっと上に上がってきて左のメニューが下にはみ出してしまいました。一体何がいけなかったのでしょうか?これはfloatで並べたグローバルメニューやサイドバー、メインコンテンツ等のfloat属性が適切に解除されていなかったため、その高さを認識できずにめり込んでしまったのでした。これにはCLEARFIXと呼ばれるテクニックを使います。

    まず、floatを与えた要素全てになにかクラスを与えます。今回は「parallel」というクラスを与えました。そうしたらそのクラスをターゲットに以下のcssを記述します。

    .parallel:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .parallel { display: inline-block; }
    * html .parallel { height: 1%; }
    .parallel { display: block; }

    1〜7行目までが一般的なブラウザ用、その下が古いIEなど用です。簡単に言うと、float要素の後ろにみえないブロック要素を追加し、ここでfloatを解除しています。こうすることで、floatを使った要素に後ろの要素がめり込むのを防止するのです。どうなったか見てみましょう。

    w047

    今度はきれいに表示されました。

    それでは次回はフロントページのindex.phpを作り始めることにしましょう。


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天