ハーレクイン図書館　　　　　ブログ初挑戦レポート

インスタントストアウィジェット★アマゾン

＊この記事はアマゾンアソシエイト（アフィリエイト）が提供する、Amazon の商品を紹介するための、簡単に設定ができる小さなリンクパーツ、アマゾンウィジェットについてのレポート記事です。ウィジェットについて詳しくはhttp://widgets.amazon.co.jp/

アマゾンのインスタントストアというものが
何なのかわかる方、インスタントストアを持っている方は
このインスタントストアウィジェットを試してみてください。

自分のインスタントストアに掲載されている商品（一部）を簡単に表示できます。

ただし・・・画像のサイズが小さいのが気になりますね。
大きな画像を選んだりすることはできませんし
タイトルや値段等を非表示にするようなこともできません。
表示枠全体はサイズがいろいろ選べ、
カラーも自由にカスタマイズOKです。

縦と横の幅を変更する

Heart Shop

昨日に引き続きJUGEMテンプレート　[card]のカスタマイズ
テンプレートの編集→テンプレート編集→css編集フォーム

.entry {
margin: 20px 0px 0px 20px;
background-color:#bbeeff;
border: 1px solid #0066cc;
width:220px;
float:left;
}

この部分の記述を変更。

.entryという表記部分は投稿記事のフォームを指定しています。
この[card]というテンプレートは投稿記事が
カードの形で表示されるというユニークなもの。
オリジナルではカードの色（background-color）が水色（#bbeeff）、
周りの線（border）が青（#0066cc）に指定されています。
これをサイトの色に合わせて白×ピンク系に変更。

さらにカードの横と縦の長さを固定。
オリジナルでは投稿記事の長さにあわせて縦に伸びる形式だったのですが、
凸凹が生じてしまい、ちょっと不都合。
カードの大きさを固定することでレイアウトの崩れがなくなりました。
横と縦の長さ（150px,250px）は、ご自分のサイトの幅に合わせて
決定するといいと思います。

Heart Shopの場合はサイト幅が900pxなので、余白部分を含めて
横にカードが5枚並ぶように設定しました。

変更後のcssはこちら

.entry {
margin: 20px 0px 0px 20px;
background-color:#FFFFFF;
border: 1px solid #FF32CB;
width:150px;
height:250px;
float:left;
}

サイトの幅を変える―可変幅タイプ

まずは可変幅って何？
サイトの幅がパソコンの画面の大きさに応じて広くなったり
狭くなったりするように設定してあるサイトを可変幅タイプといいます。
（固定幅タイプはこちら）

このようにブラウザサイズに合わせて横幅を自由に変えたい場合は、スタイルシート（ｃｓｓ）の　width: の表記を通常％で表記します。width: 100%; のように設定すると画面全体まで幅が伸びます。

画面全体を使用できるのか・・・いいな～と思いますが、
ブラザサイズによって見え方が違うという点にご注意ください。
自分のパソコンでよく見えていても、他のパソコンで見ると
レイアウトが崩れてしまっていたり・・・という危険性もありますので。

サイトを固定幅にするか、可変幅にするかという問題は
結構難しい問題らしく私にはよくわかりません。
まっ、固定幅のほうが無難かな・・・と。
で・・・こちらのサイトが面白いです。
固定幅と全幅レイアウトを JavaScript で切り替える
どっちもできる！実際に設置するのは今のところパスですが
こんなこともできるんですね～。
試してみたい方はどうぞ。

サイトの幅を変える―固定幅タイプ

ご使用のパソコンによってサイトの『見え方』はちがいます。

あまり横幅がひろいサイトにすると
パソコンによってはレイアウトが崩れてメチャメチャなんてことも。
3カラムのテンプレートの場合、右サイドバーが落ちてしまって
メインの下にぶらさがってしまうこともあります。

一般的にサイト幅を750ピクセルぐらいに設定すると
どのパソコンでもレイアウトの崩れなく表示されるとのこと。

ということでサイト幅を変える方法です。

