ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

CSS知識が無くても「見出し」をあっという間に作成できるCSS見出しジェネレータ

   

medium_536581799

無料テンプレートに限らず、有料のテンプレートでもデフォルトの見出しスタイルが気に入らない・・・ってことありませんか?ボクはちょっとだけ気になるんですよね。

やっぱりデフォルトだと万人受けを狙っていると思うので、当たり障りのない感じがしてしまいます。そんな見出しをボタン選択、数値入力だけのお手軽さであっという間に作成できるウェブサービスがあります。それがCSS見出しジェネレータです。

スポンサーリンク

まだ見出しをイジったことがない人は一度体験してみてください。あまりにも簡単なので重宝するかもしれません。といっても見出しを変更することはほとんど無いと思いますが(笑)

photo credit: laRuth via photopin cc

 

CSS見出しジェネレータの使い方

こちらからサイトに移動して下さい。
http://web-dou.com/tool/css_gen_h.php

サイトの上部に作成された見出しのサンプルが表示されます。

140313_2002

サンプルの下に作成した見出しのCSSソースが表示されます。

140313_2003

また、その見出しを作成した結果のURLも表示されます。他の人にどんな設定で見出しを作成したのかが分かるようになっています。

140313_2004

 

サンプルの下に見出しの詳細を作成する各種設定があります。

140313_2001

見出しの種類

吹き出し

140313_2005

見出し全体が吹き出しとなっている表示です。

 

リボン

140313_2006

コンテンツの左を覆うような感じのリボンタイプの表示です。当サイトの見出し<h2>で使用しています。

 

普通(枠上)

140313_2007

見出しの上に線が入るようにした表示です。

 

普通(枠下)

140313_2008

下線バージョン

 

普通(枠上下)

140313_2009

上下線バーション

 

ボックス関係

見出しの背景色、枠線の配色、影ありなし、ぼかしありなし、などなど設定可能です。

 

文字関係

文字色、サイズ変更、必要に応じて文章を記入可能です。

 

まとめ

CSS見出しジェネレータはボタン選択、数値入力だけでCSS知識がなくてもあっという間に見出しが作成できます。

このCSS見出しジェネレータが特にオススメできるのは、ボタン選択、数値入力したらどこの見出しが変化しているかが可視化(ソース確認)できるので勉強にもなります。実際ボクも勉強させてもらっています。

サイトのワンポイントアクセントとして見出しの変更はオススメです。ちょっとでも気になったら一度お試しあれ。

 - ウェブサービス


  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。

関連記事

medium_7463062672
Dropboxのアップロード速度が遅い!そんなときに設定するたった一つのこと

クラウドストレージの先駆けといったらDropboxじゃないでしょうか?クラウドス …

medium_2834872271
効率アップ!独自ドメインメールをGmailで送受信する方法!

独自ドメインメールを取得できるとなんだかカッコイイ高揚感に見舞われるのですが、サ …

140213_2102
Dropboxの容量に満足出来なければDropboxライクな「Copy」を使うべし!

クラウドストレージのメインとしてはDropboxを使用していて、バックアップとし …

131129_2201
【zenback】サイトへのアクセス数がアップ↑する魔法のブログパーツ

zenbackはサイト・ブログの記事下・サイドバーに設置することで、関連記事やソ …

140316_2004
早っ!FFFTPのアップロード速度を4倍にアップするビックリするほど簡単な設定

フリーのFTPソフトと言えば一番最初に思いつくのがFFFTPだと思います・・・た …

131206_1901
【Open Graph Pro】facebookからのアクセス数がグン↑と上がるWordPressプラグイン

Open Graph ProはOpen Graph Protocolという、fa …

140422_2001
サムネイル画像リンク+文字リンク+はてブ数を一括生成する便利ウェブサービス

記事を書いていて自サイトの他記事を紹介するときは、文字リンクを使用していたんです …

medium_2114714599
PV上昇!はてブ数ありの人気記事を表示させるはてなブックマークブログパーツ

たまにブログやサイトのサイドバーにはてなブックマーク数が表示される(〇〇user …

131122_1901
Feedly登録用ボタンを作成しWordPress・ブログに設置する方法!

Google Readerが終了してからはいくつかのRSSサービスを試してみまし …

140220_2208
Welcome back!!SkyDriveが大人の事情でOneDriveとして再始動!

Microsoftが提供するクラウドストレージ「OneDrive」がとうとう利用 …