気楽に生こう

そのとき、そのときの、楽しいことを

サイドバーに画像を設置して、訪問者さんへ感謝を伝えよう!【ブログカスタマイズ】

f:id:NUu:20170323202251j:plain

こんにちは!カエル(@_kaelu)です!\(^~^)/ゲロゲロ ♪

 

このブログのサイドバーに、上の画像を設置してみました☆

(自分のブログを見てくれた方々へ、感謝の気持ちを伝えたいな~と思いまして!)

 

今日はそんな画像の作り方、そして

その設置方法をご紹介します!(´∀`)b

 

見た人の心をあたためる素敵なカスタマイズだと思うので、気になる人はこの記事を読んでみてね☆

 

目次

 

閃きは突然に☆

晩ごはんを食べて何気なくスマホで自分のブログを見ている時に、それはやってきました…!!

 

(僕のブログの最下部画面)

f:id:NUu:20170323210629j:plain

(ここのスペースがなんか無性に気になりました…)

 

そして『ひとり脳内サミット』が急遽、開催されました! 

『このスペースがなんか気になる…』

       ↓

『間を詰めるか、ここに何か入れようかな?』

       ↓

『でもなぁ、ほとんどの人はこんな一番下までは普通見らんよなぁ…』

       ↓ 

『だけどもしかしたら、ここまで見てくれる人がいるかも…!!』

       ↓

『(!)そ、そんな人たちを、どうにかして喜ばしたくなってきたぞ!!』

       ↓ 

『そうだ!わざわざ見て頂いた人のためにここは、感謝の気持ちを伝える場所にしよう!!』(それ+にやっとしてもらいたい)♪

 

ってことで、

 

僕のブログの最下部には現在、

こんな画像が表示されています(´∀`)v

 

(スマホ画面)

f:id:NUu:20170324152759j:plain

(笑!なんか可愛くない!!?)笑

 

ちなみにPC画面だとこんなかんじ!

f:id:NUu:20170323211945j:plain

(サイドバーの一番下に表示されています)

 

見てくれた人の心を少しでもホワっとさせたくて、設置してみました!w

 

こういうのってなんか、心がほわっとするよね!

 

読んでるあなたの心も、今ほわっとしたよね!?

 

ほわっとしたよね?

 

したでしょ?

 

そうでしょ!?

 

でしょでしょ!(  ̄ー ̄)w

 

はい!ということで

 

みんな心がほわっとしたということで、(半ば強引に)w 

需要は全くないかもしれませんが、w

 

今回僕がサイドバーに設置した、

このカスタマイズのやり方を説明していこうと思います!

(バナー画像っていうのかな?)

 

『私もそれやってみたい!!』って人は、ぜひぜひ真似してみてね!☆

 

サイドバーにこんな画像を設置します

f:id:NUu:20170324145544j:plain

『ありがとうの言葉』だけでも、充分いいね!☆

(もし、この画像を使いたい人がいたら、そのまま使ってもOKだぞ☆)

 

そしてここから更にこうすると、

