パソコンを便利に！！

マイクロソフト コミュニティに、文字選択→右クリックメニューの［Webで検索する］がなくなっているという投稿がありました。
　　
選択して右クリック、コンテキストメニューにwebで検索が表示されなくなりました。 - マイクロソフト コミュニティ

ちょっと気になる内容だったので、自分の周りのパソコンで試して、状況を確認してみました。

文字選択→右クリックメニューから検索を試してみる

１）いつも使っている自分のパソコンで試してみました。
すると、確かに［Bingで ”〜〜” を検索］しかありません。
このパソコンを、以降の説明用にパソコンAとします。

２）マイクロソフト コミュニティの投稿には、別のパソコンではそうなっていないとのことだったので、別のパソコンでも2台で試してみました。
今度は、先ほどのパソコンとは違って、2台とも［Webで "〜〜" を検索する］が表示されます。
こちらは、パソコンB、パソコンCとします。

パソコンAで［Bingで ”〜〜” を検索］をクリックすると、右側にサイドバーが現われて、そこに検索結果が表示されます。
これはパソコンB・パソコンCで［サイドバーで "〜〜" を検索する］をクリックしたときと同じ動作になり、どちらもBingでの検索結果になります。

パソコンB・パソコンCで［Webで "〜〜" を検索する］をクリックすると、Edgeの検索エンジンの設定で既定にしている検索エンジンでの検索結果が表示されます。
Google を既定にしていた場合は、Google の検索結果が表示されます。

試した3台のパソコンの違い

試した3台のパソコンは、同じ Windows 10 パソコンで最新の状態にしてあるので、このような違いが出るのは不思議ですが、少し違いがあります。
その違いが、［Webで "〜〜" を検索する］があるかどうかに影響していると思われます。

OSの違いは次のようになっています。
　パソコンA：Windows 10 Home、OSビルド 19041.985
　パソコンB：Windows 10 Home、OSビルド 19041.985
　パソコンC：Windows 10 Pro、OSビルド 19042.985
OSビルドの 19041と19042の違いは、おそらく Home と Pro の違いで、どちらも最新ということになると思います。
パソコンAが［Webで "〜〜" を検索する］なしで、パソコンB・パソコンCは［Webで "〜〜" を検索する］ありなので、OSの違いによるものではなさそうです。

Edge のバージョンは、3台ともバージョン 91.0.864.37 で同じですが、既定の検索エンジンには違いがありました。
　パソコンA：Google に変更済み
　パソコンB：Bing のまま
　パソコンC：Bing のまま

既定の検索エンジンの違いは、［Webで "〜〜" を検索する］があるかないかに一致します。
ただ、パソコンB・パソコンCの既定の検索エンジンを Google に変更してみても、パソコンAのように［Webで "〜〜" を検索する］がなくなるわけではなく、Google の検索結果が表示されます。

となると、この件の変更に該当する Edge のアップデートが適用されたときに、Edge の既定の検索エンジンが Bing 以外のものだったパソコンの Edge が、［Bingで ”〜〜” を検索］だけに変更されたということになると思います。
そんなことをするかな？とは思いますが、条件の違いから考えるとそうなります。

［Bingで ”〜〜” を検索］だけに変更された Edge を元に戻す方法がないか探してみましたが、今のところ方法はなさそうです。
マイクロソフトとしては Bing を使って欲しいということから、このような変更が行われたと思うので、今［Webで "〜〜" を検索する］が残っているパソコンも、［Bingで ”〜〜” を検索］だけへの変更が、いずれ適用されるかもしれません。
この変更は困ると思う人は、フィードバックで［Webで "〜〜" を検索する］が復活するように、要望しておいた方がいいでしょう。
要望が多ければ元に戻ることもあるかも知れません。

ちなみに、アドレスバーで検索する場合は、これまでどおり既定の検索エンジンに設定しているもので検索できます。
文字選択→右クリック→［Webで検索する］は便利な機能なので、やはりこの変更は評判が悪そうです。

【2021.06.10追記】
今日確認してみたところ、Bingしか選べない問題は解消されていました。
既定の検索エンジンをBing以外に設定しても、問題ありません。
例えば、既定の検索エンジンをGoogleに変更した状態で、［Webで "〜〜" を検索する］を選択するとGoogleでの検索結果ページが開きます。

サイドバーで検索（Bing）の表現が少し変わっていますね。

この問題が解消されていないときは、Windowsの最新アップデートを適用してみてください。

Excel でデータがたくさん入った大きなシートを見るとき、画面が狭い、もっと広範囲を見たいと思ったら、［Ctrl］キーを押しながらマウスのスクロールボタンを動かして縮小表示する方法もありますが、全画面表示にして広い範囲を表示することもできます。

全画面表示にするには、［Alt］・［A］・［U］の順にキーを押します。
通常表示に戻すときは、［ESC］キーを押すか、右上の［元に戻す(縮小)］ボタンをクリックで戻せます。
ただ、たまにしかこの機能を使わない場合は、［Alt］・［A］・［U］のキーを忘れてしまいそうなので、メニューから全画面表示にしたいところです。

以前のバージョンの Excel であれば、［表示］タブに［全画面表示］アイコンがあったのですが、現行バージョン Excel2019 では、そのアイコンがなくなっています。

