ほぼてがろぐひとつで個人サイトを作った話
タイトル通りです。さっそく見ていきましょう。
使ったもの
・てがろぐ
https://www.nishishi.com/cgi/tegalog/
これがないと始まらなかった。国産のCGI。小さいプログラムみたいなもの。
WordPressより軽い。作者さんからのマニュアルが豊富。豊富を通り越してもはや膨大。
・えぬけー様配布スキン「ippen」
https://mk-okiba.wew.jp/tegalog_haihu/?p...
トップページ用のhtmlとてがろぐスキンがセットになったもの。
トップページのみをhtmlで分離させることにより、自由に表記ができたり各種スクリプトが入れやすくなったりバナーを貼りやすくなったり使い勝手がいい。ついでにページの表示がてがろぐ製トップページより早くなる。
ここからスクリプト類
・いいねボタン改
https://do.gt-gt.org/product/newiine/
・ルビタグ変換
https://ofuse.me/e/26443
・novel viewer
https://i-ra.site/parts/3188/
・コイブミ
https://do.gt-gt.org/product/koibumi/
・Lunalys(アクセス解析)
https://yuh-nagomi.jp/lunalys/
やったこと
1.てがろぐ・スクリプトのアップロードとスキンの適応。
てがろぐ公式とえぬけーさんのサイト見てください。
このうち、skin-cover.htmlとskin-onelog.htmlはskin-ippenのものなので注意。通常は上書きする形でアップロードすれば大丈夫。
2.index.htmlのカスタム
インターネットで調べながら頑張った。
えぬけーさんのデモサイト見ながら記述すると崩れにくいです。
CSSは触ってない。あとで色を少し変えます。
3.カテゴリの設定
二次創作用に元ジャンル名のカテゴリを設定。
(元ジャンル名)_novelというIDにした。将来性も高くていいね。
4.スクリプトの実装
index.htmlにコイブミを、skin-cover.htmlとskin-onelog.htmlにいいねボタン改、ルビタグ変換、novel viewer、全てのページにアクセス解析を付けた。
基本的には配布先のサイトを見ながら実装すればいいのだが、下に躓いた点を記録しておく。
・ルビタグとnovel viewerの共存
普通にテキストどおり実装するとルビが表示されなくなった。
これはjQueryが2回読み込まれることになるため。
具体的にはnovel viewer側のjQuery読み込みタグの削除で同居することができた。
この理論はjQueryを読み込む全てのプログラムに適応されるので、コイブミやいいねボタンを設置する際も改めてjQueryを読み込む必要は基本ない。バージョンに注意。
初心者は見落としがちだったので注意。
ちなみに今はnovel viewerのボタンが上のメニューバーの下に潜り込んでしまうのでなんとかしたいと思ってはいる。
サイトはこれで完成。
作品をいくつか投げてきちんと表示されることを確認できたらおしまい！
タイトル通りです。さっそく見ていきましょう。
使ったもの
・てがろぐ
https://www.nishishi.com/cgi/tegalog/
これがないと始まらなかった。国産のCGI。小さいプログラムみたいなもの。
WordPressより軽い。作者さんからのマニュアルが豊富。豊富を通り越してもはや膨大。
・えぬけー様配布スキン「ippen」
https://mk-okiba.wew.jp/tegalog_haihu/?p...
トップページ用のhtmlとてがろぐスキンがセットになったもの。
トップページのみをhtmlで分離させることにより、自由に表記ができたり各種スクリプトが入れやすくなったりバナーを貼りやすくなったり使い勝手がいい。ついでにページの表示がてがろぐ製トップページより早くなる。
ここからスクリプト類
・いいねボタン改
https://do.gt-gt.org/product/newiine/
・ルビタグ変換
https://ofuse.me/e/26443
・novel viewer
https://i-ra.site/parts/3188/
・コイブミ
https://do.gt-gt.org/product/koibumi/
・Lunalys(アクセス解析)
https://yuh-nagomi.jp/lunalys/
やったこと
1.てがろぐ・スクリプトのアップロードとスキンの適応。
てがろぐ公式とえぬけーさんのサイト見てください。
このうち、skin-cover.htmlとskin-onelog.htmlはskin-ippenのものなので注意。通常は上書きする形でアップロードすれば大丈夫。
2.index.htmlのカスタム
インターネットで調べながら頑張った。
えぬけーさんのデモサイト見ながら記述すると崩れにくいです。
CSSは触ってない。あとで色を少し変えます。
3.カテゴリの設定
二次創作用に元ジャンル名のカテゴリを設定。
(元ジャンル名)_novelというIDにした。将来性も高くていいね。
4.スクリプトの実装
index.htmlにコイブミを、skin-cover.htmlとskin-onelog.htmlにいいねボタン改、ルビタグ変換、novel viewer、全てのページにアクセス解析を付けた。
基本的には配布先のサイトを見ながら実装すればいいのだが、下に躓いた点を記録しておく。
・ルビタグとnovel viewerの共存
普通にテキストどおり実装するとルビが表示されなくなった。
これはjQueryが2回読み込まれることになるため。
具体的にはnovel viewer側のjQuery読み込みタグの削除で同居することができた。
この理論はjQueryを読み込む全てのプログラムに適応されるので、コイブミやいいねボタンを設置する際も改めてjQueryを読み込む必要は基本ない。バージョンに注意。
初心者は見落としがちだったので注意。
ちなみに今はnovel viewerのボタンが上のメニューバーの下に潜り込んでしまうのでなんとかしたいと思ってはいる。
サイトはこれで完成。
作品をいくつか投げてきちんと表示されることを確認できたらおしまい！
個人サイトそのものを広げすぎないようにしたり、コンテンツを守るための設定とかなんやかんやです。
今回は自分のサイトとそのコンテンツを守るための一手間について解説します。
1.検索クローラー避け
方法は様々ですが、検索避けしたいページ全てにクローラー避けのタグを追記するのが簡単です。
<head>
<meta name="robots" content="noindex,noarchive,nofollow,noimageindex">
</head>
このように記述します。最近のサイトはベタ打ちは少ないので、そんなに手間にならないかな……？
2.AI学習のクローラー避け
こちらではrobots.txtを用いてクローラー避けを行います。
テキストエディタでrobots.txtを作成し、中身をこのように記述します。
User-agent: GPTBot
Disallow: /
User-agent: ChatGPT-User
Disallow: /
User-agent: Google-Extended
Disallow: /
User-agent: anthropic-ai
Disallow: /
User-agent: Claude-Web
Disallow: /
User-agent: CCBot
Disallow: /
クローラーはこれらが全てではないので暫定の設定です。クローラーが出現したら追記していくようにしましょう。
完成したらクローラーをブロックしたいサイトの一番上層のディレクトリ(一般的にはindex.htmlがある場所)にあげておけば少しは安心です。
3.コピーガード
特に小説作品はコピーで簡単に持ち出せてしまうので、コピーガードを施すことで無断転載を防ぎやすくなります。ついでに右クリック禁止も実装しときましょう。コピーされたくないコンテンツにタグを設定します。
<div onCopy="alert('コピー禁止'); return false;" onContextmenu="return false;">
この部分はコピー禁止になります。
</div>
ちなみにdivタグじゃなくても効きます。
CSSでも実装できますが、個人的にはこっちのほうが小回りが効いておすすめです。
4.直リンク禁止
直リンクされるとサーバーが重くなったりして、特にスペックが低めのサーバーだと困ったりしますよね。というわけでコンテンツへの直リンクを不可能にします。これは.htaccessで実装します。
テキストエディタで.htaccessファイルを作り、中に記述します。
SetEnvIf Referer "^https://www\.example\.com" mysite
Order Deny,Allow
Deny from all
Allow from env=mysite
※\はバックスラッシュです！！
https://の前に^をつけること、.の前にバックスラッシュを必ず入力することを守ってください。
できたら直リンクを禁止したいファイルがあるディレクトリにアップロードしたらおしまいです。
これらの情報はそれぞれ探せばでてくるのですが、まとまった情報ってあまりないなと思って書きました。
このサイトもコピー禁止にしてるので、以下のサイト様から引用していただければと思います。
参考サイト様
do 生成AIに作品を学習されたくない！個人サイト展示物をAI学習から保護する方法 https://do.gt-gt.org/save-my-work-from-a...
do 【目的別】検索避けのやり方！創作・同人サイトのトラブル対策の強い味方【無断転載対策】 https://do.gt-gt.org/avoid-searching/
市川市のホームページ制作会社 文字をコピーできなくする・コピペ禁止にする方法【html css】 https://www.aya-kikaku.work/3964/
RishunTranding 直リンクを禁止・防止する方法 https://rishuntrading.co.jp/blog/seo/den...