個性が出て、もっと良くなるんです!(´∀`)b

 

ありがとうの言葉 +

自分のブログのプロフィール画像です!

f:id:NUu:20170323202251j:plain

(そのブログの運営者さんが伝えてる感が出て、よりGOOD!)

 

それではさっそく、

そんな画像の作り方を説明していきます!

(文字のフォントも好きなように変えれるからねー☆)

 

ありがとうの画像の作り方

まずは背景となる画像を用意

シンプルな無地の画像だったら、このサイトで簡単に作れるよ☆

背景画像作成:無料【画像加工サイト】もじまる - MOJIMARU.COM

 

このサイトに行ったら、

 

【好きな背景の色を選ぶ】 → 【横と縦のサイズを決める】 → 【画像形式を選んで】 → 【作成する】を押してください

f:id:NUu:20170324164138j:plain

(ちなみに僕は、横サイズは600px、縦サイズは300px、画像形式はjpegにしたよ!)

 

次の画面に切り替わって、背景画像が完成しているので

f:id:NUu:20170324164844j:plain

その画像の上で右クリックをして【名前を付けて画像を保存】してください

 

これで背景画像の準備ができました!

f:id:NUu:20170324191644j:plain

(^^)q ヨシ!

 

(※『自分の好きな、使いたい背景用の画像がもうある!』って人はそれを使ってね☆)

 

さあ次は、その背景画像に

文字入れをしていきましょう!(^_-)-☆

 

メッセージだけ ver.

まずはお先に、『ありがとうの文字』だけバージョンの画像の作り方から!

 

このサイトに行って、

画像文字入れ | 画像加工編集サイト・フリーソフト:無料写真加工ならバナー工房

 

さきほど作成した無地の背景画像(or 自分で用意した画像)をアップロードします 

f:id:NUu:20170324164435j:plain

【ファイルを選択】→【アップロード後の横幅(600px)】→【画像を加工する】を押してください

 

次の画面に切り替わるので、

 

【ココに文字を入れる】のところに、好きなメッセージを入れてください(^^)b

f:id:NUu:20170324165948j:plain

(※最初から表示されているこの文字を消してから入力してね!→【手順①文字設定を変更→②画像上のテキストをドラッグ→③場所を確定】

 

入力したら、

 

【STEP① 文字設定を変更】のボタンを押してみてください

f:id:NUu:20170324172109j:plain

( ↑ の緑のボタンね!)

 

するとアップロードした背景画像に、入力した文字が表示されます

f:id:NUu:20170324172125j:plain

 

このままでは文字のサイズが小さいので、大きくしましょう!

f:id:NUu:20170324172134j:plain

(画面下部にある文字設定で、色々と変更できます。好きなように設定してみてね!)

 

変更したら再び、

【STEP① 文字設定を変更】のボタンを押します

 

文字サイズが大きくなりました!(´∀`)v

f:id:NUu:20170324172151j:plain

 

次に位置の調整です

 

テキスト部分はマウスでつかめるようになっているので、ドラッグして好きな位置に移動させます

f:id:NUu:20170324193151j:plain

 

位置が決まったら、

 

【STEP③ 現在の文字の場所を確定】のボタンを押してください

f:id:NUu:20170324172400j:plain

 

そして、画面右上にある

【ダウンロードボタン】を押すと…

 

f:id:NUu:20170324172406j:plain

 

ありがとうのメッセージが入った、シンプルな画像の完成です!

f:id:NUu:20170324172414j:plain

やったね!☆

 

メッセージ+プロフィール画像 ver.

次に、上のようなメッセージ画像に、あなたのプロフィール画像も加えるやり方!

 

このページに行きます

貼り付け:無料【画像加工サイト】もじまる

 

先に言っておくと、手順はこの4つです!

f:id:NUu:20170324193852j:plain

(簡単なのでご安心を♡)

 

まずは、先ほど作成した無地の背景画像(or 自分で用意した画像)を

f:id:NUu:20170324191644j:plain

 

【ファイルを選択】から選んで【画像をアップロード】!

f:id:NUu:20170324193949j:plain

 

アップロードしました!

f:id:NUu:20170324194215j:plain

 

次に、画面を少し下にスクロールすると、

【2.貼り付ける画像をアップロード】の箇所があるので

f:id:NUu:20170324194414j:plain

 

あなたのブログの、プロフィール画像をアップロードしてください(^^)b

 

アップロード~!

f:id:NUu:20170324202817j:plain

どん!!

 

このままだと、プロフィール画像のサイズが大きすぎるので 

 

プロフィール画像の右下部分をマウスでつかんで、サイズの調整をします

f:id:NUu:20170324203148j:plain

 

そしたら今度は、位置の調整です!

 

画像自体もつかめるようになっているので、

お好きな位置にドラッグ&ドロップで移動させましょう♪

f:id:NUu:20170324203448j:plain

 

位置が決まったら、【貼り付け】をクリック!

 

f:id:NUu:20170324203558j:plain

 

これで背景画像に、プロフィール画像が貼り付いたので

画像を保存しましょう!

 

右クリックからの【名前を付けて画像を保存】、

f:id:NUu:20170324203519j:plain

 

もしくは、 

画像下にある【ダウンロード】ボタンを押してね!☆ 

f:id:NUu:20170324203609j:plain

 

新たに(プロフィール画像付きの)背景画像ができあがりました!! 

f:id:NUu:20170324203617j:plain

ヤッピー\(^o^)/

 

そしたら再びこのサイトに行って…

画像文字入れ | 画像加工編集サイト・フリーソフト:無料写真加工ならバナー工房

 

