2018年11月21日

　ワイヤレスキーボード と 汎用 キーボードカバー（コスパ最強！〉







ສະບາຍດີ!(さばいでぃー！;ラオ語でこんにちは！)Cafe & Bar ສະບາຍດີ店主です。


今日は先日見つけたキーボードカバーがあまりに優れていたので、ぜひ紹介したいと思います。



目次










目的


濡れた手でキーボードを触ることの多い店主。これまで２つワイヤレスキーボードをダメにしてしまったので、防水対策が目的です。



店主のPC環境


長年ノートPCを使ってきた店主。外に持ち歩くためではなく、部屋内で自由に場所を変えられることと机周りがすっきりすることがメリットでした。


しかし、排熱ファンが壊れて突然PCがダウンしてしまうようになり、不安定な状態ではデータの損失が怖いと、新しくPCを購入しました。動画編集もよく行うので、タワーPCを選びました。同じ性能でも、ノートPCに比べるとかなりのコストダウンにつながりました。


IMG_3741.jpg


一方で場所が自由に変えられない、机周りがすっきりしないなどのデメリットが考えられましたが、iPhoneやiPadがあるのでネット閲覧くらいなら自由な場所で行えること、ワイヤレスキーボードやワイヤレスマウス、そして液晶モニターのおかげで、タワーPCを目立たないところに設置して、机周りをスッキリさせることができるようになりました。



愛用のワイヤレスキーボード


マイクロソフト Wedge Mobile Keyboard U6R-00022 bluetooth対応




↑今ならまだ購入可能です。（2018.11.21現在）


手の小さな店主です。ノートPCのキーボードがとても使いやすかったので、同じようなタッチのできるものを探していました。キーピッチの狭いもの、キーストロークの浅いものが好みです。（愛用のキーボードは、キーピッチが17.5mmです）また、3年保証というのも非常にありがたいサービスです。聞けば、3年間以内なら、1度だけではなく、何度でも対応してくれるとのことです。アフターサービスの対応の良さって、リピートにつながりますよね。エアコンが故障したとき、店主が同じメーカーのものを選んだのも、対応の良さが決め手となりました。


残念なのは、すでに廃番になってしまっていることです。故障してしまった場合、価格相応の代替品と交換してくれるとのことです。しかし、この省スペース設計が気に入って購入しているので、できれば長く使いたいと思っています。そこで、今回はキーボードカバーをつけようと決めたのです。



汎用 キーボードカバー


しかしネットで調べても、このキーボードの専用カバーは見つかりません。そもそも生産数も少ないでしょうから、当然のことです。


そういえば、電化製品店でカバーを探したときに、「どんなキーボードにも合う　汎用 キーボードカバー」というのを見かけたのを思い出しました。ネットで検索してみました。


なるほど。目からうろこですね。

シャンプーハットのように覆ってしまえば、確かにどんなキーボードにも合います。


調べてみると、専用カバーよりも格段に安い値段で売られているようです。それも、いろいろな種類が。しかし口コミを読んでみると、少し心配なことがでてきました。


「使い心地はいいのだけれど、しばらくするとキーボードがベタベタしてくる。」

「カバーの品質が悪い。」


なるほど、専用カバーでもそういうことがありました。キーボード自体にゴムのカスのような汚れがついたり、カバーもよく使うキーのところは変形してきたり、全体に黄ばんできたり。そもそもカバーなんで、長く使うよりも汚れたら買い替えるものなのでしょうね。


そこで目に留まったのが、こんな口コミ。


「こんなことなら、サ〇ンラップのほうがまし。」



え？！



その手があったか！


というわけで、家にあったラップを使ってくるりとキーボードを覆ってしまいます。


誰ですか、貧乏くさいなんて言っているのは？

ラップではありませんよ。汎用 キーボードカバーですよ。


安物のラップが幸いしたのか、うまい具合にラップが伸びて、キータッチもなかなか快適です。これはいい！


と思ったのも数時間のこと。


IMG_3742.jpg


よく使うキーの部分が、あっという間に破れてしまいました。

1日も持たなかったんです！



高品質の汎用 キーボードカバーを求めて



これはいけない。より高品質のものを求めて、近所のホームセンターへ行きました。さすが大型店です。品ぞろえが豊か。店主が求める、高品質の汎用 キーボードカバーも見つかりました。


IMG_3746.jpg


さっそくカバーを取り付けます。


IMG_3747.jpg


こんな感じです。


IMG_3745.jpg


裏側はこんな感じで。


IMG_3940.jpg


よく使うキーも全く問題ありません。


安物ラップよりも厚くできているのでその分丈夫なのですが、伸びは悪いです。そのため、ぴっちり被せてしまうと、キータッチが悪くなります。少し余裕をもたせて被せるといい感じになります。


