現在の人気記事はコチラ!

FC2ブログのヘッダー下にドロップダウンメニューを設置。文章にかぶらない工夫も

ホーム>ブログ>便利ワザ・アイテム・HTML・SEO対策>FC2ブログのヘッダー下にドロップダウンメニューを設置。文章にかぶらない工夫も

スポンサーリンク



FC2ブログのヘッダー下にドロップダウンメニューを設置。文章にかぶらない工夫も


FC2ブログヘッダー下に設置したグローバルメニューについて


今回は、FC2ブログヘッダー下に表示する「グローバルメニュー」について書いていきます。


昨年の大晦日。このFC2ブログレスポンシブ対応のテンプレートにリニューアルしました。その際にいろいろと細かいカスタマイズを行ないましたが、一番やりたかったのがヘッダー下にメニューを表示させることでした。


FC2ブログのヘッダー下にドロップダウンメニューを設置。文章にかぶらない工夫も


なぜ今までやらなかったのか?理由はいろいろありますが、PCとスマホで異なったテンプレートだったことや、ヘッダー部分に配置した画像が場所を取りすぎてしまい、メニューが見づらいというのが主な原因です。


カスタマイズするにあたっては、ネットでさまざまな設置例を調べました。色んなブログで使いやすいメニューや簡単に実装できるメニューが紹介されていますが、私がこうしたい!と定めたのは以下の通り。


  • ①レスポンシブ対応
  • ②スマホ表示の場合でもハンバーガーメニューを使わない
  • ③メニューの親カテゴリをクリックすると子カテゴリが展開されるドロップダウンメニュー
  • ④ドロップダウンされた場合、メニューが下の文章にかぶらないようにしたい


①は当然ですが、②についてはけっこう悩みました。「ハンバーガーメニュー」とは、よく右上にある横3本線のメニューボタンのこと。PCやタブレットで表示されるグローバルメニューがスマホ画面ではハンバーガーボタンの中に格納される仕組みです。画面が小さいスマホ表示では、ブログがスッキリして見えるのでとても便利ではあるのですが…。


実はこのボタン。今回使わなかったのは、設置したところでほとんど使用されてないという実態があるそうなんです。ネットに慣れてない人はそもそもこのボタンの意味が分からないし、気付かない人も多いらしい…。


③は、メニューをクリックすればビューッと子カテゴリが下に伸びて表示されるやつ。こんな感じ。


FC2ブログのヘッダー下にドロップダウンメニューを設置。文章にかぶらない工夫も


しかし、自分が調べた中ではあまりこれをやってる人がいなかった。なぜなら、展開される子カテゴリが長いと
下の文章に全部かぶってしまう
から。


サイトによっては、下にあらかじめ余白を設けてるのもありましたが、それだと何だか不自然。で、何とか下の文章にかぶらずにドロップダウンさせる方法がないものか?と頭を悩ませたのです。


今回のカスタマイズでは、この悩みを解消させるのがとても大変で、ほとんどの時間をこれに費やしたのです(汗)


最終的に導き出した結論は、「ドロップダウンの時に、かぶる文章も一緒に移動させる」ことにしました。


何回も試行錯誤を繰り返し、やっとの思いで設置できたのですが、ど素人がやった事なのでどこかに不備や余計な記述があるかも知れません。今のところ不具合がないみたいなのでそのままにしてますが…。


FC2ブログを始められた方のご参考にと思い、私が行なった実装手順を紹介していきますが、真似される場合は必ずご自身で微調整して下さい。



スポンサーリンク



HTMLのソース


FC2ブログテンプレート管理画面を開き、HTML編集で下のコードをヘッダーの下に記述します。


<nav>
    <ul>
        <li>
            <dl>
                <dt class="more">親カテゴリ<i class="blogicon-chevron-down"></i></dt>
                <dd>
                    <ul>
                        <li><a href="ここにURLを指定">子カテゴリ①</a></li>
                        <li><a href="ここにURLを指定">子カテゴリ②</a></li>
                    </ul>
                </dd>
            </dl> 
        </li>
        <li><a href="ここにURLを指定">メニュー①</a></li>
        <li><a href="ここにURLを指定">メニュー②</a></li>
        <li><a href="ここにURLを指定">メニュー③</a></li>
        <li><a href="ここにURLを指定">メニュー④</a></li>
        <li><a href="ここにURLを指定">メニュー⑤</a></li>
    </ul>
