読みやすいブログに改善するためのノウハウや、コピペで使える CSS コードを中心とした Web デザイン関連の記事はこちらからご覧いただけます。
-
Webデザイン
サイドバーの追尾(固定)は効果があるのか-Google AdSense検証結果
サイドバーを追尾式にしているサイトをたまに見かけますよね。 弊社で運営しているいくつかのサイトでも Google AdSense 広告を追従させています。これが収益にどれほどの効果をもたらすものなのか […] -
Webデザイン
CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン
CSS だけで作れるおしゃれなボックス(枠線・囲み枠)のデザインサンプルをご紹介します。 ブログ記事の主役はテキストですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさも改善されます。 ボックスがあ […] -
Webデザイン
打ち消し線もおしゃれにカスタマイズ!delタグのCSSデザインサンプル
HTML で打ち消し線を引くときは <del> または <s> を使いますが、どちらも文字と同じ色の線が行の中央に 1 本引かれるだけです。 例) 打ち消し線打ち消し線打ち消し線 わかりやすいです […] -
Webデザイン
スマホでブログを見たときに横揺れ・見切れ・はみ出してしまう原因と対策
ブログでスマホ対応のテーマ・テンプレートを使っていても、広告や表(table)が枠からはみ出してしまったり、ぐらぐらと横揺れしてしまうことがありますよね。 レスポンシブ web デザインテーマはそうしたことがおきないよう […] -
Webデザイン
アンカーテキスト(テキストリンク)のCSSデザインサンプル
テキストリンク(<a>)は、CSS でいろいろなデザインにすることができます。 CSS で何も指定しない状態だと、青文字+下線というスタイルになりますよね。 Naifix|ブログ初心者向け無料ノウハウ集 この […] -
Webデザイン
CSSが効かないときの優先順位チェック(3)~点数計算編
「サンプルの CSS をコピペしたのにうまく反映されない!」 そんなときにチェックしてほしい CSS の優先順位。本日は最終回です。 CSS 優先順位 (1) ~CSS の記述場所~ CSS 優先順位 (2) ~id・c […] -
Webデザイン
CSSが効かないときの優先順位チェック(2)~id・class編
CSS 優先順位の解説 2 回目です。 前回は「スタイルシートをどこに書くかで優先順位が変わる」という内容でした。 今回は id 属性と class 属性に関連した優先順位を解説していきます。少し難しくなりますが、何度か […] -
Webデザイン
CSSが効かないときの優先順位チェック(1)~記述箇所編
ブログ運営は記事を書くだけではなく、自分好みのデザインに作り上げていく楽しさもあります。 Naifix でもちょっとおしゃれなデザインにする CSS などをご紹介していますが、利用中のテーマやテンプレートによってはコード […] -
Webデザイン
CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法
CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。 画像編集ツールで加工しても良いですが、CSS で表現すると画像の上に表示されてい […] -
Webデザイン
ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう
読みやすいブログデザインを目指すなら、余白と配色がポイントです。 別記事でブログ記事本文の横幅と左右の余白に関して解説しています。 本記事は横ではなく縦の余白に着目してみたいと思います。つまり、1 行目と 2 行目の行間 […] -
Webデザイン
強調文字 strong をちょっとおしゃれにするCSSデザインサンプル
ブログの本文で強調したい部分には <strong> や <b> を使いますが、デフォルトのスタイルではただの太字になるだけです。 これだとちょっと味気ないときは、CSS でデザインしてみましょう。 […] -
Webデザイン
CSSで区切り線と文字に1pxの影をつけるとかっこいいデザインに!
CSS3 が登場してから、画像や JavaScript を使わずに様々な表現ができるようになりました。 検索すれば「え!こんなのも!?」というテクニックがたくさん出てきます。ジェネレーターも数多くあるので、複雑な記述を覚 […]