Excel2019 で［表示］タブに［全画面表示］アイコンを表示する

Excel2019 でも［全画面表示］アイコンを表示することはできます。
以下、その手順です。

１）［表示］タブの右側の空いているところで右クリックして、［リボンのユーザー設定］を開きます。

２）［コマンドの選択］で「リボンにないコマンド」を選択します。
１）の手順で［表示］タブで［リボンのユーザー設定］を開いたので、右側のメイン タブ欄で「表示」の部分が選択されている状態になっています。
１）の手順で他のタブで［リボンのユーザー設定］を開いた場合は、右側のメイン タブ欄で別の部分を選択した状態になっていますが、ここではそれでもかまいません。
次の手順で選択できます。

３）前の手順でメイン タブの表示が選択された状態でしたが、［表示］タブの「ブックの表示」グループに追加したいので、「ブックの表示」を選択します。
次に、コマンドの選択欄で「全画面表示の切り替え」を見つけて、中央の［追加］ボタンをクリックします。

４）「コマンドは、ユーザー設定のグループに追加する必要があります。グループを作成するには、リストからタブを選択し、［新しいグループ］をクリックします。」というメッセージが表示されます。
「ブックの表示」グループに追加したかったのですが、それはできないようです。
メッセージに従って、［新しいグループ］を作ることにします。

５）「ブックの表示」グループが選択された状態で［新しいグループ］ボタンをクリックすると、「ブックの表示」グループの下に［新しいグループ］ができました。
ここであれば、リボンでは「ブックの表示」グループの右側に追加されそうです。
追加した［新しいグループ］に名前を付けたいので、［名前の変更］ボタンをクリックします。

６）「表示名」のところにグループ名にしたい名前を入力します。
アイコンも選べるようですが、［全画面表示の切り替え］の既定のアイコンでいいので、アイコンはえらばないことにします。

７）右側の［メイン タブ］で追加したグループの名前が変更され、そのグループが選択された状態になっているのを確認します。
左側の［コマンドの選択］で［全画面表示の切り替え］が選択された状態で、中央の［追加］ボタンをクリックします。

８）右側のメイン タブで追加したグループに［全画面表示の切り替え］が入ったのを確認して、下の［OK］ボタンをクリックします。

［表示］タブを表示すると、［ブックの表示］グループの右側に［全画面表示の切り替え］が追加できているのが確認できます。
ここをクリックすると、全画面表示にできるようになりました。

通常表示に戻すときは、［Alt］［A］［U］キーで全画面表示にするときと同じで、［ESC］キーを押すか、右上の［元に戻す(縮小)］ボタンをクリックで戻せます。

この方法は Word でも同じなので、Word で全画面表示を使いたい場合は、設定してみてください。

前回記事と同様に マイクロソフト コミュニティ で投稿されている Edge の不具合についての内容です。
Edge の起動時の設定で「特定のページを開く」に設定してあった場合に、その設定したページが開かずに、新しいタブが開くようになったというものです。
何人か同じ内容と思われる投稿をされていいて、返信にも同じ状況だと言っている人がいるので、該当する人は少なくないと思います。

正常であれば、「特定のページを開く」で設定してあるページが開くはずです。

この件の投稿に対して返信で回答されている内容を読んでみると、対処法は3種類あるようです。
いずれもそれで直ったと返信があるので、その3種類の対処法を紹介しておきます。

Edge を再起動する

すでにこの不具合の修正が適用済みとのことで、Edge を再起動することで直るというものです。
再起動すると以下の手順が発生して、不具合が直るようです。

１）「推奨設定に変更するか、設定変更しないか」の選択画面が出る。

２）Edge 起動時の設定を「特定のページを開く」にしている、既定の検索エンジンを Bing 以外に変更しているなど推奨設定に変更したくない人は、「設定変更しない」選択。
（特に設定を変更していない人は、「推奨設定に変更」でいいでしょう）

３）Edge を再起動

これで不具合が解消されるはずですが、Edge を再起動しても上記の手順が発生しない場合は、次の方法を試してみてください。

設定のリセットを行う

設定のリセットを行うことで不具合が解消したという報告もあります。
設定のリセットの手順は以下のとおりです。

１）Edge 右上の［設定など］アイコン をクリックします。

２）［設定のリセット］ページを表示して、［設定を復元して既定値に戻します］をクリックします。

３）［リセット］ボタンをクリックします。
メッセージに書いてあるとおり、各種設定がクリアされることは知っておいてください。
［リセット］ボタンをクリックすると、そのダイヤログが表示されたまま変化がないので少し戸惑うかもしれませんが、しばらく（数分）待っていると、ダイヤログが閉じて設定のリセットが完了になります。

４）設定ページを閉じます。
おそらくこれで不具合は解消されるはずです。

既定の検索エンジンを Bing にする

もう一つ、既定の検索エンジンを Google など Bing 以外に設定している人は、それを Bing にすることで不具合が解消されるという報告もあります。
ただこれは、 Bing 以外の検索エンジンを使っている人はやりたくない設定なので、対処法としてはイマイチです。
手順としては、以下のとおりとなります。

１）Edge 右上の［設定など］アイコン をクリックします。

２）［プライバシー、検索、サービス］ページを開いて、［アドレス バーと検索］をクリックします。

