Web
Analytics

花太郎BLOG

夫婦で始めた日々のblog日記。色々な事を発信していきます♪

花太郎BLOG4

 NEW! PICKUP
● 夏!『2カ月で8キロ減量』ダイエット録
●『本当に美味しい』テイクアウト、その他グルメレビューをお届け♪
●『LINEおばさん絵文字』注※スタンプじゃなくて絵文字です

【はてなブログ便利機能】web関係の装飾が苦手な人全員一列に並べー!!

こんにちは、はやたろうです。

もうご存知の方もいらっしゃるかと思いますが、本日は、私が発見したはてなブログ記事作成の際に役立つツールのご紹介です。また、ご紹介とともに、すぐに保存して使えるタグのご用意もしておりますので、是非最後まで読み進めて頂ければ幸いです。

 

それでは早速いってみよー。

 

 

 

1.定型文貼り付け

【はてなブログ便利機能】web関係の装飾が苦手な人全員一列に並べー!!
さっそく便利な「定型文貼り付け」機能の使い方から説明していきます。

 

1.1.「定型文貼り付け」使い方

はてなの記事編集画面右にあるサイドバーから「定型文貼り付け」を選択すると利用できます。

 

はてな 定型文貼り付け


※出ていない方は↑↑上記写真の一番下にある「+」項目を開き、機能の中にある「定型文貼り付け」をONにしましょう。

 
はてな 定型文貼り付け ONにする


「定型文を作成する」ボタンを押すとウインドウが出てきます。
はてな 定型文貼り付け 入力


こちらに定型文のタイトルと内容を入力し保存すればショートカットの作成完了です。今回は枠線をためしに作ってみました。
はてな 定型文貼り付け 例
 
作成完了すると定型文一覧に作った定型文が出てくるので、記事内に貼り付けたい定型文を選択します。
はてな 定型文貼り付け 一覧
 
「選択した定型文を張り付け」を押すと記事に簡単に張り付ける事ができます。
はてな 定型文貼り付け 貼り付け
 
 ↓↓こんな感じ。
はてな 定型文貼り付け 結果
 

非常に簡単でしたよね。

他にもアドセンス広告の差し込みを保存したり、読者登録ボタンを追加しておいたり、HTMLの記述お決まりの文章など保存する事ができます。

 

 

 

2.すぐに使えるHTLM記述

そんな定型文一覧に保存しておくと便利なHTML記述を、しょこちゅん協力の元、ご紹介していきます。是非コピーして定型文一覧に加えて使って下さい🤗

 

2-1.文字背景にマーカーを入れる

↓コード

  1. <span style="background-color: #ffff00;">サンプル</span>

 

サンプル

 

2-2.文字を中央寄せにする

↓コード

  1. <center>テスト</center>

 

サンプル

2-3.枠を追加する

●黒枠、背景灰色

↓コード

  1. <div style="border: 1px solid #b6bab9; padding: 20px; font-size: 1em; background-color: #fafafa;">
  2. <p>一日ニ玄米四合ト<br />味噌ト少シノ野菜ヲタベ<br />アラユルコトヲ<br />ジブンヲカンジョウニ入レズニ<br />ヨクミキキシワカリ</p>
  3. </div>

 

サンプル

一日ニ玄米四合ト
味噌ト少シノ野菜ヲタベ
アラユルコトヲ
ジブンヲカンジョウニ入レズニ
ヨクミキキシワカリ

 

 

●点線枠、背景青色

↓コード

  1. <fieldset style="background: #f8f9ff; padding: 20px 30px; border: 1px dotted #4865b2;">
  2. <p><strong>箇条書き風</strong></p>
  3. <p>ソシテワスレズ<br />野原ノ松ノ林ノ<br />第4水準2-86-78)ノ<br />小サナ萓ブキノ小屋ニヰテ<br />東ニ病気ノコドモアレバ</p></fieldset>

 

サンプル

ソシテワスレズ
野原ノ松ノ林ノ
第4水準2-86-78)ノ
小サナ萓ブキノ小屋ニヰテ
 東ニ病気ノコドモアレバ

 

 

