トップの画像

TOGAQ

トップの画像について問い合わせが。現在、11種類アップしています。Javascript で表示する画像を決めているので、無駄にアンテナに拾われることもないみたいです。興味がある人はソースをチェックして下さいまし。カンタンです。

トップの画像を複数のサイトで共有したらどーだろう、絵画廊というかなんというか。バックグラウンドの画像を共有するというアイデアに興味がある人はコメント下さい。もう少し形になってきたらエントリー化します。

TOGAQ
この記事をシェアしてくれると、とても嬉しい😆
Follow Me !
波形研究所 所長

WAVEFORM LAB(ウェーブフォーム・ラボ) は音楽制作、デジタルライフ、イノベーションをテーマとするサイトです。

1997年、伝説の PDA、Apple Newton にフォーカスした Newton@-AtMark- を開設、Newton や Steve Jobs が復帰した激動期の Apple Computer のニュースを伝えるサイトとして 200万アクセスを達成。2001年からサイトをブログ化、2019年よりサイト名を WAVEFORM LAB に改称、気になるネタ&ちょっとつっこんだ解説をモットーにサイトを提供しています。

Follow Me !
WAVEFORM LAB

コメント

  1. catkick より:

    説明文のページ、書き直しています。ファイル名、場所は同じです。

  2. alfabeat より:

    私もエントリーの絵使って宣伝します。よろしいですよね?

  3. N@ より:

    もちオーケーです>エントリの絵

  4. catkick より:

    エントリの絵を使ってウチでも宣伝していいすか?

  5. N@ より:

    えー、エントリを作りました。インパクトも必要と思い図式化。
    自分のサイトでそれぞれよりすぐりの10個を共有できるという方法はどーでしょう。

  6. 7thHeaven より:

    プログラムなどの知識はほとんどありませんし、
    画像もすぐには用意できませんが、
    @Niftyの「ココログ」上でもできそうですよね、
    できるようでしたら参加させてくださいませ。

  7. V.J.Catkick より:

    ちなみに、GIFイメージは必ずしも透過である必要はないので…。
    色々試してみたんだけど、グレーを2階調064と192で作っておいて、バックの絵にあわせて切り替える、ということも出来ますね。アトリビュートつけないとならないので、読み込みに時間がかかるのと、メンテが大変なのが欠点。
    それと、元旦とかクリスマスとか、季節にあわせたモノも表示したいな、と思ったんだけど…。そうなると引数渡して指定するか、スクリプト側で勝手にやるか…。ムズイです。
    参加者は今のところは3人ですか…。まぁ大々的に宣伝してないから、どんなものになるのかわからないというのもあるだろうし。

  8. N@ より:

    作ってみました。 http://siesta.co.jp/… ドメインまで指定しているなら、自分のところで画像を管理して
    ドメインをランダムに呼び出して URL とできないかね。
    この場合、ファイル名は固定になるけど。

  9. N@ より:

    透過GIF、やっぱり奇麗にはのっからないねぇ。ふちがギザギザとうか。

  10. alfabeat より:

    V.J.Catkickさん、解説わかりやすいと思います(→自分のレベルでは)
    このやり方だと<div>タグにスタイルとして組み込めますね。
    あとはどのようになるのか楽しみではありますが、参加者がチト少ないのが残念ですね。

  11. V.J.Catkick より:

    http://www.vjcatkick.com/… 解説のページをカンタンにまとめてみました。
    使い方、難しすぎでしょうか?

  12. catkick より:

    >Table 使わないとダメ?
    大丈夫だと思います。
    div の部分からdocument.writeで書いてやれば問題ないでしょう。
    関数にファイル名だけ取得するやつを作っておきますね。

  13. alfabeat より:

    来るべき日に備えて幅とかを800pxに修正したりしました。
    でもバックグラウンドの画像をランダムで変更するにはTableを使わないとダメですかね?<div id=”xxxx” style=”background:#FFFFFF url(‘images-url’) top left no-repeat;”>みたいなのではJava Scriptは使えないですよね。

  14. V.J.Catkick より:

    作者ごとにランダムっていうのはやってないけど、JavaScriptだけで特定のディレクトリからファイルを持ってくるスクリプトは出来ました。
    サンプルで作ったものが、ウチのページの「@」のアイコン押したページで使っています。
    パールとかCGIとかにするのが一番いいんだけど、敷居が高くなるので、JavaScriptのみです。
    構造としては、スクリプトを持っている人が絵の管理をし、スクリプトファイルに登録していく、という方式になります。
    使う側はスクリプトファイルを外部JSファイルとして読み込み、関数を呼びます。
    関数はファイルへのURLを返しますので、使い方色々となりますね。汎用性を持たせるために、サイズの指定とかは各自のページでご自由に。
    一応、たたき台として、さらに煮詰めていきましょう。

  15. V.J.Catkick より:

    作者分けはフォルダ番号振ってそれで分ければ取れると思うよ。
    例えばN氏のフォルダは「000」フォルダ、alfさんは「001」とかね。
    実際には 000/headpic_001.jpg とか指定すればいいわけでして。
    ランダムで取ってくるときに、フォルダ名に偏りを持たせれば、自分のところから重点的にもってくるでしょう。
    わたしももう少しまとめてみますね。

  16. alfabeat より:

    おねがいしまーす。なんか楽しみっす!

  17. N@ より:

    もう少しまとまったらエントリーにしますね。

  18. N@ より:

    今の画像は 800 * 101 なんです。
    バックグラウンドに画像を貼って上に透過GIFを重ねると、
    Webサイトをプリントした時に Background が印刷され
    ないので、わざわざ画像を置いているんですよね。
    でも Background を使うしかないかな。
    置き場所はどっかに集中させるとして、画像のフォーマットを
    決めましょう。
    共有画像フォーマット(案)
    ・800 * 100 (僕のところの修正しておきますよ)。
    ・50 * 200 以内で四隅に画像のクレジットを入れるのはオーケー。
    ・画像は JPEG のみ(スクリプトで指定するため)。
    ・ファイル名は headpic_xxx.jpg 。xxx は数字。
    管理をどーするか。どこに置くか、ジャンルやシーズン、作者ごとに
    ファイルを分けるか。分けた場合、どうやって呼び出すか。
    ファイル名を作者ごとに分けると「自分のを重点的に呼び出す」とか
    可能ですが、ソースの方でシーケンスナンバーだけでなく、ファイル
    名も意識しないとダメですよね。
    アイデアよろしくー。

  19. alfabeat より:

    おーっ、共有賛成。
    参加者がひとり一つずつ画像を準備するってのもおもしろいかもね。
    もち縦横と形式を揃えて。

  20. koh より:

    おー、かっこいー
    そうそうこの間重要なことを伝えわすれたんですよー
    僕のホームページのタイトルのフラッシュって
    N@さんの「気になるモノインデックス」にインスピレーションを受けたんですよー
    その事を伝えられなかったことが残念で残念で、、、汗

  21. V.J.Catkick より:

    んーと、ウチのトップページはバックの絵と、サイトロゴは別々になっています。つまり、後から書いてます。ソースみてちょ。

  22. N@ より:

    あー、Javascript 自体はインターネットで検索して見つけたやつに
    変更を加えたものです。なのでご自由にどうぞー。猫氏のスクリプト
    に変えようかな。
    共有する件は、バックの画像だけ共有して題名だけをレイヤーで
    重ねられればいいねー。数人じゃ面白くないけど。
    画像にロゴを入れておいて、題字はスタイルシートかなんかでね。

  23. V.J.Catkick より:

    こうするといちいち数を数えなくても、ファイルの数を勝手に参照してくれます。
    注意:配列最後のアイテムに「,」を打つとエラーになりますので注意。
    <script language=”JavaScript”><!—
    var imgArry = new Array(
    “headimg_01.jpg”,
    “headimg_02.jpg”,
    “headimg_03.jpg”,
    “headimg_04.jpg”,
    “headimg_05.jpg”,
    “headimg_06.jpg”,
    “headimg_07.jpg”,
    “headimg_08.jpg”,
    “headimg_09.jpg”,
    “headimg_10.jpg”
    );
    document.write(‘<img src=’);
    document.write(imgArry[Math.floor(Math.random() * imgArry.length)]);
    document.write(‘>’);
    // –>
    </script>
    ※「<>」はお決まりの全角文字。

  24. alfabeat より:

    使わせてもらおうかなぁ〜。
    使用許諾条件って何かあります?
    例えば、このタイトルはN@さんのスクリプトを使用してますみたいなものを入れるとか…。

  25. V.J.Catkick より:

    思ったんですけど、どっかに置いておいて、共用したら面白いかも…。

タイトルとURLをコピーしました