記事一覧

スマホのコメント一覧にある「コメントを書く」ボタンを画面上部に移動するプラグイン

スマートフォン専用プラグインです。

スマホのコメント一覧にある「コメントを書く」ボタンを下の図のように、画面上部に移動させます。

sp13.jpg

ソースコード

ソースコードは次のとおりです。

<script type="text/javascript" src="https://fanblogs.jp/techs/file/sp_plugin_comment_button.js" charset="utf-8"></script>

このソースコードを「スマホ版プラグインの設置方法」を参考に、スマートフォンのテンプレートに設置してください。

このプラグインは、すべてのスマホで動作する保証はありません。ご了承ください。

スマホのコメント欄で絵文字を表示するプラグイン

先日公開した「新しいファンブログのコメント欄で絵文字を使えるプラグイン」は、PC用のテンプレート専用なので、書き込んだ絵文字はスマホで表示できません。

このページではスマホのコメント欄でも絵文字を表示するプラグインを公開します。エミュレーションでは動いていますが、本物のスマホ(iPhone アンドロイド)で正しく動くかどうかは、保証できません。

sp12.jpg

このプラグインはPC用のプラグインが導入されていないと、コメントに絵文字がないので意味を持ちません。

まず「新しいファンブログのコメント欄で絵文字を使えるプラグイン」のとおりに、PCから絵文字を入力できるプラグインを導入してください。

次に「スマホ版プラグインの設置方法」を参照しながら、下のソースを設置します。

<script type="text/javascript" src="https://fanblogs.jp/techs/file/sp_plugin_emoji.js" charset="utf-8"></script>

以上で、スマホのコメント欄にも絵文字が表示されるようになります。ただし、このプラグインは表示専用です。スマホから絵文字を入力したければ、スマホの表示を「デスクトップ版」に切り替えてコメントしてください。

スマホ版プラグインの設置方法

パソコン版(PC版)のプラグインだけを設置した場合、スマートフォンには反映されません。逆にスマートフォン版のプラグインだけではパソコンに反映されません。

プラグインを、パソコンからでもスマホからでも使うためには両方設置する必要があります。

sp1.jpg

スマホ版設置方法

「PC版プラグインの設置方法」はこちらのページです。

PC版プラグインを設置し終わった直後なら下のようにPCの「デザイン」画面が表示されていると思います。

sp4.jpg

表示されていない場合は、ページを切り替えます。ファンブログへログイン直後の場合は、「プラグインの設置方法」を参照してページを移動してください。

それ以外の場合は
sp2.jpg

sp3.jpg

管理ページ上部のメニューから「デザイン」にマウスを合わせ、出てきた項目から「コンテンツ」をクリックします。

「デザイン」画面を開いたら、オレンジ色の背景で「PC」と書いてあるタブの横にある「スマートフォン」をクリック。

sp5.jpg

下のスマートフォン用画面に変わるので「コンテンツ」をクリック。

sp6.jpg

スマートフォン用アイテムを配置する画面になります。左側の「追加コンテンツ」から「自由形式」を選び、「使用するコンテンツ」の「記事」の下に置きます。

content.jpg

使用するコンテンツ」に置いた「自由形式」の文字部分をクリック。

content2.jpg

画面に浮き上がった状態で「自由形式」の設定画面が表示されます。

タイトル欄に書いた名前は表示されないので、自分がわかりやすい名前をつけます。

「自由形式」は、今回どこかに貼り付けて使っても、別の「自由形式」をさらに追加して何個でも違う内容のものを作れます。プラグインを追加するたびに別の「自由形式」にわかりやすい名前をつけて作成すれば管理しやすいと思います。

タイトルの下にある「自由入力欄」にスマートフォン用のプラグインを貼り付けます。

plugin.jpg

必ず、スマートフォン用のプラグインを貼ってください。ここにPC用を貼っても動きません。

タイトルとプラグインを入力し終わったら「保存する」ボタンを押します。「設定が完了しました」と表示されたら、ウィンドウを閉じます。

前の画面に戻ったら「設定を反映する」をクリック。

save.jpg

設定を変更しました。」と表示されたら、スマートフォン用プラグインの設置は完了です。

プラグインの使用をやめる場合は、設置したアイテムの右上にあるx印を押せば、削除されます。削除後、「設定を反映する」ボタンを押すと削除した結果が反映されます。