あ、どうも。先日こちらに引っ越してきたばかりの、カエルと申します。

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

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画像!

4 Comments

YamadaYoko

こんばんわ!
素敵な情報をシェアして頂きありがとうございます!とってもほわっとしました!
参考にして、自分も作ってみます!!

返信する
NUu

>Yoko (id:YamadaYoko)さん へ
こんばんわ!コメントありがとうございます!\(^o^)/
一人よがりのほわっとじゃなかったみたいで良かった!笑
ぜひぜひやってみてくださいー!
作るのも楽しいのでおすすめです(^_-)-☆

返信する
NUu

>kimie (id:kimiesimplelife)さん へ
kimieさん、こちらこそいつもありがとうございます☆
ブログいつも楽しみにしてます!\(^o^)/
(kimieさんができるだけ長く、ブログを続けることが起きますようにー♪頼むよ!全体!!)w
そして2回もコメントしてくれてありがとう。笑
気持ちはじゅうぶんに伝わりました♡笑

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です