HTML-CSS-デザイン※当ブログ内では商品広告やPRを行っております。こちらの記事は「はてなブログ」のテーマストアに公開されているオリジナルのテーマ「Palette(パレット)」のカスタマイズです。?「ボトムナビゲーション」とは、スマホ画面で常に下部に表示されている全てのページに共通したサイト上の案内バーのことです。この記事では、画面をスクロールしても、常にスマホ画面の下部に表示される固定のナビゲーションバーの設置の仕方を紹介します。※なお、PC用の上部に固定されるナビゲーションをご用意しています。レスポンシブで両方設置し、PCの時はトップ、スマホの時はボトムに切り替えて表示するようにできます。ツイッターフォロー(他のリンクページなどに変更できます)「おすすめ記事」では、上にメニューを展開して、いくつか表示できるようにしました。↓↓こんな感じ↓↓ちなみに、メニューの展開や固定も全てCSSのみで設定しているので、ページの読み込みも早くユーザーをお待たせしません!!ボトムメニュー用HTMLコードメニューは以下の<htmlコード>をコピペすることで利用できるようになります。URLなどを書き加える必要があるので、下の説明も良く読んで書き加えてください。</ul>コードを書き加える箇所:1「ホーム」や「おすすめ記事」などのURLを書き加えてください。下の"#"はそのまま」と書いてある部分は、そのまま"#"にしておいてください。読者登録の部分"https://blog.hatena.ne.jp/はてなID/自分のURL/subscribe"上記の「はてなID」と「自分のURL」を入れてください。自分のURLは、https://やhttp://を抜かした部分だけを入れます。私の場合は以下のようになります。ツイッターの部分"https://twitter.com/intent/follow?screen_name=自分のツイッターID"「自分のツイッターID」の部分に@マーク以降の自分のツイッターIDを入れます。私の場合は以下のようになります。"https://twitter.com/intent/follow?screen_name=bambiRed2018"なお、ツイッターへのリンクではなく、別のアイコンや項目に変更する場合は以下をご参考になさって変えてください。追記アイコンは、はてなブログにデフォルトで備わっているものを利用しています。アイコン一覧と使い方などはこちら↓↓をご覧ください。出来上がった<htmlコード>は、デザイン→カスタマイズ→ヘッダ→タイトル下にコピペしてください。わからない場合は、画像入りでこの記事の下の方で説明していますのでそちらをご覧ください。PC表示の際はボトムメニューを表示しない!レスポンシブの場合は、スマホ以外ではこちらのボトムメニューを表示させないようにする必要があるので、そのコードを書き加えます。type="text/css">CSSコード</style>と上記のように囲む必要があります。type="text/css">~~~~</style>の間に挿入するようにコピーしてください。}}<CSSコード>も、<htmlコード>とコピーする場所は同じです。デザイン→カスタマイズ→ヘッダ→タイトル下にコピペしてください。わからない場合は、画像入りでこの記事の下の方で説明していますのでそちらをご覧ください。ボトムメニューのためフッターを底上げするボトムメニューを設置した場合、一番下までスクロールした際に、スマホ画面のフッターがメニューにより隠れてしまいます。それを防ぐためにフッターを底上げして表示させる必要があり、そのコードを入れます。type="text/css">~</style>の中にコピーしてください。/*ボトムメニュー付けたのでフッタを底上げする*/#footer{margin-bottom:48px;}}コピーする場所は、デザイン→カスタマイズ→ヘッダ→タイトル下。この下↓↓の項で説明していますので、そちらをご覧ください。Xの仕様によりホームボタンの代わりに表示されるようになった、ホームバー(?)がメニューに被って見えなくなってしまう問題に対応しました。Paletteをお使いの方は、コードを1つコピペで追加していただくだけで対応できます。hatenaその他のカスタマイズ「Palette(パレット)」インストール手順・カスタマイズ一覧www.bambi.proテーマ「Palette(パレット)」について桜の季節には薄いピンク、初夏はグリーン、雨の日はブルー、ハッピーな日には自分のラッキーカラーなどなど...季節や気分によって、ブログも簡単に着せ替えられたらいいな♡と思って作ったテーマです。基本的な作りは非常にシンプルなものになっています。知識がなくても、予め用意した「着せ替えコード」をCSSにコピペすることで、誰でも簡単に基本の作りを変えることなく、ガラリと印象を変えることができるようにしました。「着せ替えコード」の解説も載せているので、ある程度の知識のある方は部分ごとにご自身のオリジナルのデザインに変更することができます。・おすすめのアフィリエイトサービスはてなブログをはじめよう!zuboracaさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。