PCでは横並びのドロップダウンメニューで、スマートフォンではトグルボタンでドロワーメニューが横から出てくるグローバルメニューをはてなブログ向けに作りました。（はてなブログ以外でも使えます） PCではマウスオーバーするとドロップダウンメニューが表示され、スマートフォンでも2階層目のサブメニューが表示されます。 使用ライブラリ： ドロワーメニュー用のテンプレートを作りました | ザリガニデザインオフィス github.com こちらのザリガニデザインオフィスさんのテンプレートをベースに作らせていただきました。 デモ HTML・JS CSS 【追記】 改良版を作りました。 blog.minimal-green.com デモ出来上がりはこんな感じです。スマートフォンではメニュー項目の他、プロフィール欄やフォローボタンも表示されます。PC非表示フリースペースはアレンジして作り込んでみて下さい。PC版

はてなブログのサイドバータイトルデザインのカスタマイズ集を作ってみました。 はてなブログではそのままコピペでお使いいただけます。WordPressや他のブログサービスでもセレクタを変えればお使いいただけます。 注意　文字色について（全共通） シンプル 色変更　フォント変更 背景色あり 下線あり 下線あり(ダブル） 左右に直線を重ねるデザイン アイコン付き FontAwesome はてなブログのblogicon ガーリーデザイン リボン風 レース風 アイコン画像を使う ポップ系 左ライン ストライプ背景 吹き出し 基本 中央寄せ 左寄せ リセット サイドバータイトルのテキストを画像に置換する サイドバーの最新記事にリボンラベルを付ける サイドバーに画像（バナーリンク）を貼る 注意　文字色について（全共通）サイドバータイトルの文字色が変わらないときはaタグの文字色もご指定下さい。 .haten

はてなブログで使える目次のデザインを幾つか作ってみました。コピペでお使いいただけます。 目次の挿入方法 目次デザインパターン集 FontAwesomeの呼び出し ストライプ背景 ストライプ背景2 二重線囲み ステッチ風 目次リストのスタイル（番号順、円） 目次を表示・非表示に切り替える ご使用のテーマによって、調整が必要な場合があります。あらゆる場面、状況に対応することは難しいためです。ここで紹介しているコードはあくまでも一例で、各自ご自身の責任の元で調整してください。 目次の挿入方法基本的なことですが、はてなブログで目次を挿入するには記事編集画面上部のツールバーで目次のアイコンをクリックすると挿入できます。 目次デザインパターン集目次のカスタマイズをするには以下のコードをデザインCSSに入れて下さい。テーマによっては調整が必要です。 FontAwesomeの呼び出し目次横のアイコンはFo

ちょっと前からよく見かける「サイト全体を枠で囲む」デザインをはてなブログでやってみました。このブログでもやっています。 webdesign-trends.net カスタマイズ方法 ストライプ柄 背景画像を設定する カスタマイズ方法以下のCSSをデザインCSSに追加します。 /* ブログ全体を枠で囲む */ body { width: 100%; border:20px solid #47a89c;/* 枠線 */ box-sizing:border-box; } @media screen and (max-width: 767px){ body { border: 10px solid #47a89c;/* SP枠線の幅 */ } } ストライプ柄 背景をストライプパターンにすることも出来ます。 以下のカスタマイズは#containerが幅100%のテーマのみ,そのまま使えます。#con

記事下にCTAを設置するカスタマイズを作りましたのでご紹介します。WordPressの有料テーマではよく見かけますね。このカスタマイズははてなブログはもちろん、WordPress、その他のブログサービスでも使えます。 CTAとは 見た目はこんな感じ カスタマイズコード HTML（記事下） CSS スマートフォン用 補足：FontAwesomeの読み込み CTAとはCTAとは「CTA（Call To Action：コールトゥアクション）」の略でWebページ上でユーザーにクリックしてもらうなど行動を起こさせるためのボタンや画像・テキストを意味します。 例えばはてなブログのトップページで言うと この「はてなブログとは」の緑色のボタンがCTAです。 webサイトを作るとき、ユーザーに商品を購入してほしい、お問い合わせしてほしい、など何かしらの目的がある場合が多いと思います。そうしたPRしたいものを