2011年12月29日

今日で作業納め!

今日は本当は作業をしない予定だったんですが、
入っていた予定が急にキャンセルになり、結局ぐだぐだと作業してしまいましたw

まぁやることは山積みなので、やらないよりやったほうがいいんですけどね(笑)


【今日やったこと】


というわけで、明日からお正月休みに入ります!

・・・といっても、ニートなので「(自称)お正月休み」ですがw

といいつつ、結局なんだかんだで作業してそうな気もするなぁ(笑)

それでは皆様、よいお年を♪



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 17:33 | Comment(2) | TrackBack(0) | 今日やったこと | このブログの読者になる | 更新情報をチェックする

トップページをリニューアル!

ご無沙汰(?)しております〜。

つい先日まで、「もう嫌だ!消えてしまいたい病w」にかかっておりまして(笑)、
しばらくこのブログを更新していませんでした。

メインブログのほうはちょこちょこ作業はしていたんですけどね。


で、ついに!(やっと?)トップページのリニューアルが完了しましたので、
新しいトップページを掲載したいと思いまするんるん


2011_12_28トップページリニューアル後

こうして見ると、けっこう縦に長いですね〜。(汗)

今までの構成

  1. コンテンツ一覧
  2. 更新履歴
  3. メッセージ

をやめて、

  1. メッセージ
  2. ナビゲーションボタン
  3. コンテンツ一覧
  4. 更新履歴

という構成にしました。

実はかなり前からこういうふうにしようと構想していて、(水面下で)準備も進めていたのですが
今回やっと実現できたという感じですぴかぴか(新しい)


また、以前にもこのブログに書いたのですが、
サイドバーの構成も見直して、スッキリと折りたたみにしています。

サイドバーがごちゃごちゃしすぎて、自分でも使いづらくなってきたので(笑)、
思い切って以前のツリー式をやめることにしました。

前よりも操作性がよくなったんじゃないかな?という気がしています。

(ただの自己満足の可能性もありますがw)


一応、今回のリニューアルの目的は

  • トップページの見栄えをよくする(楽天アフィリコンテスト対策)
  • ページ数が増えてきたので、目的のページを探しやすくする
  • トップメッセージを簡潔にして上部に配置し、初めて来た人にどういうサイトかをわかりやすくする

ということだったんですが、なんとか達成できた・・・のかな?(汗)

新しく作った目的からさがすのページは、
項目数が多すぎて逆に探しづらい気がしないでもないのですが・・・あせあせ(飛び散る汗)



蛇足になりますが、今回も例によって、IEのバグに悩まされました(苦笑)

わたしはChromeをメインに使ってるので、プレビュー画面で確認して
「よし!」と思って[更新]を押して、IEで確認してみると・・・あぁーバッド(下向き矢印)

overflow:hidden;を指定したのに、隠れてない・・・orz


せっかく苦労して作ったのに、これで全部やり直しか・・・と一時は思ったのですが、

WEB,HTML,CSS,Javascriptに関連するBLOG: IE6対策 「overflow:hidden;」と指定したのに、はみ出る!解決方法

を参考に、position:relative;を指定して事なきを得ました。

ロールオーバーではなくなったけど・・・(涙)

はぁ・・・やっぱりIEは嫌いだぁ失恋



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 13:44 | Comment(0) | TrackBack(0) | 今日やったこと | このブログの読者になる | 更新情報をチェックする
2011年12月25日

2011年10〜11月のアフィリエイト報酬【大暴露w】

