アラフィフランド

アラフィフの日々は色々忙しい。皆さんのお知恵拝借して楽しく暮らしてます。

【ブログカスタマイズ】NO TITLEさんのはてなブログ編集用のChrome拡張機能を使ってみたよ♪♪

f:id:junpekun:20180814143013j:plain

インストールだけしてあまり活用していなかった

NO TITLEさんのはてなブログ編集用のChrome拡張機能の

機能をやっと数日前から使ってみることにしました。

編集は見たまま編集です。

 

www.notitle-weblog.com

インストールしたらパソコン右上の丸いアイコンをクリック

すると四角い小さな画面がポップアップされます。

f:id:junpekun:20180820202522p:plain

今回はピンクの枠の作り方をやります。

こちらのコードをコピペして

p.my_style {
border: 1px solid #e869a0;
color: #666;
padding: 10px;
}

デザイン⇒カスタマイズ(スパナのアイコン)⇒デザインCSS

このデザインCSSに貼り付けます。

 

暑さもやわらいだね~←囲みたい文字をマウスでなぞる

f:id:junpekun:20180820204127p:plain

my_styleと打ち込みます⇒Add Classをクリック

プレビューで見てみると‥

暑さもやわらいだね~

おお!!ピンクの枠が簡単に出来ました。

改行するときに注意が必要だそうです。

改行する時は枠を作ってからShift+Enterで改行します。

こちらの文章の改行をします。

歯磨き洗顔、帰宅したら手を洗う、はずした腕時計をいつもの場所に置く。どれも、何の気なしにやっている、まったく労力の要らない行動のはずです。いくつもの小さな生活習慣が束になって、自分という人間を形づくっています。

正しく改行出来ると

歯磨き洗顔、
帰宅したら手を洗う、
はずした腕時計をいつもの場所に置く。
どれも、何の気なしにやっている、
まったく労力の要らない行動のはずです。
いくつもの小さな生活習慣が束になって、
自分という人間を形づくっています。

とちゃんと改行出来ています。

Shift+EnterにしないでいつものようにEnterだけで改行すると

 歯磨き洗顔、

帰宅したら手を洗う、

はずした腕時計をいつもの場所に置く。

どれも、何の気なしにやっている、

まったく労力の要らない行動のはずです。

いくつもの小さな生活習慣が束になって、

自分という人間を形づくっています。

こんな感じに一行づつ枠で囲まれてしまいます(笑)

 やってみると簡単だったよ~

簡単になるように作られたんでしょ!?

 

感想

インストールした時はNo Titleさんのところで説明を読んでもさっぱりわからなかったです。ブログをあちこちカスタマイズするうちにやっとわかってきました。デザインCSSに仕込んでおいて変えたい文字を選んだら拡張機能で実行するんですね。

やるまえはやりもしないで頭で考えてわからんってなってました💦