ブログ拍手をトップページ等にも表示させるカスタマイズ

拍手

ブログ拍手をトップページ等にも表示させるカスタマイズ

さて、みなさまよいお年をお迎えでしょうか。
さっそくですが、拙テンプレートの利用者さまから、ご希望がありましたため、あるカスタマイズ方法の説明をいたします。
今回は、「トップページ等にも、拍手数を表示する方法」です。
以前に、軽く紹介したことがありますが(「ブログ拍手」の特殊な改造について)、その際には、拙テンプレートに限った手順というわけでは、ありませんでした。

このカスタマイズには、かなり条件があり、条件に当てはまる方のみしか、今回のやりかたは、適用できません。
というのは、タネ明かしをしてしまえば、「本来は個別ページのみに適用される『追記部分』を、トップページ等にも適用させることで、それぞれの記事の拍手部分を表示させる」ということだから、です。

条件

そうなると、条件としては
  1. 拙テンプレートのうちのどれかを利用されていること。拙テンプレートなら、全種類にこのカスタマイズ用コードが適用できます。
  2. これまでに、一度も「追記機能」を使ったことがなく、また、これからも使わないこと。
  3. 別サービスの「FC2拍手」ではなく、もともとついている「ブログ拍手」のほうを利用されていること。
  4. 記事下の「高速画像表示機能利用のための広告」を、非表示にしていること。
    もしも、これから非表示にするという場合には、広告が消えるまで1週間かかるので、このカスタマイズは、そのあとに行うこと。
  5. 2020/01/23追記:「記事下関連記事」の設定は、以下のようにしておく(環境設定から)。
    記事下関連記事の設定

仕様

  • トップページ等では、拍手を押しても反応しないようにするので、拍手だけを押して帰って、個別記事ページを開かずに読んだふりをするということは不可能。
  • 人気記事パーツのないFC2ブログでは、「よく見られている記事」を選びたいときに、閲覧者の参考になる。
  • 更新した記事が、実際に見られたかどうかの自分の参考にもなる。

出来上がり見本

以下は、「assembly」を使い、テストブログでやってみた場合です。

Twitter・facebookボタンなしの場合

見本

Twitter・facebookボタンありの場合

more3 「あり」の場合は、重さの面では、ちょっと問題があるかもしれません。
TwitterとFacebookボタンは、トップページにはなくてもいいという場合には、それ用のjsを考えることも可能ですので、ご希望の方は、個別相談で。