お待たせいたしました(exclamation&question

10月・11月と、アフィリエイト成果のご報告をしていなかったので、
まとめて大公開しちゃいたいと思います☆(笑)

ええと、本当に紹介できるほど報酬ゲットしていないので、
期待しないでご覧ください(汗)

9月以前の報酬状況はこちら。


【楽天アフィリエイト】

2011年11月までの楽天アフィリ成果

まずは楽天アフィリエイトから。

2011年11月末までの成果報酬(未確定も含む)です。

ちなみにサイト公開は5月からになります(4月の成果分は自分で購入したものです)。


・・・あえてコメントはしませんが、

最初の半年間は稼げるようになるための準備をしていたんだ!!

ということにしておきます(笑)

11月の後半から本格的に広告掲載を始めたので、ちょっとだけ成果が見え始めてますねひらめき



【A8.net】

次にA8.netの成果です。

画面に収まりきらなかったので、クリックで拡大してください。

2011年11月までのA8アフィリ成果

9月に発生した成果が11月に確定しましたるんるん

未確定のときは5000円くらいあったのですが、確定時に少し減ってしまいましたバッド(下向き矢印)

記念すべき初報酬として、来月半ばくらいに振り込まれるはずですぴかぴか(新しい)

ちなみに、諸事情により今はA8のリンクは外してしまったので、9月以降の報酬はありませんあせあせ(飛び散る汗)



【Google Adsense】

規約により公開できないのですが、
今のところ、小学生のお小遣いくらい(笑)の報酬にはなってますw

もう少しアクセスが増えてくれればいいんですけどねモバQ



・・・とまぁこんな感じです。

アフィリエイトで稼ぐブログというより、
「アフィリエイトで稼ぐのはいかに大変かを語るブログ」みたいになってますね(笑)

12月分の報酬は、もう少し見せられる感じになっているはずですが目

年が明けたらまた公開しますね〜手(パー)



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 16:15 | Comment(2) | TrackBack(0) | アフィリエイト実績 | このブログの読者になる | 更新情報をチェックする

ワンクリックでリンクタグ自動生成‐Chromeエクステンション【Create Link】

Webクリエイターボックスさんで紹介されていたのをたまたま見つけて、
Create LinkというChromeのエクステンションを最近使い始めました。

このエクステンション、名前の通りですが、
開いているページのリンクタグを、ワンクリックで簡単に生成してくれるという優れものです。


たとえば、このブログのトップページを開いているときにこのエクステンションを使うと、

<a href="http://million-per-month.seesaa.net/">アフィリエイトで100万稼ぐ!</a>

というタグを自動でクリップボードにコピーしてくれます。

あとはリンクを貼りたい場所に貼りつけるだけ!


今までは

  1. URLをコピーして、
  2. ページタイトルをコピーして、
  3. リンクタグを生成して、

と3ステップ必要だったものが、
たった1ステップで完了してしまうのでかな〜り便利ですぴかぴか(新しい)(笑)


さらに、「Configure」というところをクリックすると、
貼りつけるタグのカスタマイズができます。

わたしの場合は、

別窓 <a href="%url%" target="_blank" title="%htmlEscapedText%">%htmlEscapedText%</a>

同窓 <a href="%url%" title="%htmlEscapedText%">%htmlEscapedText%</a>

と設定してます。(+ボタンを押すと項目を増やせます)

これだと別窓リンクと同窓リンクが使い分けられて便利です☆


HTMLがわからない初心者さんでもカンタンにできるので、
Chromeユーザーのブロガーさんは是非使ってみてくださいるんるん

オススメですよかわいい


インストールはこちらから→Create Link



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 14:15 | Comment(0) | TrackBack(0) | お役立ちツール・サイト | このブログの読者になる | 更新情報をチェックする
2011年12月24日

jQueryでページ内リンクをスクロール

12月19日の日記で、Webクリエイターボックスさまに掲載されていた方法を使って、
ページトップへのスクロールを実装したことを書きました。


・・・が、今日になって、「他の部分もスクロールしたいなぁ」と思い始めまして、
上の方法はやめて、こちらのサイトさまの方法を使わせていただくことにしました。


今回の方法のいいところは、ページ内リンク(#で始まるリンク)ならすべてスクロールにしてくれるところ。

スクロールのために、HTMLのほうに新しくidやclassを付け加えるといった必要もないんです♪

(もちろん移動先のid指定は必要ですよ。念のため)

ということで、ページトップへのリンクはもちろん、
ページ内への移動もスムーズにできるように!

こんな感じで→nrLaunchをもっと使いこなす | パソコンをかわいくカスタマイズ♪


ところで、わたしが以前idとclassの違いもわからなかったころ、
というか、スタイルシートの「す」の字もわからなかったころの話ですが(笑)、

当時よく見ていた某HTML入門サイトの記述をもとに、
ページ内リンクの移動先を、<a name="hoge"></a>で指定してました(笑)

で、つい最近まで移動先をidで指定できることを知らなくて、
当時作ったものがそのままになってたんです(爆)


なんでこの話をするかと言いますと、上で紹介したページ内スクロール、
<a name="hoge"></a>の指定では機能しないんですね。

なぜだかはよくわかりませんが(もう古いから?)、わたしみたいなCSS音痴の人はご注意くださいね、ということで(笑)


【今日やったこと】

  • 目的別インデックスページの作成。(ほぼ完成)
  • ページ内スクロールを設定。
  • nrLaunchをもっと使いこなす」のページ内移動タグを修正。
  • プロフィールのCSS修正。

というわけで、参考サイトさま、本当にありがとうございました!!

わたしもいつかあんなふうにjQueryを使いこなしてみたい・・・(たぶん無理だけどw)



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 20:03 | Comment(0) | TrackBack(0) | 今日やったこと | このブログの読者になる | 更新情報をチェックする
2011年12月23日

今日から冬休み♪

世間では今日から冬休みですね〜雪

うちには遊び盛りの妹がいるので、休みに入るとなんとなく私まで浮き足立ってしまいます。

しかも、暇さえあれば「遊んで〜exclamation×2」の要求つき(笑)

そんなことで、休暇中はなかなか作業に集中できなくなってしまう私ですあせあせ(飛び散る汗)


【今日やったこと】

  • いただいたご質問に回答。
  • イベントトラッキングの動作確認とタグ追加。
  • 目的別インデックスのリスト作り。
  • jQueryを使った開閉スクリプトを設置。

【明日やりたいこと】

  • イベントトラッキングの動作確認。
  • 目的別インデックスの改良と修正。

昨日設定したGoogle Analyticsのイベントトラッキングですが、
やっぱりきちんと動作していなかったので、今日修正を加えて、
明日また確認してみることにします。



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 19:25 | Comment(4) | TrackBack(0) | 今日やったこと | このブログの読者になる | 更新情報をチェックする
2011年12月22日

外部リンクをトラッキングするには?

Google Analyticsでは、イベントトラッキングという機能(?)を使って、
外部サイトへのリンクのクリック数を計測することができるらしいと最近知りました。

で、色々調べてみたのですが、どうもやり方がよくわかりません(汗)

そしてGoogleのヘルプは、例によってよくわかりません(涙)

リンクタグのところに、onclickなんちゃらってやつを追加すればいいみたいなのですが・・・。


というわけで、今日試しにそれらしきコード(?)を追加してみたのですが、
Google Analyticsのデータはすぐに反映されないので、ちゃんとできているのか確認できませんバッド(下向き矢印)

また明日確認してみて、無事データが取れていたらやり方を書きますね!


【今日やったこと】

  • イベントトラッキング設定。

【明日やりたいこと】

  • イベントトラッキングの動作確認。
  • 目的別インデックスのリスト作り。

こうやって、また予定が後ろにずれ込んでいく・・・あせあせ(飛び散る汗)(焦)



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 19:08 | Comment(0) | TrackBack(0) | 今日やったこと | このブログの読者になる | 更新情報をチェックする
2011年12月21日

明日から本業(?)に戻ります

昨日予告した通り、jQueryでテーブルの選択した行のみを抜き出して比較する方法を記事にまとめました。

が、SyntaxHighlighterを使おうとしたら予想外に手間取ってしまって、
結局これだけで1日が終わってしまうという事態に・・・。

しかも、上手くいかなかった理由はclass指定を間違えていただけとわかって、大ショック(笑)

とにかく何とか使い方がわかったので、今後ブログカスタマイズサイトなんかを作るときに役立つだろうってことで、まぁ良しとしようひらめき


参考サイトさま。

ほかにもいくつかあった気がするのですが、すみません、
どのサイトさんだったか忘れてしまいました(笑)


わたしはWeb屋ではないので、jQuery関連のことはひとまず一段落にして、
明日からは本業(?)のアフィリエイトに戻ります(笑)



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 20:10 | Comment(0) | TrackBack(0) | 今日やったこと | このブログの読者になる | 更新情報をチェックする

【jQuery】テーブルのチェックした行のみを抽出(抜き出し)して比較【チェックボックス】

楽天とかのネットショッピングサイトで、

たくさんある商品の中から、チェックをつけたものだけを取り出して比較できる

っていう機能、よくありますよね?


あれをどうしても自分のサイトでやりたかったので、
半年前にHTMLを覚え始めたばかりの初心者ながら(笑)、
jQueryで実装してみました!!

やり方を載せているサイトがほかに見つからなかったので晒してみます。

素人なので完成度は低いかもしれませんが、
よろしければコピペしてお使いくださいるんるん


◆動作サンプル→可愛いUSBカイロ徹底比較!

(実際にわたしのサイトで使っている様子です)


【jQuery】

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){

     $(".checkbuttom").click(function(){  //比較ボタンがクリックされたら
          var checked = $("input:checked").length;  //チェックされている数を数え、変数checkedにしまう
          if (checked >= 1) {     //checkedが1以上なら
               $("input.hikakubox:not(:checked)").parent().parent().hide();  //チェックがついていないチェックボックスの親要素の親要素を隠す
          }
     });

     $(".allshow").click(function(){  //元に戻すがクリックされたら
          $(".hikaku tr").show();  //すべての行を表示
     });

     $(".nocheck").click(function(){  //全て解除がクリックされたら
          $("input.hikakubox").attr('checked', false);  //すべてのチェックボックスのチェックをはずす
          return false;
     });

});
</script>

