Arin Blog

総額1000万の借金をしたギャンブル依存症の夫と離婚し新たなスタート!シングルママで毎日奮闘中!

Arin Blog


【超便利】ワンクリックで記事装飾【はてなブログ】


唐突にブログを始めて1週間が過ぎましたが、毎日たくさんのカスタマイズを記載してくださっているサイトを調べまくりました( ¨̮ )

PCブログ勉強中イメージ画像


ブログは初心者だけど見た目にもある程度こだわりたい...!


cssをさわって変化していくのが楽しいです。テーマもUnderShirtに変更しました。 いろいろ試すのが好きなのでまた変わるかもしれませんがとても見やすいので当分このままいこうと思います。

参考サイトがたくさん


本当にたくさんの参考サイト様があって、助かりました(ありがとうございます)

www.kurasitotonoe.com

こちらもテーマ変更後に大変参考にさせて頂きました。(感謝です!!)


ただ記事を読みやすく囲み枠とかつけたくて、cssを設定しても記事を書いてる途中でタグ(html)の貼り付けが面倒・・・慣れてないのもあるのだろうけど、ワンクリックで呼び出したい。(Markdown編集でやってます。)


どうしても時短したい...


とにかく楽したい(本音)
このコピペのせいで一つ書くのに凄く時間かかる・・・

はてなブログ ワンクリック 装飾 とか色々調べたけどなかなか出てこないんです。。。

「WordPressは出来る」とか出てくる。悲しい。。。

キレイに記事を整えてる人たちは皆どうやってるんだろう・・・と考えて考えて初心者代表が気付きました( ¨̮ )!コレカー!

定型文に登録する

なんで思いつかなかったんだろう。


※あとで「定型文」で調べたら出てきたけどまずここに初心者はすぐに辿り着けない・・・!涙

この定型文機能も、どうも最近追加されたのですね...?

staff.hatenablog.com


私同様いちいちコピペしてる方や(いるのかな・・・)、自分の備忘録として残しておきます。


早速使います


cssとHTMLを参考にさせて頂いたのはこちらのサイト様です

saruwakakun.com

素晴らしい知識がたくさん詰まってます。

こちらのサイトに載っている

この形のボックスを例として

ここにタイトル

ここに文章

上記サイト様よりcssをコピーして、 cssはデザイン→カスタマイズ→デザインcss に貼り付けます。

(このあたりはたくさんのサイト様が説明されてるのでぶっ飛ばします)


次に、HTMLのほうをコピペしたら編集画面の

はてなブログ定型文説明1

+マークで定型文貼り付けをONにすると、常時矢印のところに定型文機能が出るので


作成するを押して

はてなブログ定型文説明2


HTMLを入力し、保存する

はてなブログ定型文説明3


これで登録されたのであとはクリックすれば編集時にすぐ呼び出せる!!

はてなブログ定型文説明4


編集画面では表示されませんがプレビューではきちんと表示されてました。

最初にcssと定型文設定さえしてしまえば次からまさに

「ワンクリック!!」

(正しくはダブルクリックですが)素晴らしい機能ですね!


1週間で気付けて良かったです...( ¨̮ )笑


また、cssなしのHTMLタグのみ(定型文登録のみ)でもいけると思います。 (テーマなどによってはズレるかもしれませんが)


このテーマで出来たものの一例(コピペOK

(コードをコピペで定型文に入れれば即使えます)

カラーコードを自分好みに変更すればさらに使いやすいかと♪( ¨̮ )


点線枠

ここにテキストを入れます


コードを展開

<div style="border-radius: 5px; border: 2px dashed #66cdaa; margin-bottom: 10px;font-size: 90%; padding: 20px;">
ここにテキストを入れます</div>


シンプル背景

ここにテキストを入れます


コードを展開

<div style="background: #f5f5f5; border-left: #f5f5f5 solid 10px; border: #f5f5f5 solid 1px; font-size: 90%; padding: 20px;">
ここにテキストを入れます
</div>



タイトル付き囲み枠

タイトルを入れます
ここにテキストを入れます


コードを展開

<div style=margin:0em ;"><div style="display:inline-block;position:relative;top:4px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#ffffff;background:#ffdab9;font-weight:bold;text-align:center;border-radius:5px 5px 0 0;">タイトルを入れます</div><div style="padding:20px;background:#fff;border:solid 3px #ffdab9;border-radius:0 5px 5px;">ここにテキストを入れます</div></div>


などなど、色々応用できると思うので私もこれからたくさん使用して時短していきたいと思います!


それではまた( ¨̮ )