フォトライブラリー

フォトライブラリーは写真やイラスト素材の販売サイトです。

私が作った素材もこちらに登録し始めましたので、よろしければご覧ください。

解像度が低いWEB用は無料配布しているものもありますので、ダウンロードするだけでご利用いただけます。

まだ始めたばかりで枚数が少ないのですが、これから少しづつ増やしていこうと思っています。
いまのところ植物や料理が中心です。

その他にも風景、人物、動物、乗物など25万点以上が掲載されています。

小規模な広告やチラシ、いわゆる広報誌、ミニコミ誌などで写真やイラストが必要になったときは検索してみてはいかがでしょうか。

フリーブログへの対応[Yahoo編(3)](11)

Yahooブログへの具体的な対応方法です。
今回はアクセス数を上げる方法です。

YahooブログはYahoo内でのコミュニケーションツールは充実しています。
いわゆる足跡機能である訪問者履歴やメッセージ、ゲストブックなどはYahooの会員同士でお互いのブログを訪問し合うって訪問者数を増やすのに役立ちます。
また、アンケートを作成したりファン投票で人気を計ったりする機能もあります。

ただし、外部からの来訪者の履歴はわかりませんし、アクセス解析としては当日の来訪者数しかわかりませんので不十分です。

こういった傾向はYahooブログでは商用利用を禁止しているためと思われます。

認められたアフィリエイトは載せられますので、広告がまったくないわけではないですが、広告欄は比較的小さく、アフィリエイトの小遣い稼ぎが目的の人には不向きとも言えます。

逆に押しつけがましくなく、好感度が上がるというメリットもありますが。

その他、予約投稿ができない、投稿時間を設定できない、インポート／エクスポート機能がない、直接Yahooへの質問はできず問題は会員同士で解決させようとする(知恵袋)など制約が多いのも事実です。

さて、アクセス数を増やす方法ですが、

【正攻法】
同カテゴリーのブログに訪問しコメントを残していくのは地味ながらYahooブログの場合はかなり有効です。もちろんのこと宣伝やあからさまにお返しの訪問を要求するようなもの、無断でのトラックバックはかえって不快感を与えます。

【ping送信】
Yahooブログにはping送信の機能がありませんので、自分で送信しなくてはなりません。ping送信することで検索エンジンへの掲載率が違ってきます。

ping一括送信サイトなどを利用すれば複数のpingサイトに送ることができます。
ping一括送信サイトの紹介

【ランダムアクセス】
Yahooブログにはランダムアクセスという機能があります。Yahoo内のブログにランダムにジャンプするものです。このランダムアクセスの対象になるとアクセスが１日で100くらいは違ってきます。

もっともみな通りすがりの人ですから、数字だけ増えてもその後リピーターになってくれるわけではありませんが。

ランダムアクセスに選ばれるにはコツがあるようです。
・画像を必ずアップロードする。
・ある時間(分)が選ばれる確率が高い。
などです。

私も100%確実な方法は知りませんが、週に２〜３度はランダムアクセスに選ばれています。
ランダムアクセスされるサイトをいくつか見ていると法則が見えてくるようです。

フリーブログへの対応[Yahoo編(2)](10)

Yahooブログの実践的なデザイン変更方法です。

Yahooブログはデザインの自由度が少ない分、いろいろなレイアウトを用意しています。
その中には、画像だけを表示するレイアウトもあります。

これを使うと例えば、画像だけを並べて商品説明のページを作ることもできますし、写真や絵を趣味にしている人ならばギャラリーを作ることもできるでしょう。

画像を表示できる「書庫」を指定できますので、見せたい画像だけを入れる「書庫」を作れば、無駄な画像を表示しなくてすみます。

Yahooブログの画像幅は560ピクセルとかなり大きいので、高解像度の写真も見せることができます。

また、アフィリエイトなどの広告類の表示は任意ですので、うるさくならないようにすることもできます。

