はてなブックマーク

注：この記事は、はてなブログテーマNaked用です。 Nakedはもともと、ナビゲーションをつくるCSSが組まれていたのですが、子カテゴリまで表示することはできませんでした。 追加機能として、子カテゴリまで表示するようにCSSを変更したので、作り方を記事にしたいと思います。 注：子カテゴリ無しバージョンは theme-naked.hatenablog.jp をご覧ください。 実装図と注意点 実装図 注意点 カスタマイズ リンクタイトルを入れる リンクを入れる 確かめる その他のカスタマイズ メニュー部分に色をつける リンク文字の色を変える 実装図と注意点 実装図 実装図はこんな感じです。 PC 親カテゴリにマウスを当てると、子カテゴリがふわっと表示されるようになります。 注意点 このカスタマイズの注意点としては、 （レスポンシブ設定にしている人で、）タブレット以下のサイズでは子カテゴリは表

この記事は、テーマNaked以外でもご利用いただけます。 広告などを文章内で横並びにする方法です。 実装図 注意点 カスタマイズ その他のカスタマイズ 全体をセンタリング スマホサイズのときに右側の広告を消す 実装図 PC このように横並びで配置することができます。 スマホ 注意点 注意点としましては、 広告の横幅のサイズは、最大で300pxまで（それ以上のものを貼ると、はみ出ます） レスポンシブ設定にしていると、スマホのときに広告が縦並びになります。 Googleアドセンスなど一部の広告は、画面が広告で覆われることを推奨していません。 アカウント停止などされる場合などの可能性もあるため、そのあたりは自己責任でお願いします。（スマホサイズのときに右側の広告を消す方法を、その他のカスタマイズのところに書いています。） カスタマイズ カスタマイズは、 <div style="text-alig

注：この記事ははてなブログテーマ「Naked」を利用されている方向けの記事です。（テーマのインストールはこちら） このテーマには、フッターをよりリッチにしたい人向けに、CSSがあらかじめ組まれています。この記事ではフッターのカスタマイズのやり方を、書いていきます。 コードもいじる必要があるため、上級者向きの内容になります。 実装図と簡単な概要 PC タブレット スマホ 概要 カスタマイズ その他のカスタム タイトルを入れる 色の変更 注目記事モジュールを入れたい 実装図と簡単な概要 この部分になります。どのブラウザサイズでも対応するようにしているので、PCの方は実際に横幅を変えて見てみてください。 PC タブレット スマホ 概要 フッターの色を若干濃いめの灰色にしているので、ブログ全体の印象をしめることができ、また、よりたくさんの情報を入れることができます。 上の図にあるように、３カラムで