2018-11-20

はてなブログをマテリアルデザインっぽくするためのあれこれ

当ブログがオシャレになりました（強弁）。

とくにスマートフォン版のページは今まではてなブログのデフォルトほぼそのままだったので、相対的にかなりイイ感じになったと思います。

むろんこれはchocoxinaががんばってオシャレにしたわけではなく、先人が作ったテーマ（はてなブログには、体裁をがっつり変えるためのスキン変更みたいな機能があるのだ）をポチっと反映しただけなんですけれども。 http://blog.hatena.ne.jp/-/store/theme/8454420450093337097

とはいえ、ほんとうに「ただ反映しただけ」ではいくらか満足できない点があったので、そのへんの修正方法を備忘録がてら共有しようと思います。ブログデザインでGoogle信仰を表明したい方は参考にしてください。

記載のない場合、はてなブログのダッシュボードから「デザイン→カスタマイズ→デザインCSS」と遷移して、表示されるテキストボックスの最下部にコードを突っ込めばいいようになっているはずです。

不具合修正

デフォルトの状態だと、ページ下部に表示される「前へ・次へ」のボタンがどうも反応しにくかったので、頑張って直しました。そのついでによりボタンっぽい感じに。

/*pagerの修正・変更*/
.pager{
    width:100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between ;
}
.pager .pager-prev {
    background: #607D8B;
    display:block;
    float: left;
    text-align: center;
    width: 47%;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    border-radius: 2px;
    order:0;
}
.pager .pager-prev a{
    display: block;
    padding:0 0.5em;
    color:#fff;
    height:100%;
    transition: .3s ease-out;
}

.pager-prev a:before {
    padding-top: 10px;
}
.pager-prev a:hover{
    color:#fff;
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.pager .pager-next {
    background: #607D8B;
    display:block;
    float: right;
    text-align: center;
    width: 47%;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    border-radius: 2px;
    order:1;
}
.pager .pager-next a{
    display: block;
    padding:0 0.5em;
    color:#fff;
    height:100%;
    transition: .3s ease-out;
}
.pager-next a:before {
    padding-top: 10px;
}
.pager-next a:hover{
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

ただボタンの利きを直すだけなら↓のみでも。

/*pagerの不具合修正*/
.pager .pager-prev a{
    display: block;
}
.pager .pager-next a{
    display: block;
}

あと、ページタイトルがなぜかやや右に寄せてあり、とくにスマホで見ると違和感があったのでこちらも修正。

/*なぜかページタイトルがやや右に寄せてあるのを修正*/
.header-image-enable #title, .header-image-enable #blog-description {
     padding-left: 0px;
}

各所をマテリアルデザインに合わせる

せっかくブログ全体がマテリアルデザインになったので、準拠していないいろんな部分も体裁を合わせよう。

/*twitter埋め込みもマテリアルデザインっぽく*/
.twitter-container {
    display: block;
    border:1px solid #dde5e8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border-radius: 2px;
}
/*最上部に出てくるヘッダに影をつける*/
#globalheader-container{
    box-shadow:0 5px 10px rgba(0,0,0,0.24);

※twitter埋め込みについては、サイドバーに埋め込んだコードを以下で囲む作業が必要。

<div id="twitter-container">～</div>

あとヘッダにつけた影がスマホ版だと反映されないんですが、たぶんはてなブログpro向けの諸々の兼ね合いっぽいので諦めました。

その他調整

このテーマが反映されたブログをスマホで見ると、どうもヘッダー画像がでかすぎるというか、ファーストビューで記事本文が見えないのが気に入らなかったので、ちょっとおとなしくしました。before画像も用意せず何言ってるんでしょうね。

/*ヘッダ画像の表示領域をおとなしくする*/
.header-image-enable #blog-title #blog-title-inner {
    margin: 0 0 -1em;
    padding: 0 0 6em;
}

さいごに

とってもオシャレになったchocoxinaのover140を引き続きご愛顧下さい。

2018-11-16

Pixel3でAndroidデビューした筆者がとりあえず入れたアプリ5選

iPhone3Gが日本で買えるようになったあたりからずっとiPhoneユーザーだったのだけれど、なんか飽きたしPixel3も出たのでこのほどAndroidユーザーになりました。