使いだして1ヵ月経ちますが、すでに3回交換しています。1回目はいつの間にか一部破れていたのと、2回目は次の日に破れてしまっていました。3回目の交換は2週間は持っています。そして、その間にコーヒーをぶちまけたことが、1回。つけといて本当によかったです、キーボードカバー。



まとめ


汎用 キーボードカバー・高品質仕様


メリット

全種類のキーボードに対応可能

コストが非常に低い

値段の割に丈夫で、コストパフォーマンス最強！

万が一破れても、惜しげもなく新しいものに換えられる。


デメリット

光が反射して、キーボードの文字が見づらい

↓

非光沢のラップって、製造してくれないですかね？

なーんだ、ラップ巻いているのかよ、貧乏くせえ

↓

高品質の汎用 キーボードカバーと思い込むことで解決済み




↑購入の際は、配送料も考慮に入れることを推奨します。




































































































ໂລກ（ろーく）がつぶやくTwitterはこちら。

画像付きでつぶやくmetabirdsはこちら。

Facebook :Cafe & Bar Sabaidee

Ameba blog :Cafe & Bar ສະບາຍດີ

Instagram :Cafe & Bar ສະບາຍດີ

FC2 :Cafe & Bar ສະບາຍດີ

なぜ店主がベトナムに惹かれるのか

やっぱり単車が好き：店主のZRX2日記








posted by sabaidee at 14:21 | 大阪 ☀ | Comment(0) | PC | このブログの読者になる | 更新情報をチェックする
2018年11月17日

　2018年版 ブログにトップに戻るボタンをつけた はてなブログ編







ສະບາຍດີ!(さばいでぃー！;ラオ語でこんにちは！)Cafe & Bar ສະບາຍດີ店主です。


今回は、はてなブログにトップに戻るボタンをつけてみました。

これは、苦労しました。さきにSeesaa blogでつけることに成功したので、簡単だと思っていました。

甘かったです。



目次










トップに戻るボタンとは


他の人のブログを読んでいると、下へ下へとスクロールさせると、画面右下に上向きの矢印が現れます。クリックしてみると、ギュイーンとそのページのトップに戻るという、使いだすとたいへん便利なボタンです。


ページトップへ戻るボタン17.jpg



目的


記事が長くなればなるだけ、上に戻るボタンの利便性を感じます。

ひどいときは、ブログではなくてネットショップを閲覧しているのに、「どうして上に戻るボタンがないんだ？」と不便に思ってしまうほどです。



STEP1 デザインCSSでボタンのデザインを編集する


はてなブログの管理画面に入り、「デザイン」→「カスタマイズ」を開けます。


ページトップへ戻るボタン11.jpg


ページトップへ戻るボタン12.jpg


「デザインCSS」をクリックして開きます。


ページトップへ戻るボタン13 デザインCSS.jpg


以下のソースコードを書き込みます。

書き込み後、「変更を保存する」のを忘れずに！



/*上に戻るボタン関係*/

#page-top {

display:none;

position:fixed;

bottom:20px;

right:10px;

margin: 0;

padding: 0;

cursor:pointer;

z-index: 10;

}


#move-page-top {

display:block;

color:rgba(0,0,0,0.4);

cursor:pointer;

}


#move-page-top:hover {

color:rgba(0,0,0,0.7);

}


ページトップへ戻るボタン14.jpg




STEP2 ボタンを機能させる


「ヘッダ」をクリックして開きます。


ページトップへ戻るボタン13 ヘッダ.jpg


jQuery（javaScriptのひとつ）を使うソースコードを記入します。

書き込み後、「変更を保存する」のを忘れずに！


&ltscript src="https://code.jquery.com/jquery-3.3.1.min.js"&gt&lt/script&gt


ページトップへ戻るボタン15.jpg


「変更を保存」したら、続いて「管理画面に戻る」をクリックし、そして「設定」をクリックします。


ページトップへ戻るボタン18 設定.jpg


「詳細設定」をクリックして開きます。


ページトップへ戻るボタン19 詳細設定.jpg


下にスクロールしていくと、「検索エンジン最適化」の項目に、「headに要素を追加」という欄があるので、そこに以下のソースを書き込みます。

書き込み後、「変更する」ボタンを押すのを忘れずに。

注）ここでは、fontawesomeのデザインを使用しています。基本無料ですが、デザインによっては有料のものもあります。fontawesomeのサイトで自由に選ぶことができますが、薄く表示されているデザインは有料ですので、そのまま使うことはできません。




ページトップへ戻るボタン20 headに要素を追加.jpg



STEP3 アイコンの動作を指定する


「フッタ」をクリックして開きます。


ページトップへ戻るボタン13 フッタ.jpg


次のソースコードを記入します。

