タイトルバーが暗いGoogle Chromeのミニマリストなテーマ

chromeロゴ

Chrome Web Storeテーマを見ていたら、カテゴリ?ごとにテーマがまとまっていたのですが、その中でシンプルで美しいミニマリストなテーマが気になったので、タイトルバーが青いGoogle Chromeのクラシックなテーマと同じ感じのテーマを探してみました。

この3つのテーマは、どれもタイトルバー(タブバー)が暗いミニマリストなテーマです。
(現在のタブ以外の)非アクティブなタブがタイトルバーに溶け込んで目立ちません。
最近使っているのは、タイトルバーが一番黒い(暗い)Simple Silverです。

Google ChromeにSimple Silverをインストールするとこんな感じです↓

Google Chrome

Cent Browserに適用するとこんな感じです↓(設定でタブの形を四角にしています)

Cent Browser

Google Chromeのテーマは、インストールしてもすぐ元に戻せるので、試着してみては?

なお、Chromeチームの公式テーマBlack & WhiteはAero(透過)なのでいまひとつ。

はてなブログでヘッダを消しても自分で見るときはヘッダを表示する方法

hatenaロゴ

ブログの表示を高速化するため、ブログにヘッダを表示しない代わりにはてなブログにグローバルヘッダーもどきを設置したのですが、自分のブログからはてなにログインしたり、購読ブログの新着やお知らせなどを確認できなくなって少し不便な思いをしています。

そこで、このブログではおなじみのWebサイトの見た目を変更するchrome拡張機能User JavaScript and CSSを使って、グローバルヘッダーもどきを消して、はてなブログ標準のグローバルヘッダーを表示するようにしました。

参考:はてなブログのデザインCSSの編集画面を大きくする

自分用ヘッダーCSS

設定→詳細設定→ヘッダとフッタ(PC版)の「ブログにヘッダを表示しない」をチェックしたときのHTMLソースは、次のようになっています。

HTML
<div id="globalheader-container" data-brand="hatenablog" style="display: none" >
<iframe id="globalheader" height="37" frameborder="0" allowTransparency="true"></iframe>
</div>

display:none」でヘッダを非表示にしているだけなので「display:block !important」で強制的に表示させます。

ついでに「position:fixed」でヘッダが画面上に固定される(スクロールしてもついてくる)のを「position:static !important」で強制的に解除します。

はてなブログでヘッダを消していても、自分で自分のブログを見るときだけは、ヘッダが表示されようになったので、今までどおり、ヘッダの便利な機能が使えるようになりました。

はてなブログの個別記事の投稿日をカレンダーにわかりやすく表示

hatenaロゴ

はてなブログの月別アーカイブをリストからカレンダーに変更してからしばらく経ちますが、よくよくカレンダーを見てみると、個別記事の投稿月がカレンダーに反映されている(例えば、個別記事を2019年4月に投稿していたら、カレンダーの表示も2019年4月と表示される)のがわかるかと思います。

ただ、個別記事の投稿月に連動してカレンダーの表示が変わるものの、個別記事の投稿日は、カレンダー上で特に表示が変わるわけでもなく、カレンダーだけ見ると、いつ投稿された記事なのかわかりません。

そこで、JavaScript(jQuery) で、個別記事の投稿日をカレンダー上で目立たせてわかりやすく表示するようにしました。
(デザイン設定→カスタマイズ→記事→記事下にコードを入力)

JavaScript
<script>
window.addEventListener('load', function() {
    var day = $('.calendar-day a[href="'+location.href+'"]');
    day.css('color','#fff');
    day.css('border-color','#000');
    day.css('background','#000');
});
</script>

動作的には、個別記事ページのURLと同じカレンダーの投稿日を色を変えて目立たせるようにしました(この記事の投稿日の4月14日がカレンダー上で黒背景になっているはず)。

ポイントは、カレンダーの表示が遅いので「window.addEventListener('load' ~」でスクリプトを実行させたこと。要は「window.onload」で実行を遅らせたということです。

参考にしたブログ・Webサイト
By U Zensen. - JavaScriptでwindow.onloadの色々な書き方!!

言われなければわからない本当に些細なことですが、こういう小さい工夫が好きです。