日替わりバナー [ブログの小技]
最近、毎日違うバナーを表示しています。
楽しんでいただけているでしょうか？
日替わりバナーを表示するには下記のタグを記事本文に書き加えるだけです。
|
<style> <!-- #banner {background:url("http://blog.so-net.ne.jp/_images/blog/_bc9/*****/1234567.jpg") no-repeat 0px 0px;} --> </style> |
－注意事項－
①「URL自動リンクと改行だけのシンプルな入力」で行いましょう
・これはカスタムスキンを自分で作っていない人でも行えます。
・[_bc9/*****/1234567.jpg]この部分をご自分のブログにアップロードしたタグと変えてください。
②記事本文に入れるので、今後２ペイン、３ペインに変えたり、バナーの横幅を変えた場合もこのタグを入れたページは記事で指定したバナーが残ります。
③このタグは、カスタムスキン/ソネブロオリジナルスキンで指定してあるバナーのタグより力が強いです。
なので、トップページのバナーもここで指定したタグに変わります。
④複数の記事でこのタグを指定した場合、その表示されているページの中の一番古い記事に書いてあるタグがトップページのバナーになります。
ブログを開いた時にどうしても複数のバナーが一瞬表示されてしまいます。
これは何とかならないのでしょうか？
わかる方は教えてください。
よろしくお願いします。
| この記事が役に立たれたら、下のバナーをクリックしてもらうとうれしいです。 |
|
新作！！ハーボットのマウスカーソル [ブログの小技]
久しぶりにハーボットのマウスカーソルの新作を作りました。
もうじきサクラも咲き始めますし、サクラをイメージしたマウスカーソルです。
今回は、サイボンさんに登場してもらいました。
マウスカーソルをハーボット（harbot）にしよう！で配布しています。
興味のある方はご覧くださいませ♪
ついに登場！！らしい [ブログの小技]
[重要]So-net blog機能追加予定と動作環境変更について
2007年初頭の機能追加予定につきまして、現時点で確定している内容をお知らせさせていただきます。
-------------------------------------------------------------------
●公開予定の機能
-------------------------------------------------------------------
○スキンCSS編集機能
カスタマイズ可能なスキンをお客さまに提供いたします。カスタムスキンの
CSSをお客さまご自身で編集することにより、ご自分でスキンデザインを
変更することが可能となります。
○記事エリアへの広告表示/広告掲載料e-Coupon（イークーポン）還元
投稿されたブログの記事内容に関連したテキスト広告を自動的に表示いたします。
表示につきましては、設定画面より表示／非表示の選択が可能です。
また、広告のクリック数に応じてSo-netのポイント「e-Coupon」をお客さまへ
還元いたします。
※「e-Coupon」につきまして詳しくは以下のページをご確認ください。
e-Coupon Box：http://www.so-net.ne.jp/ebox/
○管理画面のリニューアル
ブログ管理画面のユーザーインターフェイス（操作感）を改善します。
スケジュールや内容に関しましては、決定次第、What's Newにてご案内させていただきます。
※12月のメンテナンスでブログを構成するスキンデータの一部入れ替えを行います。入れ替えに伴いまして、現在ご自分でスキンをカスタマイズされているお客さまのブログにつきましては挙動が変わる場合があります。スキンのカスタマイズはSo-net blogのサポート対象外となりますことをあらかじめご了承ください。
一部抜粋ですので、全文は What's new? をご覧下さい。
以前、スキンのカスタマイズに関する問い合わせをした記事に少し書いたのですが、ついにソネットから公式で、オリジナルスキンをつける機能の公開が決まったみたいです。
年明けには使えるようになるみたいですね。
ただ、どこまでオリジナルでいけるのでしょうか。
スキンのトップ部分だけかなぁ？？
楽しみに待ちたいと思います。
そのために、現在オリジナルスキンにしている人は何かしら影響があるかもしれないと書いてあります。
ご存知のように、現在私がブログで使い方を書いた
・ハーボットカーソル
・カレンダー
・ｎｉｃｅのアイコン
・スクロールバーの色変更
に関しては、おかしなところが見つかり次第、訂正の仕方の記事を書きますので少し様子をみてください。何もおこらない可能性もありますし。
このことがありますので、ブログのカスタマイズの記事は年明けまでお休みです。
この機能が実装されて、なお変えて楽しそうなところが見つかれば又記事にしてみようと思います。
その他、いろいろかわるみたいですね。
いろいろ変わるのはうれしいのですが、根本的に重たい日があるのも事実なのでまずその解消をお願いしたいと思っているのは私だけでしょうか・・・
マウスカーソルをハーボット（harbot）にしよう！ [ブログの小技]
2006.12.10 カーソル追加
2007.03.19 改訂＆カーソル追加
2007.07.18 カーソル追加
2008.06.10 使用条件変更
現在、たくさんの方にハーボットカーソルを使っていただくことができてとてもうれしいです。
Mediumさんとも話をして、今後は私の方から配布することにしました。
第1弾のカーソル。
第2弾のカーソル。
第3弾のカーソル。
第4弾のカーソル。
第5弾のカーソル
今回の配布条件もMediumさんが第1弾の時に書かれた「マウスカーソルをハーボットにしよう！」とほぼ一緒です。
| 配布に関する注意事項 |
|
■お勧めの挿入場所 １．ブログであればサイドバーに挿入 ２．一般サイトであれば</head>の直前の行 ■使用条件 ３．強制ではありませんが ☆はぼさぽ☆および、Harbot's FIELDへのリンクをどこかで張っていただけるとうれしいです。 ☆はぼさぽ☆へのリンクは下記のタグをサイドバー又はサイトの任意の場所に貼り付けてください。 <a href="http://harbot.maysea.com/" target="_blank"><img src="http://harbot.maysea.com/images/banners/habosapo.gif" border="0" alt="☆はぼさぽ☆"></a> Harbot's FIELDへのリンクは下記のタグをサイドバー又はサイトの任意の場所に貼り付けてください。 <A href="http://www.harbotsfield.com/" target=_blank><img src="http://www.harbotsfield.com/banner.gif" alt="ハーボット素材" border="0"></A> ■ただしこのハーボットカーソルは、全てのブラウザで有効というわけではありませんので、ご了承ください。 ＭＡＣでも見ることができるといいのですがダメなようです。 ■ハーボットのマウスカーソルに関する著作権のプレートは、Harbot's FIELDの素材工房で配布しています。 |
肝心の使用するタグですが、
★第１弾のカーソルをつけたい方は、
Mediumさんが書かれた「マウスカーソルをハーボットにしよう！」をご覧ください。
★第２段のカーソルをつけたい方は、
通常が「振り向いたハーボット」 リンクポイントにタッチした時に「望遠鏡を覗いているハーボット」 がいい方はこちらのタグ
| <link rel="stylesheet" href="http://www.harbotsfield.com/blog/cur/cur.css" type="text/css"> |
通常は「望遠鏡を覗いているハーボット」 リンクポイントにタッチした時に「振り向いたハーボット」 がいい方はこちらのタグ
| <link rel="stylesheet" href="http://www.harbotsfield.com/blog/cur/cur2.css" type="text/css"> |
★第３段のカーソルをつけたい方は、
通常が「振り向いたハーボット」 リンクポイントにタッチした時に「望遠鏡を覗いているハーボット」 がいい方はこちらのタグ
| <link rel="stylesheet" href="http://www.harbotsfield.com/blog/cur/cur3.css" type="text/css"> |
通常は「望遠鏡を覗いているハーボット」 リンクポイントにタッチした時に「振り向いたハーボット」 がいい方はこちらのタグ
| <link rel="stylesheet" href="http://www.harbotsfield.com/blog/cur/cur4.css" type="text/css"> |
★第４段のカーソルをつけたい方は、こちらのタグ
| <link rel="stylesheet" href="http://www.harbotsfield.com/blog/cur/cur5.css" type="text/css"> |
★第5段のカーソルをつけたい方は、こちらのタグ
| <link rel="stylesheet" href="http://www.harbotsfield.com/blog/cur/cur6.css" type="text/css"> |
| この記事が役に立たれたら、下のバナーをクリックしてもらうとうれしいです。 |
| |
ハーボットいっぱい計画の許可でました。 [ブログの小技]
ブログの中をハーボットでいっぱいにしようという計画をすすめていますが、実際のところこれはＯＫなのかというのはわかりませんでした。
ブログのＱ＆Ａには、ブログのカスタマイズについて、
「現在のところ、用意されたスキンのほかはblogに独自のデザインを使用することはできません。」
とあるのですが、これはかなり大まかな書き方なのでどうなんだろう？と思っていましたが確認はとっていませんでした。
というわけで、ソネットに問い合わせていました。
返事までに1週間かかったので、かなりドキドキの時間でした。
今回、問い合わせた内容は、
・ソネブロのスキンのトップ部分およびサイドバーなどをＣＳＳによって変えてよいのか？
・もしだめであれば、ソネットとしてカスタマイズ機能の装備の予定はあるのか？
の2点でした。
ソネットからの返事としては、
・お問い合わせの件ですが、サイドバーや記事に任意のCSSをいれてカスタマイズをすることにつきましては、So-net blogの利用規約違反ではありません。
ただし、その表示などにつきましては申し訳ありませんがサポート対象外となります。
・またCSSのカスタマイズ機能は現在開発中となります。ご提供日などが決まりましたらSo-net blogのWhat's Newにてお知らせをさせていただきます。
ということでした。
ということは、自己責任であれば現在のハーボットいっぱい計画をすすめて良いということですね。
このままの、ハーボットいっぱいのブログのままでいいなんてほんとよかったです。
そして、これからも心置きなくカスタマイズができます。
もし、だめと言われれば諦めないといけないところでした。
今は、とーーーーてもうれしいです。
次なる野望は・・・・
まだ思いつきませんが、とりあえずスキンをピンクからかえます。
ピンクはかわいいけど、やっぱり青の方が好きなんです♡
ｎｉｃｅにもハーボット（harbot） [ブログの小技]
ちょうど今日から、ｎｉｃｅを自分で消すことができるようになりましたね。
あと、ｎｉｃｅを受け付けない設定もできるようです。
さて、ソネブロのオリジナル機能 ｎｉｃｅ！！
このｎｉｃｅって通常
この手のマークですよね。
これを、自分の好きなアイコンにかえてしまおう！！ というお話です。
カレンダーにハーボット(harbot)をつけよう！ [ブログの小技]
これは、ソネブロ用に作っていますので他のブログで使うことはできません。
下記の使用規約を守れる方のみお使いください。
この顔アイコンがすべてのパソコンおよびブラウザで表示されているかは、
確認がとれていません。ご了承下さい。
写真をポラロイド風にしてみよう！ [ブログの小技]
（11/5 ちょっと書き直しました。まだ 書き方が甘かったです＾＾；）
どこかで見たことのあるようなタイトル それは・・・
so-netの 【ブログ教室】の１回目に載ってたものです。
「カッコいい書き方をコピーして使う」というものなのですが、確かに便利だけど ちょっと説明不足だし、実際コピーして使ってみるといろんな問題点もでてきますね。
というわけで、 「カッコいい書き方をコピーして使う kuuバージョン」ということを書いてみることにします（笑）
今日使う写真はこちらです。
では、まずただ単純にコピーしてみます。
<table style="border: 1px solid rgb(153, 153, 153);" bgcolor="white" cellpadding="5" cellspacing="1"><tbody><tr><td><img src="画像をココに" border="0" height="266" width="400"></td></tr><tr><td style="" align="center">コメントをココに</td></tr></tbody></table></div></td></tr></tbody></table>
こういうタグなんですね。
用語の説明はあとですることにして、「画像をココに」というところに画像を入れてみます。
| 阿蘇の空 |
ほんとに単純に、「画像をココに」に画像を入れたんです。
こういう失敗しませんでしたか？
ちゃんと説明がないから こんな風になった人は絶対いるはず。
では、気をとりなおしてもう少しちゃんと入れてみます＾＾
|
| 阿蘇の空 |
どうでしょう？まだ、なんかおかしいですよね。
では、ちょっと改良した kuuバージョンで表示すると・・・
|
| 阿蘇の空 |
こういう感じになります。
私が使ったタグは
<table style="border: 1px solid rgb(153, 153, 153);" bgcolor="white" cellpadding="5" cellspacing="1"><tbody><tr><td><img src="/blog/_images/blog/_bc9/dayan/5343143.jpg" border="0" height="299" width="400" style="MARGIN: 0px"></td></tr><tr><td style="" align="center">阿蘇の空</td></tr></tbody></table></div></td></tr></tbody></table>
上と下でどこが違うのかというと、
①写真の左右の幅が同じになっている
②上の写真は、写真の大きさが勝手に変わってます。元の写真と比べるとよくわかりますね。
変えたところを赤字にしてみました。
この部分をかえることで、ブログ教室で紹介されているタグよりかなりきれいに表示することが可能になります。
そして、いらない部分を青字にしました。
ブログ教室のタグのままだと、書いて保存するたびに余計な空白が入ってしまいます。
なぜなのか？ それは いらないタグがありそれが保存するたびにずれていっているんです。
というわけで、ポラ風写真を自分のブログに貼りたい方は
|
<table style="border: 1px solid rgb(153, 153, 153);" bgcolor="white" cellpadding="5" cellspacing="1" align="center"><tbody><tr><td><img src="/blog/_images/blog/_bc9/dayan/1234567.jpg" border="0" height="299" width="400" style="MARGIN: 0px"></td></tr><tr><td align="center">阿蘇の空</td></tr></tbody></table> |
↑↑をコピーして、赤字の部分を入れ替えてみてください。
height="299" width="400" の部分は自分の入れたい写真のサイズを入れればいいです。
「阿蘇の空」と字が入ってるところにお好きな文字を入れてくださいね。
これでもまだ説明不足かな？
質問があれば、言ってください。
私でわかるものであればできる限り対処します。
リンクバナーの外枠を表示させない方法 [ブログの小技]
①
②
さて、このふたつのリンクバナーの違いは何でしょう？
答えは、②の方には 紫色の外枠がついていますね。
この外枠 無い方がいい場合ってありませんか？
もちろんあってもいいのですが、通常 無い方がすっきり見えると思います。
今回は、この外枠を表示させない方法の紹介です。
皆さん通常リンクを貼りたい場合どうやっていますか？
私は、記事の編集方法を『表示結果を確認しながら編集する入力』にしてリンクを貼ります。
これでやる方が リンクのタグを打つより早いですし間違いがありませんよね＾＾
ただ、外枠を表示しないようにするにはこれではできません。
きちんとＨＴＭＬタグを打つ必要があります。
でも、そんなに難しくないので大丈夫ですよ。
| ＨＴＭＬタグを使って画面を編集するときの基本的な準備です。 特に①は必ず必要です ①管理ページから 設定→優先する編集方法を『URL自動リンクと改行だけのシンプルな入力』にして設定の保存をクリックします。 ②画像を置きたいカスタムペイン又は記事を開きます。 ③置きたいバナー画像をアップロードします。 |
| ① このバナーの場合のタグは <A href="http://www.harbotsfield.com/" target=_blank> <IMG src="/blog/_images/blog/_bc9/dayan/1234567.gif" border=0></A> こんな感じです。 ② このバナーの場合のタグは <A href="http://www.harbotsfield.com/" target=_blank> <IMG src="/blog/_images/blog/_bc9/dayan/1234567.gif"></A> こんな感じです。 リンクを貼る場合は、<A href=リンク先のＵＲＬ>画像又は文字</A> という風なタグを使います。 今回のリンクバナーの外枠を表示させないためには、画像又は文字のあとに 半角分のスペースを入れて その後に border=0 を入れればＯＫです。 おまけ リンク先のＵＲＬのあとに target=_blank ってありますよね？ これは、「リンク先を新しい窓で開く」という意味です。 リンクボタンをクリックした時、現在開いているところにリンク先が開く場合と、新しい窓が開いてリンク先が開く場合があります。これを決めるのがこの target=_blank です。 |
| タグを打つのめんどくさい・・・ 覚えられない・・・・ そんな方は、こんな方法で大丈夫。 かなり邪道のような気もしますが、できます。 ①記事の編集方法を『表示結果を確認しながら編集する入力』にしてリンクを貼ります。 ②記事の編集方法を『URL自動リンクと改行だけのシンプルな入力』に変えましょう。 ③①でリンクを貼った場所を開きます。 多分、↓↓↓ こんな風になっていると思います。 私が上で書いたタグとはちょっと違いますね。でも、細かいことは気にしてはいけません。 <A title="" href="http://www.harbotsfield.com/" target=_blank> <IMG src="/blog/_images/blog/_bc9/dayan/1234567.gif"></A> ここに border=0 を入れてしまいましょう。 <A title="" href="http://www.harbotsfield.com/" target=_blank> <IMG src="/blog/_images/blog/_bc9/dayan/1234567.gif" border=0></A> できました♪ |
最初は難しそうと感じるかもしれませんが、まったく難しくないのでぜひチャレンジしてみてくださいね。
ハーボットのdayan、ジタン、シーム
しあわせ系の長男dayan 2005年11月11日生まれ
しあわせ系の次男ジタン 2006年2月21日生まれ
ぱーっと系の三男シーム 2007年6月6日生まれ
 |
|
|
|
|
|
