FC2ブログ「更新通知ボタン」のカスタマイズ

FC2ブログ「更新通知ボタン」のカスタマイズ

カスタマイズ HTML, CSS, JavaScript
2020/08/17
11
vanillaice (Akira)
vanillaice (Akira)
InstructionTipsFC2プラグイン

新規実装の 更新通知ボタン をカスタマイズしたい方向け記事です。

「更新通知登録プラグインが追加されました」というアナウンスがありました

「更新通知登録プラグインが追加されました」というアナウンスがありました

気づくのが遅れてしまったんですが、待望の新機能実装が行われました。と言っても ベストではない。...

vanillaice000.blog.fc2.com

はじめに

個人的には おすすめしません。というのは、この手のボタンはサービス内で共通であることが望ましいと思っています。

例えばInstagramなどのSNSの フォローボタン がユーザーによっててんでバラバラだったりすれば、それはやはりよろしくはない。とはいえFC2ブログというのはテンプレートも統一されていませんし、「更新の通知を受け取れるボタン」であることがわかれば良いのかな、統一感にそれほどこだわる必要はないのかな、という気はします。なので自己責任の元でどうぞ。

目次へ戻る↑

更新通知HTML

動作確認サンプル

更新通知をメールで受け取る 
<a class="notification" href="javascript:window.open('https://blog.fc2.com/notification/manage/confirmsubs?id=<%blog_id>', 'mywindow1', 'width=640, height=565, menubar=no, toolbar=no, scrollbars=yes');">更新通知をメールで受け取る</a>

コード中に <%blog_id> という部位があります。テンプレートhtmlに記載する方はそのまま、記事内で利用する場合は自身のIDに書き換え。

記事内では変数が利用できませんので書き換えを行ってください。IDは自身のブログの 

https://xxxxx.blog.fc2.com/

緑の部位です。私の場合は vanillaice000 ですね。ただ、記事内への直接の貼り付けは おすすめしません。機能しなくなったときに削除や修正に追われることが目に見えてますので、テンプレートhtmlへの記載をおすすめします。

で、こっちの方が軽いですね。リンクで直接飛ばすだけなので負荷は低い。そしてカスタマイズが容易です。サンプルコードはもう最小限の a要素 のみという構成にしています。必要があれば div要素 で囲うなどしてください。p要素 を親にするのはおすすめしません。

htmlコードの記載は掲載したい位置に複数可。

目次へ戻る↑

スタイリング

こちらは テンプレートのスタイルシート に記載してください。テンプレートを変更した際はhtmlも同様 移植が必要 という点も考慮してくださいね。プラグインをそのまま利用すればそういった煩雑な作業も発生しません。管理ができる、という前提の情報提供です。

ボタンデザインは検索すると山程出てくると思いますので2つだけ掲載しておきます。気が向いたら追加する「かも」(o'ω')ﾉ

* 以下はデザインサンプルなのでクリックしてもポップアップは出ません。

サンプル1

更新通知をメールで受け取る
.notification {
  display: inline-block;
  position: relative;
  margin: 0 0 0 10px;
  padding: 7px 8px;
  background: rgb(244,179,146);/* 背景色 */
  color: rgb(51,51,51);/* 文字色 */
  font-size: 1.3rem;
  text-align: center;
  cursor: pointer;
}

.notification::before {
  content: "";
  display: block;
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 2px solid rgb(51,51,51);
}

.notification:hover {
  text-decoration: none !important;
  background: rgb(205,220,58);/* マウスオーバー時背景色 */
  color: rgb(51,51,51);
}

* .notification::before の z-index: -1; を削除すると背面のボーダーが前面になります。

* 背景色を rgba(x,x,x,.x) の不透明度つきにすると背面のボーダーが透けて見えるようになります。

サンプル2

更新通知をメールで受け取る
.notification {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 7px 12px;
  overflow: hidden;
  border-radius: 20px;
  color: rgb(51,51,51);/* 文字色 */
  font-size: 1.3rem;
  text-align: center;
  cursor: pointer;
}

.notification::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
}

.notification::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  transition: .3s;
}

.notification:hover {
  text-decoration: none !important;
}

.notification:hover::after {
  opacity: 0;
}
目次へ戻る↑

まとめ

くれぐれも私個人の考えは「フツーにそのまま使っとけばいい」という感じです(笑)

* 本記事は予約投稿です。

Related post

Comments  11

-
2020/09/02 (Wed) 12:37

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/09/05 (Sat) 16:47

To 記事の管理の件 内緒さん

こんにちは。お返事遅くなりました (*_ _)

そう言っていただけると励みになります。なにせ批判も多いもので(笑)
既存ユーザーさんからの批判は承知の上での改定なんですが、カスタムURLを利用中の方は番号欲しいですよね (´・ω・｀)
ただ本文を削った点については修正したいと思います。個人的に不要と考えましたが
・タイトルづけを後で考えようと思って空で保存
というパターンがたしかにありますよね。あと小説なんかを綴っている場合は

