サイト作成Tips

このサイトは、

で作っています。サイト作成楽しいのでおすそわけできたらいいなというページです。

マイクロブログCGI「てがろぐ」を導入して自分専用Twitterを作ろう

↑のCGIを使うとこういう感じの自分専用Twitterだったり、こういうブログが簡単に作れます。
公式サイトが一番詳しいので、自分がつまづいたところメインでざっくり書きます。サーバーによってはフリープランだとCGIが使えないところもあるので要確認です。

①ファイルをサーバーにアップロードする

公式サイトでてがろぐをダウンロード⇒zipファイルを展開してから、ファイルマネージャーかFTPソフトを使いサーバーにファイルをアップロードします。

「tegalog」フォルダ内にファイルをアップ。（詳しい説明はHPの「セットアップ方法」を参照）
私は最小構成の８つのファイル＋「backup」「images」フォルダ2つ、気に入ったスキン数個をアップして使っています。

②パーミッション設定をする

「tegalog」フォルダ内にファイルをアップしたら、緑色の歯車をタップする。

すると数値を指定する欄が出てくるので、公式サイトのパーミッション設定に書かれている通りに数値を打ち込んでいきます。（スターサーバーはsuEXEC対応してるのでその数値にします）

③ブラウザで確認

ここまでやったら、CGIが動くかどうかの確認作業に入ります。
「https://ドメイン名/tegalog/tegalog.cgi」とブラウザに打ち込み、表示されればOK。（私はここでつまづきました。CGIの表示のさせ方が分からなかった…ふつうに絶対パスを使えばOKでした）

④パスワード設定

表示されたら、てがろぐの自分用管理TOPに移動して「メンテナンス」→「自分のIDを設定」→パスワード変更を行います。

⑤カスタマイズする

てがろぐの外観のことを「スキン」と言います。スキン配布サイトさん最近増えてきているので拝借してもいいですし、HTML・CSS書ける人なら自分で自由に書いちゃうのももちろんアリです。自分は「テキストエディタで個人サイトを作ろう！」さんで配布されていたスキンを自分で書き換えて使っていますが、こちらのサイトさんは今はないようです。さびしい

⑥おまけ

ファイル名をわざわざ「index.cgi」に変更しなくても、「tegalog.cgi」を省略して「/」で終わるURLでアクセスできるようにする方法

ここまで「https://ドメイン名/tegalog/tegalog.cgi」と表示させてきましたが、「tegalog」以下を好きな文字列にすることも可能なようです。
ホームページのここに同じタイトルで書いてあります。自分は「https://ドメイン名/hitokoto/」にしてみました。

ログインされているときだけ投稿画面を表示したい場合

てがろぐは自分だけが投稿することのできる掲示板とほぼ同じなので基本的には訪問者も同じページを見ています。なので自分だけが投稿画面を見たい場合、ログインしていないユーザーに対して投稿画面を非表示にすることが可能なようです。
これもホームページのカスタマイズ方法→「スキンのカスタマイズ諸々」に同タイトルで載ってました。

ログインしてない人だけに投稿画面が見えないように管理画面の設定を変更して、あとはお好みでcssをいじったり、いらない部分のhtmlを消したりします。

⑦完成！

おわり！ちなみに私の今までのてがろぐデザインはこんな感じ。てがろぐ楽しいよ！

イラスト展示に使ってるプラグイン「Kadence Blocks」

当サイトはギャラリープラグインではなく、ブロックの拡張プラグインである「Kadence Brocks」を使っています。これはブロック全体を拡張してくれるプラグインですが、その中に「Advanced Gallery」というブロックがあります。それでギャラリーを作りイラストを表示させることが出来ました。

ギャラリーは無料版でも6種類から選べて、メイソンリーやグリッド、スライド式などがあります。グリッドは比率を1:1や16:9など十数種類から好きに選べるのでかなり自由です。「リンク先」をメディアファイルにすると、訪問者がイラストをクリックした時にLightboxが動作するようになります。LightBoxの機能は搭載されていないので別途用意します。