「iPhoneで使ってたあの機能・あの専用アプリの代わり」みたいなのを中心に、いまんとこ使っててイイカンジだったやつをいくつか紹介します。

片手でスマホ

iPhoneにあってandroidにない機能、というのがいくつかある。ホームボタンを軽く2回叩いたり、画面下端を下スワイプしたりして、画面全体を下側にズラしてくる「Reachability」もその一つだが、似たような機能を実現するのがこの「片手でスマホ」だ。

https://play.google.com/store/apps/details?id=jp.mura.kusa.ohosupport.free

画面右または左フチに常駐させたボタン（透明化することも可能）を画面中央にスワイプ、またはダブルタップすることで、Reachabilityに似た操作ができるようになる。似たようなアプリはいくつかあるがたいていRoot権限を要求してくるので、この用途でふつうに使えるアプリは恐らくこれ一択という感じだ。

（ところでPixelシリーズは簡単にRootが取れるらしいんだけど、端末リセットされるらしいのが嫌でやっていない）

ちなみに、storeページ等に書かれていない操作として、画面に常駐させたボタンをドラッグすることで、ボタンそのものを上下方向に移動させることができる。個人的には、キーボードと干渉しないギリギリまで位置を下げておくのをお勧めする。

Talon for Twitter

chocoxinaは一日中Twitterを見ているので、優良なTwitterクライアントを入手することは喫緊の課題だった。
・通知一覧が見られて、
・リストや保存した検索へのアクセスがよくて、
・見た目が良い
というアプリを探していて見つけたのがこのTalon for Twitter。

https://play.google.com/store/apps/details?id=com.klinker.android.twitter_l

世間のサードパーティー製Twitterクライアントは、UserStreamの廃止によっていろんな機能が使えなくなっているが、Talonはその被害をうまいこと回避している。

たとえば通知一覧については、多分公式のやつをスクレイビング（？）でうまいこと拾ってきて通知画面を作っていて、さらに「あなたのRTをお気に入りに追加しました」みたいないらん情報を省いてくれる。さらに、リアルタイム通知も「公式アプリの通知を横取りする」みたいな方法で実現していて「androidのアプリってすげーな」という素朴な感動があった。

全体的な使い心地については、web版tweetdeckを思わせる多カラムのUIなので、筆者がiOS時代に使っていた「tweetbot」の延長のような感じで使えている。

個人開発らしく、いくつかわかりやすいバグがあったりするのだが、アップデートがマメなのでそのうち治るんじゃないかと期待しつつ待とう。もしあなたが優秀なエンジニアさんであれば、このアプリはオープンソース（？）でGithub（？）にリポジトリ（？）が上がってるので、プルリク（？）でバグ修正を投げたり、Fork（？）してきて好きなように改造したりとかもきっとできる。

Googleアンケートモニター

https://play.google.com/store/apps/details?id=com.google.android.apps.paidtasks

Googleにアンケートというていで個人情報を投げると、1回数十円程度のGoogle Playクレジットが貰えるアプリ。「Googleにケツの穴のシワの数まで握られて管理されたい」というマゾヒストにおすすめ。

このままアプリを使い続けて小銭を貰い続けていれば、きっとショッピング検索に墓が出てくることで自分の死期を悟るような人生が待っているはずだ。

アンケートが届くのはだいたい週に一度くらいっぽいので、有料アプリの支出をこれで賄おうとか考えないように。

Solid Explorer

androidのファイラーといえばESファイルエクスプローラー、というのが長らく通説で、自分もなんとなくインストールしていたんだが、インターネット識者の皆々様的にはどうも評判がよくない。 baiduに良からぬ情報を流しているとかいう噂で、調べたかぎりでは一部を除いて疑念の域を出ていないのではというレベルだったのだけれど、ともあれここで情報強者面して紹介するには不向きっぽいことが判明した。

そんで他になんかあるかなーと思って見つけたのがこれ。

https://play.google.com/store/apps/details?id=pl.solidexplorer2&hl=ja

ひととおりのクラウドサービスに接続できる点と、見た限りマテリアルデザインに準拠しているっぽい点が好評価なので乗り換えました。