xxx3話
xxx2話
xxx1話

といったタイトルになるでしょうから本文冒頭が必要というご意見もうなずけます。

ただあくまでもリストであるため掲載情報の領域に限りがあって非常に難しい… （￣∀￣；）
あとこちらで用意した初心者モニターさんの意見から「ブログ初心者は表を嫌う傾向にある」ことがわかりました。もうね、表形式になっているだけで見たくないんですって。これは結構意外だったけれども (´・ω・｀)

順次実装されると思いますが、こちらが目にできるほとんどは批判内容になるはずなので(批判の方が機会も場所も多いため)、内緒さんのコメントは繰り返しますがとっても励みになります(笑)
また、ご意見などもどうぞ遠慮なさらず教えて下さいね。納得できる内容についてはその都度修正する方向です。

ただ今回は「ブログ開設見込みユーザー」「初心者」が主なターゲットになっているので、既存ユーザーさん、ブログ歴の長い方にとっては歓迎できない点も多くあるかと思います。どうしても見込み・初心者さんの意見を重視してしまうというか、せざるを得ないというか。それでもなんとか折り合いがつけられれば、と思っています。
なんか運営スタッフさんが矢面で責められるのが申し訳なく… （￣∀￣；）
あと批判するときって物の言い方・伝え方に品格が出るよな、って思いました。私も気をつけようと思います(笑)

今は既存のスタイルに継ぎ接ぎで新しいスタイルを添えている状態なので、微妙に崩れていたり、私と運営との連携不足などもあってみなさまにはご迷惑おかけします。

またお気づきの点がありましたらお伝えくださいね。いつもありがとうございます :)

関係ない件をひとつだけ。
数字の画像認証って難しくないですか (´・ｪ・｀)
私だけ？全然わからなくて、というかそもそもカタカナが非常に苦手。何回も弾かれてしまうのです （￣∀￣；）

-
2020/09/05 (Sat) 18:48

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/09/05 (Sat) 23:29

To 記事の管理の件 内緒さん②

そうなんですよね。タイトルの省略には私自身困っていたのでわかります ^^;
表タイプへの差し戻し検討もやっぱだめでしたね。拒否反応がすごい(笑)
たぶんスマートフォン優先思考なんだと思います。
「ブログを開設したら〜」を仮定した場合

・記事の更新はたぶんPCでやる
・記事の閲覧はスマートフォンでやると思う

結局ここなんですよね。この層は相当多いと思います。そうなるとPCとモバイルの格差を極力抑えなければいけなくなるのと、ある程度の断舎離も避けられない。「この機能を使うにはPCでやってね」がもう通用しなくなってきていますし、スマホメインユーザーさんを絶対にないがしろにできないという現状で。

「PCとモバイルが全然違う」、だとだめなんで、「PCでもモバイルでもできますがPCだともうちょっと便利かな」、を目指したい ^^;

プロフ設定も、たぶん古参ユーザーさんにとっては邪魔なんですよね。なので折りたたみに。
けれども新規さんに現状のまま「はい、まず写真を設定してください」とやったときに誰一人できませんでした。ともかく「どこに何が」が全くわからない。だったら一番最初に訪れるであろう管理画面で最低限のことはやってくださいね、と。そういう意図で邪魔と言われても必要だと思いぶちこんでみました (o'ω')ﾉ

数字認証、「コ」とか出てきませんか。
「コ」ってなに。5？で合ってんの？みたいな(笑)

-
2020/09/06 (Sun) 07:55

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2020/09/07 (Mon) 07:29

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/09/07 (Mon) 12:41

To 限定記事の件　内緒さん

わー！ごめんなさい。これ私が保存していた日記をテスト公開してしまいました。更新情報のこと何も考えてなかった(汗)

内容はこの世でもっともどうでもいい私の昔のiPhoneのことです(笑)
お風呂で水没させたのでお米の中に入れて乾燥させようと試みた記録。
皆様からすれば「…で？」的な記録(笑)

いくつか点在する限定記事は誰かにお見せするためのものではなく、単に私の作業上、テスト投稿です。
ホントすみませーん　（￣∀￣；）

-
2020/09/08 (Tue) 07:23

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2020/09/08 (Tue) 09:57

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/09/08 (Tue) 14:10

To 内緒さん

こんにちは。
いえ。以前の状態に戻ったただけです(笑)
本来はフルデザインなんですが右(メインコンテンツ)だけ継ぎ接ぎしていたのではば計算等が狂っていたり、変化を望まないユーザーさんからのクレームがあったりで、新旧切り替え方式にして仕切り直すということでした。

私もその方が良いと思うヽ(°▽、°)ﾉ

-
2020/09/09 (Wed) 07:28

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
    FC2共有テンプレート一覧 ご質問の前に
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)
「HTML, CSS, JavaScript」 カテゴリの一覧を見る