ゆるりまあるく

~ システム管理者で主婦の私の暮らしの工夫 ~

Jtrimを使ったバナーの作り方。サイドバーの改善。簡単ブログカスタマイズ。

このブログのサイドバーにバナー(ボタン)を付けました。長年愛用しているフリーの画像加工ソフトJtimを使って作成する方法をご紹介します。

 

その他、サイドバーのカスタマイズについてもご紹介します。

 

 

▼Jtrimの記事(Jtrimの使い方についてはこちらの記事をご参照ください)

www.yururimaaruku.com

 

バナーの作成

写真の取り込み

1.気に入った写真を用意する。

2.Jtrimを起動する。

3.Jtrimへドラッグ

f:id:yururimaaruku:20160530205312p:plain

 

見やすい大きさにリサイズ

f:id:yururimaaruku:20160530205237p:plain

取り込んだ時点で見やすいサイズになればいいのですが、大きい画像の事が多いと思います。いずれにしてもバナーだとそれほど大きな画像は使えませんので、見やすくなる程度に小さくしましょう。あまり小さくしすぎても作業がしにくいので、画像全体が見える程度がほどほどでいいと思います。

 

メニューバーのイメージ→リサイズをクリック。

f:id:yururimaaruku:20160530200723p:plain

サイズでも比率でもやりやすい方で指定します。

私はあまり考えず比率で50とか入れます。元に戻すボタンで様子を見ながら扱いやすい大きさまで縮小します。

今回私の使った写真は高解像度だったので10でちょうど良かったです。

f:id:yururimaaruku:20160530205330p:plain

 

ここからはおおざっぱですよ。

ウェブデザインされている方に叱られそうです。すみません。

 

バナーにしたい部分を切り抜きます

バナーにしたい部分をくりぬくために、左上から右下へドラッグして枠を表示させます。

f:id:yururimaaruku:20160530201240p:plain

 

イメージ→切り抜きをクリックします。

f:id:yururimaaruku:20160530205355p:plain

切り抜けました。

f:id:yururimaaruku:20160530205410p:plain

 

文字を入れます

ツールバーの「A」のマーク「文字入れ」をクリックします。

開いたウィンドウで文字を入力します。

 

今回やったのは以下の設定です。

文字色→白 フォント→メイリオ サイズ→30 スタイル→B(太字)透過・・

不透明度を低くすると下の画像を透かして見せることもできます。

 

ここで注意

場所を確定するまで「OK」をクリックしないこと!

 

f:id:yururimaaruku:20160530201905p:plain

 

OKを押す前に文字の上にマウスポインターを移動してください。

すると手のマークに変わります。そこで好きな位置へドラッグします。

ここで初めてOKをクリックします。

 

いったん確定すると文字やデザイン、位置の修正はできません。

・・・といっても「元に戻す」ボタンで戻れますが・・。

気楽に気楽に。

 

▼ 文字を下に移動しました。

f:id:yururimaaruku:20160530202505p:plain

 

バナーのサイズに整えます

先ほどトリミングした時のようにドラッグして画像を囲みます。

右下から左上がやりやすいです。

f:id:yururimaaruku:20160530203001p:plain

 

メニューバーのイメージ→リサイズ をクリックします。

f:id:yururimaaruku:20160530203157p:plain

「サイズで指定する」の横幅にピクセル数を入力します。

サイズは設置されるブログの幅によって異なるかと思います。

私のブログでは横350にしました。

f:id:yururimaaruku:20160530203618j:plain

 

出来上がった画像を名前を付けて保存します。

元の画像とは違う名前を付けてくださいね。上書きされてしまいますので。

 

 

<スポンサーサイト>

 

 

 

※ はてなブログの例です。

ここからははてなブログの方向けです。

画像をアップロード

編集見たままモードで書いている方は、「記事を書く」をクリックして、保存した画像ファイルを文字入力欄にドラッグして画像をいったんアップロードします。

 

画像の貼り付け

次に「html編集」に切り替えます

 

このようなコードが書いてあります。

 

例)※コードはそれぞれ違います。

   <img~ />のところをそのまま使います。

f:id:yururimaaruku:20160530210932p:plain

 

これを

1.<p>を<a href="表示させたい記事のURL">に変更。

2.</p>を</a>に変更します。

 

そして全体をコピーします。

 

デザイン→カスタマイズ→サイドバー→モジュールの追加→HTMLをクリックします。

f:id:yururimaaruku:20160530204657p:plain

 

タイトルをつけて、下の枠に先ほど作ったコードを貼り付けます。

 

以上です。

 

説明すると長くなってしまいましたが、操作はそれほど難しくはありません。

ご興味ある方は良かったら参考にしてみてください。

 

もっと本格的な作り方は色々あると思いますが

簡易な方法ということでご容赦ください。 

 

その他 サイドバーの改善

「よく読まれている記事」の画像表示 

コメントにて質問いただきましたサイドバーのよく読まれている記事に画像を入れる設定。このようにしています。

ブログデザイン→カスタマイズ→注目記事のところで以下のように入力して適用をクリックします。

 

 f:id:yururimaaruku:20160331074956j:image

 

 

Feedly購読のリンク

クリックで購読できるボタンを付けました。feedlyのサイトでコードを作成して、自分のブログのデザイン設定→カスタマイズ→サイドバーにてHTMLのパーツを作ります。

ちょっと躊躇したのが、自分のブログのURLを貼り付ける時。URLそのままでなくてfeedのURLを貼り付けなければいけません。こちらのサイトでしっかりと説明してくださっています。 

参考記事

you-tomita.hatenablog.jp

 

タイトルデザイン変更

こちらのブログでは、サイドバーを枠囲みにしたりアイコンを非表示する方法を分かりやすく解説されています。

www.a-s-blog.com

 

またお会いしましょう。