御察しの通り、chocoxinaはことアプリに関して割と面食いです。

SimpleNote

iPhone時代に使っていたアプリで「Drafts5」というのがある。

起動するとすぐマークダウンでメモが作成できて、完成したテキストをいろんなアプリに簡単に共有できる、というのがウリのメモアプリだ。

androidにこういう感じのやつはないものか、と思っていろいろ探していたのだが、そもそもandroidはアプリ間でのデータのやりとりが（iOSと比べれば）根本的に得意らしく、どのアプリも取り立てて「共有が得意！」とか言っていない。つまりとにかく軽くてMarkdown対応ならいいらしいぞ、と気づいて見つけたのがこれだ。

https://play.google.com/store/apps/details?id=com.automattic.simplenote&hl=ja

wordpressの会社が作っているアプリで、メモをクラウドで同期できる。クラウド同期は別にいらんやろ、と思っていたのだが、個人的にはちょっとしたメモがいつしかブログの下書きになっているようなことがしばしばあるので、そういうときに「いったんdropboxに投げて…」とかやらなくて済むのはけっこう便利だった。

Drafts5と比べると、起動からメモ開始までにワンタップ余計にかかるようになったが、アプリ自体が軽いので大きなストレスにならない。

2018-11-07

床屋きらい

床屋が嫌いなのだ。

「美容院は？」じゃない。ナンセンスなことを聞くな。名前が床屋だろうが美容院だろうが1000円カットだろうが、シャンプーが仰向けだろうがうつ伏せだろうが掃除機で済まされようが、とにかく人に髪を切ってもらう施設が等しく嫌いなのだ。

何が嫌いかって、奴らは席につくなり
「今日はどうされますか？」
とかえらい漠然としたことを聞いてくるだろう。
どうされますかじゃない。どうしたらいいかこっちが聞きたいくらいなのだ。

髪を切りに来る人間の全員が全員、「なりたいワタシ」みたいなものを持ち合わせているわけではない。
ただ必要に駆られて長くなった髪を短く切りに来る人間というのもいるのだ。

どうされたいかという質問にあえて答えるなら「世間様に恥ずかしくないようにしてください」としか言いようがない。その一言で髪を切ってくれる床屋がいるなら7000円まで出す。

それはともかくだいいち床屋ども、こちらがたまに色気を出して何かしらの指定をすると
「お客様は髪質が〜」「アタマの形が〜」とかなんとかよくわからんことを言って要求を突っぱねてくるだろう。
うるさいうるさい、百歩譲って髪質（？）とやらの考慮が漏れたのはこちらの落ち度としても、アタマの形がどうかなんてこちらには分かりようがないのだ。目ってアタマの前のほうについてるからアタマの後ろは見られないんだぞ知ってるか。

そういう未知の変数でもって出来ることが変わってくるというなら、そちらからまずどうできるのか示して欲しい。さいきん提案型営業とかいうやつ流行ってるだろ。

結局そんなことを考えながらも「前切ったのか一月前なんで、伸びた分を揃える感じで」とか適当にやり過ごした俺に、床屋はまた
「襟足はどうされますか？」
とか訳のわからないことを聞いてくる。

どうされますかじゃない。伸びた分だけ切ってくれって言ってるだろう。

それ以上何を指定する必要があるというのだ。長さで答えればいいのか見た目で答えればいいのか、刈るか切るかという話なのか。
自分の後頭部がどうなっているべきなのか、分かっている人間ばかりではないのだぞ。目ってアタマの前のほうについてるからアタマの後ろは見られないんだぞ知ってるか。だいいち先月俺の髪切ったのもお前なんだから同じように出来るだろ。

そんなやりとりを経た上で何が起こるかといえば、これだけコミュニケーションに困難の生じる他人に、耳や動脈の周りで刃物を振るわれるのだ。

文明開化で髪を切る文化をありがたがった日本人、全員滅びていればよかったのに。

……と言いつつchocoxinaは今月もちゃんと髪を切った。褒めてほしい。

散髪ヘアカットすきばさみセットハサミシザー左右プロ初心者美容師理容師セルフカットカットはさみケース付クリップピン付

出版社/メーカー: LOFEE
メディア: その他
この商品を含むブログを見る