はてブを始めてみて、ひとまず最初にカスタマイズしたことをまとめて残しておこうと思います。
無料版の範囲でできることで。Proになるともっといろいろ変更できるみたいだけど、ひとまずこのあたりでやってみようかという感じ。
いろいろなサイト様のカスタマイズ方法やコードを参考にさせていただきました。ありがとうございます。
- ブログのデザインを変える
- サイドバーのカスタマイズをする
- 広告の設定をする
- ブログの設定を変える
- その他
- (2016/4/9追記) Proにしてみました
- (2016/6/18追記) テーマを変更してみました
ブログのデザインを変える
ブログ全体の見た目とか、サイドメニューとかです。
テーマを変更する
ブログの見た目の変更です。
これは「デザイン」を開くと、公式テーマの一覧が出てくるのでまずはそれを選んでみるとわかります。
そこにないテーマは一番下の「テーマストアでテーマを探す」からストアにジャンプ。
ちなみに今使っているテーマはこれです。
テーマを決めたらそれに変更して、変更を保存すれば適用されます。
トップページの表示を「月別アーカイブ」にする
はてなブログの初期設定では、トップのURL http://kagerou-ts.hatenablog.jp/ を開くと、記事がだーっと並ぶように表示されています。
ここに並ぶ記事数は、「設定→詳細設定→トップページの記事数」で変更可能ですが、いかんせん個別記事にだけ表示してほしいと思ってる、AdSenceの広告やシェア用のブログパーツまで出てきてしまっています。
それが記事ごとに出てきますから、4つ表示したら4セット出てくる。
(というかAdSceneって1ページに3つまでしか駄目という話なんだけどいいんだろうか。デフォルト設定がこれで。)
で、はてブには「月別アーカイブ」で表示されている記事一覧のページがあり、 http://kagerou-ts.hatenablog.jp/archive こちらをトップに表示したい。
そういう挙動にしているところはあるのになあと調べていたら、同じことを思っていた人がいるようで、こちらを参考にデザインを変更。
これに倣って、「設定→詳細設定→検索エンジン最適化→headに要素を追加」に、ジャンプ用のスクリプトを設定。
<script type="text/javascript">
if( location.href == 'http://kagerou-ts.hatenablog.jp/'){
location.href='http://kagerou-ts.hatenablog.jp/archive';
}
</script>
<noscript>
<p><a href="http://kagerou-ts.hatenablog.jp/archive">怒濤の詰ん読解消日記</a></p>
</noscript>
要はトップページのURLだったらJavaScriptでarchiveにジャンプさせるというもの。
ブログのほうの設定で、トップページURLの設定みたいなのはなさそうなのでこちらを採用。
Proになると独自ドメインとかできるみたいだから、そちらならできるのかなあ。
(そもそもこの一覧表示の切り替え設定は、標準で欲しい感じあるけど…)
(2016/5/29追記)
私が他のサイトを見るときに、そう長くない記事ならだーっと並んでいてくれたほうがざっと見渡しやすいかなと思っていることに気づいたので、こちらの設定はいったん外してみることにしました。
このあたりは記事の長さによるのでサイトそれぞれではありますが、自分で見てみてウチくらい(1記事1000～1500文字程度)ならざーっと並んでいていいかなと。
(2017/06/02)
Proのみですが標準機能に実装されました！
「設定 > 詳細設定 > トップページの表示形式（PC版）」で「一覧形式」を選択することで変更できます。
「目次」をつける
この記事みたいに長くて見出しが降ってあると、トップにその一覧が欲しくなります。
目次は次のようにすると、そこに入ります。
[:contents]
それで、「目次」という文字と背景色を変えたいと思っていたところ
というのを見つけたので一部拝借。
記事ページに「あわせて読みたい」を出す
関連記事をだーっと出すコードを追加します。
にある、「あわせて読みたいG」を設置。
(2016/2/10)
Milliardを使ったパネルにしてみました。
ページトップに戻るボタンを表示する
長いページとかだとトップに戻るのも一苦労なので、ページトップに戻るボタンを出します。
にあるコードを、「フッタ」に追記。
パンくずリストを追加する
にあるスクリプトで、パンくずリストをヘッダーに追加。
シェアボタンを変更
ちょっとシャレオツ的な感じに、シェアボタンを変更してみました。
にあるコードをコピペ。
メニューバーを設置
上部にメニューバーを設置しました。
詳細はこちらにまとめてあります。
サイドバーのカスタマイズをする
ブログの右か左か下に表示されるメニューです。
どこに表示されるかは、テーマによって違いますね。
主に、「デザイン→カスタマイズ(スパナマークのアイコン)→サイドバー」から変更します。
「モジュールを追加」を見てるといろいろあるので追加してみたり、検索とかリンクとかはいいかなと削ってみたりとかで適当にカスタマイズ。
プロフィールの変更
「プロフィール」というのがすでに用意されていたので、そこを修正しました。
アイコンとかニックネームとかはここではなくて、「アカウント設定→基本設定」の、ニックネームとプロフィールアイコンから設定します。
Google AdSenseを貼る
Google AdScenceからバナーのコードを取ってきて、「モジュールを追加」で「HTML」を選び、タイトルに「スポンサーリンク」、本文にコードを貼り付けます。
アドセンスは広告ラベルをつける場合、「スポンサーリンク」または「広告」と表示しないといけないので、そのあたり注意が必要です。
ラベル無しなら無しでもよさそうですが、その場合は記事の見出しその他が「誤解を招かないように」しないといけないみたい。
サイトのユーザーに誤解を与えないようにし、ユーザーがコンテンツと Google 広告を簡単に区別できるようにすることが大事です。AdSense のポリシーでは、「関連情報」や「関連リンク」といった誤解を招く見出しの下に広告を配置することは禁止されています。広告ラベルには、「広告」または「スポンサーリンク」のみを使用するようお願いいたします。それ以外のラベルは使用できません。
AdSenseについての詳細は本題からずれるため割愛します。
Twitterのタイムラインを貼る
Twitterの設定のウィジェットで作成したコードを、「モジュールに追加」で「HTML」を選び、本文に貼り付けます。
カテゴリーの表示をまとめる
カテゴリーが増えていったのでまとめるスクリプトを作って適用しました。
サムネイルを表示する
(2016/5/29)
最新の記事、注目記事については「サムネイル」という項目があったので、それをセット。サイズはとりあえずデフォルトの100x100で。
広告の設定をする
(2016/7/6追記)
AdSenseの設定をする
サイドバーにAdSenseをつける設定については上に書きましたが、AdSenseは一ページに3つまで設定できます。
(2016/8/28追記：AdSenseの規約変更で1ページ当たりの具体的なリミットがなくなり、ページの内容に即したものという曖昧な感じになりました。
広告や有料の宣伝用資料は、配信するページのコンテンツよりも多くなってはならないものとします。また、コンテンツは、ページを訪れるユーザーの関心に合った、価値ある情報を提供するものでなければなりません。
広告の配置に関するポリシー - AdSense ヘルプ より
記事の下に設置する場合
「デザイン > カスタマイズ > 記事 > 記事下」に貼り付ければOKです。
今のブログテーマは「Naked」というものを使用していて、AdSenseの調整についてはこちらにあります。
このあたりはテーマなどによって違うので、それぞれ調整してみて下さい。
記事の途中に設置する場合
よく見る記事中に設置してあるものについては、はてなブログの設定ではできません。
手作業で貼り付けるか、スクリプトを使うかです。
うちではこちらのスクリプトを参考に、最初の大見出しの前に入れています。
あと見た目的なところで、data-ad-formatをrectangleにしています。
特定のページのみAdSenseを外す
(2016/7/6追加)
ページによってはAdSenseなどを表示したくないものがあります。
そういうところのみ指定して除外するスクリプトを追加します。
追加するところは「 デザイン > カスタマイズ > 記事 > 記事上 」または「記事下」。
jqueryは他で読み込んでいれば必要ありません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script tpe="text/javascript">
$(function() {
var list = [
"2016/01/01/000000",
];
var url = window.location.href;
// 対象のクラスを非表示
for(var i=0; i < list.length; i++) {
if( url.indexOf(list[i]) != -1 ) {
$('#adsense1').css('display', 'none');
$('#adsense2').css('display', 'none');break;
}
}});
</script>
listの中には、除外する記事のURLの一部を書きます。この記事であれば「2016/01/12/015721」とすれば重複しないと思います。
それで、「$('#adsense1').css('display', 'none');」および「$('#adsense2').css('display', 'none');」で対象の要素を消しています。
消したいAdSenseタグを「<div id='adsense1'>」や「<span id='adsense1'>」などとして囲んで下さい。そのidの要素が非表示になります。
この行はそれぞれによって減らしたり増やしたり。クラスなどでも良かったのですがidで指定しているのはそのほうが負荷が低いからです。うちだと2つだけだったし。
ヨメレバ・カエレバを使用する
Amazonのリンクを貼り付けるときに、ハテナのブログパーツもいいですが、複数のショップのリンクを纏めることができる「ヨメレバ・カエレバ」も使用しています。
ブログの設定を変える
ブログ全体の設定を変えていきます。
Google Analyticsの設定
Google AnalyticsのIDを設定します。
「設定→詳細設定→解析ツール」に「Google Analytics 埋め込み」があるので、そこにIDを設定。
検索エンジン最適化
その下の「検索エンジン最適化」で、ブログの概要やキーワードも設定します。
AmazonアソシエイトIDの設定
「アカウント設定→基本設定」にある「AmazonアソシエイトID」に設定します。
これは ブログツールで「Amazon商品紹介」から商品を設定するときに、このIDで設定してくれるようになります。
この編集メニューと、Amazonのページから紹介用リンクを作成するのと何が違うかというと、はてブの編集メニュー経由だと「はてなキーワード」のページを経由するみたい。
これがプラスなのかマイナスなのかはまだわかりませんが…
Twitterとの連携設定
「アカウント設定→外部サービス連携」に「Twitter連携設定」があるので、そこで認証を行います。
これは記事を投稿／更新したときに出てくるツイートボタンで投稿されるようになります。
Wordpressのプラグインみたいに、記事を投稿したら自動的にツイートしてくれるような方法がないかと思ったのですが、見当たりませんでした…
外部サービスにはTwitter以外にもFacebookやmixiなどがあるので、このあたりは必要に応じてという感じですね。
だいたいこんな感じで設定してみました。
あとは運用してみつつ、ちまちま変更していく感じですかね。
その他
(2016/5/2追記) ページ表示の高速化に注意した
こちらの記事で書きましたが、ページの表示速度でいくつか注意をしてみました。(一部Pro向けも混ざってます)
ざっくりいうとヘッダの非表示、カテゴリのソートをカスタムにしない、ツイッターのタイムラインを非表示、はてなスターの非表示についてです。
はてなスターは結局つけたままにしました。
(2016/7/2追記) プライバシーポリシーを追加
今更感がありますが、プライバシーポリシーを追加しました。
テンプレートとしてはこちらのサイトを参考にさせていただきました。ありがとうございます。
(2016/4/9追記) Proにしてみました
Proにしてみたので、そこでやってみたことなどを書いてみました。
よければこちらもご参考までに。
(2016/6/18追記) テーマを変更してみました
テーマを「Naked」にしてみました。そのときのメモなどです。
