はてブヘッダーにメニューを設置してカスタマイズしましたお詫び:今回の記事は「コピペで簡単」って記事ではないです。スマホ対応はまだしてませんが、パソコンで見るとタイトル下にメニューが表示されます。メニュー自体は前から設置していたのですが、ちょこっと手直ししました。テーマによっては簡単にメニューを設置できるみたいですが、当ブログは自力でCSSいじっているのでメニューの設置も自力でやりました。今回のコードは、あまり初心者向けではないので参考になるかは微妙です。駆け出しなので許してちょ☆サンプルコードまずはHTMLです。これをデザイン→カスタマイズ→ヘッダにぶち込めばベースができます。※もしここにコードが表示されてない場合は、ページを再度読み込んでください。リンク先のアドレスはご自身のブログのカテゴリーURLを貼ってくださいね。記述は後々jQueryで使うので付与してます。これは丸パクリしても微妙だと思うので、ご自身のブログにあった色とか境界線にしてみてくださいね。※もしここにコードが表示されてない場合は、ページを再度読み込んでください。スマホ対応してないので、画面が600px以下の端末だとメニューを非表示にしています。実はここからがポイントこれだけでも完成なんですが、このブログのメニューは下にスクロールしてもずっと上にメニューが表示されています。メニューから逃げられません。どこまでも追いかけます。(邪魔?)これはjQueryを利用しています。本当はjQueryを使うとブログの読み込み速度が落ちて微妙なんですが、我慢できずにやってしまいました。先ほどのHTMLのコードの下に以下の記述をして出来上がりです。メニューから一番上までの距離が計算されます。上からスクロールされた距離が計算されます。スクロールされた距離がメニューの位置を超えると画面上に固定されるように、.css()でCSSを変更します。上部固定はメニューだけではなく、シェアボタンにしても良さそうですね。今回のメニューは端末の幅が狭いと文字数の関係でレイアウトがくずれてしまうので、スマホでは表示させないようにしています。スマホ用を作ってないので、もし完成したらこのような形でコードも載せたいですね。コメントをキャンセルお気軽にコメントしてください!!コメント名前・メールの入力は任意です。名前メールアドレスサイト関連記事コピペで簡単!CSSではてなブログの見出しをカスタマイズ!コピペで簡単!はてなブログのSNSシェアボタンをカスタマイズはてなブログの読み込みを速くするために行ってきたことまとめはてなブログが面白いのか調べてみるjpg画像の圧縮(プラグインなど)は何を使うのが一番良いの?比較してみたSearch運営者情報SHIROMAブログ運営で独立し、現在は会社を経営しています。WEBデザインやWordPressテーマの制作なども行っています。