【ファイルを選択】で上の画像を選んで、

【アップロード後の横幅を(600px)】、【画像を加工する】を押すと

f:id:NUu:20170324203635j:plain

 

こうなるので、

f:id:NUu:20170324203643j:plain

お好きなメッセージを入れてください☆

 

これにて完成です!!

f:id:NUu:20170324203709j:plain

(プロフィール画像の背景色と、無地の画像の色を合わせると、もっといい感じになるよー☆それかプロフィール画像の形式をPNGにして背景部分を透過させるか)

 

文字のフォントは色々あるよ

書体のデザインサンプルとして、いくつか載せておきます 

 

これから作成に取り組むであろう、あなたのイメージの参考にしてね!(^_-)-☆

(え!? 作るよね!?やるよね!?やってみるよね!?)w

 

ヤラナイノー(;´Д`)??

 

(笑)

 

【モトヤLマルベリ3等幅(角丸ゴシック)】

f:id:NUu:20170324203953j:plain

最初から設定されている、標準のやつです

 

【IPA Pゴシック】

f:id:NUu:20170324204031j:plain

しっかりした感じになりました

 

【IPA P明朝】

f:id:NUu:20170324204058j:plain

丁寧な感じになりましたね

 

【MigMix 1P:太字(角丸ゴシック)】

f:id:NUu:20170324204130j:plain

太字でかわいい感じ!

 

【おひさまフォント(手書き風)】

f:id:NUu:20170324204258j:plain

女の子っぽい字だね!

 

【あくあフォント(手書き風)】

f:id:NUu:20170324204314j:plain

ゆるかわな感じ!

 

【Sucharaka(手書き風)】

f:id:NUu:20170324204328j:plain

個性的な感じ!

 

【モフ字(手書き風)】

f:id:NUu:20170324204339j:plain

詩人さんが書きそうな文字!

 

【ダサ字(手書き風)】

f:id:NUu:20170324204358j:plain

僕が使ってるやつはこれです!ダ、ダサくねぇし!笑 

 

サイドバーに画像を設置する方法

設置方法は、WEPLI.2 (id:SikisimaHisayuki)さんのこの記事がとても分かりやすいです!

wepli-dot2.hatenablog.com

 

サイドバーに画像を貼るのは、今回僕がやった『ありがとう画像』の他にも

 

アイデア次第で色んな使い方ができそうですね!!

 

ちなみに僕のブログでは、この『ありがとう画像』の部分をクリックすると

f:id:NUu:20170324225638j:plain

 

このページに行くように設定してあります!☆

f:id:NUu:20170325131633j:plain

フッフッフ!(´∀`)w

 

「もしかしたら、心ほわっとした流れで、ついつい読者登録してしまう人がいるんじゃないかな!」と思いましてね!!ゲスイ

 

フッフッフ~!(´∀`)w

 

(大体いつもこんなかんじの記事を、誰かの役に立つ(と思っているw)記事を書いているので)

 

よかったら登録してねん!(´∀`)w 

 

まとめ

ブログのサイドバーに『ありがとうの画像』を設置してみた!

いかがだったでしょうか!?

 

自分のことを覚えてもらいやすくなる!

『ありがとう』の気持ちを伝えられる!

そして、訪問者さんの心も暖かくなる!と、

 

良いことづくしの、人間味あふれるGOODカスタマイズだと思います!(´∀`)b

 

ブログに暖かみが出て、画面の向こうにはちゃんと人が居る感が出て良いんじゃないかなーと思いました\(^o^)/

 

やってみようかなーと思った人はぜひ!真似してみてねん!☆

(ダサくて誰も真似しないかな??)w

 

って、ダサくねぇし!!笑

 

(ちなみにSNSプロフィール画像のおすすめの作り方も書いてるので、よかったらこっちも見てね☆) 

→ 【ミニドット絵メーカー】でオリジナルのSNSプロフィール画像を作ろう!

 

またなんか面白いことを見つけたらブログに書きまーす!\(^o^)/!

 

それじゃあ、

またねん!(´∀`)ノ"

 

(閃いた!こんな使い方もできる!!)w

f:id:NUu:20170324214328j:plain

 

この記事の続編です☆

→ ブログを読んでくれた方へ、感謝を伝える様々な方法。僕の場合はGIF画像!