感想みかん

感想、レビュー、実体験等を書くブログ

このブログで使っているカスタマイズ一覧

2018年3月1日更新

このブログで使っているカスタマイズを一覧にしました。
使っているというよりは使わせて頂いているものがほとんどです。
これらを適用すると僕のブログと似た形になります。

自分で自分のブログに適用したのにこれなんだっけ?と忘れて行ってしまうので、備忘録も兼ねて一覧にすることにしました。
何か変更したら随時更新する予定です。

テンプレート「Brooklyn」

Brooklyn - テーマ ストア

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE

数あるテンプレートの中で最も使いやすいと思いました。作者様に感謝しています。

はてなブログの設定

  • 記事はMarkdownで記入(iPadのはてなブログアプリも同様に設定)

  • トップページの表示形式(PC版)→一覧表示、キーワードマッチをはずす

デザイン関連

グローバルヘッダーの色と区切り線の色を変える

はてなブログのヘッダーは設定で非表示にできますが、表示させておくと便利なのでつけています。
ここの色を変える方法を探したところ、こちらのブログにたどり着きました。ありがとうございます。

<はてなブログ>ヘッダ上部にあるヘッダーメニュー(グローバルヘッダ)の色の変え方 - イロイロひとりごと。

色をいろいろ変えてみましたが結局白に戻り、区切り線だけベースカラーに変えました。
上記ブログのコードに border-bottom: 2px solid #好きな色番号;を追加しました。

グローバルナビの小さいアイコン=Font Awesome

Icons | Font Awesome

設定→詳細設定→CSSに次の1行を入れる。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

注:この1行はfont awesomeの自分が使っているアイコンのバージョンと合わせる必要があります!僕はまだ4のアイコンを使っているので4.4のコードで平気です。2018/02/19現在の最新バージョンは5なので5に対応したアイコンを使うときはこのコードも5にしないとうまく表示されないアイコンが出てきます。

デザイン→ヘッダ→タイトル下 のグローバルナビにFont Awesome Iconsの中から好きなアイコンを追加する。

例) なら、以下の分を途中に挿入する。(バージョンによって変わる場合あり)

<i class="fa fa-gamepad" aria-hidden="true"></i>

1文全部書くと、
<li><a href="http://www.kanmika.com/archive/category/xxxxxxxx"><i class="fa fa-gamepad" aria-hidden="true"></i> ゲーム</a></li>

しかしブラウザのコンソールで見ると混在コンテンツというエラーが出るので、真似しない方がいいかも。直し方はわかりません。

関連記事をサイドバーから記事下に移設

はてなブログで記事下に関連記事を出すカンタンな方法 - ボクココ

はてなブログに標準装備された、サイドバーを記事下に移設する機能とは違う方法でやっています。理由は、こっちのほうが位置に自由が効くからです。

目次に「目次」という文字を追加し、項目に数字を自動で降る

項目の前に自動で付く中黒が不格好で嫌いだったので。

色々ググりましたがこちらを参考にさせてもらいました(色々ぐぐったので、どれかわからなくなってしまいましたがたぶんこちらです)。

はてなブログの目次のデザインをCSSで変更する方法 - すずろぐ

ありがとうございます。

トップページのスター表示を廃止

(2018年1月17日追加)

こちらのブログを参考にさせて頂きました。ありがとうございます。

【コピペCSS】トップページのはてなスターを消すべき理由とそのやり方 - どろんこあそび

フッターにコピーライトを追加

(2018年2月3日更新)

コピーライトというものはわざわざ書いても書かなくても当然に存在しているものなので記載はどっちでもいいらしいのですが、書いた方がベージの終わりがハッキリするかな、と。なんとなく引き締まります。

はてなのフッタは表示させない設定にしています。

コメント欄「Disqus」

(2018年1月25日追加)

以前使っていたこちらを再度導入しました。

https://disqus.com/

ある程度のPVが出てくると英語の広告が出るので有料プランに入る必要性がでてきます。(月5万PVぐらい?)

グローバルメニューの色変更など

(2018年2月16日変更)

