シバタスブログ 

このページの記事目次 （カテゴリー: Web・PC・スマホ）

←　前のページ  total 27 pages  次のページ　→  

Chromebookでも親指シフトができるみたい

   ↑  2018/06/06 (水)  カテゴリー： chromebook

Chromebookは色々と不便な部分があります。Windowsのようにソフトがたくさんありません。（でも軽くて早いから大好き！） 

少し前にChromebookで親指シフトができないか調べたことがあるのですが、その時は「できない」という結論になりました。

なのですが。

先日もう一度Chromebookで親指シフトができないかと調べてみたら何と、どうやら「できる」ようなのです！！ 
  •  「かえうち」というキーボード配列を変換するアダプター
  • USBキーボード
これを使えばChromebookでも親指シフトが使えるようなのです。

具体的には「Chromebook ← かえうち ← USBキーボード」 という形で、ChromebookとUSBキーボードの間に「かえうち」を挟むことでChromebookでも親指シフトができる環境を作ります。

次のツイートにそのことが書かれていました。 

かえうち

「かえうち」はキーボード配列を変換するアダプター。価格は約9000円。

公式サイトは次になります。

USBキーボード

親指シフトの文字入力スピードはローマ字入力の2倍（音声入力はなんと6倍）

「親指シフト使えば文字入力スピードが驚くほど上がる」という話を聞いたのでとても楽しみです。勝間和代さんは親指シフトの愛好家として知られていますよね。 

そう思って勝間さんのブログをあさっていたら次のコメントを発見。

私の場合、大体、入力スピードを親指シフトを1としますと、音声入力が3で、ローマ字入力が0.6位です。 半日ほど、ローマ字入力をしていて感じたこと。


ローマ字入力に比べて約2倍のスピードでタイピングできることになります。 （しかも音声入力はローマ字入力の6倍とはっ！）

勝間さんのブログを見ていたら「かえうち」の記事があったのでそれもここに紹介しておきます。


いいですね、親指シフト魅力的です。

そしてさらに魅力的なのが音声入力ですね。

私も最近Googleドキュメントで音声入力を始めました。かなり早く入力できるので重宝しています。ただ漢字の誤変換や、自動で半角スペースが入ってしまうので、それらを書き直したり、可能であれば一括置換で変換する必要が出てきたりします。あと句読点の入力も必要。

だとしても圧倒的なスピードで文章を入力することができます。

この記事に含まれるタグ : Chromebook 親指シフト かえうち キーボード 音声入力 

（記事編集）　https://shibatas.blog.fc2.com/blog-entry-455.html

2018/06/06 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

ふぉ〜！！chromebookでもf.luxみたいな目に優しい機能があった！！（試験運用機能）

   ↑  2018/05/08 (火)  カテゴリー： chromebook

かつてWindowsPCを使っていた頃、f.luxをONにして夜はPC作業していました。こうすれば、とても目に優しいので。

なのですが、WindowsPCを見限って、chromebookに乗り換えてから、そんな機能や拡張機能はないものかと探していたのですが昔は見つけられなかったので、意気消沈していました。

なのですが、今日、久々に探してみたら、chromebookにもそんな機能が追加されてることを発見！

ただし、この機能は「試験運用中」みたいなので、使用は自己責任で。という形になります。

早速、さっき試してみたら、メチャクチャ目に優しい！！

目の力がフッと抜ける感じがします。

モニターが全体的にオレンジがかって見えます。

。。。

ということで、その機能の追加方法をメモ。

下記を参考にしました。


次の手順でいけます。

  1. アドレスバーにchrome://flagsと入力
  2. ずら～っと英語が出て来る。Searchボックスにnight lightと入力
  3. Enable Night Lightが出て来る。それを有効にする。
  4. PCを再起動
  5. モニター右下「時刻表示」部分をクリック。すると今まで無かった「三日月マーク」のようなモノが出て来る。これをクリックすればこの機能（読書灯）をONにできる。

夜のPC作業には重宝しそうです。

この記事に含まれるタグ : chromebook ブルーライト f.lux 

（記事編集）　https://shibatas.blog.fc2.com/blog-entry-454.html

2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

CSSのみのリンクボタンを綺麗に横並び表示できたメモ

   ↑  2018/05/08 (火)  カテゴリー： その他（Web・PC・スマホ）

この記事で「CSSのみで作ったリンクボタン」の作業メモをしました。


このリンクボタンを横並びにしたいと思いました。

ボタンが横並びになるタグリスト？みたいなヤツです。ブログ個別記事のフッターあたりに、ずら～っと並んでいるアレのようなヤツです。

