【Vox使い方講座】コード挿入機能で遊んでみよう
使い方講座で何回かご紹介している「コード挿入機能」。サイドバーにもコードが挿入できるようになり、皆さんたくさん使っていらっしゃるようですね。今回はアメリカのチームVoxメンバー、Steveがコード挿入機能を使った面白い使い方を紹介しています。また、お問い合わせがあった1コード挿入に複数のコードを入力できるのか？できる場合どのように挿入するのか？というご質問にもお答えします。
【コード挿入で隠し伝言板を作ってみる】
とちょっと考えたことはありませんか？もちろんread more機能はフィードバックに要望としてお受けしていますが、コード挿入機能を使って記事の中にこんな伝言板を作ることができます。「あれ？でも自分のブログデザインの背景色と文字色を同じにすればいいのでは？」と思われる方もいらっしゃるでしょう。それも正解！ただ、あなたの近所のメンバーがあなたのデザインと同じであるとは限りません。そうするとの「近所全体」ページには表示されてしまいます。この方法を使うと画面上から完全に伝言内容を隠すことができます。Voxには「read more」がないから、例えば映画や本のネタバレ記事を書くときに困る。
- 伝言板のHTMLタグを作ります。例では、伝言板の色を「black（黒）」にすることによって文字を見えなくします。
<div style="background:black; overflow:scroll; width:500px; height:500px">
<font style="color:black">
ここに秘密の伝言を書いてください。
</font>
</div> - 伝言板の色を他の色、たとえば緑色（green）にする場合は、
<div style="background:green; overflow:scroll; width:500px; height:500px">
<font style="color:green">
としてみましょう。また、伝言板の大きさも変更できます。width:500px; height:500pxの数値を変更してください。コード挿入機能の仕様は改善されており、width（横幅）height（縦幅）の数値に合わせて自動的に大きさが変化するようになっています。 - 画面上の「記事を書く」をクリックして、記事作成画面を表示します。
- 「コード挿入」ボタンをクリックし、作った伝言板のHTMLタグをコピーアンドペーストで入力します。
- 入力が終わったら「はい」ボタンをクリックし、伝言板の位置を選択して「挿入する」ボタンをクリックします。
【1コード挿入の枠に複数のコードを記述できる？】
フィードバックをチェックすると、特にサイドバーへ複数のブログパーツを表示したいと思う方は多いようです。今まで1コード挿入に対して1コードとご回答していましたが、エンジニアに確認したところシステムの負荷には悪影響を与えないということが分かりましたのでご紹介します。今までのコード挿入方法で一番難しいかもしれません。ここでは最低限の設定のみご紹介しますが、gnsnwwwさんがとても解りやすく紹介されています。ぜひこちらも参考にしてください。
＜＜まず始めに＞＞
以前、「【Vox使い方講座】サイドバーにコードを挿入する2」でご紹介したように、Voxのコード挿入の仕様は縦幅・横幅の両方を指定していないと挿入したコードがエラーになるというポイントを必ず押さえましょう。
＜＜複数のブログパーツをサイドバーに表示してみよう＞＞
以前ご紹介したブログパーツの中からtmyymmtさん作の「ピンポイント天気予報」と、ちょっとした落書きができる「ラクガキボード」を2つ表示してみましょう。
- ピンポイント天気予報とラクガキボードのコードを作成し、それぞれコピーしておきましょう。
- 画面上の「Voxブログ」＞「デザイン」と進み、「サイドバーアイテムを選択 」をクリックします。
- 「コード挿入」にチェックが入っていない場合はクリックしてチェックをONにし、「コード入力・編集」をクリックします。
- コピーした2つのブログパーツのコードをまずはペーストしましょう。例では順番が「ラクガキボード」・「ピンポイント天気予報」になっています。
<script language="javascript" src="http://rakugaki.kayac.com/rakugaki_tag.php?rid=51863"></script> <noscript><a href="http://www.blogdeco.jp/" target="_blank"><img src="http://www.blogdeco.jp/img/jsWarning.gif" width="140" height="140" border="0" alt="Blogdeco" /></a></noscript></div>
<script src="http://gmodules.com/ig/ifr?
url=http://tmyymmt.mine.nu/gg/PinpointWeatherJapan.xml&up_up_local=14%2F4610%2F
14205.html&up_up_mode=2&up_up_minimum_width=1&up_up_show_today=1
&up_up_show_tomorrow=1&up_up_weekday_max=6&up_up_show_icon=1
&up_up_show_temperature=1&up_up_temperature_unit=auto&up_up_show_
humidity=0&up_up_show_precipitation=0&up_up_show_wind=0&up_up_show_chance
_of_rain=1&up_up_color_set=blue2&up_up_font_size=12&up_up_show_info=1
&synd=open&w=150&h=250&title=湘南の天気&lang=ja&
amp;country=ALL&border=http%3A%2F%2Fgmodules.com%2Fig%2Fimages%2F&output=js"></script> - 次に、この2つのコードを表示するための大きさを指定します。gnsnwwwさんの紹介を参考にし、少しアレンジしています。入力しているコードの一番上に
<div style="width:160px; height:700px; margin:0px; text-align:reft; vertical-align:top;">
と記述し、ピンポイント天気予報のコードが終わった後ろに閉じタグの</div>を入力します。
ヒント：ラクガキボード＋ピンポイント天気予報で、最低でも140px＋250px=390pxの縦幅が必要です。それにコードがくっつくとブログパーツ同士が続いて表示されてしまいますし、コードのタイトルを入力したいので、大きめに指定して例では700pxを指定しました。 - 続いてそれぞれのパーツのタイトルを記載するためのタグを入力し、パーツ同士が続けて表示されないように、且つ各パーツの縦幅を指定します。そしてサイドバーの中で中央に表示されるように横幅と中央寄せの設定も行います。太字で反転した箇所をコードの中に追記しています。<div style>で宣言しているため、各パーツのコードの後ろに閉じタグの</div>を必ず付けましょう。
<div style="width:160px; height:700px; margin:0px; text-align:reft; vertical-align:top;">
<p style="margin:0px;">ラクガキボード</p>
<div style="text-align:center; width:140px; padding:5px 0px; margin: 0 0 10px 0;">
<script language="javascript" src="http://rakugaki.kayac.com/rakugaki_tag.php?rid=51863"></script> <noscript><a href="http://www.blogdeco.jp/" target="_blank"><img src="http://www.blogdeco.jp/img/jsWarning.gif" width="140" height="140" border="0" alt="Blogdeco" /></a></noscript></div>
<p style="margin:0px;">ピンポイント天気予報</p>
<div style="text-align:center; width:160px; height:250px; padding:5px 0px; margin: 0 0 10px 0;">
<script src="http://gmodules.com/ig/ifr?
url=http://tmyymmt.mine.nu/gg/PinpointWeatherJapan.xml&up_up_local=14%2F4610%2F
14205.html&up_up_mode=2&up_up_minimum_width=1&up_up_show_today=1
&up_up_show_tomorrow=1&up_up_weekday_max=6&up_up_show_icon=1
&up_up_show_temperature=1&up_up_temperature_unit=auto&up_up_show_
humidity=0&up_up_show_precipitation=0&up_up_show_wind=0&up_up_show_chance
_of_rain=1&up_up_color_set=blue2&up_up_font_size=12&up_up_show_info=1
&synd=open&w=150&h=250&title=湘南の天気&lang=ja&
amp;country=ALL&border=http%3A%2F%2Fgmodules.com%2Fig%2Fimages%2F&output=js">
</script></div>
</div> - さあこれで準備は完了です。「はい」ボタンをクリックして正常に表示されるかチェックしましょう。
- 「合計の縦幅と横幅を指定して表示枠を確保する」
- 「それぞれのパーツに個別に縦幅（と横幅）を指定する」
- 「パーツ同士が続けて表示されないような工夫をする」
最後にお知らせです。07/08/13現在、Windows XP用アップロードツールでエラーが発生し、アップロードできない現象が確認されています。この現象はアップロードツールを以前ご利用で、Voxのログイン情報が残っている場合は発生しませんが、ブラウザのキャッシュクリアなどでVoxのログイン情報がPCに保存されていない場合発生します。現在調査中となっています。ご迷惑をおかけしますが復旧までしばらくお待ちください。
【関連ヘルプ】
--Steve & チームVoxサポート担当
--原文
My Groups
-
Team Xacti Updated: Sep 22, 2009
-
美味しい動画コンテスト Updated: Sep 22, 2009
Neighborhood
Explore friends, family, friends & family, or entire neighborhood.