【HTML】

<div id="tabletop">

<input type="button" class="checkbuttom" value="比較" />
<input type="button" class="allshow" value="元に戻す" />
<input type="button" class="nocheck" value="全て解除" />

<table class="hikaku">
<tr>
<th>比較</th>
<th>タイトル1</th>
<th>タイトル2</th>
<th>タイトル3</th>
</tr>

<tr>
<td><input type="checkbox" class="hikakubox"/></td>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>

<tr>
<td><input type="checkbox" class="hikakubox"/></td>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>

<tr>
<td><input type="checkbox" class="hikakubox"/></td>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</table>

</div>

【使い方】

  1. jQuery本家からjquery.jsをダウンロードし、お使いのサーバーにアップロードします。
    (FC2ブログの場合は、画像をアップロードするのと同じ手順でアップロードできます。)
  2. 上に書いたjQueryのコードを<head>〜</head>内に貼りつけます。
    1行目のjquery.jsの部分には、(必要に応じて)jQueryファイルへのパスを入れてください。
    (FC2ブログの場合は、http://blog-imgs-43-origin.fc2.com/あなたのブログURLの一部/jquery.jsみたいな感じになると思います。)
  3. テーブルを表示したい箇所に、上のHTMLを書きます。
    (項目数や行数は適宜増やしてくださいね。)

【動作サンプル】

実際にわたしのサイトで使っている様子です。

可愛いUSBカイロ徹底比較!


【簡単な説明】

やっていることは非常にシンプルで、基本は
チェックがついていないチェックボックスの親要素の親要素(=チェックボックスが含まれるtr)を消す

$("input.hikakubox:not(:checked)").parent().parent().hide();

という部分だけです。


ただ、これだと1つもチェックをせずに[比較]ボタンを押した際に、
すべての行が消えてしまうという不格好なことが起こります(笑)

そこで、ボタンが押された時点でチェックの入っているボックスの数を数え、
ひとつ以上にチェックが入っていれば消す、というように条件分岐させてみました。


[元に戻す]は、すべての行を表示させるだけなので簡単です。


[全て解除]のスクリプトについては、jQuery 開発者向けメモ - チェックボックス操作サンプルさまより
そのままコピペさせていただきました(笑)


【参考サイト】

本当に勉強になりました。ありがとうございます!!



補足になりますが、サンプルページのように縦に長いテーブルの場合、
不要な行を消した後に、手動でスクロールして上に戻らないといけなくなってしまいますあせあせ(飛び散る汗)

ということなので、わたしのサイトではScrollToというプラグインを使い、

$("input.hikakubox:not(:checked)").parent().parent().hide();

の後に

$.scrollTo("#tabletop", 0);

という一行を追加しています。

本当はもっとスマートなやり方があると思うのですが、調べてもわからなかったのであきらめました(笑)


使い道としては、疑似ショッピングモール系のアフィリサイトなどで使えるかな?と思いますカバン

もちろんアフィリエイトでなくても、比較したいものがあったら使ってみてくださいかわいい

「ここ間違ってるよ」とか「もっとこうしたら良いよ」とかがありましたら、
初心者なのでやさしく教えていただけると嬉しいです(汗)



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 16:50 | Comment(0) | TrackBack(0) | jQuery | このブログの読者になる | 更新情報をチェックする
2011年12月20日

jQueryで遊んでみた(その2)

前からやりたかったけど、たぶん無理だろうなぁと思っていたことが、
jQueryを使って実現できちゃいました!!

そのやりたかったこととは、
テーブルの中から選択した行のみを抜き出して、比較できるようにする
ってことでするんるん

実際のページはこちら→可愛いUSBカイロ徹底比較!


javascriptの知識もなんにもないので、自分には無理だろうと思っていたんですが、
いやぁー・・・やってみるもんですね(笑)

今日は時間がないので書きませんが、
忘れないうちに備忘録もかねて、明日くらいにやり方を記事にしようと思いますペン


【今日やったこと】


【明日やりたいこと】

  • 目的別インデックスのリスト作り。

おかげで今日やる予定だったことができなくなってしまいました(滝汗)

明日はちゃんとリスト作りやります・・・たぶん。(笑)



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 20:16 | Comment(0) | TrackBack(0) | 今日やったこと | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。