HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
ブログ執筆がはかどる*便利なサイト&ツール
旧ブログはこちらから
はてなブログ

【初心者向け】ブログ執筆がはかどる*便利なサイト&ツール&小技

2020/10/02

Blogger はてなブログ ブログ



今日はわたしが普段ブログを書く時に使っている、便利なサイトやツールをご紹介します。


ブログを書く時間を短縮するための、ちょっとした技もご紹介しています。


ブログを始めたばかりの方のお役に立てれば幸いです(*^-^*)



フリー画像素材 pixabay 他

おしゃれな画像が無制限「pixabay」

こう品質なフリー画像素材pixabay
→Pixabay: 1.800万点以上の高品質なフリー画像素材


わたしのブログに使っている写真は、ほぼこのサイトからダウンロードして使っています。(自分で撮った写真以外)


このブログの冒頭にある画像も、この「pixabay」でダウンロードしたものです。


「pixabay」にはおしゃれで素敵な画像がたくさんあり、画像を検索するのも楽しいです。


わたしはスイーツの画像を検索することが多いのですが、検索するキーワードを「お菓子」にしたり「sweets」や「cake」にしたりすることで出てくる画像の数が違います。


海外の写真家さんが多いので、キーワードは英単語で入力した方がたくさん画像が出る印象です。


pixabayを利用するために会員登録は必要なし。回数が無制限に画像検索できるのも魅力です。

*point
  • 会員登録不要
  • 画像検索できる回数が無制限
  • 海外のおしゃれな画像が多数


無料会員登録あり「写真AC」

→写真AC


こちらも無料で高品質な写真がダウンロードできる、人気のサイト。


利用するには会員登録が必要ですが、こちらもおしゃれでキレイな写真がたくさんあります。


人物(日本人)の写真を使うなら、「写真AC」がいいですね。


ただし無料で使うには、検索やダウンロードできる数に制限があります。


わたしは 「pixabay」 でイメージ通りの画像が見つけられなかった時に、「写真AC」を使うことが多いです。


*point
  • 無料会員登録あり(制限付き)
  • ブログに使いやすい人物(日本人)の画像が多数
  • 加工や商用利用もOK



写真ACの姉妹サイト「イラストAC」 

イラストAC


かわいいイラストを使いたいときは、写真ACの姉妹サイト「イラストAC」を使っています。


Twitterのアイコンは、この「イラストAC」でダウンロードしたものを加工して作りました。→わたしのTwitterプロフィールページへ


わたしは自分でかわいいイラストが描けないので、加工OKなフリー素材は本当にありがたいです。


Canva(キャンバ)


無料デザインツール Canva (キャンバ)を使ってブログヘッダー下のアイキャッチ画像を作っています。


先程ご紹介したフリー画像素材で選んだ写真やイラストに、文字や図形を組み合わせると、簡単に素敵なアイキャッチ画像が作れますよ。(Canvaのツール内で画像検索することもできます)


▼Canva の詳しい使い方はこちらで説明しています。



HTMLカラーコード


ブログの中で使う色を指定するために欠かせないのが、HTMLカラーコードです。


この上のリンクは「原色大辞典」ですが、他にも「和色大辞典」「洋色大辞典」「パステルカラー」をよく使っています。


同じピンクでも微妙に違う色がたくさんあって、お気に入りの色を見つけるのも楽しいです♪


ちなみにわたしは和色の「鴇色 ときいろ#f4b3c2)」が、グレーがかったピンクで好みです(*'▽') ちょっと薄いので文字には不向きかな・・・


リンクの文字色との微妙な違い…分かりますか?


このカラーコードは、先程ご紹介した「Canva(キャンバ)」でデザインを作る時や、この後ご紹介する「囲み枠」の色を変えたい時にも使えます。


もともと設定されている色・いくつかの中から選択できる色では、「ちょっとイメージが違うな…」という時は、カラーコードを使って色を指定してみてくださいね。


イメージ通りの色にできるので、大満足な仕上がりになること間違いなしです(*^-^*)


▼ブログの色を変更するカスタマイズ記事も書いています

囲み枠・ブログカード


文字ばかりのブログを、分かりやすく読みやすくするために欠かせないのが、囲み枠ですね。

*囲み枠のメリット
  • 文字ばかりのブログよりも見やすい
  • 目を引くので、言いたいことが伝わりやすい
  • ブログデザインの一部になる(かわいい♡)


上にあるような囲み枠を、HTMLのみで表示するコードをまとめています。


▼コピペで使えますので、よかったらお使いください(*'▽')

▼Bloggerでこのようなブログカードを表示する方法はこちら

ブログ執筆がはかどる小技


最後に、わたしがブログを書く時間を短縮するためにやっている、ちょっとした小技をご紹介します。


ただ「定型文」を作っている…というだけなのですが、わたしが使っている「Blogger」と「はてなブログ」での定型文の作り方をご紹介しようと思います。


ご参考になれば幸いです(*^-^*)

Bloggerで「定型文」を作る

※「Blogger」で定型文を作る方法から説明します。
「はてなブログ」での定型文の作り方はこの後説明します。


まず、Bloggerの「新しい投稿」でブログの型(定型文)を作ります。



わたしの場合は、追記見出し(*3つ+最後に)に加えて、記事の最後に上記のような定型文(はてなブックマーク・Twitterへのリンク等)を入れています。


記事の書き方はひとそれぞれだと思いますが、わたしはこのように型が決まっていると書きやすいです。


ブログを書く時は、まず見出しに書きたい項目を全部入れて、それに肉付けする感じで記事を仕上げています。


それでは次に、この定型文を「新しい投稿」画面を開く度に出てくるように、設定します。


まず、定型文を「HTMLビュー」でコピーします。




次にBloggerの管理画面で「設定」をクリック後、右の画面をスクロールして「投稿テンプレート(省略可)」をクリックします。




クリックして出てきた画面に、先程の定型文(HTMLビューでコピーしたもの)を貼り付けて保存します。


これで「新しい投稿」を開く度に、定型文が入力された状態でブログを書き始めることができます。

はてなブログで「定型文」を作る


はてなブログでの定型文の作り方は、こちらの公式ブログで詳しく解説されています。
 


わたしはこの方法ではなく「下書き」に定型文を作っておいて、その定型文を「コピーして新しい記事を書く」という方法を使っています。




まず、「記事を書く」から定型文を作って下書きにします。(定型文はこれでOK)


そして新しい記事を書く時は、「記事の管理」→「下書き」→「編集▼」→「コピーして新しい記事を書く」の順番にクリック。


これで、毎回定型文から記事を書き始めることができます。


*ご注意*※定型文をコピーせずにそのまま編集してしまうと、また定型文の作り直しになるのでご注意ください。(わたしはよくやります。。。)

わたしのようにコピーするのを忘れそうな方は、定型文のタイトルを「コピー」にしておくといいと思います(*'▽')

さいごに


今日は、わたしがブログを書く時にいつも使っている便利なサイトやツールと、ちょっとした小技をご紹介しました。


ブログを始めたばかりの方のご参考になれば幸いです。


▼日記ブログではこんな記事も書いています♪


最後までお読みいただき、ありがとうございました。
(*^-^*)



このエントリーをはてなブックマークに追加



➥はてなブログへ

QooQ