ガーリーデザインシリーズです。見出しのデザインに使えるコピペCSSを用意しました。ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Greenとあわせてお使いいただくと良いかと存じます。
以下ははてなブログの大見出し（h3）のclass指定にあわせていますが、セレクタを変更すれば他のブログなどでも使えます。
ストライブ柄とステッチ風のかわいい？シェアボタンを作ってみました。ガーリーデザインなブログカスタマイズにぜひどうぞ。
このシェアボタンは過去にこのブログで公開したシェアボタンのHTMLと同じですので、CSSを変更するだけで着せ替え出来ます。レスポンシブデザイン対応。
blog.minimal-green.com
記事下の関連記事ってカスタマイズされてますか？多くの方はMilliardなどのプラグインを使っていらっしゃいますが、関連記事を表示させる方法はいくつかあります。
はてなブログの記事下に使う関連記事プラグイン、結局どれが１番良いの？
Milliardはとてもきれいなデザインなんですが、重くてページ表示速度が遅くなりますね。Milliardを2列表示するカスタマイズはこちら。↓
www.yukihy.com
今回は公式の関連記事サイドバーモジュールを記事下に移動させる方法で関連記事を2列表示にするカスタマイズをご紹介します。 続きを読む
※注意：AdSenseで使うことは無いと思いますが、この方法をGoogle Adsenseで使うときは必ず「レスポンシブ広告ユニット」にして下さい。レスポンシブ広告以外にdisplay:noneを使うと規約違反になりますのでご注意下さい。
Google Adsenseの場合レスポンシブ広告ユニットがあるので、それを使えば良いのですが、ASPによってはレスポンシブに対応してない広告もあります。
PCでは横長のバナーを表示したいけど、スマホではスマートフォン用の小さいサイズの広告バナーを表示させたいという場合についての対応を考えてみました。タイトル下のバナー広告がテーマのコンテンツ幅やスマートフォン表示に合っていない場合でお困りの方の参考になるかもしれません。
はてなブログでは標準のスマートフォン版がありますので、はてなスマホ版を使っても良いのですが、レスポンシブデザインで表示させる場合の方法です。
色白おばけ (id:lightgauge) さんのブログ記事で使われていた”黒板風囲み枠”にインスパイア（笑）され、私も黒板風囲み枠のCSSを作ってみました。
はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚
CSSは参考せず自分で組みました。borderで太枠囲んでるだけですけど。
はてなブログを使っていると気づくと思いますが、はてなブログのトップページと個別記事ページ（エントリーページ）では表示される要素に違いがあります。
はてなブログの日付のデザインを変更するカスタマイズ用のCSSコードをご紹介します。
はてなブログテーマストアでは様々なデザインのテーマがあり、とくに公式テーマでは個性的な日付のデザインが多いですから、無理してこの記事のようにカスタマイズする必要はありません。
この記事では、一からオリジナルテーマを作る場合や「Innocent」のようなシンプルなデザインのテーマで日付を装飾をする場合を想定しています。
（この記事のコードは「Minimal Green」「Innocent」をインストールした状態で検証しました。）
他の方のブログを読んでいて、これは意図しないデザインの崩れ・隙間ではないかと思うことがあります。
例えばはてなブログで広く普及しているyukihyさんのドロップダウンメニューを利用されている方で背景いっぱいにタイトル画像を設定している場合、メニュー上下に余計な隙間ができ、気になることがあります。
これはコードに問題があるのではなく、元々のテーマに合わせてデザインされているので、別のテーマやタイトル画像の設定の仕方を変えると意図しないデザイン崩れが出来るのは仕方のないことです。これはカスタマイズする側が自分で微調整しましょう。
