見出し枠の作成やってみた

こんにちは、なむるです。

今回は早速、アプリでブログを書いていても枠組みをつける方法を見つけたのでそのまま実践してみることにしました。

この記事を読んだ、プログラミングをちょっとだけかじったことがある人は、コピペじゃなくても応用できる見出しを作れると思います。

◆もくじ◆

今回はこんな構成です。

それではいってみましょう！

【枠組みもコピペでいけた】

教えてくれた神ブログを紹介

このサイトが私が調べた中では1番わかりやすかったです。コピペするだけでいいなんてとってもすばらしいですね。

とりあえずiPhoneの辞書機能のところに登録して、簡単に使えるようにしました。これでいつでも枠を使って遊ぶことができますね。

昔、C言語あたりの勉強もしていたので、プラミングの知識も役に立ちそうです。

おそらくですが、色を見ている限り

あか　　#ff0000
きいろ　#ffff00
あお　　#0000ff

 

であることと、

くろ　#000000
しろ　#ffffff

であることから、赤青黄の度合いが0-255で示す値(16進数二桁表記)なんだろうなってことまでは察しました。すべての色は三原色と言って3つの色で構成されているのですが、パソコン関係の色の設定は基本的にこんな感じでやっていることが多いです。

これならば色は見なくても自分である程度設定できそうですね。ありがたや。

応用も考えたい

ということは、枠の背景に背景色をほんのりつけることもできるはずなんですよね。色付きの背景にするためにはどうしたらいいのかを考えていけばすぐにできそうです。白枠で塗り潰しをやればいいだけなので、簡単にできるはずです。

<div style="background:#fff; padding:10px; border:2px solid #fc4a1a;"> ここに本文を入力します。<br> 直線の囲み枠例です。 </div>

ここも赤文字のとこが背景色で、青文字のとこが枠の色ですね。00がいちばん弱くてFF(1616)が1番最高なので、グレーにしたければccccccあたりがいいでしょうか？

できましたね！
これなら超簡単です！！

今更ですが「border:2px」「padding:10px」これらは何かの大きさを示していると思います。多分前者は枠の太さのことだと思うので、これを0にしたら枠の色を白にしなくてもいいかもしれません。

やってみた結果！！

思った通り「border」は線の太さでしたね。これであれば線の色を変える必要はなさそうです。ついでなのでpaddingを30に変えてみました。

 

paddingを30にした枠ですね。
ここに本文を入力します。
直線の囲み枠例です。

察しのいい人はもうわかったと思いますが、余白の大きさでしょうね。これでもう数字をいじるだけで、枠を自分好みにいじれるようになりましたね。

HTMLの勉強すればいいのか

はてなブログは、基本的にHTML形式のようなのでこちらの勉強すればできることがめちゃくちゃ増えるんじゃないかと思いました。勉強するやり方さえ分かってしまえばこっちのものです。

いやぁこれから何ができるかめちゃくちゃ楽しみですね。小学生のころにホームページ制作が私の友達の中でめちゃくちゃ流行ったのですが、私は結局挫折してしまったのでいい機会だからまた勉強してみようかなと思います。昔、高校生か大学生の頃にC#とかC++を勉強した時はHTMLなんて淘汰されるって思ってましたが今でも健在ですしね。

さいごに

めっちゃ面白い

やり方の仕組みが分かった途端めちゃくちゃ楽しくなりました。はてなブログ、やるじゃないか！！

こんな感じで遊べるのがたくさんあるのがわかるとすごく楽しくなりますね。今後も、ブログの執筆を楽しんでやってきたいと思います。

今回はここまでです。

最後まで読んで頂きありがとうございました。