最初は普通にテキストリンクで、左右のスペースを全角スペースで取りながら、横に並べていたんですが、「スマホだとこれは死ぬほどタップしずらい・・」という事に気づいて、まず、冒頭の記事のように、テキストリンクをリンクボタンに変えました。

それでCSSのみで作ったリンクボタンを横にずら～っと並べたかったのですが、これが結構難しい。

左右の余白は全角スペースなどを使えばできるのですが、上下の余白を作るのが難しい。具体的にはリンクボタンをたくさん並べていくと2行以上になることがある。この時、上下に隣り合うボタンがピッタリとくっついてしまって、めちゃくちゃ見にくい。という状況になりました。「line-heightプロパティ」を使うのが良さげかも・・とも思いましたが、これでも上手く行きませんでした。

そうして調べていた所、「flex」というモノを発見。

これを使えば、メチャクチャ簡単にリンクボタンを横にずら～っと並べられて、しかもリンクボタンが2行以上になってもしっかりと余白を開けられるようになりました。

次の記事に詳しく書いてありました。


あとは、これの必要な部分コピペ＆修正して、CSSソースに貼り付け。divタグでflexを呼び出せば、divタグで囲まれた部分は横並びにずら～っと並びます。それも綺麗に。

メモとして、CSSソースに貼り付けたモノを載せておきます。