</nav>


これは、一般的によく使われるコードですね。「メニュー〇」「〇カテゴリ」と書かれた部分が、実際にページで表示されるテキストになり、「ここにURLを指定」の部分はクリックしたときのリンク先になります。親子カテゴリの順番などとともに、ご自身のお好みで作り替えてみて下さい。


Javascript


続いて、Javascriptのコードをフッタの下に記述します。


<script>
$(function () {
   $(".more").on("click", function() {
       $(this).next().slideToggle();
       $(this).toggleClass('active');
       });
});
</script>


この記述は、子カテゴリの表示・非表示に関するコードです。


なお、上のコードはjQueryを既に読み込ませていることが前提です。まだ読み込ませてないよ、という人は、最初に次の1行を追加して下さい。


<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>


CSS


実は、これが一番自信がない(汗)CSSは苦手なんです。


スタイルシートの編集画面でこんな感じの記述をしました。


nav {
    background-color: #ffffff;/ グローバルナビの背景色 /
    width: 100%;
}
nav,nav a {
    color: #000000;/ 文字の色 /
   }
nav ul li {
    list-style: none;
}
nav > ul {
    display: -webkit-flex;
    display: flex;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;/ ページの幅に合わせて調整 /
}
nav > ul > li {
    text-align: center;width: 100%;
}
nav > ul > li dl dd ul li a,
nav > ul > li > a,
nav > ul > li dl dt {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 46px;
    padding: 0 3px;
    font-size: 16px;
    background-color: #33ccff;/ メニュー・親カテゴリ(リンク)の背景色 /
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
}
nav > ul > li > a br {
    display: none;
}
nav > ul > li dl dd ul li a br {
    display: none;
}
nav > ul > li dl {
    margin: 0;
}
nav > ul > li dl dd {
    display: none;
    margin: 0;
}
nav > ul > li dl dd ul {
    padding: 0;
}
nav > ul > li dl dd ul li a {
    background-color: #0d0d0d;/ 子カテゴリの背景色 /
}
nav > ul > li dl dd ul li a {
    color: #99ffff!important;
}
nav > ul > li > a:hover,nav > ul > li dl dt:hover {
    color: #fff;
    background-color: #666666;/ メニュー・親カテゴリにマウスを乗せたときに背景色を変更 /
}
nav > ul > li dl dd ul li a:hover {
    color: #fff;
    background-color: #474747;/ 子カテゴリにマウスを乗せたときに背景色を変更 /
}
nav > ul > li > a {
    color: #000000!important;/ 子カテゴリがないときの文字の色 /
   }
nav > ul > li > a:hover {
    color: #ffffff!important;/ 子カテゴリがないときのマウスを乗せたときの文字の色 /
   }
/ タブレット・PC(幅1200px以下) /
@media screen and (max-width: 1200px) {
    nav > ul > li dl dd {
        width:110%;
    }
    nav > ul > li dl dd ul li a br {
        display:block;
    }
}
/ タブレット(幅760px以下) /
@media screen and (max-width: 760px) {
    nav > ul > li > a br {
        display: block;
    }
    nav ul li small {
        font-size: 95%;
    }
    nav > ul > li dl dd {
        width: 200%;
    }
}
/ スマホ(幅480px以下) /
@media screen and (max-width: 480px) {
    nav {
        display: block;
        padding: 15px;
        line-height: 30px;
    }
    nav > ul{
        display: none;
    }
    nav > ul li {
        width: 100%;
    }
    nav > ul > li dl dt,nav > ul > li > a {
        background-color: #212121;/ メニュー・親カテゴリの背景色 /
    }
    nav > ul > li dl dd ul li a br {
        display: none;
    }
    nav > ul > li > a br {
        display: none;
    }
    nav > ul > li dl dd {
        width: 100%;
    }
    nav > ul > li dl dd ul li a {
        background-color: #171717;/ 子カテゴリの背景色 /
    }
}


