ブログカスタマイズ Gimp2を使って

ブログカスタマイズの基本

2015年08月21日

画像の入れ替え



完成した画像をブログのサーバーにアップロードを行ない画像のアドレスを交換します。

● 下の図に見られるように画像/ファイルをクリックします。ファイル管理と言うページが現れます。ここで注意をしなければならない事は、画像管理では無く、ファイル管理です。ファイル管理から作成した画像をアップロードします。

*ライブドアブログでは、画像管理を選択しますと、アップロードをするたびに、新しい違うファイル名に自動で書き替えられるため必ずファイル管理を選んでください。



● アップロードしたファイル名をクリックして確認をします。



● 画像の住所でのアドレスが記載されました。ここで、必要な物は画像では無く、このアドレスになります。このアドレスを全て選択してコピーをします。



● cssの画面に戻し、テンプレートの画像アドレスを、アップロードした画像のアドレスに書き替えます。選択をして貼り付ければ簡単に書き替える事ができます。



● 下にあります保存を押すと内容が更新されます。



●完成です。同じ事を繰り返し、全ての画像を入れ替えていきます。どこで扱われている画像だろう?と思われる画像もたまにありますが、その様な時は、Art eh bymyでは無視しています。


◎ポイント、画面を行き来するには効率が悪くなるため、リンク先を開く場合は、リンク文字、リンク画像の上で右クリック、新しいウィンドウで開く 又は 新しいタブで開くで行うと画像を閉じる事無く新しいウィンドウで作業する事ができます。

慣れれば、数時間でカスマイズする事も可能です。

画像を重ねる文字やイラストは、GIMP2では作成しづらいですので、Art eh bymyをご利用いただければ幸いです。一般的によく利用される画像のみ無料で制作させていただいています。背景画像や人物画像は、フリー素材を利用する方法もポイントですよ。











art_eh_bymy05 at 17:46コメント(0) 

高機能画像編集ソフトを利用して編集



ここでダウンロードしてインストールしましたGIMP2と呼ばれる高機能画像編集ソフトを利用します。このソフトを利用して、パソコン内に保存をしたテンプレートの画像を開き編集します。

●左上のファイルをクリックを行ない、パソコン内に保存をした画像を開きます 



●作業を行うウィンドウを表示するために、上のウィンドウからツールボックスとドッキング可能なダイアログからレイヤーを選択します。 レイヤーとは、階層を現す層を現す言葉です。画像と画像を重ねたりする場合に扱うウィンドウです。



● テンプレートの画像が必要なのは、大きさを確認するためです。大きさ分かっているため、この画像を削除します。レイヤーにある選択されている画像をクリックします。



● 画像を削除するには、アルファチャンネルと呼ばれるチャンネルを画像に適用させてから削除します。本来アルファチャンネルは、画像の一部の背景を透明化する時に扱う物で、人物などの画像を切りぬき、背景を透明にする場合に利用する物です。



● レイヤーウィンドウで画像が選択されている事を確認をして、キーボードにありますdeletキーを押して画像を削除します。



● 大きさだけ残して画像が削除されました。この大きさの画像に対して自分の好きな画像を読み込んで行きます。読み込む画像形式は画像形式であれば何でもかまいません。テンプレートはjpgですが、png形式、gif形式、読み込める形式であれば、何でもOKです。



● 画像を読み込む場合は、ファイルからレイヤーとして開くで読み込みます。好きな画像を読みんでオリジナルティの高いブログに変える事が出来ます。



● 二枚の画像ファイルを読み込んだ例になります。画像が不必要な場合は、レイヤーウィンドウにある画像を選択して、右下のゴミ箱にドラッグする事で削除する事が出来ます。



● この時点でよく利用するツールは、下の図に示しているツールになります。1は一定の色の範囲を全て選択してくれます。不必要な場所を削除する時などに利用します。削除する場合は、キーボードにあるdeletキーを押して削除します。

2は、画像を拡大したりする時に利用します。ドラッグで範囲を指定する事できます。元に戻す場合は、上にある表示から表示倍率を100%で戻す事ができます。

3は画像を移動させる時に利用します。

4は消しゴムです。消しゴムの大きさや形をツールボックスウィンドウから変える事が出来ます。様々なツールがありますので、実際に利用してみて確認してみてください。わからない言葉などは、インターネットで検索すれば、直ぐに内容を把握する事が可能です。



● 画像を保存する場合は、二つの保存があります。一つは、GIMP2を利用するための保存で下の図の赤い丸がそれに当たります。ブログカスマイズ用の画像として利用する場合は、青い丸の名前を付けてエクスポートを選択します。編集ができる様に両方保存しておく事を推奨します。



● ファイル名は、分かり易く好きな名前でもかまいません。テンプレートと同じ名前で無くても問題はありません。また、テンプレートの画像がjpgだからと言いまして、必ずjpg画像でなければならないと言う訳でもありません。必ず、小文字の英数文字で付けなければならず、拡張子も付ける必要性があります。拡張子は、.jpg .gif .pngのどれかになり、必ず、ファイル名と、拡張子の間には小さなドット . が必要です。

このブログのブログカスタマイズ Gimp2を使っては、テンプレートの本文の背景はgif画像ですが、png画像を扱っています。



● 右下にあるエクスポートをクリックすれば、保存する事ができますが、保存形式によっては確認ウィンドウが出ます。内容が分からない場合はそのままエクスポートで保存してください。



● このページの内容は、少し量が多いため、始めての方は意味が理解できない事もあるかと思いますが、一つ一つ実践と確認をしながら体で覚えていただければと思います。

次のページではこの完成した画像をアップロードをして、画像アドレスの書き換えを紹介します。











art_eh_bymy05 at 10:44コメント(0) 

テンプレートにある画像の大きさの確認



画像を入れ替える場合は、入れ替えるための画像の大きさの確認をする必要性があります。ブラウザによって直ぐに確認できる事もありますが、テンプレートをダウンロードして確認するベターな方法で紹介します。

●全ての表示が確認できる様に、一記事だけテスト用として文章を適当に書き、投稿をして起きます。


●cssが記載されているページ内で、キーボードにありますCTRキー+Fを押し、文章内を検索できる様にします。検索する文字は、jpg gif png画像のアドレスを探すために三つキーワードを使い画像アドレスを探します。



テンプレートの内容によっては、jpgのみ、gifのみ、pngのみなどありますが、どの形式の画像が扱われているかわからないため、この三つのキーワードを全て利用して検索をして探します。

この ブログカスタマイズ Gimp2を使ってのブログのテンプレートには、jpg形式の画像が一枚扱われている事が確認できます。

●下の図で見られる様にhttpから始まり、pngで終わっている文字を全てドラッグをして選択を行ない、コピーをします。切り取りでは無くコピーをします。このアドレスは、テンプレートの画像を表示させている画像のアドレスになります。


● 新しいウィンドウを開く、若しくは新しいタブを開き、コピーをしたアドレスを貼り付けキーボードにあるenterキーを押し、画像の確認をします。



●表示されている画像の確認ができます。googleのブラウザでは、この時点で左上に大きさが確認できますが、一度この画像を自分自身で扱うパソコン内に保存をします。画像の上にカーソルを乗せ、右クリック 名前をつけて画像を保存を選択すれば、パソコン内に表示されている画像の保存を行う事が出来ます。



● このページで紹介しています内容は、cssのどこにテンプレートの画像アドレスが記載されているかの確認と、画像を編集するための大きさの確認を行う作業になります。











art_eh_bymy05 at 09:14コメント(0) 

基礎となるテンプレートを選ぼう


ブログを始めて立ち上げる方は、基礎となるテンプレート<ライブドアブログが標準で付いているデザイン>選びが重要なポイントになります。テンプレートの内容によっては、画像の入れ替えが出来ない、イメージと合わない内容が出てきますので、予め、形だけ決めておく事が大切です。

画像の内容は必要ありません。あくまでも、画像が配置されているデザインから決める事が大切です。

●ライブドアブログのテンプレートを決める場合は、ブログ設定をクリックします 



●次に表示される中にありますデザイン ブログパーツの設定をクリックします





●上の画像は、ブログカスタマイズ Gimp2を使って このブログサイトの元となったテンプレートです。カスタマイズだと分かり易くするために、少し面影を残してカスマイズを行っています。○はチャックポイントになります。

1はトップ画像になり、この画像を入れ替える事が出来ます。
2は記事のタイトルになり、その背景画像を入れ替える事ができます。
3は、記事内の背景になり、その画像を入れ替える事ができます。
4は記事の下にある画像になり、入れ替える事ができます。
5は、サイドバーにあるタイトルの背景画像になり、入れ替える事ができます。
6の草は、全体的な中の背景画像になります。

一般的のブログには、サイドバーに記載されているタイトル意外の場所にも背景画像がありますが、このブログのテンプレートには背景画像はありません。

このテンプレートの特徴としまして、全体を覆う背景画像と、草を現す背景画像があります。


この様な感じで、変更可能な画像がどこにあるのかをチャックしながら、テンプレートを選んで行きます。少なくても、最低1のトップには、画像がある事が望ましく、カスタマイズを行っている特徴を出す事が出来ます。

テンプレートが決まれば、それに合わせて設定ボタンを押します。

●画像を入れかえるための元の画像のアドレスを調べる必要がありますので、下の図に見られるカスマイズをクリックします。



● cssと記載されている場所に、テンプレートの画像のアドレスが記載されています。トップページ、個別記事ページ それ以降の内容は、HTML言語と呼ばれる内容で、表示されているコンテツを増やしたりする場合に書き替える必要性があります。

画像を入れ替えるだけであれば、CSSだけを書き替えるため、CSSだけで大丈夫ですが、元のテンプレートに戻せる様に、記載されている文字の上を一度クリックしてから、右クリック、全てを選択、コピーをして、パソコンに付属されているメモ帳に移し保存をしておきます。

上手く表示されなかったりした時のリスクを防ぐ目的があり、元のテンプレートに戻す事が出来るようにするための内容です。















art_eh_bymy05 at 04:33コメント(0) 

高機能画像編集ソフト ダウンロード 無料のフリーソフト



ブログをカスタマイズするためには、画像を編集するためのソフトが必要になります。パソコンを購入した時点で、photoshopなどが入っている事もありますが、これは、家庭向け用のphotoshopであるため、あまり推奨できる物ではありません。

 プロが扱うphotoshop並の高機能編集ソフトが無料のフリーソフトとして配布されていまして直ぐにダウンロードを行って利用する事が出来ます。通常、購入すれば数万円以上する内容を無料で利用する事ができます。Art eh bymy 公式サイト内で扱い方について一部ご紹介していますので、そちらからダウンロードをしてインストールを行ってください。

Art eh bymy内の紹介ページ↓ <別ウィンドウ表示>


この画像編集ソフトは、多くの機能を持ち合わせていますが、必要最低限の内容で、こちらのブログでも紹介させていただきます。

携帯電話やスマホからご覧になられている方は、スマホでは扱えませんのでご注意を











art_eh_bymy05 at 03:36コメント(0) 







「Copyright (C) 2015 Art eh bymy All Rights Reserved.」