●黒枠、背景無し、影付き

↓コード

  1. <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;">
  2. <p>影付きシャドウ  ここに文字を入れる</p>
  3. <p>aaaaaaa</p>
  4. </div>

 

サンプル 影付きシャドウ  ここに文字を入れる

aaaaaaa

 

 

●ポイント解説用

↓コード

  1. <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>
  2. <div style="border: 1px solid #003399; padding: 10px; font-size: 1em;">
  3. <p>雨ニモマケズ 風ニモマケズ</p>
  4. </div>

 

サンプル

雨ニモマケズ 風ニモマケズ 

 

 

 

2-4.見出しh2タグ

はてなブログだと、「大見出し」を選択しても、見出しタグで適用されるのはh3となります。それをいちいちHTML編集で調整するのもめんどうなので、定型文でさくっと用意しておくと便利。

↓コード

  1. <h2>テスト</h2>

 

2-5.ボタンを追加

ボタンのURLはご自身で貼り付ける必要がありますので、ボタンタグを貼った後に、リンクさせたいURLをつないでください。

↓コード

  1. <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.画像を左側に配置し、文字を回り込ませて表示させる。

↓コード

  1. <p><img src="任意の画像URL" alt="画像名" align="left" width="200" hspace="10"/
  2. <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>

 

サンプル

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

 

2020/6/17追記

※画像の周りに余白を入れるようCSSを書き足しました。

※画像を「右側」に配置したい場合は、「align="left"」の部分を「align="right"」に変更してください。

 

3.その他CSS記述おすすめサイト一覧

CSSの記述サイトなら皆さん当たり前のように使ってるサイトだと思います。この機会に自分で新しいタグを作って、お気に入りのものをどんどん定型文に追加し、記事作成をもっと効率よくスピーディに仕上げましょう。

 

サルワカ

【CSS】(囲み枠)のサンプル30

 

すまてくブログ

はてなブログで使える「アレンジ囲み枠」13選

 

ぶー子@北海道

「ピンク系可愛い」HTML囲み枠まとめ♡はてなブログで使える

 

ZENO-TEAL

はてなブログで使える「アイコンフォント」一覧

 

 

4.あとがき

はやたろうはCSSやHTML苦手です。。皆さんはどうですか?

ブログは書きたいけど「もっとこうみせたい!」という欲求が募っていけばいくほど、「自分の実力じゃこれが限界だ…」という壁にぶちあたりますよね。

 

そんな時、隣をチラッと見ると…

しょこちゅんがすごい形相でズダダダダダとキーボードを打ち込みながらCSSやHTMLを使って記事を作成しています……こ、こんな奴に勝てるはずがない……一心腐乱にキーボードを打ち込む姿はもはや鬼…(あとで怒られるやつ)

 

私のようにwebが得意じゃない人でも、こういったツールが用意されてるのは便利だと思い皆さんにもシェアしました。しょこちゅん協力ありがとう。

 

この記事がちょっとでもイイネ!と思ってくれた方は、是非スターをポチポチッ。読者登録をポチポチッ。ついでにTwitterもポチp…

 

って欲張りすぎ!( 'д'⊂彡☆))д ́) パーン

 

\合わせて読みたい/

・【重宝する無料ソフト・サイト】どっとうpろだ・リサイズ超簡単!Pro。 >

・はてなブログPro専用】記事内「ボタン7種類」公開#002 >

 

 

ごほん。。

それでは今日はこの辺で。

本日も最後までご覧いただきありがとうございました!

f:id:shokochun:20191104121907p:plainサラリーマンはや太郎f:id:shokochun:20191104121907p:plain

 

 

少しでも興味を持っていただいた方は、こちらの応援ボタンもポチッとお願いします。

↓↓ここだおぉ(´・ω・`)↓↓

ブログランキング・にほんブログ村へ 

 

\#ブログもTwitterも相互フォローします!/

花太郎BLOG_Twitter  

プライバシーポリシー  お問い合わせ

©2019.花太郎BLOG.All rights reserved