３）［検索エンジンの管理］をクリックします。

４）検索エンジンで、Bing(推奨)の行の右側にあるアイコン をクリックして、［既定に設定する］をクリックします。

５）設定ページを閉じます。
これで、不具合は解消されるはずです。

前回記事の Edgeの文字選択→右クリックメニューから検索がBingしか選べない の件もそうですが、どうも Edge 推奨の使い方にしてほしいという Microsoft の気持ちが不具合を招いてしまっているように思います。
逆に Edge のユーザーが減ってしまうかもですね。

ブログに JavaScript を使った計算ページを作る記事 を書いてきましたが、作った計算ページを投稿してみると、ちゃんと動作していなくて、下書きに戻して直すことがけっこうありました。
そこで考えたのが、JavaScript テスト用ブログを作って、そこでテストしてから本来投稿するブログで投稿するという方法です。

JavaScript テスト用ブログは、一般に公開する必要がない（公開しない方がいい）ので、自分だけが見れるように設定します。
また、計算フォームの各部品の配置やデザインも確認したいので、同じブログサービスで同じデザイン テンプレートを使う方がいいですが、ブログを１つしか作れないブログサービスの場合は、他のブログサービスを使っても基本的なテストはできると思います。

ファンブログでテスト用ブログを作る

ファンブログでは、１つのアカウントで５つまでブログを作ることができます。
すでに５つ作っているという場合は、別のアカウントを作ればさらに５つ作れそうですが、そんなに同じブログであることにこだわる必要もないので、次に書く Blogger や Seesaaブログを使うのもいいと思います。

１）ファンブログにブログを追加します。
ブログを追加する方法は、こちら。
　　
　ブログの新規作成: ファンブログＦＡＱ

一般に公開しないブログなので、ブログのタイトルは「テスト用ブログ」など適当でいいと思います。
デザイン テンプレートは、実際に公開する方のブログと同じものにしておきます。

２）テスト用ブログを作ったら、［設定］を開きます。

３）［設定］ページでは、［ブログ設定］と［ページ認証］の設定をします。
まずは、［ブログ設定］を開きます。

４）［ブログ設定］では、「ブログポータルへの公開」を「紹介しない」に変更します。
これはファンブログの新着記事一覧に表示する設定ですが、一般に公開しないブログなので必要ないですね。
「紹介しない」に変更したら、一番下にある［保存］ボタンをクリックして、［ブログ設定］の設定は終わりです。

５）次に、［ページ認証］の設定をします。
３）のページに戻ってもいいですが、上部メニューの［設定］から［ページ認証］ページを開くことが出来ます。

６）［ページ認証］ページを開いたら、「ディレクトリ名」のところにある［編集］をクリックします。

７）「ユーザー名」と「パスワード」を入力して、［保存］ボタンをクリックします。
「ユーザー名」と「パスワード」は、自分がこのテスト用ブログを見るためのものです。
誰かにアクセスされたとしても困るものではないので、簡単なものでOKです。
私の場合は、「ユーザー名」・「パスワード」とも同じでアルファベット3文字にしています。

８）以上で、テスト用ブログの設定は完了です。
あとは、実際に公開する方のブログで追加しているCSS（スタイルシート）があれば、同じものを追加しておきます。

Seesaaブログでテスト用ブログを作る

Seesaaブログの設定は、ファンブログと似ています。
ファンブログでの手順１）〜３）は、少し画面の表示が違う程度です。

４）［ブログ設定］も似たようなものですが、「ブログポータルへの公開」が「ブログを紹介する／しない」という表記になっています。
ここを「紹介しない」にします。

５）〜７）の［ページ認証］も似ていますが、Seesaaブログでは「ディレクトリ名」が５つに分類されています。
その一番上の「 / 」で、「ユーザー名」と「パスワード」を設定しておけばOKです。

Blogger でテスト用ブログを作る

Blogger は１つのアカウントで作れるブログの数に制限はありません。
実際に公開するブログを Blogger で作っている場合は、テスト用ブログも Blogger で作るのがいいと思います。

１）Blogger で新しいブログを作るときは、Blogger にログインして、左上のブログ名が表示されている右側にある「▼」をクリックします。

２）Blogger で作成済みのブログが表示された一番下の「新しいブログ」をクリックすると、新しいブログを作ることができます。

３）新しいブログを作ったら、［設定］を開きます。

４）［設定］ページの中の「検索エンジンに表示されるようにする」のスイッチをオフにします。
一般に公開しないブログなので検索エンジンに表示される必要はありませんし、ここをオンしておいた場合、実際に公開するブログの記事より、テスト用ブログの記事を優先して検索エンジンに登録されてしまうかもしれません。

５）同じ［設定］ページの中の「読者の権限」を「投稿者に限定公開」に変更て、［保存］をクリックします。
これで他の人が見れないようにできます。

以上で設定完了です。
こちらも、実際に公開する方のブログで追加しているCSS（スタイルシート）があれば、同じものを追加しておきます。

その他のブログでテスト用ブログを作る

その他のブログでも、設定ページで同じような設定をすれば、テスト用ブログとして使えると思います。
設定すべき点は、以下のとおりです。
１）ページ認証などで、一般の人から見れないようにする。
２）ブログサービスの新着記事に表示させないようにする。
３）検索エンジンに表示されないようにする（これは Blogger だけのはず）