ずっとやり方がわからなかったのですが、偶然読むことができたブログに色変更などのやり方が書いてあって目から鱗でした。ありがとうございます。

はてなブログテンプレート【Brooklyn】のカスタマイズ集 - Style 21世紀×Deaf×INFP

サイドバー関連

Google カスタム検索

カスタム検索エンジン

本当は検索窓はスマホでは追尾する形にできたら理想なんだけど、僕の知識では無理なのであった。

サイドバーのアーカイブなどのタブ化

はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ - Yukihy Life

こちらを参考にして行いました。ありがとうございます。
人気記事のタグについては僕の雑記ブログの場合はいらないと判断して外しました。

→(2018年3月)機能を外しました。

ブログ解析関連

Google Analytics

Google アナリティクス - モバイル、プレミアム、無料のウェブサイト解析 – Google

Google Search Console

Google ウェブマスター - サポート、学ぶ、つながる、Search Console – Google

Bingウェブマスターツール

Bing - Web マスター ツール

BingウェブマスターツールについてはID作って登録したもののほぼ使っていない。

Google Tag Manager

15分で設定完了! Google Tag Managerで記事の「読了率」と「スクロール率」を取得しよう【小川卓のブログ分析入門 第2回】 - 週刊はてなブログ

2018年3月導入。記事がどこまで読まれたかわかる。一応入れてみたけど見てない。。

使ってないけど気になるカスタマイズ

更新日時自動変更

リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ – つばさのーと

やるか迷い中です。

外したカスタマイズ

Google ウェブサイト翻訳ツール

万が一、海外の人が見る用にパーツをつけてみた。

https://translate.google.com/manager/website/?hl=ja

特定のページだけアドセンスを非表示にするテクニック

AdSenseコードを残したまま特定のページで広告を非表示にするJavaScriptプラグイン「AdSense Filter」を自作した - はぴらき合理化幻想

指定タグを付けたページにAdsense広告が表示しないスクリプトを書いてみた - ゆとりずむ

参考にさせていただきました。ありがとうございます。「NoAds」タグに適用しました。

→(2018年2月下旬)機能を外しました。

アドセンスのレクタングル広告を左右に並べる(ダブルレクタングル)

(適応:2018年1月後半〜3月上旬)

アドセンス レクタングル広告を横に2つ並べた。これはダブルレクタングルと言って何年も前から定番のテクニックのひとつ。やりかたはいくつもあると思うけど、僕がやったやり方は、

  1. tableタグを使って2つの広告を並べる。
  2. 2つの広告の間に特殊文字で空白を入れる。コード1、空白、コード2という3つの箱が横に並ぶイメージ。
  3. 全てをcenterタグで中央寄せする。
  4. 全てをdivタグで囲う。広告の区別がつくように周りに空白(padding)を入れ、枠線で囲む。

算数的に書くと、div(center(table(コード1・空白・コード2))) ←僕の頭の中はこの程度

あまりデザインの知識がないのでtableタグとdivタグを2重構造にしてもいいのか迷ったが、多分平気。

例)

今後は中間の空白を特殊文字で対応している部分を画面幅によりフレキシブルに縮まるようにできるようになったらいいな。でも邪魔っぽく感じたら消すかも。

→(2018年3月下旬)その後Flexboxで作り直しました。コードは後日公開するかも。

やりたいんだけどできないシリーズ

はてなブログのコメント位置を上の方にもってくる

現状だと関連記事の下になってしまい、つかいにくいので消しています。

はてなスターの固定位置をもう少し下にずらす

記事下枠の一番上固定なはてなスターを移動させたいです。

PocketのPublisherツールでVerifyができない

https://getpocket.com/publisher/verify_meta

↑URLのmetaタグを設定の「headに要素を追加」に追加してみたがVerifyできないです。はてなブログでは追加できないのかと思いましたが公式見解ではできるとのことです。

デフォルトのソーシャルパーツで、Pocketボタンを設置できるようにしました - はてなブログ開発ブログ

Pocketボタンがタイトルを拾ってくれない

Pocketに登録すると記事URLがそのままになってしまいます。なんでですの。。

どなたかコメント欄やツイッターなどでアドバイスいただけると幸いです。