ここでも書き込み後に「変更を保存する」のを忘れないでくださいね！


<!-- ページトップに戻る -->

<div id="page-top">

<a id="move-page-top"><i class="fas fa-angle-double-up fa-5x"></i></i></a>

</div>


<script>

$(window).scroll(function(){

var now = $(window).scrollTop();

if(now > 500){

$("#page-top").fadeIn("slow");

}else{

$("#page-top").fadeOut("slow");

}

});


$("#move-page-top").click(function(){

$("html,body").animate({scrollTop:0},"slow");

return false;

});

</script>


ページトップへ戻るボタン16.jpg





最後に気をつけること


いかがでしょうか？無事にボタンは設置できたでしょうか。


先にSeesaa blogでトップページに戻るボタンを設置することに成功した店主。だいたいの流れはつかめたので、はてなブログへの設置は簡単にいくだろうと思っていました。ところが、いろんなサイトを参考にしたのですが、一向にボタンは現れません。Fontawsomeのversionを変えてみたり、jQueryのversionを変えてみたり。それでもうまくいきません。最後に参考にさせていただいたこちらのサイトのおかげでやっと設置することができました。




これまで店主が参考にしたサイトと何が違うかというと、方法が全く違っていました。


例えば、「詳細設定」で「headに要素を追加」でソース文を記入するのは、他のサイトには載っていなかったことでした。


店主が思うに、おそらくはてなブログの設定が変わったのでしょう。というのも、少し前のサイトを見たところ、そのサイトには「上に戻るボタン」をブログに設置しないのは、読み手にとって非常に煩わしい。設置方法は簡単だし、教えてやるから是非設置してくれという内容を読み手の注目を集めることを狙って上から目線で書いてありました。


しかし、そのブログには「上に戻るボタン」は現れませんでした。


「上に戻るボタン」を頼むからつけてくれ。設置は簡単だし、教えてやるからさ。という内容のブログに、当のボタンが設置されていない。何とも皮肉なブログになっていました。おそらくブログ主が書いた頃は、その方法でボタンを設置できていたのでしょう。


今回、店主がタイトルに”2018年版”と入れたのは、こういった事情があったからでした。


皆さまの参考になれば幸いです。


































































































ໂລກ（ろーく）がつぶやくTwitterはこちら。

画像付きでつぶやくmetabirdsはこちら。

Facebook :Cafe & Bar Sabaidee

Ameba blog :Cafe & Bar ສະບາຍດີ

Instagram :Cafe & Bar ສະບາຍດີ

FC2 :Cafe & Bar ສະບາຍດີ

なぜ店主がベトナムに惹かれるのか

やっぱり単車が好き：店主のZRX2日記








posted by sabaidee at 14:05 | 大阪 ☁ | Comment(0) | PC | このブログの読者になる | 更新情報をチェックする
2018年10月26日

　2018年版 ブログにトップに戻るボタンをつけた Seesaa BLOG編

MAP MENU PV 貸し展示スペース 旅の情報ノート





ສະບາຍດີ!(さばいでぃー！;ラオ語でこんにちは！)
Cafe & Bar ສະບາຍດີ店主です。

ブログにトップに戻るボタンをつけてみました。
その時の苦戦ぶりを備忘録としてという気持ちが72%、この記事がみなさんの役に少しでも立てばという気持ちが20%、ボクこんなことできちゃったよ、すげーという気持ちが8%（絶対ケタ控えめに言ってる）で記録しています。

目次


トップに戻るボタンとは
目的
STEP1 CSSでボタンのデザインを編集する
STEP2 ボタンを機能させる
STEP3 htmlにボタンを追加する
最後に気をつけること

トップに戻るボタンとは


他の人のブログを読んでいると、下へ下へとスクロールさせると、画面右下に上向きの矢印が現れます。クリックしてみると、ギュイーンとそのページのトップに戻るという、使いだすとたいへん便利なボタンです。

ページトップへ戻るボタン.jpg
これなんですけど、スクリーンショットでは写すことができなかったので、恥ずかしいですが画面をカメラで撮影するというアナログ手法を使いました。見にくくてすみません。


目的


目次をつけるようになり、これでうちのブログも少しは読みやすくなっただろうと調子に乗ってい　思っている店主でしたが、このトップに戻るボタンを是非とも導入し、ブログを読んでくださっているみなさんの負担が少しでも軽減できるようにと思いました。


STEP1 CSSでボタンのデザインを編集する


Seesaa BLOGの管理画面に入り、「デザイン」→「デザイン設定」を開けます。

ページトップへ戻るボタン02.jpg
「デザイン」をクリックして

ページトップへ戻るボタン03.jpg
「デザイン設定」をクリックして開けます。

ページトップへ戻るボタン04.jpg
スタイルシートを編集するデザインのタイトルをクリックします。