今月中旬だと思いますが、Google Chrome が起動しない、クラッシュするという不具合が発生していたようです。
これについては、すでに不具合を解決したアップデートがリリースされていて、Google Chrome コミュニティに投稿がありました。
アップデートの適用方法も書いてあります。
　　
パソコンで Chrome が起動しない、あるいはクラッシュする問題について（解決手順） - Google Chrome コミュニティ

私は普段 Sleipnir 4 を使っていますが、同じ時期からエラー（エラーコード：STATUS_ACCESS_VIOLATION）が出るようになったので、おそらく Google Chrome の問題と原因は同じなのだろうと思います。
エラーは、ニュース系のサイトを見ているときに出て、記事を読み始めて10秒〜20秒くらいでエラーになるという感じで、エラーが出るサイトでは確実に出る感じです。
これは、Sleipnir 4 に限らず、他のGoogle Chrome 系ブラウザで発生しているんじゃないかと思います。

↑ こういうのが出て、［再読み込み］ボタンをクリックするとページが表示されますが、またすぐに同じエラーになります。

Chrome 系ブラウザでエラーが出ないようにできないか試してみる

Google Chrome が不具合を解決したアップデートをリリースしたことを考えると、他の Chrome 系ブラウザでも、それに対応したアップデートがリリースされるのを待つしかないかなと思いましたが、一応何とかならないかとあがいてみました。

まずは、エラーが出ているサイトの cookie を削除してみました。
これで出なくなれば簡単でよかったのですが、結果は変わらずで、やはりエラーが出ました。

ならば、エラーが出ているサイトだけでなく、すべての cookie とキャッシュを削除です。
これが正解、エラーがでなくなったと思ったのですが、しばらくするとまたエラーが出るようになりました。
cookie とキャッシュを削除した後は確かにエラーが出なくなり、でもまた出るようになり、Google アカウントにログインすると、どういうわけかまたエラーが出なくなり、これで直ったかと思ったら、結局また出るようになってしまいました。
ややこしい状況ですが、少しマシになったかなという程度です。

やはり、ブラウザのアップデートを待つしかなさそうです。
いったん、あきらめることにします。
ちなみに Edge も Chrome 系ブラウザですが、試してみたところ、このエラーは出ないようです。

職場のパソコンの1台でタスクバーに天気予報が表示されていますが、自分の使っているパソコンでは、これが表示されていません。
どうしても欲しい機能というわけではないですが、自分のパソコンで表示されないのは、ちょっと気になります。

天気予報が表示されている部分をクリックすると、ニュースなんかも表示されます。

タスクバーの設定の変更で表示できるのではと一通り確認してみましたが、どうもそのような設定は見当たりません。
ちなみに、天気予報が表示されているパソコンでは、そこを右クリックして、「ニュースと関心事項」から非表示にすることはできます。

何か方法がないかと色々調べてみると、表示されるパソコンと表示されないパソコンがある理由が想像できる記事が見つかりました。
　　　
　Windows 10 アップデート、タスクバーにニュースや天気予報を統合 | TECH+

記事の内容をかいつまんで言うと、正式に配信されるアップデートに先駆けて、オプション扱いのアップデートとしてこの機能を含んだアップデートが配信された。
で、そのアップデートで不具合がいろいろ出ていると。

ということは、今は不具合を修正したアップデートができるまで、一時配信停止中ということじゃないかと思います。
天気予報が表示されているパソコンは、不具合による配信停止前にアップデートを受信したパソコンで、天気予報が表示されていないパソコンは、アップデートを受信する前に配信停止になったということでしょう。

なので、タスクバーに天気予報が表示されない人は、そのうちに配信されるアップデートで表示されるようになるはずですので、そのままのんびり待つことにしましょう。

つい先日まで、ファンブログではスマートホン版のスタイルシート（CSS）は、追加しても機能しないと思い込んでいたのですが、単に書く場所を間違えていただけと分かりました。
以前、なぜ機能しないのか調べていたときに、ヘルプのどこかに「スマートホン版はスタイルシートが使えない」というようなことが書いてあったような記憶がありますが、その記憶も勘違いだった可能性が高いです。
ひょっとしたら、他にも同じように思っている人がいるかもしれないので、どこに書けばいいのか説明しておきます。

ちなみに、ファンブログのヘルプ ↓ では、私が気付かなかった部分の説明は含まれていません。

　スタイルシートの編集方法: ファンブログＦＡＱ

ファンブログのスマートホン版スタイルシート（CSS）を追加する方法

１）管理画面上部メニューの［デザイン］をクリックします。

２）［スマートホン］タブをクリックします。

３）適用しているデザインのタイトル部分をクリックします。

４）開いたページでスタイルシート（CSS）を追加できるように見えますが、ここに追加しても記事内のスタイルとして機能しません。
右上の［記事］をクリックします。

この「右上の［記事］をクリック」というのに気が付かなかったのが、スマートホン版のスタイルシート（CSS）が機能しない原因だったわけです。
３）でデザインのタイトル部分をクリックして開いた状態は、右上にある「トップ｜記事」の２ページあるうちの「トップ」のページであって、「記事」に適用するスタイルシート（CSS）は、［記事］のページに書かないとダメなのです。

［記事］のページを開いたら、その編集部分の一番下に、追加したいスタイルシート（CSS）を書けば、スマートホン版のデザインに反映されます。

ファンブログのデザイン テンプレートは、レスポンシブのものはなかったと思いますので、パソコン版とスマートホン版の両方でスタイルシート（CSS）を追加する必要があります。
パソコン版とスマートホン版とで、デザインを変えることが可能と考えることもできるので、どちらがいいかは微妙です。

ちなみに、パソコン版のスタイルシート（CSS）を開いたページも同じように「トップ｜記事｜過去ログ｜カテゴリ」にページが分かれていて、やはり「トップ」のページが開きます。
ただしこちらは、その「トップ」のページにスタイルシート（CSS）を追加すれば、各記事のデザインとして反映されます。

たまたま HTML5 の outputタグを使って簡単な計算ができることを知って、いろいろな計算をやってみたところ、その限界を感じて、初めて JavaScript というものに挑戦してみることにしました。
挑戦といっても、取っ掛かりは参考になりそうなコードをネットで見つけて、そのコードを少し変えて試してみたという程度のもので、そこから少しずつ改良することで、ブログに計算ページを作るだけなら、まあ使えるレベルのものが作れるようになったと思います。

簡単な計算ページを作ってみただけなのですが、結果としてこれが JavaScript というものを勉強する最初の一歩として、けっこう有効だったんじゃないかと感じています。
JavaScript の初歩とか、初心者向けとして書かれたものを読んでも、難しくてなかなか取っ付きにくいものですが、簡単な計算ページなら、参考のコードをコピペして少しずついじってみることで、基本の形ができてしまいます。
基本の形ができれば、あとは計算式部分をいろいろ変えることで、かなり実用的なページも作っていけます。
電卓で計算して、電卓に表示された計算結果を見て、パソコンのソフトに入力という手順が、ブラウザ上で計算して、コピーボタンでクリップボードにコピー、パソコンのソフトに貼り付けという手順に置き換えられる。
実際に使えるページが作れるということは、その後の応用の勉強を続けるモチベーション アップにもプラスになるはずです。
以下、ブログに計算ページを作った過程を説明した記事と、それを元にいろいろな計算ページを作った実例をあげていますので、もし、JavaScript に少し興味がある、勉強してみたいというときは、参考にしてみてください。

計算ページ作成記事の一覧

ブログに計算ページを作った過程を説明した記事の一覧です。
「1. ブログの記事内でJavaScriptを使って計算できるようにする」で、とりあえず簡単な形を作ってみて、ちゃんと計算できるのか試して、その後で少しずつ改良を加えていっています。
1. から順に読んで試していただけると、7. までで一通り完成します。
各記事はできるだけ詳しく書いてみているのでややこしそうですが、実際にはそれぞれの記事でやっている内容は簡単です。

1. ブログの記事内でJavaScriptを使って計算できるようにする
2. 計算結果をコピーできるボタンを設置する
3. 計算結果の数字に3桁区切りのカンマを入れる
4. コピーする計算結果の数字は3桁区切りのカンマなしにする
5. 数値入力ボックスでIMEを半角入力モードにする
6. 計算フォームの見た目を整える
7. 共通のJavaScriptコードはサイドバーに設置する

ブログに計算ページを作った参考例

計算ページが割と簡単に作れると分かって、仕事で電卓で計算している部分を計算ページとして作っておけば、自分でも便利なうえに他の誰かにも使ってもらえると思うと、がぜんやる気が出てきて作ったのがこちらです。
　　　
　建築積算電卓：積算業務補助用 各種簡易計算ツール

専門的な計算が多いですが、円・扇形・三角形といった一般的なものもあります。
それぞれのページが、どのようなコードになっているか知りたいときは、ソースを表示すれば見ることができます。
Google Chrome 系のブラウザであれば、次の手順でソースを表示できます。

１）調べたい計算ページのタイトルをコピー

２）計算ページ上で右クリックして［ページのソースを表示］をクリック

３）［Ctrl］＋［F］キーを押して、検索ボックスを表示

４）検索ボックスに［Ctrl］＋［V］で貼り付け
（コピーしておいた計算ページのタイトルが検索ボックスに入ります）

５）計算ページのソースが見つかるはずです。

前回記事で、足し算と掛け算を計算するページが完成しました。
　　↓
　計算フォームの見た目を整える／ブログでJavaScriptで計算


そのページでは、JavaScript コードはすべてその記事ページの中に入れてあります。

これを元に計算ページをいろいろ作っていくとすると、計算部分の JavaScript コードはそれぞれのページで違ってきますが、計算結果をコピーする部分の JavaScript コードは、共通で利用できそうです。
数値入力ボックスでIMEを半角入力モードにする の記事でそれを試そうとして、その前の コピーする計算結果の数字は3桁区切りのカンマなしにする の記事に設置してある「計算結果をコピーする JavaScript コード」を利用しようとしましたが、その方法ではどうもうまく機能しないようでした。

