注：コピペコードを写す前に、元々のhtmlやcssをメモ張にコピペするなど、必ずバックアップを取っておいてください！！ はてなブログで最近テーマストアを覗いたりしていると、本当に面白くオシャレなテーマが増えてきましたよね。 また多くのテーマがレスポンシブ対応をしてますが、現実にレスポンシブにしている方はあまり多くないと思います。 せっかく優秀なレスポンシブテーマがあるのに採用しない理由として、グローバルナビを後付けで行っているため、それがレスポンシブになっていないというのがあるかなあと。 もちろん、はてなデフォルトのスマホ表示が十分オシャレというのもありますが。 そこで今回は、よくあるWordPressのブログのように、グローバルナビをレスポンシブ対応させ、ブラウザ幅が縮んだらトグルメニューになるようなカスタマイズを紹介します。 ちょっと難易度が高いかもしれません。また、注意点として若干遅

2014-10-18 はてなブログにグローバルナビゲーションを設置しました はてなブログ どうも。cssは少しわかる程度のこりのろっさです。 昨日一日かけてスマホ用とPC用にグローバルナビゲーションを設置しました。 グローバルナビゲーションって何？ サイト内の各コンテンツへ案内するメニューのことです。 このようなメニューがあれば、初めてアクセスしてきた方にこのブログの概要を知っていただけますし、私のブログのように色々な内容を載せている場合でも、アクセスしてきた人にスムーズに興味のあるページへたどりついてもらえます。 以前にも増して書く記事の内容がバラバラになってきたので、早めにメニューを設置したかったんですが…時間が…時間が…  設置するのに参考にさせていただいたサイト 私は少ーしcssがわかる程度ですので設置するのにはすっごく苦労しました。主に助けていただいたのは以下のサイトです。 スマ

ヘッダーにグローバルなナビゲーションをつけました。 これで読んでもらいたい過去記事などにも少しは目に入るようになるのではないかと思います。サイドバーなんて誰も見ないからね。 ヘッダーナビゲーションの作り方を解説します。 HTML <nav id="global"> <ul> <li><a href="/archive">記事一覧</a></li> <li><a href="イ">イ</a></li> <li><a href="ロ">ロ</a></li> <li><a href="ハ">ハ</a></li> <li><a href="ニ">ニ</a></li> <li><a href="ホ">ホ</a></li> </ul> </nav> お好みのリンクをイ〜ロに設定しましょう。herfの部分にURLを入れてね。HTMLはこれだけです。 これをデザインのカスタマイズから、ヘッダのタイトル下に

キーワードに勝手につく下線がイヤ はてなブログもはてなダイアリーも無料で使っていると、文中のキーワードに自動で勝手に下線とリンクが付きます。（はてなキーワードに登録されているキーワードのみ） これは月額980円出してPROにすれば消せます。でも、契約前に投稿した記事からは下線もリンクも消せないみたいですね。 はてなブログProにお申し込みいただいてもお申し込み前に投稿された記事に関してはキーワードリンクは無効になりません。 出典 はてなブログのキーワードリンクを無効にする方法 契約したら過去記事に対しても反映させてくれたらいいのに… 下線とリンクを無効にするCSS というわけで、PRO契約前に記事を書いていた人は契約前でも契約後でも下線とリンクを消したくなるわけです。そんな時はcssを追記して消してしまいましょう。 /* 邪魔なキーワード下線を消す */ a.keyword { borde