てがろぐにいいねボタン改!

この前、仲良くしていただいている個人サイトの管理人さんからてがろぐにいいねボタンをつけたいというご相談をいただきました。


いいねボタンがうまく表示されません……

ぜひいいねを付けて欲しいのでお話聞かせてください〜!

※下記バージョンで試しています
てがろぐ ver: Ver 4.1.0 https://www.nishishi.com/
いいねボタン改 ver: Ver 2.4 https://do.gt-gt.org/product/newiine/


個人サイトAさんの環境
・iPadで個人サイト作成
・サーバーはロリポップ
・ロリポップFTPでアップロード

Aさんがご自身でいいねを実装しようとしたところ、クリックができなかったり、管理画面が出てこなかったりしたようです。

CGIは「フォルダごと」アップロード

配布されているフォルダごとアップロードしないといけないのですが、個人サイトAさんはiPad +ロリポップFTPを使用しているということもあり、フォルダごとアップロードができなかった&必要性をご存知なかったので、1つのフォルダに全てのファイルをフォルダから出してアップロードされてたとのことでした。

調べてみたら、iPadでフォルダごとアップロードできるアプリは無いんですね……

ロリポップFTPの中に、ダウンロードしたものと同じ名前のフォルダを作り、同じようにアップロードすることで管理画面が出てこない問題は解決したようです!


設置方法の記載場所

CGIのアップロードが終わったら、「いいねボタン改」の設置マニュアルに記載されている「いいねボタンの設置」の3種のコードは下記のように分けて記載します。

①<head>~</head>の間に書くコード
②</body>(閉じタグ)の直前に書くコード

↑この二つはてがろぐの「skin-cover.html」に記載します。

③いいねボタンを設置したい場所

↑このコードはてがろぐ の「skin-onelog.html」に記載します。

<!-- いいねボタン改ここから -->
のすぐ下の1行目
  <button type="submit" class="newiine_btn" data-iinename="いいねボタンの名前">
の"いいねボタンの名前"は[[POSTID]]を入れると、各記事に固有のいいねボタンがつけられます!
<button type="submit" class="newiine_btn" data-iinename="[[POSTID]]">


ハートマークの変更

デフォルトではGoogle Fontsのアイコンがセットされていますが、Google Fonts内にあるアイコンだったら簡単に変更できます。

↑ここから好きなアイコンを探し、クリックしてinserting the iconを見ます。
緑の枠の部分に名前があるのでコピー!
<!-- いいねボタン改ここから -->
の2行目、favoriteの部分を変更します。
<span class="material-icons-round">favorite</span>
例えば星の場合
<span class="material-icons-round">star</span>

おまけ iPadでのサイト更新について

個人サイトAさんがiPadのみで作成されていると聞いた時、iPadだけで出来るんだ!ってすごく驚きました。
イラスト描かれている方でiPadは持っているという方も多いと思うので、iPadだけで個人サイト作れることは広まると良いなと思いました。
今回のご相談でなんとかフォルダごとのアップロードができないものかといろいろ調べてみたら、それはどーしても難しいようで……
ただ2016年の記事なんですがiOSでいろんなことできるよということが書かれた記事があったので紹介します!
助かる〜



最後に


いいねボタンが実装できました!

良かったです〜!

私はてがろぐで皆さんがいいねを押してくださるという事実にめちゃくちゃめちゃくちゃ励まされているので、いいねボタンを付けたい方が付けることができて本当に良かった〜!!!
個人サイト最高!!!!(結論の飛躍)
▼ この記事をシェア ▼

コメント