タメブロ

日々の中で気付いた少し為になること

MENU

【超簡単】見たまま編集で囲み枠や背景グレーを設定する方法(はてなブログ)

はてなブログ囲み枠を使いこなしたい!!でもHTML編集は面倒なので嫌だ!!

わかります。その気持ち

 

なので、今回は『見たまま』編集で、超簡単に編集出来る方法をご紹介します。

ほんとに簡単ですよ。

 

この記事でマスターできること

今回できるようになるのは、以下のデザインです。 

f:id:tkcblog:20190317153241p:plain

 

1.グレー背景

Google Chromeをダウンロード

HTML編集を使わずに囲み枠を使いこなすには、Google Chrome拡張機能を使います。

まだGoogle Chromeをダウンロードしていない方は、こちらからダウンロードして下さいね。

Google Chrome(グーグルクローム)は世界シェア1位のWebブラウザです。

拡張機能をダウンロード

こちらから拡張機能Chrome Add-on for Hatena』をChromeに追加します。 

Google Chromeの右上に、丸で囲まれたペンのマークが現れたら、これで準備完了です。

f:id:UberPartnerJP:20190317125046p:plain

Chrome Add-on for Hatena』は、NO TITLEというブログを運営されている「SHIROMA」さんが作成されたものです。ありがたい!

③使い方

f:id:UberPartnerJP:20190317125356p:plain

↑こんな風に背景をグレーにしたい文字を選択してから、Google Chrome右上の丸ペンマークをクリックし、『背景をグレーにする』ボタンを押すだけです。

f:id:UberPartnerJP:20190317125447p:plain

なお、ほかにも嬉しい機能がついています。
・タイトル大よりもう少し大きなタイトルにしたいときは『h2』ボタン
・今日の日付を入力したい時は『日付』ボタン

2.囲い枠

①準備 

以下のコードをコピーして、デザイン→カスタマイズ→デザインCSSに貼り付けます。

 

p.akakakomi {
border: 2px solid #e869a0;
color: #666;
padding: 10px;
background: #fff2f2;
}

p.aokakomi {
border: 2px solid #afeeee;;
color: #666;
padding: 10px;
background: #e0ffff;
}

 p.の後の『クラス名』を変更したり、#の後の『カラーナンバー』を変更すればどんどんオリジナルのデザイン設定を増やすことができます。
色見本でググってみてください。

 

念のため手順を画像でご説明すると

まず、はてなブログ右上の『ブログ名』をクリック し、『デザイン』をクリック 

 f:id:tkcblog:20190317133918p:plain

 

次に、『カスタマイズ』タブ(スパナのマーク)をクリックし 一番下の『{}デザインCSS』をクリック

 

f:id:tkcblog:20190317134235p:plain

下記のようにコードを貼り付けて、最後に忘れずに『変更を保存』をクリックして完了です。これで今後は超簡単に文字を囲うことができます。

 

f:id:tkcblog:20190317142110p:plain

 

②使い方

囲いたい文字を選択してから、Googl Chromeの『丸ペンマーク』、『クラス名を入力』と書いてある枠に akakakomi 又はaokakomi と記入し、Enter(又はAdd Classをクリック)

f:id:tkcblog:20190317142516p:plain

見たまま編集モードだと反映されていませんが、『プレビュー』モードでみると囲まれているはずです。

③『改行』と『改段落』の違いに注意

この拡張は、箇条書きが崩れてしまいますので、その場合は改行する必要があります。

『改行』は Shift + Enter です。
単なるEnterだと『改段落』となってしまい、囲い枠からはずれてしますのでご注意ください。

④元に戻したいとき

該当箇所を選択してから『書式の初期化ボタン』を押せば戻ります。

f:id:tkcblog:20190317144757p:plain

開発者様によると、稀に見出しを『普通のテキスト』に初期化してもうまく反映されないことがあるようですが、そんな時は、一度「HTML編集」にして再度「見たままモード」に戻すと反映されるとのことです。 

スマホで囲み枠ができない時は

デザイン ⇒ スマホマークのタブ(スパナの右) ⇒ 詳細設定 

『レスポンシブデザイン』に✔を入れるだけでスマホにも対応できます。

3.画像やテキストの中央寄せ(中央揃え)、右寄せ(右揃え)

もうお分かりかと思いますが、テキストや画像を選択して、中央揃えボタンと右揃えボタンを押すだけです。(この文章は、目次の下の「中央揃え」ボタンを押しました)

f:id:tkcblog:20190317151632p:plain

 

以上です。 

だんだんブログっぽくなってきました。

「SHIROMA」様、大変助かっています。ありがとうございました。

↓☆ください^^