何ぶん、ど素人なため、もしかしたら無駄な記述があるかも知れません(汗)一応、苦労しながらこんな感じに書きましたよ、という意味であえて載せました。真似される方はこれを参考にしていろいろと手を加えてみて下さい。


まとめ


以上の手順でメニューを設置。試してみるとこんな感じになりました。


FC2ブログのヘッダー下にドロップダウンメニューを設置。文章にかぶらない工夫も


カテゴリの「記述一覧」をクリックすると


FC2ブログのヘッダー下にドロップダウンメニューを設置。文章にかぶらない工夫も


子カテゴリが開くと同時に、下の文章も移動してくれます。


得意な方は、ご自身でいろいろと工夫なさってみて下さい。


あなたのサイトのURL、そろそろスリムにしませんか?



なお、コードのコピー方法こちらの記事の最後をご参照ください。



スポンサーリンク


記事をお読み頂きありがとうございます!

最後に、『この記事読んだよ!』の©マナーとして、下記のリンク(ランキングサイト)のクリックをお願いしています。


▼がん患者さんのご家族のかた
にほんブログ村 ブログ村 胃がん

▼がん患者さん
人気ブログランキング 人気ブログランキング

▼それ以外のかた
FC2ブログランキング FC2 ブログランキング


クリックがポイントとして換算され、このブログの順位が上がっていく仕組みです。

モチベーション向上のため、ぜひご協力をお願い申し上げます。






スポンサーリンク

がんになったら...がんの治療を始める前に知っておきたい/読んでおきたい本


 抗がん剤投与の副作用や後遺症によって
 失われる可能性のある機能や症状について
 必要な情報が書かれてある本をまとめました。
 
       
使える!おすすめレシピ本


 実際に私が使ってみて良かったレシピ本を
 まとめてみました
                     
おすすめ無料アプリ<がん関連>
おすすめ無料アプリ<糖質関連>
おすすめゲームアプリ<将棋・麻雀>


 私が趣味で使ってる将棋・麻雀の
 おすすめアプリです!

 プロ将棋界の公式戦をリアルタイムな解説と
 関連レポート付きでみることが出来ます。  
 全国の人とオンライン対局が出来る
 将棋倶楽部24のアプリバージョン。  
 実はこの私。麻雀も強いんです!
 現在は「雀仙四段」  
麻雀 昇龍神DX
120円
(2017.09.06時点)
posted with ポチレバ
人気記事一覧(2016.9.1~2017.8.31)


 アクセス数が多かった記事をまとめてみました

 第1位
【癌】になる人、ならない人 | 国立がん研究センター の調査結果で明らかに!がん予防 について最低限知っておくべき3つのこと

 第2位
癌 の 再発 ・ 転移 の時期 | 胃癌 と 骨転移 の見過されがちな関係と危険性について語ります

 第3位
【Jアラートは無意味⁉︎】北朝鮮が弾道ミサイル発射!3段式に進化したようですが | 気にせず七草粥

 第4位
この方法で【インスタントラーメン を10倍美味しく食べるコツ】を学べます

 第5位
胃がん、症状、あるある | 出先 で調子が悪いとき!

 第6位
ステージ4【末期がん】患者の8割が「糖質制限」で改善!? 衝撃の研究結果 | その信憑性は!?

 第7位
胃がん で全摘した【胃の大切さ】を改めて思う | 食後 の 眠気・目まい・ダンピング を治すのも楽じゃない!

 第8位
本当は恐い 胃がん 術後 の タバコ 【喫煙・喫煙率】は? | 今日から 禁煙 します

 第9位
胃がん【術後 の 旅行】について | 宿の決め方や旅先での注意点について最低限知っておくべき5つのポイント

 第10位
胃がん 術後 の【るいそう】は悪化の一途 | 体重減少 はどこまで 許容範囲 なのか...

 第11位
胃がん ブロガー さんの - 予約 投稿 - という形の『遺書』について

 第12位
清算型遺贈と登記

 第13位
【癌患者 の 予後不良】とまわりの対応の変化 | 誰が殺した!?癌 と 孤独死

 第14位
