自分好みの見出しデザインをちょちょ~いと作れる【見出し空間】

投稿日:2018-02-06 更新日:

見出し

今回初めてWebアプリなるものを作成してみました。その名も「見出し空間」。

「見出し空間」では、リアルタイムで画面上に表示される見出しデザインを見ながら、設定項目を設定していくだけで、見出しデザインのCSSコードが生成される見出しジェネレータ―です。CSSがわからなくても好みの見出しデザインを自由自在?に作成することができます。

そんな虫のいい話があるわけない!
本当にできるみたいですよ。ちょっと設定項目が多いのが難点ですが。

はい、設定項目が多すぎるのは承知です。でも、設定項目が多いということはそれだけ自由度が高いということですね。ぜひぜひ活用してもらえると嬉しいです。

「見出し空間」とはなにか

まず、「見出し」とは、上の”「見出し空間」とはなにか”というように見出しタグで囲まれた部分のことを指します。

この見出しってサイトのデザインや趣旨に合わせたものにしたいですよね。

でも、ワードプレスやそのテーマによっては、見出しのデザインは限られていて自分の思い通りにできなかったり、どうしてもという場合でもCSSをいじらないといけません。

「見出しデザイン」で検索すると見出し用のCSSコードを公開しているサイトはたくさんあり、どれもカッコ良かったり、かわいかったりと僕のデザインセンスでは、考えつかないものばかりなんです。

が、それらを利用しても自分独自の見出しデザインになるわけでもないという部分では、ちょっと物足りなさを感じていることも。。。

そんなこんなを解決できるのが「見出し空間」なのです!

なんか管理人はりきってない?
初めてWebアプリなんか作ってみたから舞い上がってるんでしょうね。

「見出し空間」の使い方

見出し空間の使い方 ①好きなように設定する ②設定内容がリアルタイムに表示される ③設定内容に合わせたCSSコードを表示

  1. 見出しの設定を行う
    各種設定項目があるので、とにかく好きなように入力する。
  2. 見出しのリアルタイム表示
    設定された内容がリアルタイムで表示されます。この表示見ながら設定項目を見直し調整します。
  3. 設定された内容がCSSコードに変換されて表示
    気に入った見出しのデザインができあがったらここのコードをコピーして使うだけ
説明を簡略化しすぎ。。。

でも、本当にこれだけであなた好みの見出しデザインができちゃいますよ。

もし、わからないことがあったら、この記事のコメント欄にいただければ、説明させていただきます。

まとめ

今回のWebアプリはJavaScriptを使って作成しました。プログラム経験はあるのですが、C言語しか触ったことがなかったので、JavaScriptなんてできるかなぁという感じだったんですが、実際やってみるとCSSの方がわからなくて挫折しかけました。。。

「見出し空間」は、初めてのWebアプリにしては、個人的にそこそこに満足できる仕上がりとなりましたが、不満点も少しあるので少しずつ改良していこうと思います。

もし、ご意見やツッコミなどあれば、コメント欄にいただけるとありがたいです。

-アプリ/ツール

Copyright© FoB log , 2019 All Rights Reserved.