MENU

はてなブログ用のGoogle Chrome拡張機能が便利すぎ!


おすすめ記事pick up!



スポンサードリンク


  • f:id:shibaccho:20170919235739j:plain
ばっちょ
ばっちょ

どーも、最近あらゆる物事の効率化を考えている、ばっちょ(@BACHO_malti)です。

今回の記事は「Google chrome」を使っている「はてなブロガー」の人は絶対読んで損しません!

 

まず以下の記事、はてなブロガーさんでまだ読んでない人は今すぐ!今すぐに!読みましょう!2、3分で読めます!

➡︎はてなブログ編集用のChrome拡張機能を作りました(使い方の説明) - NO TITLE

 

そして今回は、この上の記事で紹介されている「chrome拡張機能」をもう少し噛み砕いて、初心者さんでも簡単にわかるように説明していきます! 

使い方はめちゃくちゃ簡単なので、絶対に使うことをおすすめしておきます! !!!!!!

今すぐ使いたい人は、即以下のリンクから「chrome拡張」してしまいましょう。

➡︎Chrome Add-on for Hatena - Chrome ウェブストア

 

はてなブログの記事編集機能

f:id:shibaccho:20170919234123p:plain

はてなの記事編集機能は、記事を書く時に左上に出てくる、上画像のようなボタンたちしかありませんよね。

冒頭で紹介していた「chrome拡張機能」を導入すれば、他の機能を追加できるようになります!

追加できる機能は︎「はてなブログ編集用のChrome拡張機能を作りました(使い方の説明) - NO TITLE」この記事に載っているので、なんども言いますが絶対に読んでください(笑)

 

以下では、機能を2つだけ紹介したいと思います。特に2つ目に紹介する機能が、初心者さんにはわかりにくいと思ったので、具体的に説明しました。

 

「背景をグレーにする」

まずは、ホップアップ内にある機能の一つ「背景をグレーにする」というボタンを試してみますね。

 

f:id:shibaccho:20170919231814j:plain

まずは、背景をグレーにしたいテキストを「見たまま編集」のまま範囲指定して、「背景をグレーにする」ボタンを押すだけ!

超簡単ですよね!?!?!?

 

↓↓↓こんな感じになります。

しばっちょしばっちょしばっちょしばっちょしばっちょしばっちょしばっちょ

この機能かなり便利や。 

いや、もっと早く知りたかった。

 (笑)(笑)(笑)

ふぉおおおおおー!!!

 

「pタグにクラスの付与」って何?

おそらく、ブログ初心者の方にはこの「pタグにクラスの付与」という意味がわかりにくいかもしれないので、噛み砕いて説明していきますね!

そもそも「pタグ」の「p」は「paragraph」の略で、「段落」を意味しています。

だから、はてなブログの見たまま編集で文章を書いていると、HTML編集に切り替えた際に全ての文が<p></p>で挟まれているのがわかると思います。

これが「pタグ」ですね。

f:id:shibaccho:20170919230928j:plain

一応初心者さんのために、「見たまま編集」「HTML編集」というのは、この上の画像のところで切り替えられますね。

そして次に「クラスを付与する」とありますが、これは指定した範囲・部分に装飾を施すという感じですね。

ばっちょ
ばっちょ

つまり「pタグにクラスを付与」というのは、<p></p>で囲まれたその段落のデザインを変えてしまおう!ということですね。

 

「pタグにクラスを付与」の使用例

ぼくの場合は、文章を黄色の枠で囲みたかったんですよね。(以下のように)

”この文書を黄色い枠で囲いたい時には”

枠で囲いたい上の文章を選択して、拡張したchrome機能の「クラスを入力」という欄に「yellow」と入力して「Add Class」を押せば、上のようなデザインになるように設定しました。

(※このyellowという文字列は自分で他の文字列に変えれます。覚えやすい文字列にしましょう。)

これが、はてなの「見たまま編集」のままで出来るから便利なんですよね。本来ならHTML編集で少しイジらないといけませんが、その手間がグッと省けますよ!

 

そして以下コードを「デザイン」→「カスタマイズ」→「デザインCSS」にコピペすると、ぼくが使っているような黄色の枠になります!

p.yellow {
padding: 14px;
background: #fffaf0;  /*背景色*/
}

先ほど上で入力した「yellow」という文字は、このデザインCSSに入力してある「yellow」と対応しているわけですね!

 

例えば、このCSSに入力する「yellow」を「abcde」に変えたのであれば、chromeの機能にも「abcde」と入力しなければならないということです。

まあ、文字列は設定した背景色に合わせるのが無難な気がします。あなたのお好きなように!

背景色を変えたい場合は、以下サイトから好きな色を選んで試して見てくださいね。

 ➡︎WEB色見本 原色大辞典 - HTMLカラーコード

 

おわりに

こういう機能は本当にありがたいですね〜!!!

作業効率を上げるためにも、初心者さんこそこういった便利機能をうまく有効活用していくべきだと思います!

こういうカスタマイズの記事を投稿してくれる方のサイトは、ブックマークなり「feedly」に登録するなりして、すぐに最新情報にアクセスできるようにしておく事をおすすめします!

関連記事