【必読】訂正後の - 障害年金 用 診断書 - を入手 | 緊急レポート

 第15位
時期が来たので『痛い【硬膜外麻酔】の恐怖と 帯状疱疹 | 脊髄注射を思い出させた 夜間低血糖/足の痛み』を語ります

 第16位
胃がん 運命の 検査結果 悲惨な末路…

 第17位
【胃がん】の発覚から 術後1年 までの経緯 - こうして私は克服しました | プロローグ

 第18位
胃がん ちょっとヤバいかも!?加速する絶不調が僕を苦しめる

 第19位
胃がん 体重 減少 - 食べても食べても 痩せる ばかり - ストレス...悪くないですね...フフ...

 第20位
気づいてますか?【胃がん】手術後の『トイレ 事情』と『ダンピング症候群・低血糖』との関連性






本ブログへのリンクは
ご自由にお願いします



Messageを見る


はじめまして!!Мです。

仕事は、法律関係の傍らで
派遣業務や、
不動産のアウトソーシング事業を
かけもちしています。

ブログをリニューアルオープン
しました。
よろしくお願いします!!

仕事一筋で走り続けてきた
人生でしたが、
2011年終わりに38歳の若さで、
ほぼ末期の
胃がん宣告を受けました。

がんが発見された時は、
不治の病の領域にまで
達しており、
何度か

『死』

を覚悟しましたが、
幸いにも手術は成功し、
奇跡的に
踏みとどまる事が出来ました!!

しかし、病状が重かったため、
後遺症や再発の不安等、
悩みは尽きません。

したがって、
いつ人生の終焉が訪れるか
分かりませんが、
善意ある方々の
ご厚意に囲まれ、
幸せな日々を送っています!!

とりあえずは
出来る事から少しずつ。

仕事も、
しばらくの間は部下に任せて
頑張り過ぎないように
働いてます。

【ブログを始めたきっかけ】

国民の2人に1人の割合で
発症しているとされる

がん


現在では、
インターネットの普及や
たくさんの書籍により、
患者自身で
有用な情報収集が可能な時代に
なりました。

しかし、自分が「がん宣告」
を受けた時、
情報はたくさんあっても
何をどうすれば良いか
全く分からず、
大変な苦労や、
あれやこれをしておけば
良かったのに・・・と
とても後悔しました。

なぜなら、がん宣告を受けても、
自覚症状がなかったせいか、
生まれてこのかた
殆ど病気らしい病気を
一つも経験したことのなかった
自分としては、
なかなか自身のこととして
受け入れることが出来ず、
「本当なの?」
と疑心暗鬼に
陥ってしまっていたため、
その時に動こうとしても、

冷静な情報収集が

行えなかった


からです。

今、痛感していることは、

『その時が来てから

では遅い!!』
です!!


そこで、
自分の実体験や実体験を通して
知れ得た有益な情報を
ブログを通じて
発信することにより、
少しでも同じ様な境遇にある方々の
一助となれば、
と思い至りました。

また、今は健康でも
将来の備えとして
有益と思った情報も
載せていきますので、
健康な方も
突然の病に慌てることのないよう
ご参考として頂ければ
と思います。

ただし、自分自身
多趣味で浪費家?
でもあるので、
色々思ったことは
赤裸々に書いていきます!!

アニバーサリー

本日は、私の術後
です୧(๑•̀⌄•́๑)૭

リンク

◆国立がん研究センター
 『がん情報サービス』
それぞれのがんの解説
日常生活の助けとなる情報
がんの原因や予防について

◆がんで困ったときの工夫、治療法
患者と家族の闘病記|ブログ村

◆闘病中の患者や、ご家族の話し
がん症状、治療|ブログランキング

◆さまざまな病気や症状の悩みごと
最新情報|FC2 ブログランキング

 

スポンサーリンク


Amazon タイムセール情報

My Channel


FC2 ブログランキング

[ジャンルランキング]
ブログ
75位
アクセスランキングを見る>>
[サブジャンルランキング]
社長ブログ
2位
アクセスランキングを見る>>

カレンダー別記事


12 | 2018/01 | 02
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

検索フォーム

Contakt 

コメント

免責・問題を報告

PAGE TOP