RECORDS

書評、動画実況、機材、ソフト、動画編集、副業、How to

【はてなブログ】カスタマイズ メモ

f:id:higehigex:20180716202634j:plain
ソースコードの載せ方
●ルビ(ふりがな)の振り方
●タイトル付きの枠囲み






はてなブログでのカスタマイズのメモです。
参考程度にご確認ください。

※今後もどんどん追加していきます。

ソースコードの載せ方

ソースコードを載せる上で、「はてな記法」での載せ方がシンプルで簡単なのでお伝えします。私は普段「Markdown」か「見たまま」を使っていますが、今回はソースコードを載せることが目的なので簡単な「はてな記法」を使っています。
やり方はとても簡単です。

『ワッショイ』を太字にするコードを記述したい場合は、

 >|html|
 <b>ワッショイ</b>
 ||<

のように『>||』と『||<』で囲むだけです。

その際、
①、『>|使用するファイルタイプ(今回の場合はhtml)| 』 を入れる。

②、『>||』と『||<』は改行するなりして、必ず行頭にする

詳しくはこちらのはてな公式ホームページをご確認ください。
ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプ



ルビ(ふりがな)の振り方


湯湯婆ゆたんぽ

<ruby><rb>湯湯婆</rb><rp></rp><rt>ゆたんぽ</rt><rp></rp></ruby>

ちなみに、これを応用すれば

『ここ大事です・・・・!!!』

のような強調にも使えます。




タイトル付きの枠囲み


タイトルあああああああ


<fieldset><legend>タイトル</legend>あああああああ</fieldset>




テキストの右揃え、中央揃え、左揃え(Markdownはてな記法でのhtmlタグ)

右揃え
中央揃え
左揃え

<div style="text-align: right;">右揃え</div>
<div style="text-align: center;">中央揃え</div>
<div style="text-align: left;">左揃え</div>

右:right
中央:center
左:left



画像を中央に配置(はてな記法

<center>
(画像ファイル)
</center>




画像のサイズ変更(はてな記法

画像の後に『w〇〇(数字)』を入力する。
数字が小さければ画像も小さくなります。

[f:id:〇〇:plain:w300]

画像に枠、ふちを つけるcssはてな記法

以下をデザインcssに添付してください。

.entry-content img {
border : 2px solid #BDBDBD ; /* 枠線の太さと色 */
border-radius: 3px; /* 角を丸く */
margin: 3px 6px 15px 0; /* 画像周りの余白 */
}

参考にさせていただきました
スマホでチャレンジ! はてなブログで画像を横並びにする - 雪ん子’s report

スペースを作る(今回やったのはmarkdownです。)

① ああ あああ(半角スペースと同じサイズの空白。)
② ああ あああ(①より少し広い空白。 )
③ ああ あああ(②より少し広い空白。)
④ ああ あああ( ①よりさらに狭い空白。)
⑤   ああ    あああ(①を連続で)
    ⬇︎

&nbsp;ああ&nbsp;あああ
②&ensp;ああ&ensp;あああ
③&emsp;ああ&emsp;あああ
④&thinsp;ああ&thinsp;あああ
⑤&nbsp;&nbsp;&nbsp;ああ&nbsp;&nbsp;&nbsp;&nbsp;あああ


ちなみにそれぞれの意味は?
nbsp:(non(no) breaking(改行しないスペース)sp(スペース)を空ける
ensp:enで「n」の幅だけsp(スペース)を空ける
emsp:emで「m」の幅だけsp(スペース)を空ける
thinsp:thinは「薄い」sp(スペース)を空ける





特殊文字

不等号(より小さい):<
不等号(より大きい):>
右向き二重矢印:»
著作権記号:©
ハートマーク:♥

不等号(より小さい):&lt;
不等号(より大きい):&gt;
右向き二重矢印:&raquo;
著作権記号:&copy;
ハートマーク:&hearts;