サイトないのテキストをドラッグすると部分的に色が変わりますよね。 これを強調やハイライトなどと呼ぶのですが、今回はcssでこの色を制御する方法を紹介します。 PC側で設定されていても、自分のサイト内...

cssでデザインをカスタマイズしていて、aタグで設置したリンクのクリックできる範囲に困ったことはありませんか？ ちょっとしたコードを使えば、ボタン全体をリンクにすることができるので紹介します。...

今回は、cssで使われる単位の「px」「em」「%」はどのような違いがあるのかについて紹介します。 これらはそれぞれ、使われるタイミングが変わってくるので参考にしてみてください。...

cssでレイアウトをカスタマイズしている時、横幅を「100％から50pxだけ少ない値にしたい」というような時はありませんか？ そのような場合は、四則演算を使う「calc」というコードで実装できるので...

今回は、はてなブログで書いた記事の中に「会話形式」の吹き出しを導入する方法を紹介します。 ブログなど記事内で会話形式を使うことで、重要な部分を目立たせたり、読みやすいコンテンツを増やすことができます...

今回は、はてなブログで表示した画像を中央寄せにして、真ん中に表示させる方法を紹介します。 画像の表示方法をちょっと変えるだけで、より目立たせたり見やすくなったりするので使いこなしてみてください。...

今回は、はてなブログのサイドバーに追従する「メモ帳」を表示させてみました。 記事を読みながらメモを取れて、最終的にまとめてコピーもできるので試してみてください。...

cssでアニメーションを実装すると、アニメーションが完了した時に最初へ戻ってしまいますよね。 もしそのような場合に、アニメーションを終了地点で止めておくことができるので紹介します。...

今回は、はてなブログの「読者になるボタン」を画像にして、より目立つようなデザインに変更する方法を紹介します。 画像はなんでも良いので、自分のサイトアイコンや好きな画像を使って実装してみてください。...

はてなブログやWordPressなんかでサイトのカスタマイズを行っていると、デベロッパーツールで値を確認したり調整したりしますよね。 そのような場合に値を0.1ずつや100ずつ、10ずつ調整する方法...

cssでカスタマイズをしていて要素を隠したいなんて時がありますよね。 そのような時に、よく「display:none;」や「visibility:hidden;」を使うことになると思うのですが、これ...

前回、はてなブログの見出しカスタマイズ例を紹介しました。 そこで紹介したのはシンプルなデザインだったのですが、今回はちょっと手の込んだカスタマイズをする「ちょっと上級編」です。 基本的にコピペでも使...

前回、はてなブログのcssを使って見出しのデザインをカスタマイズする準備が整いました。 そこで今回は実際に見出しのデザインcssをカスタマイズしていきましょう。 今回紹介するのは「シンプル」な見出し...

今回から数回に分けて「はてなブログの見出しデザインのカスタマイズ」について紹介していきます。 色や細かい調整はあるものの、基本的にコピペで実装できるので試してみてください。 まずは、見出しデザインの...