エントリを書くときに使えるCSSを用いたタイトルバー3つの例

この記事が良ければ、ぜひシェアお願いします

かつてタイトルバーを作っていたときは、画像を作るのが自分の中では常識でした。しかし、CSS3で多くのデザインパターンも生まれ、SEOという観点も生まれ、やっぱり画像を作るのは面倒くさいということに気づいてしまいました(笑)

レタッチソフトでベースを作って、必要なバー文の文字を変更してWeb用画像に保存する。そしてアップロードして、記事に貼り付け、SEOを意識するならaltタグに説明文を付け加える。

タイトルバーを作ろうとした時、こんなことをしようした自分が情けない(^^;

一番速効で使えそうなサイトがこちらでした。

>>FC2でdivタグを使ってタイトルバーを作る方法ツ黴€(ツ黴€ブログ で SEO対策 と アフィリエイトツ黴€)

タイトルバーサンプル

1行のHTMLと何行かのCSSでタイトルバーが作れます!!

赤いタイトルバー

【CSS】

.titlebar_red{
font-size: 16px;
color: #202020;
padding: 3px 0px 3px 20px ;
font-weight : bold ;
border-left: solid 15px #c8575c;
border-bottom: solid 1px #c8575c;
background: #ffffff;
}

【HTML】

<div class="titlebar_red">赤いタイトルバー</div>

色もCSS上で変えれば、呼び出しているタイトルバーを全て変更できるので楽ですね。
あとはシンプルですが、こんなのもあります。

>>CSS Tip: Title Bars with Text on Both Sides

グレーのタイトルバー

【CSS】

.titlebar_gray{
font-size: 16px;
color: #FFFFFF;
padding: 3px 0px 3px 20px ;
font-weight : bold;
border-left: solid 15px #000000;
border-bottom: solid 1px #696969;
background: #696969;
}

※HTMLは省略します

また、シャドウボックスをつかうことでちょっとお洒落な感じにすることもできますね。

>>CSS3: box-shadow and inset-shadow

シャドウボックスを用いたタイトルバー

【CSS】

.titlebar_box-shadow {
background-color:#F1F1F1;
width: 300px;
padding:10px;
margin:20px;
-moz-box-shadow:inset 8px 8px 8px #989898;
-webkit-box-shadow:inset 8px 8px 8px #989898;
box-shadow:8px 8px #989898;
}

見せ方はサイトのテーマカラーと合わせるなど、統一性を持たせるとより見やすいと思いますが、タイトルバーのデザイン自体もCSSを使ってカスタマイズするとよりリッチになりそうですね。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク