一歩先を行くQHMユーザのためのTips

ページ4

マーキー

marqueeタグを使用。これはサンプルです。あなたのブラウザでもきちんとスクロールして見えますか?
  CSSを使用。これはサンプルです。あなたのブラウザでもきちんとスクロールして見えますか?

  シンプル、かつ、カラフルなマーキーを作ろう

XHTMLではmarqueeは非推奨タグです

以下はマーキーのテスト用(工事中)

ここを参考に調査中。
 ↓
http://ascii.jp/elem/000/000/215/215040/index-2.html

最新記事
  • QHMがバージョンアップしました
  • QHMの新デザインが追加されました

水平線




区切り線の上下間隔を調整

1行目の文章。


2行目の文章。
3行目の文章。


4行目の文章。
5行目の文章。


6行目の文章。



この方法では、#hrを使用したときの上下間隔は変更できません。
【コード】

1行目の文章。
-----
2行目の文章。
3行目の文章。
#hr(25)
4行目の文章。
5行目の文章。
#hr(10)
6行目の文章。


#beforescript{{
<style type="text/css">
<!-- 
p {
    margin: 0.1em 0;
}
-->
</style>
}}

タイトル

<< 2024.3 >>
[ページ4]
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            


表の中のリンク

No.タイトル備考
1http://www.google.co.jp/
(グーグル)
改行あり
2http://www.yahoo.co.jp/(ヤフー)改行なし

コード

|~No.|~タイトル|~備考|
|1|[[http://www.google.co.jp/]]&br;(グーグル)|改行あり|
|2|[[http://www.yahoo.co.jp/]](ヤフー)|改行なし|

3段組の中でそれぞれスライドショー

(2011.11.23追加)

段組を作成しその中にそれぞれスライドショーを表示します。
必要ならマージンなどstyleの中に適当に追加してください。


あれっ?
いつも間にかスライドショーが表示されなくなっている
プレビューでは正常に表示されるが、更新するとダメみたい...
なぜ? (2012.02.19)


コード

#html2(<div style=width:30%;float:left;>)
#slideshow(60){{
swfu/d/4S.jpg
swfu/d/5S.jpg
swfu/d/6S.jpg
}}
#html2(</div>)
#html2(<div style=width:30%;float:left;>)
#slideshow(60){{
swfu/d/1S.jpg
swfu/d/2S.jpg
swfu/d/3S.jpg
}}
#html2(</div>)
#html2(<div style=width:30%;float:left;>)
#slideshow(60){{
swfu/d/6S.jpg
swfu/d/4S.jpg
swfu/d/5S.jpg
}}
#html2(</div>)
#clear

マウスオーバで画像変更&クリックでライトボックス表示

(2011.11.29追加)

QHMの版数により使用するプラグインが異なりますが、おまじないだけでマウスオーバ時に画像が入れ替わり、それをクリックするとライトボックスで画像を表示できます。

方法1(少し古い版のQHM用 QHM4.7以前)

  • lightbox用に大きな画像を別に用意します。
  • lightbox2とref2プラグインで表示します。
  • 準備:画像を3つ用意し、SWFUでアップします。
  1. rose_m.jpg      lightboxで表示する大きな画像
  2. rose_s.jpg      小さな画像
  3. rose_s_onmouse.jpg  マウスオーバ時の小さな画像

クリックでlightbox表示
【コード】

&lightbox2(swfu/d/rose_m.jpg){&ref2(swfu/d/rose_s.jpg,nolink,change,クリックでlightbox表示);};

方法2(最新版のQHM用)

  • クリックする画像はlightbox用のものを縮小して表示します。
  • 準備:画像を2つ用意し、SWFUでアップします。
  1. rose_m.jpg      lightboxで表示する大きな画像
  2. rose_m_onmouse.jpg  マウスオーバ時の大きな画像

クリックでlightbox表示
【コード】
 showプラグインのファイル名に swfu/d/ は不要です。

&show(rose_m.jpg,change,lightbox2,20%,クリックでlightbox表示);

複数のブログのRSSをまとめて最新版10件を表示する方法

アメリカのYahooが提供しているYahoo Pipesというサービスを使用すると、とても簡単に複数のブログのRSSをまとめて最新版10件を表示するといったことができます。
【手順】

Yahoo Pipes
  1. YahooのIDが必要なので、もっていないときは取得する。(日本のYahooではできません)
  2. Yahooにログインする。http://pipes.yahoo.com/pipes/
  3. Create a pipeをクリックする。
  4. 左側のSourcesから Fetch Feed をドラッグして右側に置く。
    そこに表示したいブログのRSSを指定する。
    +ボタンを押すとURL入力域が追加されるので、必要な数だけRSSを指定する。
  5. 左側のOperatorsから Sortをドラッグして右側に置く。
    ソート条件として item.pubDate in descending を選択する。
  6. 左側のOperatorsから Truncateをドラッグして右側に置く。
    10 を入力する。
  7. 各部品の丸いところをクリックして接続先の丸いところで離して接続する。
    上から順番に全部パイプをつなぐ。

    Fetch Feed → Sort → Truncate → Pipe Output

  8. Refreshをクリックすると動作を確認できる。
  9. Saveボタンを押して保存する。名前は適当でよい。
  10. Run Pipeをクリックすると、画面が切り替わり結果が表示される。
  11. ブラウザのURL域に表示しているURLをコピーする。
  12. QHMの #showrss(ここにペースト,...); にペーストする。

作成したPipeの例
http://pipes.yahoo.com/pipes/pipe.info?_id=aa57048dd5545e39af80d7xxxxxxxxxx

【応用】

  • Sortの代わりに、Filter を使うと、AmebaのRSSから広告を削除するといったことなどができます。

powered by QHM 6.0.9 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional