こんにちは、はやたろうです。
もうご存知の方もいらっしゃるかと思いますが、本日は、私が発見したはてなブログ記事作成の際に役立つツールのご紹介です。また、ご紹介とともに、すぐに保存して使えるタグのご用意もしておりますので、是非最後まで読み進めて頂ければ幸いです。
それでは早速いってみよー。
1.定型文貼り付け
さっそく便利な「定型文貼り付け」機能の使い方から説明していきます。
1.1.「定型文貼り付け」使い方
はてなの記事編集画面右にあるサイドバーから「定型文貼り付け」を選択すると利用できます。
※出ていない方は↑↑上記写真の一番下にある「＋」項目を開き、機能の中にある「定型文貼り付け」をONにしましょう。
「定型文を作成する」ボタンを押すとウインドウが出てきます。
こちらに定型文のタイトルと内容を入力し保存すればショートカットの作成完了です。今回は枠線をためしに作ってみました。
作成完了すると定型文一覧に作った定型文が出てくるので、記事内に貼り付けたい定型文を選択します。
「選択した定型文を張り付け」を押すと記事に簡単に張り付ける事ができます。
↓↓こんな感じ。
非常に簡単でしたよね。
他にもアドセンス広告の差し込みを保存したり、読者登録ボタンを追加しておいたり、HTMLの記述やお決まりの文章など保存する事ができます。
2.すぐに使えるHTLM記述
そんな定型文一覧に保存しておくと便利なHTML記述を、しょこちゅん協力の元、ご紹介していきます。是非コピーして定型文一覧に加えて使って下さい🤗
2-1.文字背景にマーカーを入れる
↓コード
- <span style="background-color: #ffff00;">サンプル</span>
サンプル
2-2.文字を中央寄せにする
↓コード
- <center>テスト</center>
2-3.枠を追加する
●黒枠、背景灰色
↓コード
- <div style="border: 1px solid #b6bab9; padding: 20px; font-size: 1em; background-color: #fafafa;">
- <p>一日ニ玄米四合ト<br />味噌ト少シノ野菜ヲタベ<br />アラユルコトヲ<br />ジブンヲカンジョウニ入レズニ<br />ヨクミキキシワカリ</p>
- </div>
サンプル
一日ニ玄米四合ト
味噌ト少シノ野菜ヲタベ
アラユルコトヲ
ジブンヲカンジョウニ入レズニ
ヨクミキキシワカリ
●点線枠、背景青色
↓コード
- <fieldset style="background: #f8f9ff; padding: 20px 30px; border: 1px dotted #4865b2;">
- <p><strong>箇条書き風</strong></p>
- <p>ソシテワスレズ<br />野原ノ松ノ林ノ<br />第4水準2-86-78)ノ<br />小サナ萓ブキノ小屋ニヰテ<br />東ニ病気ノコドモアレバ</p></fieldset>
●黒枠、背景無し、影付き
↓コード
- <div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 4px 4px 8px #dddddd;">
- <p>影付きシャドウ ここに文字を入れる</p>
- <p>aaaaaaa</p>
- </div>
サンプル 影付きシャドウ ここに文字を入れる
aaaaaaa
●ポイント解説用
↓コード
- <div style="background: #003399; border: 1px solid #003399; padding-left: 15px; font-size: 1.16em; width: 100px;"><span style="color: #ffffff;"><strong>POINT</strong></span></div>
- <div style="border: 1px solid #003399; padding: 10px; font-size: 1em;">
- <p>雨ニモマケズ 風ニモマケズ</p>
- </div>
雨ニモマケズ 風ニモマケズ
2-4.見出しh2タグ
はてなブログだと、「大見出し」を選択しても、見出しタグで適用されるのはh3となります。それをいちいちHTML編集で調整するのもめんどうなので、定型文でさくっと用意しておくと便利。
↓コード
- <h2>テスト</h2>
2-5.ボタンを追加
ボタンのURLはご自身で貼り付ける必要がありますので、ボタンタグを貼った後に、リンクさせたいURLをつないでください。
↓コード
- <center><strong><a rel=" nofollow=" style="background: #ff4f02; padding: 5px 50px; border-radius: 5px; border: 5px; color: #ffffff;" target="_blank">詳細を見る</a></strong></center>
2-6.画像を左側に配置し、文字を回り込ませて表示させる。
↓コード
- <p><img src="任意の画像ＵＲＬ" alt="画像名" align="left" width="200" hspace="10"/
- <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
2020/6/17追記
※画像の周りに余白を入れるようCSSを書き足しました。
※画像を「右側」に配置したい場合は、「align="left"」の部分を「align="right"」に変更してください。
3.その他CSS記述おすすめサイト一覧
CSSの記述サイトなら皆さん当たり前のように使ってるサイトだと思います。この機会に自分で新しいタグを作って、お気に入りのものをどんどん定型文に追加し、記事作成をもっと効率よくスピーディに仕上げましょう。
「ピンク系可愛い」HTML囲み枠まとめ♡はてなブログで使える
4.あとがき
はやたろうはCSSやHTML苦手です。。皆さんはどうですか？
ブログは書きたいけど「もっとこうみせたい！」という欲求が募っていけばいくほど、「自分の実力じゃこれが限界だ…」という壁にぶちあたりますよね。
そんな時、隣をチラッと見ると…
しょこちゅんがすごい形相でズダダダダダとキーボードを打ち込みながらＣＳＳやＨＴＭＬを使って記事を作成しています……こ、こんな奴に勝てるはずがない……一心腐乱にキーボードを打ち込む姿はもはや鬼…（あとで怒られるやつ）
私のようにwebが得意じゃない人でも、こういったツールが用意されてるのは便利だと思い皆さんにもシェアしました。しょこちゅん協力ありがとう。
この記事がちょっとでもイイネ！と思ってくれた方は、是非スターをポチポチッ。読者登録をポチポチッ。ついでにTwitterもポチｐ…
って欲張りすぎ！( 'д'⊂彡☆))д ́) パーン
＼合わせて読みたい／
・【重宝する無料ソフト・サイト】どっとうｐろだ・リサイズ超簡単！Pro。 >
・はてなブログPro専用】記事内「ボタン7種類」公開#002 >
ごほん。。
それでは今日はこの辺で。
本日も最後までご覧いただきありがとうございました！
サラリーマンはや太郎
↓↓ここだおぉ(´・ω・`)↓↓
＼#ブログもTwitterも相互フォローします！／
