ブログパーツ
asai夜中にピーちゃんに起こされてしまい、寝不足である。
それは、さておき。ブログに張り付けることができる、「ブログパーツ」というものがあるらしい。
あまり、画面がごてごてするのは好きじゃないのだが、写真をスライドショー的に表示する、ブログパーツがあってもよいかと思い探してみた。
まずは、So-netに準備されているものにないかと思い、管理画面を開いてみる。デザインタブのレイアウトで、ブログ画面のどこに何を配置するのかを決められる。
ブログパーツのところには、「QRコード」と「ポストペット」しかない。
しょうがない、他をあたろう。
しかし、である。JavaScriptで書いてあるものは、そのまま記事としてアップすれば、表示されそうだが、記事の中じゃなくて、サイドバーのところに表示したいのだが...
これはどうすれば。HTMLを編集しないとだめか。
ブログパーツ.comに詳しく書いてあった。
「カスタムペイン」というものを作ればよいのね。
さっそく、作ってみる。
サイドコンテンツの中にカスタムペインがあるので、これをサイドバーの適当な位置にドラッグする。
追加されたらカスタムペインをクリックする。と編集画面になるので、ここに適当に入力してみる。設定を保存して、デザインのレイアウトに戻る。ここでも設定を保存する。
でもって、ブログをみてみると。
追加された。
今度は、スライドショーするブログパーツを探してみる。
あるには、あるが、Nikonのサイトにアップした写真をスライドショーでみせるとか、どっかのサイトから画像を持ってくるタイプのが多いなぁ。
So-netのブログのサイトにアップした画像ファイルをスライドショーしたいんだけど。
Flashで作られているものもあるなぁ。Flashだとちょっといやだなぁ。
自作しないといかんのか？そうれもめんどうだなぁ。
カスタムペインに画像を張り付けられそうなので、やってみる。
確かに、画像が表示された。これをJavaScriptで切り替えることができればOKか。
と書いてみたところ。
スライドショーの画像をクリックすると、alertが実行された。よしよし、順調である。
画像を入れ替えるには、srcでURLを変えればよい。
変わるには、変わったが縦横の比率がそのままなので、おかしな画像になってしまった。そこは少し、ほっておいて、何枚かを順番に表示するようにしてみよう。
できたできた。
後は、クリックじゃなくて、自動的に切り替えるようにすればOKか。
アップした画像ファイルのリストを取ってこれれば完璧なんだが、そんなAPIは公開されてないよね？
docuemnt.imagesを見れば、ページに表示されている画像については、取得できる。
勝手に切り替えるようにするには、タイマーをしかけておけばよい。
ということで、以下のようにした。
クリックするとonclickで再度タイマーがしかけられてしまうので、具合が悪い。イメージをクリックしても何もしないようにしよう。なるべくシンプルにするのである。
documentに含まれている全部の画像を拾ってきてしまうので、So-netとかも表示されてしまう。
これは、最初に、大きな画像だけの配列を作ってしまうことにしよう。
後は、縦、横の比率を考えてやって、ちょうどいい大きさにしてみる。
と、ここまでやって以下のようになった。
おお。なんとか形になったじゃない。
クロスフェードするとかっこいいんだけどねえ。そこまでスキルがない。
style.opacityで透明度を指定すればよさげなんだが、めんどくさくなってきた。
割と簡単に作れてしまったので、あまり面白くないなぁ。
しかし、ブログってけっこうすごいシステム。これを作れと言われたらしんどいだろうな。
投稿者プロフィール
-
システムエンジニア
喋れる言語：日本語、C言語、SQL、JavaScript
最新の投稿
コンピューター関係の記事2025年4月29日Nodejsの同期、非同期について【Promiseとか】
コンピューター関係の記事2025年4月26日アイキャッチ画像にSQLアイコンとJSONアイコンが欲しい
コンピューター関係の記事2025年4月23日AdSense審査に無事パス- コンピューター関係の記事2025年4月22日SeesaaでSSブログ復活【wordpressに記事を移行する】
