cBlog

Tips for you.

【衝撃の事実】はてなブログのプロフィール欄に隠された機能

f:id:cruller:20160114232023j:plain

みんなー、やってるなしか? ブログのカスタマイズ。cruっしーなんか、いじり出すと止まらなくなるなっしー。既存のCSSのスパゲッティさに頭をこねくり回して、やっぱやめたって保存しないで寝ることも多いなしよ。って、そんなことどうでもいいなしな。今日の話題は、なんとサイドバーのプロフィールモジュールでHTMLが使えたってことなっしー! えっ、知ってた…?

 

プロフィールモジュールの「ブログの説明」欄でHTMLが使えるんですよ。そんなことどこにも書いてなくないですか? はてな記法が使えるとは書いてあるけど。

staff.hatenablog.com

 

あんまりプロフィールの見た目を変えている人も見かけないし。

 

とにかく、この機能を使ってHTMLに触れてみようなっしー。

 

 

文字の色を変えてみる

プロフィールモジュールの「ブログの説明」欄に

あの<span style="color: #ff0000;">イーハトーヴォ</span>のすきとおった風

と入力すると、

あのイーハトーヴォのすきとおった風

って文字が赤くなるなしよ。

 

HTMLは、<span></span>のようにタグで囲ったテキストで出来ているなっしー。spanタグ自体には(範囲を指定する以外)特に意味はないけど、style属性と一緒に使うことでスタイルを指定できるなしな。color: #ff0000;は文字通り文字色(前景色)の指定で、#ff0000はカラーコードなっしー。カラーコードは、色を赤、緑、青の順で2桁毎に16進数で表したものなっしー。#ff0000は赤の明るさMAX (ff=255)で、緑と青は0だから赤になるなっしー。

 

いろいろな色とカラーコードの対応は

www.colordic.org

を眺めるといいなっしー。HTMLについて詳しくは、

www.htmq.com

がおすすめなっしー。文字の大きさを変えたり、見出しも付けられるなっしよ。

 

 

リンクを貼ってみる

<a href="http://yaritakunai.hatenablog.com/">できないことはやりたくない</a>

でこのブログへのリンクが貼れるなっしー。

 

 

じゃあ通常の文章はどうなっているのか

普通に入力した文字はpタグで記述され、改行するとbrタグが入り、空行を入れると新たにpタグが始まるみたいなっしー。例えば

あのイーハトーヴォのすきとおった風、

夏でも底に冷たさをもつ青いそら、

 

うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

と入力すると、HTMLソースは

<p>あのイーハトーヴォのすきとおった風、<br />
夏でも底に冷たさをもつ青いそら、</p>
<p>うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>

となるなっしー。

 

 

他には

ソーシャルボタンなどのブログパーツが使えるなしな。画像も貼れたなっしー。idとかclassでCSSも使えたなしよー。HTMLモジュール以外でもサイドバーにHTMLを使える場所があるということは有益な発見だったなっしー。

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん