拙テンプレートのナビメニューのカスタマイズについて

いろいろなデバイス

拙テンプレートのナビメニューについて

さて、拙テンプレートでは、ナビメニューは、ヘッダー画像の直下に置いてあり、そして、閲覧デバイスが小さい場合でも、ハンバーガーメニューには、しておりません。
それは、
  • 自分自身が、「隠れているメニュー」というのが好きではないから。
  • スマホからの閲覧時に、右上にハンバーガーメニューを設置すると、かなりの余計なコードを必要とするから、これがないだけで、けっこう、テンプレート全体の「総文字数」が変わってくるから。
というのが、主な理由です。
そして、スマホ版でハンバーガーメニューになったほうがいいという方は、私のテンプレートは、選んでいないと思いますし、ほかの製作者さんのハンバーガーメニューつきのテンプレートを、選ばれているだろうと、思います。
ともかく、拙テンプレートでは、スマホ版に、ハンバーガーメニューというものは、「ない」ので、ひょっとして、不便だったりすることも、あるかなと思って、スマホ閲覧者の「不便」を少しでも減らすための、小さな改造方法を、ここで、紹介しておこうと思います。

改良する場合の方法とその目的

拙テンプレートのナビメニューというのは、デフォルトでは、一番右が、RSSのURLを仕込んでおりまして、これは、お好みで、必要なリンク先に、変えていただいて、ご利用いただければ、いいと思います。
RSSのリンク先というのは、サイドバーパーツにも、ありますので、サイドバーにそれを設置してある場合には、ナビメニューになくても、特に問題は、ないと思います。
RSSのリンク先は、普通は、閲覧者さんが、そのブログの定期購読を決めて、RSSリーダーへの登録をするときのために、必要なものです。
そして、自由に変えていただいたり、または、数を増やしていただいても、いいのですが、ここでは、取りあえず、「RSS」としてデフォルトで仕込んであるものを、iPadから下のデバイスでは、「サイドバーへ」というふうに、変えてみたいと思います。
自力改造で、リンクの内容を変えている方の場合には、この応用で、ナビリンクの数を増やすなり、自由にやっていただければと思います。

改造の仕様

ここでの改造内容の仕様としては、
  • PC版では(横幅769px以上のデバイス)、RSSで表示する。
  • iPad以下(横幅が768px以下)では、サイドバーに飛ぶためのページ内リンクに変える。
というふうにしています。

手順

  1. テンプレートの管理画面を開く。
  2. HTML(上の枠)の以下の位置に、以下のコードを追加する。
    「サイドバーへ」という言葉自体は、お好みの言葉に変えてもOKです。
    <li id="to-side"><a href="#plugin_first">サイドバーへ</a></li>
    追加前↓
    追加前追加後↓
    タグ追加
  3. さらに、下のほうへスクロールし、以下の位置に、以下のコードを追加する。カンマは必要なので、削ってはいけない。後ろでもいいのだが、後ろに足す場合には、カンマは「前」につける
    #to-side>a,
    スクロールにセレクタ追加
  4. 次に、下の「スタイル編集」の枠へ行き、一番下に、以下を追加する。
    一番下というのは、この場合には、ほかのレスポンシブ用のコードが書いてある場所よりも下にしたいから。
    この順番↓で入れること。中身の順番は変えてはいけない。
    /*------ナビメニュー追加------*/
    #to-side{display:none;}
    @media screen and (max-width:768px){
    #navi-list .sp-hide{display:none;}
    #to-side{display:block;}
    }
    CSS追加分
  5. 青い更新ボタンを押し、ブログを開き、できているかどうかを確認する。確認は、
    • PCから見たときに、前と同じように見えていて、クリックでRSS画面へ飛ぶようになっているか。
    • iPadや、スマホから見たときに、「サイドバーへ」となっていて、クリックすると、滑らかな動作でサイドバーへ移動するかどうか。

見本

【PCからの見え方】
PCからの見え方 【iPadでの見え方】 iPadでの見え方 【スマホでの見え方】
スマホでの見え方

追記:リンクタブを4つにする場合

以下は、「RSS」を、好みのリンク先に変えている場合などに、それを生かしたまま、iPadとスマホ版で「サイドバーへ」を追加して、リンクを4つにして表示する場合の手順です。
基本的には、違うのは、CSSの内容です。
  1. HTMLへの追加は、上の手順と同じ。
    「サイドバーへ」という言葉自体は、お好みの言葉に変えてもOKです。
    <li id="to-side"><a href="#plugin_first">サイドバーへ</a></li>
    about テンプレへの追加
  2. さらに、下のほうへスクロールし、以下の位置に、以下のコードを追加する。カンマは必要なので、削ってはいけない。後ろでもいいのだが、後ろに足す場合には、カンマは「前」につける
    #to-side>a,
    スクロールにセレクタ追加
  3. 次に、下の「スタイル編集」の枠へ行き、一番下に、以下を追加する。
    一番下というのは、この場合には、ほかのレスポンシブ用のコードが書いてある場所よりも下にしたいから。
    この順番↓で入れること。中身の順番は変えてはいけない。
    /*------ナビメニュー追加------*/
    #to-side{display:none;}
    @media screen and (max-width:768px){
    #to-side{display:block;}
    }
  4. 青い更新ボタンを押し、ブログを開き、できているかどうかを確認する。確認は、
    • PCから見たときに、前と同じように見えていて、クリックでRSS画面へ飛ぶようになっているか。
    • iPadや、スマホから見たときに、リンクが4つになっていて、「サイドバーへ」が出現し、クリックすると、滑らかな動作でサイドバーへ移動するかどうか。