手順

  1. テンプレートの管理ページを開く。
  2. HTMLの以下の位置に、以下のコードを追加する。行や列を揃える必要はない(余計な空白が入ってしまうといけないので)。
    <!--more--><%topentry_more><!--/more-->
    HTML位置
  3. 次に、下のスタイル編集(CSS)の一番下でもいいので、以下を追加する。
    /*------トップページ用拍手------*/
    body:not(#entry_page) .fc2_footer{margin:5px 0 0;}
    body:not(#entry_page) .fc2button-clap>img{cursor:unset !important;pointer-events:none;}
  4. 青い更新ボタンを押して、保存する。
  5. ブログを開き、トップページで拍手ボタンを押してみて、反応しないようになっているかどうかを確認し、問題がなければ、作業は終了
関連記事

コメント

コメント(29)
feedlyで取得できない?
ども、あけおめです。
新年早々ですが、feedlyで貴ブログの新着が取得できなくなってます。
最後に取得できたのはこちらの記事が最後です。
https://janedoe1471.blog.fc2.com/blog-entry-271.html

またfeedlyでフォローを削除して再度登録しようとしてもRSS feedが見つからないと蹴られます。
fc2側の問題なのか、feedlyがボケてるのか・・・

何か情報をお持ちですか?

トーフスキー

2020/01/03 06:36 URL 編集返信
テンプレートの件
明けましておめでとうございます。
昨年は私し好みのテンプレートを作って頂きありがとうございました、つきましては初夢の様なご質問ですが、PCから見るテンプレートはお気に入りでいつも記事を書くのが楽しみですが、スマホから見た場合の表示される順序が、本文部分から次にサイドバー部分と表示されるため、プロフィールが大分後に表示される結果になってしまいます、これをタイトルの次ぎあたりに表示できない物か、改造前は紹介部分があってそれはプロフィールと重複しますので削除しましたが、あるいはタイトル部分に入れる方法もあろうかと思いますが、顔ともいえるプロフィール画像が入らないと困りますしなど、勝手な夢を見ています、専門的な部分から見たお考えをお聞かせいただけたら幸いです。

ハックル70

2020/01/03 08:11 URL 編集返信
追記
追記
今になって考えてみれば、「お知らせ」部分はその為にあったんですね、うっかりしていました、復活を考えてみます。

ハックル70

2020/01/03 08:23 URL 編集返信
あいがとうございます
トップページに綺麗にブログ拍手を貼ることができました。
今まで誰が押してくれたかわからないブログ拍手は注意して見てなかったのですが、これで少しは自分の参考として役立てていきたいと思います。
年始早々ありがとうございました。

柴犬マイア

2020/01/03 09:25 URL 編集返信
追記
度々すみません、ヘッダー画像に説明を入れる事で解決しそうです。

ハックル70

2020/01/03 09:30 URL 編集返信
Janedoe1471
To トーフスキーさん
あけましておめでとうございます。

このブログのRSSですが、URLは
https://janedoe1471.blog.fc2.com/?xml
で、更新情報は、表示されています。
ですので、たぶんそれは、feedly側の問題では…という感じですが。
が、ほかのfc2ブログの情報が取得できていて、このブログだけができないということなら、それは、かなりおかしなことで、よくわからないですね。
普通は、フィードが取得できないという問題があったときには、RSSのほうでも取得されていないのですが、今回の場合には、そうではないですね。
ご迷惑をおかけしますが、なぜなのかが、わからない状態です…。

Janedoe1471

2020/01/03 16:11 URL 編集返信
新年のご挨拶
あけましておめでとうございます。
昨年はテンプレートのカスタマイズの件でいろいろお世話になりました。たいへん助かりました。本年もよろしくお願いいたします。

さてようやっとヘッダーの画像をオリジナルのものにすることができました。時間がかかったのはそれに見合う写真がなかなか見つからなかったからです。やりかたはいたって簡単でした。じつは『assembly』もダウンロードしてあり、それもひそかに?試してみています。複製をとっておけばトライし放題なので思ったより楽ですね。

このカスタマイズもやってみたいと思っています。ただ、高速画像表示を利用したままでしたので、今日変更しました。できるのは1週間後になります。もしもなにかありましたら質問させていただきますので、そのときはよろしくお願いいたします。

さきた☆たまき

2020/01/03 16:13 URL 編集返信
Janedoe1471
To ハックル70さん
そうですか、スマホから見た場合に、プロフィール部分が、上のほうにあったほうがいいということですね。
そうしましたら、方法はいくつかありまして、具体的に、どういう感じにしたいのかによって、カスタマイズ方法は、違ってきます。
また、スマホだけを改造するか、タブレット(iPad)の時点からにするか、ということもありますね。
たぶん、iPadの段階から、記事上にプロフィールを移動させて、表示スタイルを少し調整すれば、いいような気がします。
テストブログでサンプルを作って、サンプル画像をお見せして、それでいいかどうかを確認していただくようにしたほうがいいと思いますので、サンプル画像を作ってみますので、しばらくお待ちください。

Janedoe1471

2020/01/03 16:16 URL 編集返信
Janedoe1471
To 柴犬マイアさん
拝見しました。
拍手の数が、一覧になっていると、一目でわかるので、拍手の多い記事は、閲覧者さんの参考にも、なりそうですね。
また何かありましたら、調整が必要なことは、調整できますので、お知らせください^^

Janedoe1471

2020/01/03 16:26 URL 編集返信
Janedoe1471
To さきた☆たまきさん
こちらこそ、今年もよろしくお願いいたします^^
ただいま、ヘッダー画像を拝見しました。
これは、どこかなつかしい感じのする、いい画像ですね。
assemblyで使用される際には、画像のサイズにご留意いただいて、1480px × 650px に合わせた画像を、ご用意いただき、事前に、軽量化ツールにかけて、少しでも軽量化をするように、おすすめいたします。
軽量化ツール↓
https://imagecompressor.com/ja/
assemblyでは、1480px × 650pxが推奨サイズなのは、assemblyでは、もともと、ヘッダー画像を大き目に設定してあり、そしてレスポンシブなので、閲覧デバイスによって、見え方を調整するためなので、すべてのデバイスで、画像のすべての部分が見えているというわけではないのですが、あらかじめ、大き目の画像を用意する必要があるためです。
何かありましたら、また、お知らせください^^

Janedoe1471

2020/01/03 16:35 URL 編集返信
サンプル画像
おはようございます。
さっそくサンプルを作っていただきありがとうございます、スマホで見る場合、コメントが多いとプロフィールまでに相当距離が在りますが、これだとスマホの場合でもすぐわかりますね、「書いている人」でなくて一般的に通用しているプロフィールの方が良いような気もします、でも、これって改造が難しそうです、問題は私に出来るかどうかです。
挑戦してみますのでお手数でもよろしくお願いいたします。

ハックル70

2020/01/04 08:26 URL 編集返信
Janedoe1471
To ハックル70さん
そうですか、それでは、「プロフィール」に変えてみます。
そして、改造は、HTMLと、CSSに、コピペを追加するだけです。
また、今回は、取りあえず、サイドバーのプロフィールはそのままにして、特にいじりませんが、上に出たときに非表示にしたほうがよければ、それも可能ですが、そのままでいいような気もしますね。
それでは、説明記事を作成しますので、しばらくお待ちください。

Janedoe1471

2020/01/04 12:13 URL 編集返信
ご指摘いただいた件で
こんにちは。昨日はコメントいただきありがとうございました。
いちおう対処しましたが、これで大丈夫でしょうか…?
たぶん、コードを挿入した際に余計なスペース(?)を作ってしまったものと思われます。
あるいはコピペの仕方が悪いとか?この手のミスでたびたびご指摘を受けているので、個人的にはちょっと凹んでしまっています。

さきた☆たまき

2020/01/15 14:19 URL 編集返信
Janedoe1471
To さきた☆たまきさん
はい、ただいま確認しましたが、なんらかの余計なものは、現在、消えています。
大したことではないですし、すぐに修正が可能なので、こういうことは、特に凹むほどのことでは、ないと思います^^
例えばですが、ブログ村のバナーを、何百件も記事エディタに貼ってしまっていて、それを全部直さなければならないとか、そういうことなら、凹むというほうが、普通ですが、こういう簡単に直せる内容は、どうということはありません^^

たぶんですが、原因としては、2つ考えられると思います。

①コピーをする際の範囲選択が、多めになってしまっているという場合。
この場合には、必要以上に範囲選択をしているために、余計なものがついてきてしまう、ということです。
②またはですが、コピーをする際の範囲選択の範囲は適切だけれども、ペーストで貼り付けたあとに、なんらかの余計な動作をしてしまっている、という場合。

私の感じでは、①のような気がしますが、わかりませんが。
①か②のどちらかだと思いますので、作業をやったときのことを思い出していただいて、次のときの参考にしていただければ、それでOKだと思います。

Janedoe1471

2020/01/15 14:55 URL 編集返信
To Janedoe1471さん
恐れ入ります。
私もたぶん➀ではないかなという気がします。例えばブログに書く文章なら差し支えないのでしょうが、HTMLでは…。
Janedoe1471さんが見てくださるのでなんとかなっています。いつもありがとうございます。

さきた☆たまき

2020/01/15 19:04 URL 編集返信
Janedoe1471
To さきた☆たまきさん
そうですね、①のような感じがしますが、すぐに直せるシロモノですから、それほど大きな問題ではありません^^
私も、気がついたときには、指摘させていただきますが、もしも何か、ご自身で改造をしたあとに、不安なときには、その旨お伝えくだされば、チェックさせていただきますので、ご遠慮なくお申し出ください^^

Janedoe1471

2020/01/15 19:46 URL 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/22 11:50 編集返信
Janedoe1471
To -さん
そうですか、それでは、調べてみますので、しばらくお待ちください。

Janedoe1471

2020/01/22 15:06 URL 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/22 21:50 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/22 22:14 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/23 10:13 編集返信
Janedoe1471
To -さん
了解です^^

Janedoe1471

2020/01/23 12:56 URL 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/23 20:28 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/23 20:30 編集返信
Janedoe1471
To -さん
さきほど、そちらにコメントをさせていただきましたので、よろしくお願いいたします。

Janedoe1471

2020/01/23 22:50 URL 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/23 23:15 編集返信
Janedoe1471
To -さん
そちらにコメントをさせていただきました。

Janedoe1471

2020/01/24 00:17 URL 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/24 10:11 編集返信
Janedoe1471
To -さん
こちらこそ、いつもお世話になっております^^
そうですね、影をつけたいときに、画像に合わせてつけていくというのも、ひとつの選択肢だと思います。
ご本人にもっとも合った方法を、見つけていただくと、よいと思います^^

Janedoe1471

2020/01/24 14:08 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム