忍者ブログ
管理人がどうやってオンライン小説サイトを作っていったのか、その実体験によるノウハウや悪戦苦闘の日々をつづるWEB小説制作日記ブログです。 ちょっと変わった独自システム付きのネット小説サイトを運営しています。
[55]  [54]  [53]  [52]  [51]  [50]  [49]  [48]  [47]  [46]  [45
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

自作の小説サイトを「小説検索サイト」さん等に登録する際、「バナー」というものを求められることがあります。
 
サイト制作初心者で用語をあまり知らない方は「バナーって何?」と戸惑うでしょうし、バナーが何かを知っていても、それをどうやって入手したら良いのか分からない方もいらっしゃるでしょう。
 
実際自分も最初は戸惑ったクチですので、同じように戸惑う方向けに「バナーとは何なのか」自分の調べた範囲での情報を書き込んでいきたいと思います。
 
まず、ここで言う「バナー」とは、こういう感じの横長に細長い画像です。
   ↓

 

(英単語としての「バナー」には様々な意味があったりしますが、話がわき道に逸れるので、ここでは検索サイト登録用のバナーに絞って説明していきます。)
 
これはサイトの広告などに使われ、クリックするとそのサイトにジャンプできるよう「リンク」が貼られていることも多いです。
 
つまりはサイトを紹介する看板あるいは名刺のようなものなのです。
 
サイズはいろいろありますが、サイト登録で求められる「サイトの看板」としてのバナーはだいたい「ヨコ200×タテ40(ピクセル)」のものが多いようです。
 
(他にも「400×40」「100×60」などのサイズが使われている所もあるようです。)
 
このバナー、親切なサイトさんでしたら「自前で用意できない方は、予めそのサイトで用意してある何種類かのバナーの中から選べる」というシステムになっています。
 
ただ、そういった予め用意されたバナーはシンプルなものが多いですし、他にも同じバナーを使っている人間がたくさんいるわけですので「自分のサイトが目立たず、他のサイトに埋もれてしまう」という可能性があります。
 
(まぁ、逆に目立つバナーを作れたとしても、そのセンスがダメダメで「悪目立ち」なだけでしたら、結局は逆効果で意味が無いとも思いますが…。)
 
で、できることなら自分だけの「オリジナル」のバナーを作って自サイトの宣伝にしたいわけですが…
 
まず、自分で作る自信が無いという方は、バナー制作を請け負ってくれるサイトさんが存在します。
 
(ちなみに自分は利用したことがありません。自作サイト用のWEBデザイン素材(パーツ)を作っているサイトさんなどでバナー制作も請け負っている所を見かけたことはあります。…自サイト開設前の頃のことなので、よく覚えていませんが…。)
 
また、フォトショップなどの画像加工ソフトを使ってもバナーは作れます。
 
(自分の場合は元からフォトショップ(エレメント)があったのでフォトショップを使いましたが、フリーの画像編集ソフトなどでもトリミングや文字入れ機能があれば作れると思います。)
 
やり方は簡単に言えば、自分で用意したオリジナルの写真またはイラストを200×40のサイズに上手く切り抜き(場合によっては縮小などもして)、そこにサイト名の文字を入れれば良い、というだけのことです。
 
自分も元となるイラストの一部を200×40の横長にトリミングし、そこに文字(と飾り)を配置することで上のバナーを作りました。
 
(元のイラストはこちら。)
   ↓
ペルシャ猫 
 
ただ自分の場合は、200×40というサイズが小さ過ぎて画像加工がやりづらいと思ったので、まずは一旦400×80という倍のサイズで作成し、それをGIFまたはJPG形式で保存する際に縮尺を50%にすることで200×40サイズのバナーを作っていました。
 
(GIFやJPGというのは、画像ファイル形式の種類です。画像加工ソフトでそのまま保存したデータはバナーとしては使えないファイル形式であることが多々ありますので「WEB用に保存する」などを選び、ファイル形式をGIFまたはJPGに選択して保存し直す必要があります。)
 
サイトさんによってはバナーのファイル形式や、ファイル・サイズを○KB以下などと指定している所もあるかも知れませんので、その辺りはよく確認の上、それに沿った形でバナーを作りましょう。
 
また、サイトさんによってはバナーの「直リンク」を求めてくる所もあります。
 
「直リンク(直接リンク/直リン)」とは、他のサイトにある画像を自分のサイトやブログに直接呼び出して表示させる方法のことです。
 
方法は「タグ」を使うのですが、ソースコードに以下のようなタグを記述していくことになります。
   ↓
<A HREF="http://kotonohano25mori.web.fc2.com/"><IMG SRC="http://kotonohano25mori.web.fc2.com/IMAGE/banner.jpg" BORDER=0></A>
 
(ちなみに例として挙げているこのタグは、上に表示した猫のバナーを表示させるための直リンクタグです。)
 
上のタグの<IMG SRC="http://….jpg" BORDER=0>の部分が画像呼び出し用のタグです。
 
(ちなみに<A HREF="http://….com/">~</A>リンクを貼るためのタグです。)
 
通常、画像を表示させるためのタグは<IMG SRC="IMAGE/banner.jpg" width="200" height="40" border="0">と、「IMG SRC=」の後ろの" "の中が、画像ファイルを保存してある(ディレクトリの)場所などになっているのですが、直リンクではこの" "の中に、"サイトのURL/そのサーバー内で画像ファイルの保存してある場所/画像ファイル名"を記述していくことになります。
  
この「直リンク」はサーバーに負担がかかるため、禁止している所も多いので、自分の使っているサーバーさんがバナーの直リンクOKなのかどうなのかは確認しておきましょう。
 
(ちなみにFC2さんと忍者ツールズさんは現在のところ、バナー数に制限はありますが直リンクOKなのです。)
 
直リンクがダメな場合、「バナー画像預かりサービス」をしてくれている検索サイトさんもあります。
 
なお、検索サイトさんに登録する場合、逆にその検索サイトさんのバナーを自分のサイトに表示する必要がある場合が多々あります。
 
直リンクOKなバナーなら、提示された「タグ」を自分のサイトのソースコードにコピー&ペーストします。
 
(ブログの場合はプラグインのフリースペースなどを利用するとコピー&ペーストで簡単に表示できます。)
 
ただし先に書いた通り、直リンクはサーバーに負担がかかるため「バナーは必ずお持ち帰りして貼り付けてください」と指定されているサイトさんもあります。
 
その場合はバナーをダウンロード(サイトやブラウザ等により方法が異なるでしょうが、大概の場合は「右クリック→対象を保存する」でダウンロードできます。)し、その画像を自分のサイトに貼り付け(←画像挿入などで貼り付けます。)、リンク先URLをその検索サイトさんで指定する必要があります。
 
ちなみにバナーをダウンロードする際、保存先の場所をよく確認しておかないと後で「あれ?さっきのバナー、どこに保存されてるんだ?」と苦労する羽目になりますので、ちゃんとチェックしておきましょう。
 
以上、自分なりに調べたことのまとめですので、足りない部分などもあるかも知れませんが、少しでもお役に立てれば幸いです。

拍手[0回]

PR
ブログ内検索
ブログ更新&チェックについて。

このブログは管理人に時間の余裕がある時にちょこっとずつ更新していく予定ですので、更新やチェックの頻度はおそらく数週間に1回~下手をすると1ヶ月以上の間が空いてしまう可能性も…。
もし更新が滞ったり、コメントくださって返事がなくても「あぁ、仕事が忙し過ぎて時間が無いんだな」と気長にお待ちいただければ幸いです。

ブログもくじ
ブログ記事一覧

(サイトと連動して作ったこのブログのもくじです。手動更新のため、最新記事などは入っていない可能性が高いです。)
管理人プロフィール
HN(ハンドル・ネーム):
津籠睦月(つごもりむつき)
職業:
社会人(毎日PCを使う仕事。残業も休日出勤も普通にあります。)
趣味:
小説・HP制作、読書、猫と遊ぶこと。
好きな小説ジャンル:
ファンタジー、冒険、恋愛、青春、推理、濃い人間ドラマの展開するモノ。
備考:
漢検2級(準1以上は未受験)。国語の最高偏差値80(高2時点)。

オリジナルのWEB小説サイトを運営しています。
猫好きです。
HPにも小説内にも気づけばあちこちに猫が…。
各種WEBサービス公式リスト
↑ 下部のURL( twitter.com/i/… )をクリック(タップ)でリストが表示されます。
webサービス不具合情報
参加ポータルサイト

人気ブログランキング
参加しているポータルサイト(ランキング)です。
相互RSS
アクセス・カウンター
小説サイト「言ノ葉ノ森」関連Tweetまとめ
P R
忍者ブログ [PR]