.flex{
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > *{
margin:7px 7px;
}

flex-direction: row;で横並びを指定。flex-wrap: wrap;で端に行ったら折り返すことを指定。.flex > *部分のmarginでリンクボタン周りの余白を指定。

HTML部分ではdivでflexをclass指定。後はdivで囲まれた部分に、リンクボタン（aタグ）をガシガシ貼り付けていけば、それが綺麗に横並びに表示されます。

な　ん　て　便利なんだ！！

。。。

こんな感じで想像以上に簡単に出来ました。CSS3ってスゲーな。

この記事に含まれるタグ : CSS リンク ボタン スマホ 

（記事編集）　https://shibatas.blog.fc2.com/blog-entry-453.html

2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

画像を使わない（スマホを意識した）CSSリンクボタン作成メモ

   ↑  2018/05/08 (火)  カテゴリー： その他（Web・PC・スマホ）

新しくブログを作っているんですが、今更ながらモバイル（スマホ）を意識してリンクを作ろうと思いました。

PCの場合は、普通にテキストリンクで良かったのですが、モバイルだとテキストは小さくてタップしにくい。さらにリンク同士が隣り合っている場合、テキストリンクだとさらにタップしにくい・・。

また画像を使うのは単純に面倒くさい。そしてなんとなくスマートじゃない（笑）。

ということでスマホを意識して、リンクは画像を使わないで「CSSのみで作ったボタン」で作成することにしました。

その際のポイントや心がけたこと、手順などをメモしておきます。

スマホを意識したリンクボタンのポイント

  • 文字サイズは14〜15px
  • リンクボタンが隣り合う場合は余白を多めにとる（PCと比べて）

下記の記事に、スマホを意識するポイントが書かれています。


この記事を参考に、文字サイズは14〜15pxに指定。リンクボタンの余白（margin）は多めにとりました（私の場合は上下左右7pxでmargin指定）。

リンクボタンを作った手順

  1. Css Gradient Buttonでボタンを作成
  2. HTML email inline stylerでCSSをインライン化
  3. ブログに貼り付け

下記の記事にリンクボタンをCSSのみで手軽に作る方法が書かれていました。


これを参考に作業。

１．まず、Css Gradient Buttonでリンクボタンを作ります。この時、リンクボタン内の文字サイズを15pxに指定。

２．次にHTML email inline stylerで作ったCSSソース？をインライン化（ブログ投稿画面で普通に貼り付けられる形にする）します。

３．最後にブログ記事投稿画面で貼り付けます。※もちろんソースを貼り付けられる部分で、です。

リンクを別窓で開く時は「rel="noopener"」を付加する

最後にちょっと追記。

リンクを開く時に「別窓」を指定する場合、「rel="noopener"」は付加することを心がけました。なんでも、これを付加しないと色々と問題があるようなので。

。。。

これで完了。意外と簡単でした。

この記事に含まれるタグ : CSS リンク ボタン スマホ PC 

（記事編集）　https://shibatas.blog.fc2.com/blog-entry-452.html

2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

あれ？FC2ブログもHTTPSに対応してた！ので、早速HTTPSを導入した（後で様子を見てみよう）

   ↑  2018/02/15 (木)  カテゴリー： FC2ブログ

さっき何気にメールをチェックしていたら、Google Adsenseから「今月の成果をチェックしよう」みたいなメールが来てました。

その中に、「サイトを最適化すると収益向上が期待できますよ」という内容が。

早速AdSenseの管理画面に行ってみると、

「サイトをHTTPS対応すれば、収益の向上が期待できます」

というニュアンスのメッセージがありました。
（正確には「収益向上のヒント」ですが）

詳しいメッセージ内容は次です。

サイトで HTTPS（ハイパーテキスト転送プロトコル セキュア）を設定している場合は、ブラウザのアドレスバーに緑色の南京錠アイコンが表示されます。これにより、お客様のサイトが HTTPS を利用してセキュリティを強化していることを訪問者に伝えることができます。

サイトを HTTPS 対応に設定すると、他にも次のような重要なメリットが得られます。
  • Google 検索結果におけるサイトのランクが向上します。
  • 他の安全なウェブサイトからのトラフィックの正確な分析情報を利用できる。
  • トラフィックのハイジャック被害に対する安全性が向上します。

これはやらない手はありません。

ただ、私が前に調べた時点ではFC2ブログはまだHTTPSに対応していませんでした。だから、今もできないよなぁ、と思いつつも、

念のためGoogle検索で「FC2ブログ　HTTPS」と検索してみると・・、

なんとっ、「FC2ブログもHTTPSに対応できる」ようになっていたようです！！

早速試してみました。

方法は簡単で、FC2ブログ管理画面に入って、
  1. 左メニュー「環境設定」をクリック
  2. 上部中央メニュー「ブログの設定」に“マウスオーバー”
  3. 最下部あたり「SSL設定」をクリック
これでSSL設定を有効化の作業を行うことができます。

ポイントは2番の、上部中央メニュー「ブログの設定」に“マウスオーバー”する、という部分ですね。

「ブログの設定」を普通にクリックしてしまうとSSL設定の項目が“出てきません”。だから私は昔に発見できなかったんだと思います。

あとは「SSLを有効」にし、私の場合は「転送設定は302のまま」にしました。

HTTPS化完了後、様子を見て、問題なさそうだったら、転送設定を301にしようかなと、今は思っています。

。。。

他のブログもHTTPSを導入してみて、アクセス数の変化を見てみたいと思います。

ではではっ。

追記1：HTTPS化した後の変化

■FC2カウンターが表示されなくなった → 対策可能

対応してるようなので、後で作業すれば解決できるはず。
■ACR WEBのページランキングも表示されなくなった

ちょっと調べた感じではACRWEB側では現在のところ対策を行っていない模様。そのうち対策するかもね。

■Zenbackも表示されなくなった → 対策可能

HTTPS対応してるようなので、対策作業をすれば復活できるはず。

追記2：ようやくHTTPS化完了

この記事にある（ここまでの）内容を実践しただけでは、完全にはHTTPS化出来ませんでした。

私はChromeなんですが、Chromeでこのブログを表示するとアドレスバーに（i）のような表示が出ます。これは完全にはHTTPS化できていない証拠です。本当にHTTPS化が完了するとアドレスバーに緑色で「保護された通信」という表示が出るはずです。この表示が私の場合出なかったので、HTTPS化はまだ完了していませんでした。

で、次の記事を参考にHTTPS化を進めたところ、無事完了させることができました。

FC2ブログでSSL設定したのに［保護された通信］にならない時の原因を考える - AOSSL

その他、私がやったこととやらなかったことは次のようになります。

  • ZenbackやACRWEBの人気ページランキング＆ClickTrack、FC2カウンターは面倒くさいので削除しました。（カウントタグ、表示タグ両方とも削除）
  • このうちZenbackはHTTPS化に対応できるようなので、この記事を参考に対応すれば大丈夫だと思います。私の場合は面倒くさいのでしませんでした。
  • ACRWEB関連は私が探した限りではHTTPS対策は見つけられませんでした。
  • Feedlyはこの記事を参考にHTTPS化を済ませました。
  • 自力で設置したソーシャルボタンを削除してFC2の公式のモノにした（環境設定＞ブログ設定、で有効にするだけ、のヤツ）。
  • アクセス解析タグでもhttpのモノは削除しました。残ったのはGoogle Analyticsのみ。
※一番簡単だったのはChromeのデベロッパーツールで「http〜」という表記を探して、その部分を改善（主に削除）したことです。これを繰り返したらHTTPS化できました。

※レスポンシブテンプレートを使っていない場合は、「PC表示とスマホ表示」の両方をチェックする必要があります。両方ともアドレスバーに「保護された通信」と出ればOKです。

これでアクセス数やAdSense収益がどうなるか変化を見てみたいと思います。

この記事に含まれるタグ : FC2ブログ HTTPS SEO 

（記事編集）　https://shibatas.blog.fc2.com/blog-entry-451.html

2018/02/15 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

←　前のページ　　次のページ　→