ネットで稼ぐ方法を探しているけど見つからない
ネットで稼ぐ方法を探しているけど見つからない。
とりあえずネットを検索してみる
ネットで稼ぐ方法
検索してみる
でてくるのは
これって全部スキルがないとできないんですよね。
それでどのサイトをみてもこんな感じで同じような内容ばかり。
昔のインターネットならもうちょっと面白い情報がでてきたんじゃないだろうか。グーグルがそれっぽいサイトを上位表示するようになってから役に立たない情報ばかりがでてくるようになりました。
ネットには真の情報はない
っていうか結局ネット上には真に価値のある情報はないんですよね。
書いていて思い出しました。ネット上に真の情報がない理由は人は稼げる情報を教えないからです。
自分の飯のタネになるものは普通教えませんよね。
ネットで稼ぐ方法はポイ活？
ネットで稼ぐ方法としてポイ活もたまに紹介されるんですが、ポイ活では大きく稼げないんですよね。
ポイ活で稼いでいる人は友達紹介のアフィリエイトリンクからたくさん他の人をポイントサイトに登録させたひとです。
それとスマホを6台くらいつかってポイ活してる人がネットで紹介されていたんですが、オチが規約違反かなんかでアカウントをBANされたりもしたとかいうのでした。
まあなんかポイ活はそんなことまでしてやるもんじゃないですね。
とはいえポイ活自体はこのブログでも何個か記事を書いてますが、ちょくちょくはやってます。そこそこおもしろいゲームをやって3000円くらいもらえるのでその点はいいです。
ネットで稼ぐ方法の展望
ポイントサイトの検索エンジンを作ってみようかと思いましがまだ手をつけてないです。
やることとしてはスクレイピングして情報をデータベースに保存して、ユーザーがなんか検索したらサーバー側でなんかやってそのデータをフロントに表示みたいな感じなんで頑張ればできそうなんですが、レンタルサーバーでSSHが使えないとわかったんで、結局やってません。
まあ類似サービスはすでにありますし、作って当たるかどうかもわからないですしね。
からくりとしては、検索したひとに案件のリンクを表示して当然そのリンクは友達の紹介のリンクにするというわけなんですが、このシステムを最初に作った人はぼろ儲けしてるんじゃないでしょうか？
AI
最近あるのがAIでエロCGをつくってDLsiteとかで売るっていのがあるんですが、あれって結局高性能なパソコンが必要なんですよね。正確にいうと高性能なグラフィックボードを積んだパソコンが必要で、イメージ的にはマシンパワーで何百枚もの絵をAIに生成させてそこからよさそうなやつを選ぶっていうような感じです。
novelaiっていうのを使うとエロCGを生成できますが執筆時点ではこの情報も古くなっている可能性があります。
結局のところ思い通りのCGがすぐ生成されるわけではなく何回も生成してその中から良い画像を選ぶのでこれもわりかし作業が発生するのと、自動化するにはいろいろなことを考えないといけなさそうでかなりめんどくさそうですよね。というかグラボももってないんでスタート地点にすら立てないというか。あとAIでつくったエロCGって全然魅力を感じないのでこれを買う人の気持ちが全然わからないってのもありますね。
ChatGPT
ChatGPTにブログの文章を書いてもらってそれをコピペする
簡単にコンテンツのできあがり！
稼げるかどうかべつですけどね。
どっかでみましたがグーグルは別にAIに文章を書いてもらう事自体は悪いことだとおもってないらしいですね。
まとめ
ネットで稼ぐ方法を探しているけど見つからないという話でした。
探して見つからないなら自分で考えるしかないですね。
はてなブログの目次を自動生成するjQueryのコード（保存版）
たぶん永久保存版です。
他のサイトのコードを使いまわしたりしていたのですが、どうも細部に余計なコードが入っていたりしたので修正しました。
たぶんこれでつぶしがきくんじゃないでしょうか。
はてなブログの目次を自動生成するコード
$(function() { var list = ""; var $h2 = $('.entry-content h2'); var className = ""; var h2_count = 0; var h3_count = 0; $(".page-entry .entry-content h2, h3").not('.guest-footer-content h3').each(function(i) { var idName = "section" + i; var count = 0; if ($(this).is('h2')) { h2_count++; h3_count = 0; count = h2_count; className = "h2-section" } else if ($(this).is('h3')) { h3_count++; count = '' + h2_count + '-' + h3_count; className = "h3-section" } $(this).attr("id", idName); list += '<li class = ' + className + '><span>' + count + '.</span><a href="#' + idName + '">' + $(this).text() + '</a></li>' }); if ($(".page-entry .entry-content h2").length >= 2) { $("<div class='section-list'><ol>" + list + "</ol></div>").insertBefore($h2.eq(0)) } $('.section-list a').on("click", function() { const target = $(this.hash); const headerHeight = target.outerHeight() / 2; const topOffset = target.offset().top; const scrollTo = topOffset - headerHeight; $('html,body').animate({ scrollTop: scrollTo }, 50); return false }) })(jQuery);
ポイント
jqueryをつかっています。んで記事内のh3を取得するわけなんですが、はてなブログの場合は関連記事の見出しがh3になっているのでそれを拾わないようにしないといけません。
上記コードは対応済みです。
あとは目次のリンクをクリックしたときにスクロールアニメーションのコードも書いてあります。
insertBefore($h2.eq(0))
insertBeforeで最初のh2の前に目次がくるようにしてます。
他のサイトだとなぜかここが余計な要素を追加してそこにappendToするみたいになっていたので、余計な要素を書かないようにしてます。
jqueryのスクロールでページ内リンクに推移させると位置がずれる問題の解決策
はてなブログの目次をjqueryで作って目次のリンクをクリックしたら、見出しの位置までスクロールさせる実装をさせていたのですが、なぜか見出しの中心までスクロールしてしまうので対策を考えました。
今回はjqueryでスクロールさせる場合ですね。
目次をクリックしたらその見出しまでスクロールさせるコード
$('.section-list a').on("click", function() { const target = $(this.hash); // 対応するセクションの要素を取得する const headerHeight = target.outerHeight() / 2; // セクションの高さの半分を取得する const topOffset = target.offset().top; // セクションの上端からの距離を取得する const scrollTo = topOffset - headerHeight; // スクロール位置を微調整する $('html,body').animate({ scrollTop: scrollTo }, 50); return false; });
コードレビュー
jqueryのoffset().topは指定された要素のドキュメント上の位置を返します。具体的には、指定された要素の上端が、ドキュメント上のどの位置にあるかを返すものですが、なぜか中心までスクロールしてしまいます。この原因はわからなかったのですが、見出し要素の中心までスクロールしてしまうのでこれを修正するために「見出しの高さ÷2」分を差し引くことで解決しました。
const headerHeight = target.outerHeight() / 2; ←これで見出しの高さ÷2 分の高さを取得 const scrollTo = topOffset - headerHeight; ← トップオフセットからさきほどのheaderHeightを引きます
$(this.hash)について
$(this.hash)はリンク先の要素を取得します。
たとえば
<h2 id="hoge">見出し</h2>
となっている場合はa要素は
<a href="#hoge">リンク</a>
の形になっている必要があります。
hashとは#です。#hogeハッシュの要素を取得するということですね。
はてなブログのサブメニューをCSSのみで実装する方法
タイトルははてなブログのサブメニューと書きましたが、別にhtmlの構造は同じですので、いろんなところで使えると思います。
wordpressなんかの場合はphpをいじらないといけないと思いますが、htmlでサイトを表示するときにいまから書くやり方でも十分つかえるでしょう。
それとサブメニューをCSSのみで実装と書きましたが、ホバーしたときにサブメニューを表示するやり方は一般的には「ドロップダウンメニュー」になります。そのため正確にはドロップダウンメニューをCSSだけで実装するやり方を書きます。
グローバルメニューのサブメニューつきhtml
<nav class="global-nav">
<ul>
<li><a href="#">ホーム</a></li>
<li class="sub-menu">
<a href="#">親カテゴリー</a>
<ul class="sub-menu-list">
<li><a href="#">子カテゴリー</a></li>
<li><a href="#">子カテゴリー</a></li>
<li><a href="#">子カテゴリー</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">親カテゴリー</a>
<ul class="sub-menu-list">
<li><a href="#">子カテゴリー</a></li>
<li><a href="#">子カテゴリー</a></li>
<li><a href="#">子カテゴリー</a></li>
</ul>
</li>
</ul>
</nav>
cssだけドロップダウンメニューを実装
.sub-menu {
position: relative;
}
.sub-menu-list {
padding: 0;
margin: 0;
width: 200px;
list-style: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease-out;
}
.sub-menu:hover > .sub-menu-list {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
コードレビュー
サブメニューをvisibility:hidden;にする理由
サブメニューは親のli要素の子要素なのでサブメニューにホバーするということは親要素のli要素にホバーしているということになる。そのためvisibility: hidden;にしておいて要素を非表示にしておくことでサブメニューにホバーしたときに動作してしまわないようにしている。
htmlの構造
.sub-menu:hover > .sub-menu-listに注目してほしい。これはhtmlの構造をみると.sub-menuというli要素にホバーしたときにサブメニューを表示するというコードだ。
なぜli要素にホバーしたときなのかというと、htmlの構造上こうしないとうまくいかない。
<li class="sub-menu"> <a href="#">親カテゴリー</a> <ul class="sub-menu-list"> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> </ul> </li>
li.sub-menuのなかに.sub-menu-listがあるのでcssとhtmlをこのように設定することで、当然sub-menu-listにマウスをホバーさせてもサブメニューがきえることはない。なぜならsub-menu-listも.sub-menuというリストの中にあるのだから。
基本的なhtmlとcssだけ書きましたが細部の調整は自分で行ってください
ChatGPTが口ごたえするときの対策
ChatGPTを結構つかっているのですが最近のChatGPTはわりかし口ごたえをするようになったような感じがします。
そういうときにどうするべきかを備忘録としてのこしておこうと思いますが、こんなことを書く時点でなんだかばかばかしいきもします。
というのも。
ChatGPTはデータ
ChatGPTはデータなので、人がChatGPTにおこってもある程度きまったパターンしかかえってきません。
筆者も考えを改める必要がありますがChatGPTにはわりと柔軟性はあるものの、なんでも正確に完全に回答できるわけではありません。最近はChatGPTをつかってコードを提示してもらうようにすることが多いですが、やはり思っている答えがなかなかでないことがあります。
ChatGPTが答えられないときは潔く切ったほうが正解ですね。そういうときにgoogleで検索するとすんなり答えが見つかることがあります。
ChatGPTに怒らないようにする
ChatGPTに怒っても正論しかかえってきませんし言い返されることがあります。
答えを探してChatGPTを使うわけなので、意味のない文言をChatGPTに打ち込まないようにすることも大事です。
3回くらい質問して答えが出なかったら潔くあきらめる
もうこのとおりですね。
わりとおしい答えは返ってくることがあるのですが、3回くらい質問して答えが出なかったら潔くあきらめましょう。
コードを提案してもらうはずがなぜかこちらがコードレビューをするはめになります。
はてなブログのヘッダーメニューを作成するためのアプローチ方法
はてなブログのヘッダーメニューは基本的に自作
はてなブログにはなんとヘッダーメニューを作成する機能がないので生のhtmlをはてなブログのカスタマイズで貼り付けないといけません。
最近ではデスクトップでサイトを見る人はいなくなったのでスマホで見たときにヘッダーメニューをどうするかというなのも考えないといけません。
そもそも論↓
カテゴリーとか記事が少ないときはとくにヘッダメニューを作る必要はないかと。
このブログも記事執筆時点ではヘッダメニューをつくるほどのコンテンツ量はありませんでしたがなんだか寂しいのでとりあえず作ろうと思ってつくってみました。
はてなブログのヘッダメニューのhtml構造
カテゴリーにサブのカテゴリーのようなものがある場合はそういうのを考慮してヘッダーメニューにもサブメニューを作りたいと思うことがあります。
サブメニューを含めたヘッダーメニューの基本的なhtml構造は以下のようになると思います。
<nav class="global-nav"> <ul> <li><a href="#">ホーム</a></li> <li class="sub-menu"> <a href="#">親カテゴリー</a> <ul class="sub-menu-list"> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> </ul> </li> <li class="sub-menu"> <a href="#">親カテゴリー</a> <ul class="sub-menu-list"> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> </ul> </li> </ul> </nav>
こういう感じのhtmlをカスタマイズのタイトル下に貼り付けてあとはcssやjavascriptでやりたいようにやっていきます。
サブメニューのアプローチはどうやるか
ヘッダーメニューでサブメニューがある場合はどうやって表示させるか迷うことがあります。
これには2つやりかたがあってひとつはjqueryのtoggleをつかってサブメニューを表示させる方法。
もうひとつはcssでサブメニューの透明度を0にしておき、ホバーしたらopacityを1にするというような方法。
別にどちらの方法でも構わないのですが、筆者はcssでやる方法でヘッダーメニューを作成しました。
はてなブログのヘッダメニューをスマホでみた場合どうなるのか考える
さきほどはサブメニューについて書いたんですが、実はスマホでサイトをみるときってホバーという概念がないのですよね。
筆者の場合はスマホでのサブメニュー表示に関してはあきらめました。たぶんやり方はあると思うのですが、そこまでするのも手間がかかるのでしませんでした。
あとはスマホでメニューがそのまま表示されるのは見栄えがわるいので、よく他のサイトでも解説されているのがハンバーガーメニューでメニューを隠しておいてハンバーガーをクリックしたらメニューを表示するというやつです。
結論をかくと以下のようなhtmlになります。
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span> <nav class="global-nav"> <ul> <li><a href="#">ホーム</a></li> <li class="sub-menu"> <a href="#">親カテゴリー</a> <ul class="sub-menu-list"> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> </ul> </li> <li class="sub-menu"> <a href="#">親カテゴリー</a> <ul class="sub-menu-list"> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> <li><a href="#">子カテゴリー</a></li> </ul> </li> </ul> </nav> <script> $(function(){ $(".menu-toggle").on("click", function() { $(this).next().slideToggle(); }); }); </script>
雰囲気的にはあんまり煮詰めてない感じのコードになりますね。まあとりあえずそれっぽいグローバルメニューができればいいのかなと。
css
cssはめんどうなので省略しますが文章でかくと768以下のときにナビを消して。ハンバーガーメニューを表示するようにします。
このあたりもcssではなくjsを使うのもありだとは思いますが、自分のやりたい感じでやればいいと思います。
雑感
はてなブログにはそもそも論として親カテゴリー・子カテゴリーという概念がなく、カスタマイズして自分でjsで子カテゴリーのようなものを疑似的に作る方法があるのですが、現在は外部のjsファイルにアクセスできなくなり子カテゴリーというものもなくなってしまいました。
しかしながら、[親カテゴリー]-[子カテゴリー]のような感じで子カテゴリーを命名することで、まあそれっぽくはなります。
あとはカテゴリーが今後増えたときにこのグローバルメニューのhtmlをまた修正して追加しないといけなくなるのがめちゃくちゃめんどくさいですね。ほんとはグローバルメニューの生成も全部javascriptでやりたいくらいです。
しかしグローバルメニューくらいはhtmlで書いておいた方がよさそうな気もします。
あと心残りなのはスマホではホバーできないのでサブメニューが表示されないことですねー。
なんかいろいろもやもやは残りますが、最低限のグローバルメニューはできたかなと思います。
はてなブログのカテゴリー階層分けができなくなった（外部ファイルにアクセス不可）
はてなブログのカテゴリー階層分けが突然できなくなった。
いろいろ調べていたら外部のjsファイルがアクセス不可になっていた。
はてなブログのカテゴリー階層分けのためにフッターに読み込むスクリプト
はてなブログのカテゴリー階層分けをするためにはjqueryとhatenaの外部jsファイルを読みこむ必要がありました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script> <script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>
- https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js
- https://hatena.wackwack.net/v1.1/js/category_archive.min.js
この外部jsにアクセスしてみるとなぜかアクセス不可になっているんですよねー...
そもそも論
はてなブログのカテゴリー階層分けをするためにネットを検索して適当にやり方をまねして成功したのであんまりきにしてませんでしたが
https://hatena.wackwack.net←そもそも論としてこれなんやねんという話。
調べても情報が出てこないんですよね。ドメインにhatenaとついているのではてな関連なのではと思いますが、そもそもがよくわからない外部ファイルでもあるんですよねー...。
カテゴリーの階層分けができなくなったがどうする？
とりあえずいつからアクセスできなくなったのかは不明ですが、外部ファイルにアクセスできなくなってしまったのでカテゴリー分けはとりあえずできなくなってしまったということになります。
まあ自分でコードを書けるのであれば別に不可能な話でもないでしょうが、やっても金にならないですし、とりあえず放置ですかね。
もしかしたら急にアクセスできるようになるかもしれないのでフッターに追加したコードはそのままにして一か月くらい様子みてだめそうだったらコードも消そうかと。
っていうかブログで階層分けができないはてなってどうなの？