LightBoxはGitHubの「baguetteBox.js」

こちらの記事が大いに役立ちました。

CDN読み込みのコードをコピペしてfunctions.phpに貼りつけるだけ。JavaScriptなので比較的軽く、かつスワイプでイラストを眺めることができてすごくいい感じです。

「WP Ulike」プラグインでいいねボタンをサイトに設置しよう

WordPressプラグインで簡単にいいねボタンを設置できるので紹介します。

やりたいこと
・連打できるようにしたい
・拍手後のコメント欄はなしでいい（本当に押すだけのやつでいい）

①ボタンを連打できるようにする

プラグインを有効化したらダッシュボードに「WP ULike」の項目ができるので、「設定」→「コンテンツタイプ」をクリックします。

ここの「ログの形式」という項目を「No Limit」にすると何回まで拍手を押せるか自分で決められるようになります。私は10回にしてあります。というのも、このプラグインには「いいね」を取り消せる機能があって、１回とかに設定してしまうと連打した時にいいねが取り消されてしまうのです。「よくないね」とかいう機能なのですがこれいらなくねえ～！？消せないかなと調べたのですが消せないみたいです。なのでとりあえず回数を多めに設定しておいて、傍から見れば連打できるボタンに見せかけようという魂胆です。

②拍手後のメッセージ調整

WP ULike、本当にただのいいねボタンなので、お礼絵とかコメントの機能はありません。シンプルなポップアップメッセージが出るくらいです。「WP ULike」→「設定」→「翻訳」の「いいね通知メッセージ」から好きな文言を表示させられます。背景色などはカスタマイザーから変えられます。私はポップアップメッセージを非表示にしています。

いいねボタンをnote風の追尾型にする方法

SWELLのウィジェットはこんな感じです。「トップページ下部」や「記事下部」が記事下エリアになります。

いちおう、WordPressテーマに記事下エリアウィジェットがある前提で書きますね。

ウィジェットの、いいねボタンを追加したい「記事下エリア」に、カスタムHTMLで以下のコードを記述します。

<div class="like-button-mobile">[wp_ulike]</div>

WP Ulikeショートコードにクラスを与えているだけです。あとはCSSで追尾させて終わりです。追尾させるCSSはこんな感じ。

.like-button-mobile .wpulike .wp_ulike_general_class {
    position: fixed;
    bottom: 1em;
    z-index: 9;
    right: 2em;
    font-size: 20px;
}

他の色や形はデベロッパツールを使ってお好みで調整します。CSSよりWPUlikeの設定の方が優先されるので、CSSを使う時はWP Ulikeの「設定」→「コンテンツタイプ」をデフォルト設定のままにしておくといいと思います。

Wavebox風のいいねボタンを作ってみようとした

こんな感じのボタンを設置してるサイトさんを複数見かけて、どうやってるのかなあと調べて分かったメモ。

作り方①：１ページに複数置けるボタンをCSSでWavebox風に見せかける

do様のプログラム「いいねボタン・改」が使える方ならおそらくメチャクチャ簡単です（ワイのとこでは動作しなかったのでこの方法は諦めました）
ページ内にIDの違う4つのいいねボタンを置き、外観をTwemojiやFontAwsomeなど好きなアイコンにします。
CSSで見た目を整えてホバーエフェクトなどをつければ完成です。

作り方②：複数回答ができるGoogleフォームなどをサイトに埋め込む

初心者にはちんぷんかんぷんで挫折したのですが、サイトにあらかじめHTMLで外観を作っておいて、IDだけGoogleフォームのものを割り振って送信できるようにする、という感じらしいです。好きなサイトさんの見様見真似でやってみたんですが、送信ボタンを作らずラジオボタンを押しただけで回答を記録するようにする方法が分からなかったです。知識が必要。初心者には無理でした。

試行錯誤したけど諦めた

一旦置いといて、また方法がつかめたら書きます。