• かちびと.net

    画像を使わずに見出しを水平線で挟むCSS小技があって素敵だったので備忘録がてらご紹介。クロスブラウザで動作します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

画像を使わずに見出しを水平線で挟むCSS小技

スポンサーリンク

ちょっと素敵だったので備忘録。CSS
で見出しを水平線で囲むテクニック
です。本とかでよくある表現方法です
が、これを画像を使わず実装しよう、
というもの。クロスブラウザで動作
しますので汎用性もありますね。

これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。

demo

こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。

CSS

  h1 {
    border-top: 1px solid black;
    margin:23px 0 0;
    text-align:center;
    padding:0; height:24px;
}

  h1 span {
    position: relative;
    top: -24px;
    padding: 0 20px;
    background:white;
}

borderを使って実装。h1にborderを付けて位置を下げ、spanで囲ってテキストだけ元の位置に戻す・・なるほど。僕がcss苦手だから思いつきませんでしたw

html

<h1><span>Kachibito</span></h1>

普通に書くだけ。

jQueryを使う

spanが含まれていないような既存サイトに導入したいのであればjQueryでspanを入れてあげればいいですね。

  $(document).ready(function() {
      var h = $('h1'),
          htext = $(h).text(),
          full = '<span>' + htext + '</span>';
      $(h).html(full);
    });

IE6


IE6でも7でも8でも問題なし。

続き書いたので宜しければ。

これは結構使うかも。他にもいろいろ試したくなりますねー。いいテクニックですね。
以下を参考にしました。

via:impressivewebs

URL :
TRB :

Comments & Trackbacks (4)

  1. モリタ

    初めてコメントさせていただきます。
    いつも、かちびと.netさんの分かりやすい解説と、目からウロコな記事内容にただただ感謝しております。

    今回もとてもスタイリッシュなデザインが実装できるということで、早速ためさせてもらいます。

    私はCSSやPHP、javascriptなど、どこをとっても素人ですが…
    地道に頑張ってみようと思います。

    そう、思わせてくれるほど、毎回素晴らしい記事です。

    さて、最近とても気になるプラグインがありまして、Boxerというボックスデザインが綺麗にできるプラグインなのですが…
    Plugin Directoryでも評価が非常に高く、発表されたばかりのプラグインなのですが…

    使ってみても、設定が上手くできていないのかcontent部分に何も表示がされません。
    もし、気が向いたらでもかまいませんので…記事にしていただけないでしょうか?

    お忙しい中、とても恐縮ですが、お体に気をつけて運営なさってください。

    それでは。

    • シロ

      こんにちは。コメント有難うございます!お褒め頂き光栄ですが、僕も素人ですのでお互いいろいろ学んで行きましょうXD

      さて、最近とても気になるプラグインがありまして、Boxerというボックスデザインが綺麗にできるプラグインなのですが…
      Plugin Directoryでも評価が非常に高く、発表されたばかりのプラグインなのですが…
      使ってみても、設定が上手くできていないのかcontent部分に何も表示がされません。
      もし、気が向いたらでもかまいませんので…記事にしていただけないでしょうか?

      WordPressのプラグインの事で合ってますか?カスタムポストタイプを作って固定ページにショートコードで表示させるような感じみたいですねー・・

      一応ローカル環境で使ってみたのですが.htaccessのrewriteを有効にしてないので表示できませんでしたが、方法がサイトに書いてあるようなので訳しますね!

      プラグインを有効化している状態からスタートします。

      1.サイドバーのBoxes→Box Setでタグ(タクソノミーといいます)を適当に設定
      2.Boxes→Add Newに移動
      3.ボックス表示したいコンテンツを複数作ります。画像はアイキャッチを使用
      4.いろいろ作成したら固定ページ作成画面に進みます。
      5.任意のタイトルを付けてショートコードを書きます。
      6.ショートコードは[box set="box-set-1"]といった感じです。
      7.固定ページを更新して表示を確認してください。

      以上だそうです。チュートリアル動画が凄く分かりやすかったですよ!
      http://www.codingourweb.com/2011/how-to-use-boxer-for-wordpress/

      参考になれば幸いですー!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services