共通で利用できるものや少し規模の大きい JavaScript コードは、ファイル化してブログにアップロードするという方法がありますが、無料で利用できるブログでは JavaScript コードをアップロードできないものもあると思います。
そこで、別のブログで試した方法が、ブログのサイドバーに設置する方法です。
試したのは Blogger で、HTML/JavaScript のガジェットに JavaScript コードを書いてサイドバーに設置することで、各記事ページの計算フォームから呼び出して機能しています。
他のブログでは、例えば、ファンブログ・Seesaaブログの場合はコンテンツ→自由形式、FC2ブログの場合はプラグイン→フリーエリアに JavaScript コードを書いて、サイドバーに設置するということになります。
おそらく、それでうまく機能するはずです。
このページで、それを試してみます。

［答えをコピー］ボタンの JavaScript をサイドバーに設置した計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。
見た目は前回記事：計算フォームの見た目を整える／ブログでJavaScriptで計算 の計算フォームと全く同じですが、［答えをコピー］ボタンの JavaScript をサイドバーに設置して利用するため、その分の JavaScript はここには入っていません。

変更したコードの解説（フォーム）

今回の計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV7">
  Ａ：<input class="inputbox1" type="tel" name="a" value="">
  Ｂ：<input class="inputbox1" type="tel" name="b" value="">
  <table>
    <tr>
      <td><input class="keisanbutton" type="button" name="keisan" value="計算" onClick="calTasuKakeruV7();"></td>
      <td><input class="keisanbutton" type="reset" name="reset" value="クリア"></td>
    </tr>
  </table>
  <table>
    <tr>
      <td align="right">Ａ＋Ｂ＝</td>
      <td><input class="inputbox2" type="text" id="answer1" value=""></td>
      <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnswerCopy1();"></td>
      <td><input class="inputbox3" type="text" id="answer1a" value=""></td>
    </tr>
    <tr>
      <td align="right">Ａ×Ｂ＝</td>
      <td><input class="inputbox2" type="text" id="answer2" value=""></td>
      <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnswerCopy2();"></td>
      <td><input class="inputbox3" type="text" id="answer2a" value=""></td>
    </tr>
  </table>
</form>

赤色部分が今回変更したところです。
V7 はこれまでと同じで、ブログ内で名前の重複を避けるためです。

［答えをコピー］ボタンで呼び出す JavaScript の名前は、これまでの AnsCopy1V6 から 共通の Script らしいAnswerCopy1・AnswerCopy2 に変えました。
これによって、サイドバーに設置した JavaScript が機能していることも確認できます。

id を ans1,2,1a,2a から answer1,2,1a,2a への変更は特に必要のないものですが、AnswerCopy1,2 の変更に合わせておきました。

変更したコードの解説（JavaScript・このページに設置したもの）

今回のこのページに設置した JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV7()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV7.a.value - 0;
  inputValueB = document.calformTasuKakeruV7.b.value - 0;
  // 変数を使って計算
  answer1 = inputValueA + inputValueB;
  answer2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV7.answer1.value = answer1.toLocaleString();
  document.calformTasuKakeruV7.answer2.value = answer2.toLocaleString();
  document.calformTasuKakeruV7.answer1a.value = answer1;
  document.calformTasuKakeruV7.answer2a.value = answer2;
}
</script>

赤色部分が変更か所ですが、いずれも計算フォームで変更した名前に合わせた変更です。

［答えをコピー］ボタンで呼び出す JavaScript は、サイドバーに設置するため、ここでは削除しています。

［答えをコピー］ボタンで呼び出す JavaScript をサイドバーに設置する

ここファンブログでの説明になりますが、他のブログでも似たようなものです。

１）ブログの管理ページを開いて、［デザイン］→［コンテンツ］を開きます。

Seesaaブログはファンブログと同じです。
Blogger では［レイアウト］→［ガジェットを追加］
FC2ブログでは［設定］→［プラグインの設定］になります。

２）［便利機能］の中の［自由形式］をサイドバーの一番下に、ドラッグして設置します。

Seesaaブログはファンブログと同じです。
Blogger では［HTML/JavaScript］
FC2ブログでは［公式プラグイン追加］→［拡張プラグイン］→［フリーエリア］になります。

３）サイドバーに設置した［自由形式］の歯車アイコンをクリックします。

４）タイトルに「JavaScript」など分かりやすい名称を入れて、コード入力部に JavaScript コードを入力します。
［保存する］ボタンをクリックします。

５）［閉じる］ボタンをクリックします。

「保存されていない内容は破棄されます。よろしいですか？」と聞いてきますが、４）で保存済みなので、そのまま［OK］ボタンをクリックします。

６）サイドバーに設置した JavaScript コードの説明

