コピペで使える CSS デザイン集はこちらをご覧ください。WordPress 以外のブログでも使えますが、ご利用中のテーマ・テンプレートに合わせて微調整が必要になることもあります。
CSSデザイン
-
CSSデザイン
CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン
CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルをご紹介します。 ブログ記事の主役はテキストですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさも改善されます。 ボックスがあ […] -
CSSデザイン
打ち消し線もおしゃれにカスタマイズ！delタグのCSSデザインサンプル
HTML で打ち消し線を引くときは <del> または <s> を使いますが、どちらも文字と同じ色の線が行の中央に 1 本引かれるだけです。 例） 打ち消し線打ち消し線打ち消し線 わかりやすいです […] -
CSSデザイン
アンカーテキスト（aタグ）のCSSデザインサンプル
アンカーテキスト（テキストリンク）は、CSS でいろいろなデザインにすることができます。 CSS で何も指定しない状態だと、青文字＋下線というスタイルになりますよね。 Naifix｜ブログ初心者向け無料ノウハウ集 この状 […] -
CSSデザイン
CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法
CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。 画像編集ツールで加工しても良いですが、CSS で表現すると画像の上に表示されてい […] -
CSSデザイン
ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう
読みやすいブログデザインを目指すなら、余白と配色がポイントです。 別記事でブログ記事本文の横幅と左右の余白に関して解説しています。 本記事は横ではなく縦の余白に着目してみたいと思います。つまり、1 行目と 2 行目の行間 […] -
CSSデザイン
強調文字をちょっとおしゃれにするCSSデザインサンプル
ブログの本文で強調したい部分には <strong> や <b> を使いますが、デフォルトのスタイルではただの太字になるだけです。 これだとちょっと味気ないときは、CSS でデザインしてみましょう。 […] -
CSSデザイン
CSSで区切り線と文字に1pxの影をつけるとかっこいいデザインに！
CSS3 が登場してから、画像や JavaScript を使わずに様々な表現ができるようになりました。 検索すれば「え！こんなのも！？」というテクニックがたくさん出てきます。ジェネレーターも数多くあるので、複雑な記述を覚 […]
