poooooon の Weblog Archives Blog Customize

[PR]

2024-04-27 21:29

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

cat:

JavaScriptを使って画像をポップアップさせてみる

2007-06-30 01:04

画像を綺麗に表示させたいなぁ、ということでやってみます。

今回お世話になるのはこちら↓

Lightbox 2
⇒http://www.huddletogether.com/projects/lightbox2/

手順（忍者ブログにて）

上記ページから「Lightbox」のキットをダウンロード。

解凍後、添付の画像をアップロード。

JavaScriptファイルを3つ程アップロード。
但し、その際「lightbox.js」内の画像のパスを先程アップロードしたパスに書き換えておく。

テンプレートの<HEAD>～</HEAD>に下記コードを記述。（階層の構成が判らなかったのでとりあえずフルパスで）

<!--Lightbox-->
<script type="text/javascript" src="http://blog.cnobi.jp/v1/blog/user/e733a6bb7df76e647c87a76701aba054/1183116187"></script>
<script type="text/javascript" src="http://blog.cnobi.jp/v1/blog/user/e733a6bb7df76e647c87a76701aba054/1183116208?load=effects"></script>
<script type="text/javascript" src="http://blog.cnobi.jp/v1/blog/user/e733a6bb7df76e647c87a76701aba054/1183116175"></script>
<!--Lightbox end-->

テンプレートのCSSの欄に「lightbox.css」の中身を丸ごとコピぺ
こちらも画像のパスをアップロードした画像のパスに書き換えておく。

テストとして下記コードを記述。

<a <a href="http://blog.cnobi.jp/v1/blog/user/e733a6bb7df76e647c87a76701aba054/1183123951" rel="lightbox"><img src="http://blog.cnobi.jp/v1/blog/user/e733a6bb7df76e647c87a76701aba054/1183124001" width="100" height="40" alt="" /></a>

それがこちらです→

グループ化

画像をグループ化する為には・・

<a href="images/image-1.jpg" rel="lightbox[グループ名]">サムネイル指定</a>
<a href="images/image-2.jpg" rel="lightbox[グループ名]">サムネイル指定</a>

と、記述すればよさそうです。

近いうちに使ってみます。

Google Adsenseの代替広告について

2007-06-24 17:15

まずはこちらを読んでから。

Google Adsenseの代替広告にAdsense紹介プログラムを使う方法 - GIGAZINE
⇒http://gigazine.net/index.php?/news/comments/20060701_adsense/

代替広告にAdsense紹介プログラムを使う

Google Adsense初心者の私にとってこの見出しでは意味が分かりませんでした。

私なりの説明を加えるとすれば、Google Adsenseで公共広告が表示されてしまう場合に、代替の広告を設定できます。（Google Adsenseを利用してる方はご存知ですよね。）

その代替の広告にGoogle Adsenseのプロダクト/サービス紹介広告を表示させる、ということなのです。

プロダクト/サービス紹介広告というのは「Googleパック」とか「Google Adsens」の紹介とかですね。（もちろん他にもあります。）

ではその設定方法は？

元ネタはSABlog様になります。

SABlog | #155 AdSenseの公共広告の代わりに紹介プログラムを表示
⇒http://www.sabii.com/blog/archives/2006/01/155_google_adsense.php

またしてもですが、一回読んだだけでは把握できませんでしたが、何度か読み直して把握！

HTMLファイルを作成。
FTPサーバーにアップロード。
（ブログサービスを利用している場合は画像をアップロードするのと同じ手法）
サイトに追加するプロダクトを作成。
その際アップロードしたHTMLファイルのURLを指定する。

おおまかにはこんな流れになります。

HTMLファイルを作成


<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
 
<body bgcolor="#XXXXXX(背景の色を16進数で)">
 
<div align="center">
 
ここにAdSenseからコピーした紹介プログラムのコードを書く。
その際、元となる広告の大きさに合うものを選ぶのを忘れずに。
 
</div>
 
</body></html>

こんな感じのHTMLファイルを作成します。
（SABlog様からの引用になります。）

メモ帳か何かで適当に作成し、拡張子を「.html」「.htm」にして保存します。

アップロード

アップロードしたらURLをメモしておきます。

プロダクトを作成