<script language="javascript">
// 計算結果をコピー
function AnswerCopy1() {
    var copyTarget = document.getElementById("answer1a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
function AnswerCopy2() {
    var copyTarget = document.getElementById("answer2a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
</script>

その他

サイドバーに設置するといっても、ブログの画面上には JavaScript 自体は何も表示されません。
あとは、それぞれの記事ページの計算フォームのコードで、AnswerCopy1,2、answer1a,2a の名前を同じにすれば、サイドバーに設置した JavaScript が共通で利用できるということになります。

前回記事までで、思いつく機能はすべて盛り込めました。
　　↓
　数値入力ボックスでIMEを半角入力モードにする／ブログでJavaScriptで計算

今回は、計算フォームの見た目を整えます。
具体的には、ボタンや計算結果の表示スペースのデザインを変えて、ボタンを横に並べたりといった感じです。
ただし、スマホで見ると画面からはみ出したりして酷い状態です。
このブログでは、スマホ版ではCSSが使えないためです。
このブログ（ファンブログ）でスマホ版のCSSが使えることが分かったので、パソコン版と同じCSSを設定しました。

見た目を整えた計算フォーム

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScript は表示されず、計算のためのフォームだけが表示されています。

前回の計算フォームと比べていただけると、違いが分かると思いますが、以下の点を変えています。
・入力ボックスの幅
・計算結果表示ボックスの幅と色
・各ボタンのデザイン
・計算ボタンとクリアボタンの配置
・計算結果のラベル・数値・コピーボタンの配置
・3桁区切りのない計算結果を非表示に

変更したコードの解説（フォーム）

今回の計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeruV6">
  Ａ：<input class="inputbox1" type="tel" name="a" value="">
  Ｂ：<input class="inputbox1" type="tel" name="b" value="">

<table>
  <tr>
    <td><input class="keisanbutton" type="button" name="keisan" value="計算" onClick="calTasuKakeruV6();"></td>
    <td><input class="keisanbutton" type="reset" name="reset" value="クリア"></td>
  </tr>
</table>

<table>
  <tr>
    <td align="right">Ａ＋Ｂ＝</td>
    <td><input class="inputbox2" type="text" id="ans1" value=""></td>
    <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnsCopy1V6();"></td>
    <td><input class="inputbox3" type="text" id="ans1a" value=""></td>
  </tr>
  <tr>
    <td align="right">Ａ×Ｂ＝</td>
    <td><input class="inputbox2" type="text" id="ans2" value=""></td>
    <td><input class="keisanbutton" type="button" value="答えをコピー" onClick="AnsCopy2V6();"></td>
    <td><input class="inputbox3" type="text" id="ans2a" value=""></td>
  </tr>
</table>

</form>

赤色・青色・緑色部分が、今回主に変わった部分です。
「V6」部分は、前回までと同様にブログ内でのコードの重複をさけるための変更なので、色は付けていません。

１）［計算］ボタンと［クリア］ボタンを横に並べる
ラベル・入力ボックス・ボタンといった各要素を横に整った状態で並べたいときは、<table> タグを使います。
上の例では青色にした部分が <table> タグで、２つの <table> を使っています。
1つ目の <table> で、［計算］ボタンと［クリア］ボタンを横に並べています。
分かりやすくするため、この <table> をシンプルに表すと下のような構造になり、実際のコードでは、�@部分に［計算］ボタンのコード、�A部分に［クリア］ボタンのコードが入っています。

<table>
  <tr>
    <td> �@ </td>
    <td> �A </td>
  </tr>
</table>

２）計算結果部分を横に並べる
２つ目の <table> で、計算結果部分（ラベル・計算結果・コピーボタン・コピー用計算結果）を、2行に分けて横に並べています。
この <table> を簡単に表すと下のようになります。

<table>
  <tr>
    <td> �@ </td><td> �A </td><td> �B </td><td> �C </td>
  </tr>
  <tr>
    <td> �D </td><td> �E </td><td> �F </td><td> �G </td>
  </tr>
</table>

�@〜�CはＡ＋Ｂの計算結果部分が、それぞれ次のように入っています。
　�@：ラベル（Ａ＋Ｂ）
　�A：計算結果（3桁区切りあり）
　�B：計算結果コピーボタン
　�C：計算結果（3桁区切りなし）※ただし非表示
Ａ×Ｂの計算結果も同じように、�D〜�Gに入っています。
�@と�Dのラベルは、右寄せにした方が上下で揃って見えるので、align="right" を入れて右寄せにしています。

３）ボタンのデザイン
ボタンのデザインは、CSSで下のように書いて、計算フォームの中の各ボタンのコードで
class="keisanbutton" で呼び出しています。

/* ▼ 計算ボタン ▼ */
.keisanbutton {
  width: auto;
  text-align: center;
  display: block;
  padding: 2px 5px 2px 5px;
  background: #F3F2F2;
  border: 1px solid;
  border-radius: 5px
}
/* ▲ 計算ボタン ▲ */

ボタンのデザインを設定するCSSは、「ボタン　CSS」みたいな言葉でネット検索すると、いろいろなデザインのボタンのCSSが見つかるので、この中から気に入ったものをコピーして使うのがいいと思います。
私もどこかで見つけて、色を変えるなど少し編集して使っています。
ちゃんと理解しきれていない部分もありますが、簡単に説明しておきます。

a) 最初と最後の /* と */ で挟んだ部分はコメントで、CSSとして機能しないメモとして使います。
/* と */ が逆になっているのを間違えないように。

b) .keisanbutton { と } の間にデザインの設定を書きます。
計算フォーム側でそのデザインを呼び出す class="keisanbutton" と同じ名前にします。

c) width: auto; は、ボタンの幅を、ボタンに表示する名称に合わせて自動で設定するものです。

d) text-align: center; は、ボタンに表示する名称をボタンの中心に配置します。