見本

【PCでの見え方】
about PCでの見え方 【iPadでの見え方】
about iPadでの見え方 【スマホでの見え方】
about スマホでの見え方

ブラウザ固定のページナビについて

ページ内で上や下に移動するための、「ブラウザ固定のページナビ」というのは、ほかのテンプレートでは、矢印などで、実装されているのが普通ですが、拙テンプレートでは、ブラウザ固定ではなくて、ページの下、フッター部分まで来たときに、そこに、上に移動するためのナビボタンを、つけています。
これはやはり、自分が、ブラウザに固定のナビが、好きではないからで、これが常にブラウザ上にあると、目障りで、記事や、サイドバーが、見づらくなるからです。
ですが、ブラウザに固定してあったほうがいいという人は、例えば、背景を半透明にして、目立たなくして、ブラウザ固定にすることも、できますので、それが必要だという方は、個別に、ご相談ください。

2019/10/28追記:うまく行かない場合

上のコードで、もしもうまく行かない場合には、CSSを、以下に変えてみてください。
お手数をおかけいたします。

ナビ3つの場合

/*------ナビメニュー追加------*/
#navi-list>li#to-side{display:none;}
@media screen and (max-width:768px){
#navi-list .sp-hide{display:none;}
#navi-list>li#to-side{display:block;}
}

ナビ4つの場合

/*------ナビメニュー追加------*/
#navi-list>li#to-side{display:none;}
@media screen and (max-width:768px){
#navi-list>li#to-side{display:block;}
}
関連記事

コメント

コメント(10)
テンプレートの件
おはようございます。
スマホからどう見えるか?そこまで考えていらっしゃるんですね、たしかに私へのコメントもスマホからのコメントが多くなりました、ますますこの傾向は多くなるでしょうね、今度のテンプレートの変更により好評のようです、ありがとうございました、ちなみに私もぼつぼつスマホデビューしないといけないと思っています(笑)

ハックル70

2019/10/15 07:28 URL 編集返信
Janedoe1471
To ハックル70さん
そうですか、ハックルさんの読者さんで、スマホから閲覧している方にも、見やすいということなら、よかったです^^
スマホから閲覧する人の割合というのは、普通のブログだと、7割~8割が、だいたい普通だと思いますが、ブログの内容や、読者層によっては、けっこう違いますが。
以前は、他人のブログを見なかったような人や、家に帰ってから、PCで見ていたような人たちが、通勤の行き帰りとか、なんらかの待ち時間などに、いつも読んでいるブログを、スマホから、見てくれるようになった、というケースが、多いのではないだろうか、と思います。
FC2では、レスポンシブのテンプレートを使わなければ、運営が用意したスマホ版が、自動的に見せられますが、これは、そのままでは、デザインが無粋ですし、無関係なブログへの誘導リンクが、10個も入りますから、自分のヘッダー画像もそのまま見せられるような、レスポンシブテンプレートを使うのが、最もよい方法ですね。

Janedoe1471

2019/10/15 10:52 URL 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2019/10/15 12:27 編集返信
Janedoe1471
To -さん
さきほど、貴ブログへ、コメントにてお返事をさせていただきました^^

Janedoe1471

2019/10/15 13:21 URL 編集返信
お師匠!!
これって今使わせていただいているassemblyでもできますか?
カスタマイズと聞くと何でもやってみたくなるアホな私です。

柴犬マイア

2019/10/15 17:30 URL 編集返信
Janedoe1471
To 柴犬マイアさん
はい、もちろんです。
まず、どういうふうにしたいか、プランを決めていただいて、それで、具体的に、最初の方法(3つ)にするのか、4つにするのか、ですね。
現在ついているRSSのリンクを、そのままでいいのか、何か、別のリンク先に変えて、それを残したまま、iPad以下で4つに見せるのか、です。
最初の方法でいいなら、そのまま上の説明のとおりに、やってみていただければ↑
リンク先を変えて、そして4つにする場合なら、もしもわからなければ、どこがわからないか、具体的にお伝えください^^

Janedoe1471

2019/10/15 17:55 URL 編集返信
頑張ります!
了解です。ノープランですが(…というかよくわかってない)、週末でもやってみます。
またわからないことがあれば、ご指導よろしくお願いします。

柴犬マイア

2019/10/15 21:29 URL 編集返信
Janedoe1471
To 柴犬マイアさん
そうですか、上の画像説明のとおりにやれば、だいたいできるはずですので^^

Janedoe1471

2019/10/15 22:39 URL 編集返信
ありがとうございます。
なんとか出来たみたいです。
スマホで見た時、便利ですね。
「#to-side>a,」を挿入する場所を探すのに苦労しました。
老眼なんで・・・(笑)

柴犬マイア

2019/10/16 08:22 URL 編集返信
Janedoe1471
To 柴犬マイアさん
はい、拝見しました。できていますね^^
スマホから見ている方が、ブログ内の回遊をするときに、少しでも便利になると、いいのですが。

また、HTMLやCSSで、文字が小さくて探しにくいときには、探したい枠の中(例えばHTMLの枠)に、カーソルを置いて一度クリックし、Ctrlキーと、Fキーを同時に押して、そこに、探したい文字を入れてやると、その文字を含む場所が、色つきで示されますので、ラクですので、一度、お試しになってみてください。

Janedoe1471

2019/10/16 16:57 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム