アバン
引きこもり創作者の十円です。
いや、十円名義で創作はしてないんですけど、創作名義で情報発信もしてないので代理で十円がします。
昨今話題だと（思っている）ローカルTwitter風なCGI「てがろぐ」を触りたいなと思ってまして。
CGI実は初耳だったんですけど、要はサーバ上で動くプログラム……的なやつらしいんですよね。
ということは動作確認するのにローカルサーバ建てないといけないのか！？
と、悩んだら意外とそうではなかったらしいので、そのカスタムする際の片鱗を綴ります。
てがろぐに関する説明は省くので、気になる方はリンク先見てクレメンス。
www.nishishi.com
ローカルで動かす環境をつくる
こちらを参考にしたら数分で出来ました。
書くことなくなってしまった。
……ちょっと惰性補足します。
インストールするのは2つのアプリになります。
てがろぐはPerlというプログラム言語で作られたCGIです。
なので、①Perlが②サーバで使えるようにすれば動きます。
つまるところインストールするのはこの2種類のアプリになります。
なんか難しそう……と思いますが、蓋を開けてみれば、インストーラ落として実行すれば秒でPerl入りましたし、zip落として解凍して起動フォルダ指定すれば秒でローカルサーバが立ち上がりました。
「http://localhost/tegalog.cgi?」で見れますヨ。
スマホでローカルサーバを見る
ローカルと言えどサーバを起動したわけなので、正しいURLを入力すればスマホからも見れます。
こちらの方法が楽ちんです。
サーバを起動しているPCとスマホが同じWiFiに接続出来れば問題ないのですが、有線接続でも出来るっぽいですね。
イメージとしてはあれです、Switchで画像をスマホに送るみたいな……Switch保持者にしかわからん話をするな！
ポート番号の確認はWindowsであれば、設定>ネットワークとインターネット>Wi-fi>接続しているWi-fi名を選ぶ
で、下にスクロールしていくとプロパティってのがあるので、そこのIPv4アドレスで分かります。
この場合だと「http://192.168.10.15/tegalog.cgi?」ですね。
ぽちぽち入力しますとこうなります。
さてこれでPCとスマホでてがろぐが見れるようになりました！
やったね！
ならば次はカスタマイズだ！
……この画面はカスタマイズ済みですけど、それは頭の隅に置いてほしいでごんす。
スキンを選ぶかカスタマイズか
昨今話題だと言ったのは、最近（ガバ判定）第三者が続々とスキンを配布しているなあと思ったからです。
とりあえず言わずもがな、広く知られてそうなスキンを貼ります。
www.nememori.info
Twitter風のスキン。
ダークモードがあるので、白画面まぶしっ！ な人におすすめ。
do.gt-gt.org
シンプルなスキン。
創作サイト作成関連で名の知れたdoさんとこのスキンです。
www.nememori.info
ブログ風のスキン。
サムネイルいらない文字だけブログとか、あるいは小説サイトに向きそう。
この辺なんて有名も有名超有名なのでアフィサイトみたいな宣伝して申し訳ないです。
でも十円は個人用で使う予定だったので、デフォルトのスキンを改造することにしました。
ほんとは創作サイト改造するときにインラインで組み込もうと思ったのですが、個人的な呟きもしたい、ということと、検索避けしてるので、ライセンスのリンクから人が流入する可能性をなくしたい、という2点からサイトに組み込むことを断念しました。
前者はさておき、後者に関しては、十円もフリゲ作ってエゴサする人間なので、作者さんが色々実例を見たがるのも分かるのですが、やはり引きこもりたい人間でして……すみません。
いずれそのへんのサーバ借りて置く予定ですが、BASIC認証してURLを表に流さないようにして、おひとり様メモ帳にするつもりです。
ひとりでメモするためだけにサーバを借りるなんて……と思うかもしれませんが、いやでも欲しくない？ というのが回答です。
創作サイト自体はnetlifyしてるのでサーバ借りてないんですよーHAHAHA。
余談が長い！
雑カスタムの片鱗
CSSが汚すぎるのでスキン配布とか出来ませんが、どんなカスタマイズしたか要所要所お見せします。
これも未来の十円のため……データ飛ばんように気を向けますが。
ちなみに確認したところ、追記したコードは改行とかコメントアウトとか含めて300行くらいでした。
思ったより少なかった！
いじったテーマは「skin-simple」です。
最終的にこんな感じになってます。
さっき見えてたやつのPC版です。
さっそく独り言の嵐だよ！
カスタム①display:noneしまくる
CSS弄る時はカスタムCSSとかつくって、そこからオーバーライド（CSSを上書き）するのがメジャーだと思うのですが、今回は本当に適当だったので、モノホンのCSSの下にずらずら追記していきました。
元のHTMLとかCSSは（トンデモ改造したときのバックアップも兼ねて）なるべく弄りたくないので、極力上書きを多用します。
見た目が汚いんですけど仕方ない。
ちなみに十円のdisplay:none集はこちら。
.freespacearea{display:none}
.multisubbox{display:none}
.searcharea{display:none}
.latestpostarea{display:none}
.calendararea{display:none}
.datelistarea{display:none}
.pagelinks{display:none}
.backlink{display:none}
.dateseparator{display:none}
.searchtarget{display:none}
.utilitylinks{display:none}
.postarea{display:none}
.situation{display:none}
.time{display:none}
.newsign{display:none}
.buttonlink{display:none}
.arrow{display:none}
.pageguide{display:none}
.pagehome{display:none}
右クリック→検証でクラス名引っこ抜いて、ひたすら消してます。
地獄かな？
カスタム②日付の位置をずらす
やりたい人だけでいいと思うのですが、自分用のメモだし、メモなら日付情報はおまけだし、ということで、もともと左上だったものを右下に移動させました。
こればっかりは元のHTMLを弄らざるを得なかったです（1回目）。
これをこうしました。
<p class="onehaad">
<!-- 省略 -->
</p>
<div class="comment">
[[COMMENT]]
</div>
↓↓↓↓↓
<div class="comment">
[[COMMENT]]
</div>
<p class="onehaad">
<!-- 省略 -->
</p>
ちゃっかり日付フォーマットも変えました。
管理画面から出来ると思ったのですが、どう見ても決め打ちしてるのでHTMLを弄らざるを得なかった（2回目）。
CSSに関しては右寄せって設定に変更しただけです。
flexするまでもない。
カスタム③続きを見るをマットにする
てがろぐの便利機能です。
投稿をたためるやつです。
たぶんカスタムしたい人はめっちゃカスタムすると思います。
十円は適当なのでこれくらいで終わりました。
汚いと言う割にソースを載せるんですね。
新手のマゾか？
.readmorebutton:link, .readmorebutton:visited {
background-color: #575279;
background-image: none;
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.readmorebutton {
display: inline-block;
padding: 1px 1.5em;
margin: 0 1px;
border: none;
border-radius: 0.1em;
}
ちなみにここで改行すると最後も改行してくれます。
そんなの知っとるわ！ って言われそう。
カスタム④カテゴリとかハッシュタグとかの場所
片方だけでもいいと思うのですが、大分類小分類にしたいなと思って、2つ使うことにしました。
こんなかんじ。
上に追加してるのは、言わずもがなHTMLを弄らざるを得なかったやつです（3回目）。
調子に乗って箱にぽこぽこ入れるようにしたのでスマホでレイアウト崩れまくって悲しくなりました。
箱を並べる時はflex使うといいんですね。
なんか難しくてよく使ってないそす。
汚いですがこんなソースです。
ケチャップ。
.categoryarea {
width: 100%;
box-sizing: border-box;
padding: 0.4rem 0 ;
background-color: rgba(255,255,255,0);
border: none;
border-radius: 0.5em;
min-height: 1em;
}
.categoryTree ul {
margin: 0.5em;
padding: 0;
list-style-type: none;
display: flex;
}
.categoryarea li {
width:20%;
margin:0.1em 0.5em 0.1em 0;
background-color: rgba(255,255,255,0.7);
padding:0.5em 1.2em;
border-radius: 0.1em;
text-align: center;
}
.categoryTree .num {
display: inline-block;
margin-left: 0.1em;
color: #575279;
}
@media(max-width:800px){
.categoryTree ul {
/*追加*/flex-wrap: wrap;
}
.categoryarea li {
/*追加*/width: 20%;
}
}
.hashtaglistarea {
max-width: 100%;
box-sizing: border-box;
margin: 0.4em ;
padding: 1em;
background-color: rgba(255,255,255,0.7);
background-size: 5px 5px;
border: none;
display: block;
border-radius: 0.5em;
min-height: 0.5em;
}
.hashtaglistarea li::before {
content: "#";
color: #B16D6B;
font-weight: bold;
}
カスタム⑤検索ボックスをシンプルに
こればっかりはHTMLを……弄っても無理なやつでした。
大元のコードがCGIに書かれているのでアーーと言いながらCGIを弄りました。
もちろん既存コードはコメントアウトしてバックアップしましたが。
こわい。元ソースあんまりいじりたくない。
ちなみにCGIいじって検索ボタンを消しました。
オーバーライドしたCSSはこんなん。
.searchword {
font-weight: bold;
background: linear-gradient(transparent 60%, #A8E6CC 60%);
}
.searchinputs {
float: right;
text-align: right;
padding: 0 0.4rem;
}
メモ帳なら検索ボックスほしいですよね！！！！
十円は欲しかった。
検索結果のハイライトとも弄れるよ！
CSSだからね！
そこは色変えだけなので割愛。
⑥検索避け
言わずもがな。
HTMLを弄らざるを得なかったやつ（4回目）。
CGI設置するの初めてだったのでこちらを参考にしたりして色々仕込みました。
kensakuyoke.web.fc2.com
METAタグ入れて、robot.txt入れて、htaccessを入れました。
成果があるかはわからない……まだ設置すらしていない……。
⑦ダークモード
調子に乗って設置しました。
一番時間かかったかもしれない！！！
いろいろ参考にした結果こちらを採用。
たぶんもっと頭いい方法あったのかもしれないのですが、svg画像に変更して色がかわらんのう……みたいなことしてました。
コーディングっておいしいの？
ほぼぱくりなので、svgのとこだけ貼ります。
参考URLではお月様の絵文字になってる部分です。
svg画像はいいかんじのものを探して落としてきました。
.switch-mode::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
background-image: url("ifn0685.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
-webkit-filter: invert(0.7);
}
.js-mode-light .switch-mode::before {
content: '';
background-image: url("ifn0564.svg");
filter: invert(181%) sepia(71%) saturate(633%) hue-rotate(319deg) brightness(106%) contrast(105%);
}
変えたところは、この画像と、ボタン？ を回転しないようにしたくらい。
色々サイト巡ったおかげで、ダークモードのときの挙動というかCSSの判定についてキットカットくらい賢くなりました。
例えが下手！
ちなみにダークモード画面です。
svg画像は↓を参考に目分量ゴリラで色を変えました。
元のsvg画像は黒なので、色変えられて助かった……。
いやはやしかし、世の中いろんなゴリラがいますね（ド失礼）。
総括
ついにサーバを借りる時が来たようだな……ククク……。
前にWPやってみたくて借りたことはあるんですけど、WPの管理画面にキレて早々におさらばしました。
静的サイトばんざーい！
なんでWPいじれる人いじれるんでしょうね。
根気の違いかもしれない。
まあそんなわけでCSSのメモをしたいだけの記事でした。
どれだけお役に立てるか、むしろノイズになる可能性も大ですが、なにはともあれ、てがろぐカスタム頑張ってください。
本職デザイナーとかだったらちょちょいのちょいでしょうけども！
以上！