Google Adsenseのページでプロダクトを作成します。

作成途中の[詳細オプション][Google 以外が配信する広告を異なる URL から表示]のラジオボタンを押すとURLを入力する欄が出てきます。

そこに先ほどアップロードしたHTMLファイルのURLを入力すれば代替広告としてAdsense紹介プログラムを使える用になります。（たぶん）

忍者ブログでもプラグインを折りたたみ

2007-06-19 20:53

サイドバーのプラグインを折りたたむ。

参考にさせて頂いた「ニンブロラボ」様の説明が非常に分かりやすいです。

ニンブロラボ. サイドメニュー（プラグイン）を折りたたむ
⇒http://shinobibloglab.blog.shinobi.jp/Entry/30/

以下、ただのメモになります。

作業のメモ

menufolder.jsをダウンロード、自ブログにアップロード。

HTML変更前

<!--plugin1-->
<h3 class="plugin_title" align="<!--$plugin_title_align-->"><!--$plugin_title--></h3>

<div class="plugin_ex" align="<!--$plugin_explanation_align-->"><!--$plugin_header_explanation--></div>
<div class="plugin_contents" align="<!--$plugin_contents_align-->"><!--$plugin_data--></div>
<div class="plugin_ex" align="<!--$plugin_explanation_align-->"><!--$plugin_footer_explanation--></div>
<!--/plugin1-->

HTML変更後

<!--plugin1-->
<h3 class="plugin_title" align="<!--$plugin_title_align-->"id="<!--$plugin_title-->name"><!--$plugin_title--></h3>
<div class="side" id="<!--$plugin_title-->list">
<div class="plugin_ex" align="<!--$plugin_explanation_align-->"><!--$plugin_header_explanation--></div>
<div class="plugin_contents" align="<!--$plugin_contents_align-->"><!--$plugin_data--></div>
<div class="plugin_ex" align="<!--$plugin_explanation_align-->"><!--$plugin_footer_explanation--></div>
</div>
<!--/plugin1-->

CSS追加

.side {
margin: 0;
padding: 0;
}

プラグインのHTML追加

<script type="text/javascript">
<!--
FoldNavigation('プラグイン名','on',false);
//-->
</script>

on なら初期状態で開いた状態。
off なら初期状態は閉じた状態。

折りたたみマーク使う

使おうかと考えてましたが、なんだかスマートではない気がしたので、CSSでプラグイン名が並んでもくどくない様に、色を薄くしようかと考えてます。

小粋空間: サイドメニューの折りたたみマークに画像を使用する
⇒http://www.koikikukan.com/archives/2006/08/25-001313.php

ニンブロラボ. プラグイン開閉マークに画像を使用する
⇒http://shinobibloglab.blog.shinobi.jp/Entry/31/

Webページ検索

ブログ内検索

BANNER PLACE

LATEST ARTICLE

再びお引越し

世界のアーティスト

RGBとCMYKとしげるの関係

JavaScriptを使って画像をポップアップさせてみる

FireFoxは次のページに進むのも簡単

SMOKERS' STYLE COMPETITION 2007

Google Adsenseの代替広告について

空白のページにFireFoxのロゴを

関東の花火大会情報　07年07月

タイピングモナー

デザインガーデンにクリエイター会員として登録してみた

Gmailを清潔感あふれるスキンにするFireFoxのアドオン

EU-日本デザイン・コンペ 2007

忍者ブログでもプラグインを折りたたみ

ブログで広告

LINK

HOME

管理画面

PingLiner-カテゴリリスト-

caraldo.net | MT Blog

poooooon in Ameba

自動登録のSEO対策最適化リンク集

poooooon の Weblog Archives

[PR]

JavaScriptを使って画像をポップアップさせてみる

手順（忍者ブログにて）

グループ化

関連リンク

Google Adsenseの代替広告について

代替広告にAdsense紹介プログラムを使う

ではその設定方法は？

HTMLファイルを作成

アップロード

プロダクトを作成

関連リンク

忍者ブログでもプラグインを折りたたみ

作業のメモ

折りたたみマーク使う

関連リンク

Webページ検索

ブログ内検索

CATEGORY

BANNER PLACE

LATEST ARTICLE

LINK