デザインを自由にできないのでこれらの機能をフルに使ってオリジナルのブログを作っていくようにします。

■記事内に画像を表示させる方法
[アップロード]
記事を書くのと同時に写真をアップロードさせられます。
何も指定しないと記事の本文の前にアップロードした順に表示されます。
※wiki文法で[[attached]]を使うとアップロードした画像を本文中に挿入することができます。

[htmlを使用]
<img src="">タグが使えます。
画像は非公開の記事を作ってそこにアップロードするか、自分のサーバにアップしてURLを取得します。

[wiki文法の場合]
最初に「wiki文法使用」にチェックを入れます。
同様に非公開の記事か自分のサーバの画像URLを書き入れます。
[[img(http://***.yimg.jp/images/***/blog.gif,209,40)]]
のような書式で画像を挿入することができます。

wiki文法についてはYahooのヘルプに解説があります。
またその他、Yahooで使える文法についてはこちらの方が非常に詳しく研究されているので参考にしてください。

フリーブログへの対応[Yahoo編(1)](9)

今回からは無料登録できるブログへの個々の対応を考えていきたいと思います。

【Yahoo!ブログ】

非常に会員数が多いブログです。制約が多いので見た目のおもしろみは少ないですが、アクセス数を増やすのは難しくありません。コミュニティを作りやすいので、趣味のブログには向いていると思います。

とくに知識がなくてもレイアウトの変更ができるように、メニューから選ぶ形式になっています。その分、デザインの自由度が低く、用意されたテンプレートから選ぶ形式です。オリジナリティを出すには少し工夫が必要になります。

★基本編

レイアウトタイプは６パターンから選べます。
最新記事を順に表示させるのならば、どれを選んでもかまいません。
ただ、ここでは背景やタイトル画像を選ぶことができませんので、自分でオリジナルのタイトルページを表示させたい場合は別にページを作る必要があります。
以下のような手順で行ってください。

１）「ブログ設定」→「書庫設定」でトップページ専用のカテゴリを作り「標準」に指定します。

２）オリジナルのタイトル画像を用意します。

３）画像をアップロードして、ブログの説明などを書いたページを作ります。

４）「レイアウト設定」よりパターン１〜３のうちのひとつを選びます。これらは「標準」の「書庫」の最新ページをトップに表示するパターンです。

５）常に「標準」がトップに表示されるので、記事を更新しても同じページが最初に表示されます。

この手順で作ってあるのがこのページです。
http://blogs.yahoo.co.jp/myladyaska/

写真を開くウインドウ(8)

ブログのデザインを変更する簡単な方法をお教えします。

今回は応用ワザです。
写真のサムネイルを指定すると、たぶんほとんどのブログで別の新しいブラウザウインドウが立ち上がると思います。これは写真があまり大きくないときはちょっと見栄えがよくありません。

ですので、Javascriptを使って写真の大きさに合わせたウインドウを開いてみます。

まず、写真をサムネイル付きでアップロードします。すると例えばこんなコードが書かれると思います。

<a href="http://***.ne.jp/****/****/image1.jpg" target="_blank"><img src="http://***.ne.jp/****/****/image1sam.jpg" width="150" height="100"></a>

このままですと大きな新しいウインドウがまんま開かれまので、a href以下をこんなふうに書き換えます。

<a href="javascript:;" onClick="window.open('http://***.ne.jp/****/****/image1sam.jpg','',
'width=440,height=300,toolbar=no,menubar=no,status=no');"><img src="http://***.ne.jp/****/****/image1sam.jpg" width="150" height="100" border="0" align="" alt="135_01.jpg" /></a>

widthとheight(グリーンの部分)は元の写真の大きさですが、やや大きく+20くらいにするときれいにおさまります。

写真だけを見せるので余計な飾りがあると邪魔くさいと思えば、
toolbar=no,menubar=no,status=no(イエローの部分)
のようにすべてをnoに指定します。

このソースは改行してあるように見えますが、スクリプトは改行を入れると無効になりますので、onClick="〜"の部分は一気に書いてください。

またonClick="〜"の中は""(ダブルクォート)を使わず、''(シングルクォート)で囲うようにしてください。

サンプルはこんな感じになります。


※本文中に書けるjavascriptは限られていますし、複雑なスクリプトはブラウザによっては動作しないことがありますので、この程度の簡単なものにしておきましょう。

You Tubeを貼る(7)

最近はYou Tubeを直接ブログに貼り付けることが多くなりました。You Tubeがカバーしている動画ファイルの種類はたいへん多いので、ほとんどのメディアで記録した動画をサポートしています。めんどうな設定が必要ないのでとても手軽に動画をアップロードできますし、サーバに置くスペースが必要ないので自分のブログのサーバに負担をかけません。とても簡単ですので活用してください。

まずはYou Tubeのアカウントを取ります。これはYou Tubeのサイトでメールアドレスを入力すれば取得できます。

動画の撮影はデジカメでも携帯でもかまいません。携帯から直接アップロードする設定もできます。また音楽をつけたり、余分なところを削ったりする編集機能もあります。ただしアップロードできるのは"最大10分1024 MB"と制限があります。つまりあまり高解像度の動画はアップできないことになります。
解像度が低い動画はデフォルトの大きさでは画像が荒れることが多いので再生画面を小さめにする方がアラが目立ちません。また、ブログの記事表示部分の幅に収まるように合わせる必要もあります。
※アップロードの詳細はYou Tubeにログインして「マイ動画」で確認してください。

アップロードが終了すると埋め込み用のHTMLが表示されます。これを自分のブログやホームページに書き込めば、自分のサイトで動画を再生することができます。
これは昨日撮影してきたサンプルの動画です。



携帯で撮影したのでかなり解像度が低くて見づらいですね(デフォルトでは幅が425ピクセル、高さが350ピクセル)。携帯電話を同じくらいに表示サイズを小さくしてみます。縦横の比率を同じにして縮小してください。


HTMLの中にサイズの部分は２カ所ありますので両方とも変更します。
▼デフォルトの設定
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/******">
</param>
<embed src="http://www.youtube.com/v/******" type="application/x-shockwave-flash" width="425" height="350">
</embed>
</object>
▼変更後の設定
<object width="160" height="132">
<param name="movie" value="http://www.youtube.com/v/******">
</param>
<embed src="http://www.youtube.com/v/******" type="application/x-shockwave-flash" width="160" height="132">
</embed>
</object>

見出しの画像を変える(6)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

見出しの部分を変えてみたいと思います。

本文もサイドバーも基本は同じです。このブログではサイドバーだけ変更しています。
デフォルトでは肉球でしたが、猫がのぞいている画像をタイトルに使ったのでお魚にしてみます。マンボウは食べないとは思うけど、まぁかわいかったんで。。

本文でもサイドバーでも、幅を変更するといろいろと変更点が増えて大変なので、まずは同じ大きさの画像と入れ替えてみます。
見出しに使う画像を作ってアップロードしてURLを控えておいてください。

この場合もまずサイドバーの見出しにどんなスタイルが指定されているかを見つけます。

本文が終了してからサイドバーが始まりますのでかなり後ろの方になると思います。サイドバーのタイトル「最近の記事」などに<div>タグで指定してあると思います。
<div class="sidetitle">最近の記事</div>

こうなっていたらスタイルシートの編集ページで.sidetitleを探します。ここでbackground-image:url以下を書き換えて、用意した見出し用の画像のURLを書き込みます。
background-image:url(http://***.co.jp/myfiles/image/sidetitle.gif);

これは背景の指定になっていますので、この上に文字を載せることができます。場合によっては文字の位置を少し調整する必要が出てくるでしょう。
文字の位置はpaddingで指定します。

padding:50px 0px 20px 50px;

それぞれ上、右、下、左の順に文字の開始位置を調節できます。
この見出しは左にマンボウの絵があるので、その絵にかからないように、マンボウの長さだけ左にずらしてあります。

その他colorで色、font-sizeで文字の大きさを変更できます。

背景画像を変える(5)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

今回は背景画像の変更方法です。

１）背景画像の指定場所
ブログの表示部分に背景に画像を使う場合には、#containerの指定を変更します。スタイルシートの中から#containerを探します。たぶんかなり上の方にあるはずです。
※containerという指定がない場合、ブログのソースを見て、いちばん最初に出てくる<div id="***">と指定されている部分に背景イメージの指定があることが多いです。

#container{
text-align:center;
margin:0px auto 0px 0px;
padding:0px;
width:750px;
background-image:url(http://***.co.jp/myfiles/image/bgimage.gif);
background-repeat:repeat-y;
}

ここでbackground-imageの部分を変更します。

背景画像を作成してアップロードしたら、そのURLをbackground-image:url以下にかっこで囲んで書きます。

※ページの背景に画像を使う場合にはbodyの中に背景画像の指定を行います。

２）背景画像の作成
containerの中の背景画像はブログの表示部分に影響してきます。

このブログでは記事部分とサイドメニュー部分で色を変えてあります。記事部分の幅は470px、サイドメニューの幅は220pxです。細い帯状の画像を作り、少し大きめの473pxと227pxの２色に分けた画像を作ります。

さらに右端に影部分のぼかしを入れ、最後は背景色と同じになるようにグラデーションを入れました。
※背景色はbodyで指定してあります。ここではタイトル画像の色に合わせて変更しました。

これをbgimage.gifという名前で保存、アップロードします。

※記事部分とサイドメニュー部分の幅はスタイルシートの中に指定があります。

#content {
margin-top:20px;
margin-bottom:30px;
float:left;
width:470px;
color:#000;
text-align:left;
}

#links {
font-weight:normal;
width:220px;
float:left;
text-align:left;
padding:0px 0px 0px 5px;
}

フォントを変える (4)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

今回はフォントを変更してみます。

WindowsならＭＳ Ｐゴシック、ＭａｃならOsakaというフォントが多いと思います。このままでよければとくに変える必要はありません。

ブログのタイトルだけ明朝体にしたい、とか太字で強調したい、逆に太字をやめたい、などの細かい指定をしていときにどこを変更すればいいかを見つける方法です。

ブログのページを表示させてその「ソースを表示」させます。
変えたい部分にどんなスタイルが指定されているかを見つけます。スタイルの指定は<div>などのタグにidやcalssの形で指定されていたり、htmlのタグそのものに指定されている場合があります。

ここではタイトルの指定を変更する例をやってみます。

このブログのタイトルのソースはこの部分です。

<h3 class="title"><a href="http://***.***.ne.jp/article/***.html" class="title">その２：フォントを変える</a></h3>

<h3>にtitle
<a>にtitle
と２つの指定があるのがわかります。

スタイルシートから.titleの部分を探し出します。

.title{
font-family: "ＭＳ Ｐゴシック",Times New Roman,Osaka,Sans-serif;
font-weight:bolder;
text-align:left;
color:#666666;
margin:0px;
padding:5px 0px 5px 0px;
}

ここでＭＳ ＰゴシックをMS UI Gothicに変更してみます。

font-family: MS UI Gothic,Times New RomanOsaka,Sans-serif;

のようになります。
フォントはWindowsでもMacでも最初から入っているものにしましょう。自分だけがインストールしたフォントを指定しても自分にしか見えません。また日本語のフォントは""で囲んでください。

フォントを指定しないと、ブラウザのデフォルトのフォントになります。Internet Explorerはゴシック、Mozilla系(NetscapeやFireFox,Safariなど)は明朝体になります。とくにMacでは　Internet Explorerを使うことは少ないので、ゴシックで表示したいときにはOsakaの指定が必要ですので外さないでください。

文字を太くするのはfont-weightです。boldがいわゆる太字です。太字指定をしたくないときはnormalを指定します。<h1>などの見出し文字はデフォルトが太字ですので、太字を解除したいときはfont-weight:normalとします。

colorは文字の色ですので好きな色に変えることができます。

スタイルシートの指定はめんどうで難しいので、失敗したら元に戻すボタンがたいていついています。また、プレビュー機能があれば確認しながら変更していきましょう。

タイトルデザインを変える (3)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

今回はタイトルバナーを変更してみます。

１）タイトル画像を用意してください。ブログの表示部分の幅と同じ幅にします。これをアップロードしてURLをメモしておいてください。

※ブログの表示部分の幅はスタイルシートの#containerにwidthとして指定してあります。

２）ブログの管理ページからスタイルシートを編集するページを開いてください。

そこにタイトル画像を指定しているところがあります。
#bannaerという名前が付いていることが多いです。
background-imageという部分がタイトル画像になっていますのでここのurl指定のところを保存したタイトル画像のURLに書き換えます。

#banner{
font-family: verdana,"ＭＳ Ｐゴシック",Osaka,Sans-serif;
background-image:url(http://***.***.co.jp/myfile/image/top.jpg);
background-position:0px 0px;
background-repeat:no-repeat;
margin:0px;
height:100px;
padding:20px 50px 0px 20px;
text-align:left;
}

heightを用意した画像の縦のサイズに合わせて変更します。


paddingとtext-alignはタイトル画像の上に載せる文字の位置指定です。
paddingは文字の最初の位置です。上、右、下、左の順にピクセルで指定しています。
text-alignは行揃えです。leftは左揃え、rightは右揃え、centerは中央揃えになります。これで画像の邪魔にならない見えやすい位置にテキストを配置します。

いっぺんにいろいろやると大変なので今日はここまで。

スタイルシートの指定を見る(2)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

ブログのデザインはスタイルシートで指定しますが、スタイルシートがどうのように指定されているかは、ブログによって様々です。
だいたいは同じような名前で指定されているのですが、個別の違いがあるので、このブログでのやり方がすべてに共通するわけではありません。

自分のブログがどんなスタイルを指定されているかを見る方法を知っておきましょう。

まず、トップページを開きソースを表示させます。
<div>というタグにclassやidという指定があると思います。ここに書いてあるのがスタイルです。
たぶんこういっったスタイルが<body>のすぐ後に出てくると思います。
<div id="container">
<div id="banner">

containerはブログ表示部分の基本的な指定。フォントやテキストの位置、背景などを指定しています。
bannerはタイトル部分の指定です。

スタイルシートを開くと#container、#bannerで{}でくくられた部分が出てくると思います。ここに書かれていることを変更すると、ブログのデザインが変わるのです。

#containerの他に<h1>などのタグの名前に指定がしてある場合があります。これはhtmlのタグをデフォルトの状態から変更して別のデザインにします。<h1>は太字で大きな見出し文字ですが、この文字のサイズを変えるのに使います。
※これは検索エンジンへの対策のひとつです。

その他に.textや.sideなど.で始まる指定があります。
これはclass="text"とcalssを使っての指定です。idとcalssの違いはいまはあまり考えなくてもいいです。
id=と指定されていたらスタイルシートでは#で始まる、class=と指定されていたら.で始まる…とこれだけ覚えていてくだい。

ブログのデザインをカスタマイズ(1)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

ブログの見た目はスタイルシートで指定していますので、htmlの知識だけでは足りません。スタイルシート自体をすべてここで解説すると本が１冊できてしまうので、ブログのデザインを変更するのに必要な部分だけ紹介していきます。

サンプルはこのブログです。
元はテンプレートを使っていますが、それをオリジナルの画像や配色を指定することで、より自分らしいブログにしていきます。

あまり変更点が多くない方が作りやすいので、テンプレートを選ぶときは自分のイメージに近いものにしましょう。

これが元のテンプレートです。

※ご質問などある場合はコメントからどうぞ。