FC2ブログ

ハーレクイン図書館      
ハーレクインのことなら何でも・・・                         FC2館

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

Heart Shop (テンプレートカスタマイズ方法)
Powerd By WebToJpeg


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



ということで・・・

以下を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 :スクロールバーの通路の色




Edit
  1. 2007/01/14(日) 00:43:05|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

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

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

テーマは『ハート』 
Heart Shop
Powerd By WebToJpeg


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

Powerd By WebToJpeg

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




Edit
  1. 2007/01/14(日) 00:19:38|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

バナー作成ツール

はずかしながら『バーナー』だと思っていた『バナー』

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

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

私のような方におすすめのツール(サイト)を発見しました。
フリー素材・壁紙配布SoWhat

サイズが小さいのが玉に瑕ですが
ものすごく簡単ですからちょっと立ち寄ってみてください。
こんなバナーが1分?2分ぐらいでできます

FC2バナー



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





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

by G-Tools




Edit
  1. 2007/01/04(木) 23:36:44|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

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

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

ハーレクイン図書館本館
WebToJpeg

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

ハーレクイン図書館(FC2館)
WebToJpeg

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

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

ジャンル別に探そう
WebToJpeg



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











Edit
  1. 2007/01/02(火) 11:25:23|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

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

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

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

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

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

本棚ページ

ではなくて

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

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

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

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

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


Edit
  1. 2007/01/01(月) 12:13:00|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

PC画面を画像化する方法2―サムネイルツール

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

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

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

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

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

ツールによっては画像エラーがでて上手く表示されない
場合もありますので要チェック。
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

ワンクリックで3サイズ同時に作成・表示されます。

Webshotspro.com

英語サイトです。600×800までの6サイズ。

サムネイルAPI

WebToJpeg おすすめ
WebToJpeg

リアルタイムで更新! 
これはすごい!
...read more


Edit
  1. 2007/01/01(月) 10:05:57|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

マイ本棚(Amazonツール)の設置―テンプレートカスタマイズ

新刊情報☆ ハーレクイン1月5日刊
powerd by amazon360

先ほども紹介したアマゾン360の『マイ本棚』↑
本棚の中の本は拡大して見ることが出来ます。
すごいツールでしょ!

ところが・・・早速設置したところ
↓こんな風になってしまいました。
???
本棚
あれれ・・・なんかおかしい・・・

原因はツール製作者さんのこちらの記事で判明。
AMAZON360 MY本だな設置
ちゃんとFC2ブログで動作テスト済でした

ただ貼り付けただけでは使用しているテンプレートによって
本だなの中で、本が浮いているようになってしまう場合があります

その場合は、「テンプレートの設定>編集>スタイルシートの編集」を・・・
つづきを読む

つまり余白設定をゼロにしないと
本がきちんと並べられないということ。

そ~なのか!

しかし原因がわかってもにはちょっと難しかった・・・
テンプレートによって色々パターンがあるのでって
本当にいろいろパターンがあるようで、
どこがその箇所なのか、見つけるのに悪戦苦闘。

まっ、こんな便利なツールのためなら
苦労もなんのそのですが・・・

ということで参考までにカスタマイズのメモを残します。
当図書館の使用テンプレートはFC2の公式テンプレート[rose]です。
テンプレートの前半部は省略します。

中ごろの/* 記事表示部分 */という箇所を目安に探してください。
...read more


Edit
  1. 2006/12/30(土) 22:10:23|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

サブカテゴリ表示

これまた以前に挑戦したテンプレートのカスタマイズのひとつ。

サブカテゴリの表示方法
カテゴリが多すぎる、さらに細かく分ける必要があるときに
あったらいいな~という機能。

で・・・いろいろ探したところ以前見つけたのが
↓ボボコフさんのこの方法
サブカテゴリ風に表示する
seesaaブログとlivedoorブログ向け
seesaaは独自タグがあるため、この方法だとFC2ブログにはつかえません。


で・・・今回見つけたのがJUGEMブログ向けの方法
でもおそらくこの方法だったらどんなブログテンプレートでもつかえると思います。

カテゴリーリストでサブカテゴリーがあるっぽく表示する

カテゴリーのリスト化










Edit
  1. 2006/12/27(水) 17:14:18|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

カテゴリの記事数の表示を消す方法

ず~っと前に『カテゴリの記事数の表示を消す』方法は?
って探していたのですが 、とてもわかりやすく説明されているサイトを見つけました。

こちら
まめの一言(JUGEM出張所)さん

こちらの場合は『最新の記事の欄の日付を消す』方法ですが同じことです。

まず使用中のテンプレートの<div class="linktext">
{latest_entry_list}</div>の部分に注目!
この<div>タグに id="newlist"を追加して、そのあと<script>~</script>を追加するだけ。
<script>~</script>のタグ詳細はまめの一言(JUGEM出張所)へ。

<div>タグで書かれているテンプレートの場合は、この方法だと完璧!タグが長いのでちょっと半信半疑でやってみたのですが見事消えました。

うわ~感激!ありがとうございます。

(ちなみに、今回この方法で日付を消したのは当サイトではありません。当サイトは<div>タグを使用していなかったので該当部分を削っただけでとりあえず消えたので…)









Edit
  1. 2006/12/26(火) 23:27:31|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

クリスマスツリー☆フラッシュ素材


☆をクリックすると
なんと雪が降ってくるんですよ。


フラッシュバックスさんのサイトでいただきました。
こちらのサイトではFlashのホームページ素材を無料で提供!
眺めているだけでも楽しい素敵なサイトです。

これも素敵!

I wish you a Merry Christmas

『初心者でもできる簡単FC2ブログの作り方』というサイトで教えていただきました。
ツリーの設置の仕方まで、とても詳しくわかりやすく説明してくださっています。
ありがとうございます!


クリスマス気分を味わいたいと思います。





Edit
  1. 2006/12/07(木) 23:00:18|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0
前のページ 次のページ