ページトップへ戻るボタン05.jpg
CSS編集の最後に次の文を書き込みます。
/* 　 */に挟まれた文は削除する必要はありません。後で分かりやすいように残しておきました。

コピペした後に保存するのを忘れずに！


/* トップページへ戻る */
#scroll-top { /* ボタンの調整 */
  position: fixed;  /* 画面がスクロールしても固定する */
  right: 20px;  /* 固定する場所は右から20px */
  bottom: 20px; /* 固定する場所は下から20px */
  display: none;  /* ボタンの表示は最初は非表示 */
  width: 150px; /* ボタンの横幅は150px */
  height: 50px; /* ボタンの高さは50px */
  cursor: pointer;  /* カーソルを指のマークにする */
  text-align: center; /* ボタンの文字の位置を中央にする */
  color: #fff;  /* ボタンの文字の色は#fff */
  -webkit-border-radius: 10px;  /* Safari,Google Chrome用 */
     -moz-border-radius: 10px;  /* 角を10px丸くする */
          border-radius: 10px;  /* 角を10px丸くする */
  background-color: #00ffff;  /* ボタンの背景色は#00ffff */
  box-shadow: rgba(0,0,0,0.3) 0px 0px 1px 1px;  /* よりボタンの感じを表現するための調整 */
}

#scroll-top p { /* ボタンのテキスト部分 */
font-weight: bold; /* 文字を太くする */
line-height: 50px; /* 文字の高さは50px */
margin: 0 0 0 0; /* 余計な余白を取らない */
}



STEP2 ボタンを機能させる


「html」ボタンをクリックして「htmlの追加」をします。（既に編集中のhtmlがあれば、そちらを開けてください）

ページトップへ戻るボタン06.jpg
「html」ボタンをクリックして

ページトップへ戻るボタン07.jpg
「htmlの追加」ボタンをクリックして

ページトップへ戻るボタン08.jpg
先にファイル名を記入して保存しておきましょう。

ページトップへ戻るボタン09.jpg
<head> 〜 </head>に囲まれている部分にjQuery（javaScriptのひとつ）を使うソースコードを記入します。
続いて動作を命令するコードを記入します。

店主は、</head>を探し、直前に入れました。


<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
var tg = $("#scroll-top");
$(window).scroll(function(){
var i=$(window).scrollTop();
if(i >50){tg.fadeIn("slow");}else{tg.fadeOut("slow");}
});
tg.on("click",function(){ $("html,body").animate({scrollTop:0},"slow"); });
});
</script>



STEP3 htmlにボタンを追加する



ページトップへ戻るボタン10.jpg
<html> 〜 </html>内の頭の方に<head> 〜 </head>があり、続いて<body>〜</body>があります。この中にボタンを追加するコードを記入します。<body>〜</body>内ならどこでもいいそうですが、店主は分かりやすいように</body>を探し、直前に入れました。

ここでもコピペした後に保存するのを忘れないでくださいね！


<div id="scroll-top">
<p>▲ページトップへ<p>
</div>



最後に気をつけること


こうしてトップページへ戻るボタンを設置する作業を終え、ワクワクしながら自分のブログを読んでみた店主でしたが、肝心のボタンは一向に現れません。何度も見直したり、記事が古いのではないかと思い、他の人のブログも読み漁ってはいろいろと試してみました。

どれだけ試してみても、ボタンは一向に現れません。

そこでどうしたかというと．．．

とりあえず、ふて寝しました。

で、次の日自分のブログを開けてみると、あれ？

トップに戻るボタンが出現しました。

なんなんでしょうね？
反映するのに少し時間がかかるようです。
その後ボタンの色を変えてみたのですが、やはり数時間経ってから色が変わっているのを確認しました。

なかなかうまくいかないと困っている方、少し時間をおいてから確認してみることをお勧めします。



ボタン設置にあたり、主にこちらのサイトを参考にさせていただきました。

Seesaaブログにトップへ戻るボタンを設置しよう

































































































ໂລກ（ろーく）がつぶやくTwitterはこちら。

画像付きでつぶやくmetabirdsはこちら。

Facebook :Cafe & Bar Sabaidee

Ameba blog :Cafe & Bar ສະບາຍດີ

Instagram :Cafe & Bar ສະບາຍດີ

FC2 :Cafe & Bar ສະບາຍດີ

なぜ店主がベトナムに惹かれるのか

やっぱり単車が好き：店主のZRX2日記







タグ：PC トップページに戻るボタン

posted by sabaidee at 08:35 | 大阪 ☀ | Comment(0) | PC | このブログの読者になる | 更新情報をチェックする
- 1 2 >>

▲ページトップへ

×

この広告は90日以上新しい記事の投稿がないブログに表示されております。