スタイルシート(css）で次のようなところがあります。

/* 全体囲み */
#all { width: 722px;

とにかく『width』の文字に注目して探してください。
上のほうにあるのですぐ見つけられると思います。
この数値を変えてお好みのサイズにカスタマイズしてください。
これだけです！
ちなみに当ブログはＦＣ２公式テンプレート[rose]使用

スタイルシートによって表記が違う場合もあります。

たとえばJUGEMブログを利用しているHeart Shop はwidth表記がない！

テンプレートは[card]を使用していますが、このテンプレートは
カードデザインのユニークなもの。
ブラウザサイズに合わせて一列に2枚だったり、4枚だったり、
自由にカードが配置されます。試してみてね。
でも・・・見え方をある程度統一したいな・・・ということで

body { width: 900px;

body部分の表記に、下線部分を追加。
このようにすることでサイトの幅が固定されます。
Heart Shop の横幅を900pxに固定したのは、
大きなカードがちょうど3枚並ぶ幅にしたかったから。

スクロールバーの色を変えるには

Heart Shop　（テンプレートカスタマイズ方法）

実はオリジナルの色は水色
↑右端のスクロールバーの色をサイトの色に合わせて
ピンク系に変えたいんだけど、どうしたらいいの？

ということで・・・

以下をCSSに追加することで、スクロールバーの色を自由に変えられます。

html {
scrollbar-3dlight-color : #FFFFFF;
scrollbar-arrow-color : #FF32CB;
scrollbar-base-color : #FF98CB;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-highlight-color : #FF98CB;
scrollbar-shadow-color : #FF98CB;
scrollbar-track-color : #FFFFFF;
}

↑ピンクをベースにした色合いに変更した場合

scrollbar-3dlight-color ：スクロールバーの左端と上端の色
scrollbar-arrow-color ：スクロールバーの矢印の色
scrollbar-base-color ：スクロールバーのベースの色
scrollbar-darkshadow-color：スクロールバーの右端と下端の色
scrollbar-face-color ：スクロールバーの表面の色
scrollbar-highlight-color ：スクロールバーのハイライトの色
scrollbar-shadow-color ：スクロールバーの影の色
scrollbar-track-color ：スクロールバーの通路の色

アフィリエイトショップに挑戦

カスタマイズのお勉強をかねて
アフィリエイトショップを開いてみました。

テーマは『ハート』　
Heart Shop

ブログサービスは初めて利用する[JUGEM]

公式ブログテンプレートの中から
個性的なテンプレートということで [card]を使用しています。
エントリーがカードのように並べられて表示される特殊型。
ブログっぽくなくて、面白そうだなということで選んでみました。
このテンプレートを利用して、上のHeart Shopのようにカスタマイズ。
まだまだ変更していく予定ですので、その過程も当ブログで報告していきたいと思います。

バナー作成ツール

はずかしながら『バーナー

』だと思っていた『バナー』

バナーとはサイトのタイトルや、宣伝・広告等に使われている文字の含まれた画像のこと。

↑これのこと。

この画像部分をクリックするとハーレクイン図書館の本館に
飛びます。
このバナーは私が始めて作った見よう見まねの自作のバナー
画像を加工して、文字を入れて…とめんどうくさくてその後は作っていません

私のような方におすすめのツール（サイト）を発見しました。
フリー素材・壁紙配布SoWhat
↑
サイズが小さいのが玉に瑕ですが
ものすごく簡単ですからちょっと立ち寄ってみてください。
こんなバナーが1分？2分ぐらいでできます

そのほかバナー作成サイト
タイトルバナーを作ろう
素材deあんぱんだ　無料バナー作成依頼
バナー自動作成 - Hyper Banner Maker

Webページでひときわ目立つロゴ&バナーの作り方・飾り方―押さえておきたい基礎知識から他に差がつく画像処理のテクニックまで
佐藤信正
メディアテック出版 2001-09

by G-Tools

ハーレクイン図書館リンク集☆サムネイル作成ツール使用例

ハーレクイン図書館リンク集

ハーレクイン図書館本館

ハーレクインあふぃり(楽天館）

ハーレクイン図書館（ＦＣ２館）

ハーレクイン図書館洋書館

ハーレクイン図書館グルメ館

ジャンル別に探そう

ハーレクイン図書館イチオシのサムネイルツール

WebToJpegをつかってハーレクイン図書館リンク集をつくってみました。
サムネイルツールについてはこちらの記事で紹介。
（ワンクリックで３種類のタグが自動生成されますが
その中のimageタグを使いました。画像が常に更新されるリアルリンクに
なっていますが、ときどき部分的に表示エラーが出るようです。
とにかく画像作成のスピードが速く、
エラーもほとんどなく☆☆☆のツールです。）

PC画面を画像化する方法１―Prt Scキー

画面を画像化するってなんのこと？
FC2館

↑これ。当図書館のトップページを小さく画像化したもの。
おそらくみなさんもできたらいいな～と
思ったこと一度はあると思います。

で、この縮小画像のことを『サムネイル』といいます。
『サムネイル　生成ツール』などで検索してみてください。
アドレスを指定するだけ、ワンクリックで簡単に画像化できるツールが沢山あります。
サムネイルツールについてはこちら

実は今日ご紹介したかったのは
ページ全体を縮小して画像化する
このサムネイルとはちょっと違うんです。

ページの一部分だけを画像化したい

本棚ページ

ではなくて

上のページの中で、この部分だけを画像化したい

けっこう、こういう要望ってありますよね。
（私はこの記事を書くときに部分画像が欲しかった。）

と・こ・ろ・が・・・
ＰＣビギナーにとってはこれが難しい。
どうしたらいいものやら見当もつかない。
右クリックで画像保存？
いやいや、これでは文字部分は画像化されません。

検索して調べようにも
ページの一部分だけを画像化したいでは
適当なキーワードもわからず、出てくるのは
『サムネイル』ツール的なものばかり。なかなか見つからない。

と思っていたら・・・
なんと、なんと、こんなに簡単だったんだ！
...read more

ＰＣ画面を画像化する方法２―サムネイルツール

サムネイルって何？という方にまず簡単に・・・

縮小された画像のことです。

よくこんな画像見ませんか？
これがサムネイルです。

縮小された画像をクリックするとリンク先のサイトが表示されたり、
大きな画像が表示されたりします。

この画像を『リンク』ページなどで使用すると
視覚的にリンク先の情報がわかるのでよく使われています。
このサムネイルを簡単に作成できるフリーツールを集めてみました。
アドレスを記入してクリックすれば
自動的に縮小画像ができるという機能に加え、
自動的にリンクも作成するタイプ、画像サイズを指定できるタイプ
いろいろバリエーションがあります。

ツールによっては画像エラーがでて上手く表示されない
場合もありますので要チェック。
WebToJpeg Ver β 0.9.32がイチオシです。

サムネイル作成ツール★リンク集

SimpleAPI
出来上がったコードを貼るだけ、手軽で便利。
ユーザー多数の人気ツールです。

当サイトのサムネイル。
アドレスを入力してクリック！
コードが表示されるのでコピーしてブログにはるだけ。
リンクも自動で貼られているので、とにかく手軽です。

サムネイル画像の右横に文字を入れない場合はalign=leftを削除するといいです。すごく便利なツールなのですが、画像がいつになっても出てこない場合があり、残念･･･

Webページ→画像変換ツール　tujitakoさん
サイズが豊富、直リンク禁止。画像保存のこと。

画像のサイズは80×60・120×90・160×120・240×180・
320×240から選ぶことができます。これは160×120。
操作はSimpleAPIと同じ。ただし、画像を右クリックをして保存してから、使用しなくてはいけません（ツール→ファイルのアップロード）。実際にリンクさせたいときはアドレスの部分を書き換えること。

Webページキャプチャ生成ツール

Mozshot