e) display: block; は、ブロックレベル要素にするというもので、意味が分かりづらいですが、ブロックレベル要素にすることで、要素同士が改行されて縦に配置され、余白などを設定できるようになります。

f) padding: 2px 5px 2px 5px; でボタンの文字の周囲の余白を設定しています。
左から順に、上・右・下・左の余白です。

g) background: #F3F2F2; でボタンの色を設定しています。

h) border: 1px solid; でボタンの枠線の太さと種類を設定しています。

i) border-radius: 5px は、ボタンの4隅の面取りです。
5pxを大きくすると面取りが大きくなり、小さくすると面取りが小さくなります。
ちなみに、各行の最後のセミコロン（ ; ）は、複数の設定をするときの区切りなので、最後の行には不要です。
（付いていても、機能しますが）

それぞれの設定値を調べたいときは、「CSS　padding」みたいにネット検索すると、情報が見つかると思います。

４）入力ボックスのデザイン
入力ボックスのデザインは、CSSで下のように書いて、計算フォームの中の各入力ボックスのコードで
class="inputbox1" で呼び出しています。

/* ▼ inputbox(数値入力) ▼ */
.inputbox1 {
  width: 100px;
  padding: 0 5px 0 0;
  font-size:16px;
  color:#000000;
  text-align:right;
  background:#FFFFFF;
  border: 1px solid
}
/* ▲ inputbox(数値入力) ▲ */

デザインとして設定している内容は、ボタンと大して変わらないので説明を省きますが、text-align: で数字を右寄せで表示して、padding: で右の余白を 5px にして、数字が右の枠から少し離れるようにしています。
また、標準のままだと文字が少し小さいので、font-size:16px; で少し大きくしています。

５）計算結果ボックス（3桁区切りカンマあり）のデザイン
計算結果ボックス（3桁区切りカンマあり）のデザインは、CSSで下のように書いて、計算フォームの中の各計算結果ボックスのコードで class="inputbox2" で呼び出しています。

/* ▼ inputbox(計算結果) ▼ */
.inputbox2 {
  width: 100px;
  padding: 0 5px 0 0;
  font-size:16px;
  color:#000000;
  text-align:right;
  background:#F0F0F0;
  border: 1px solid
}
/* ▲ inputbox(計算結果) ▲ */

こちらも、設定している内容は入力ボックスとあまり違わないので、説明を省略しますが、ボックス内の色を background:#F0F0F0; にして、入力する部分と違う色にしています。

６）計算結果ボックス（3桁区切りカンマなし）のデザイン
計算結果ボックス（3桁区切りカンマなし）のデザインは、CSSで下のように書いて、計算フォームの中の各計算結果ボックス（3桁区切りカンマなし）のコードで class="inputbox3" で呼び出しています。

/* ▼ inputbox(計算結果非表示) ▼ */
.inputbox3 {
  width: 100px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 0px none
}
/* ▲ inputbox(計算結果非表示) ▲ */

こちらは、画面上に表示されないようにするため、文字とボックス内の色を、ブログの背景色と同じ白（#FFFFFF）で表示するようにしています。
背景色と同じ色にして何もないように見せているわけで、その部分をマウスでドラッグして範囲選択すると、色が反転するので、計算結果が見えます。
なお、スマホ版では表示幅が足りなくなるため、ここの width: 100px; を width: 10px;にして幅が収まるようにしています。
それ以外は、スマホ版のCSSもパソコン版と同じにしています。

変更したコードの解説（JavaScript）

今回の JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeruV6()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeruV6.a.value - 0;
  inputValueB = document.calformTasuKakeruV6.b.value - 0;
  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;
  // 計算結果をフォームに出力
  document.calformTasuKakeruV6.ans1.value = ans1.toLocaleString();
  document.calformTasuKakeruV6.ans2.value = ans2.toLocaleString();
  document.calformTasuKakeruV6.ans1a.value = ans1;
  document.calformTasuKakeruV6.ans2a.value = ans2;
}
// 計算結果をコピー
function AnsCopy1V6() {
    var copyTarget = document.getElementById("ans1a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
function AnsCopy2V6() {
    var copyTarget = document.getElementById("ans2a");
    copyTarget.select();
    document.execCommand("Copy");
    copyTarget.blur();
}
</script>

赤色部分が、今回変わった部分です。
「V6」部分は、前回までと同様にブログ内でのコードの重複をさけるための変更なので、色は付けていません。

また、計算結果コピー用の3桁区切りカンマなしの数値は見えないようにしたため、最後の行の copyTarget.remove(); でその数値を削除するのをやめて、代わりに copyTarget.blur(); として、コピーのためにその数値を選択した状態を解除しています。
remove(); で数値を削除すると、コピー対象がなくなるので、選択した状態も解除できて、画面上ではその部分に何も表示されないのでいいのですが、コピーしたあとで、もう一度その数値をコピーしたい場合もあるので、できれば数値は削除しない方がいいです。
そこで、コピー対象を削除しないで、単にフォーカスを外す blur(); に変更したというわけです。

その他

今回 CSS を使ってデザインを変えた部分は、計算フォームの HTML コードに直接書いて設定することもできますが、CSS を使っておけば、後で少しデザインを変えたいといったときに、同じデザインを使った部分は CSS の変更だけで済みます。
できるだけ CSSで設定しておいた方がいいです。