ブログカスタマイズが一段落しました
はてなブログを始めて20日、少しずつ重ねてきたデザインの改善が、一区切りつきました。自分のためのメモとしても、カスタマイズした内容についてすべて記しておきたいと思います。
もともとのテーマは、CatNoseさんが作成されたDUDEを使用させていただきました。
ソースコード掲載の都合上、一部の文字が右側に飛び出している部分があります。ソースコードをコピペされる場合は、そちらも含めてコピーアンドペーストしてくださいますようお願いします。(綺麗に表示するべくGistを利用しようとしたのですが、Chromeで表示されなかったため、ベタ打ちにしてあります。)
私がした20+3のカスタマイズ
1 DUDEの導入
<ダッシュボード→デザイン→デザインテーマ>
一番下の「テーマストアでテーマを探す」からDUDEを見つけて通常の手順で導入します。
2 javascriptをきちんと動かすためのコード
<ダッシュボード→設定→詳細設定→headに要素を追加>
ブログ内でjavascriptを正確に動かすために下記のコードを記入します。これがないと、javascriptが動かない場合があります。
---
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {
$(function() { ... });
})(jQuery);
</script>
---
3 外部リンクを別窓で開かせる
<ダッシュボード→設定→詳細設定→headに要素を追加>
下のコードを書くことで、amazonへのリンクなど、ブログの外部へのリンクを別窓で開くように設定します。
---
<script type="text/javascript">
$(function(){
$("a[href^=http]").not('[href*="'+location.hostname+'"]').attr({target:"_blank"});
});
</script>
---
4 Amazonに直接リンクさせる
<ダッシュボード→設定→詳細設定→headに要素を追加>
はてなブログの「Amazon商品紹介」機能をそのまま使うと、一度はてなブックマークのページを経由してしまいます。それを回避するため、リンク先を動的に書き換える次のコードを記入します。
---
<script type="text/javascript">
$(document).ready(function() {
$("a").each(function() {
var replace = null;
var replace = $(this).attr('href').replace(/d.hatena.ne.jp\/asin/g,'www.amazon.co.jp\/exec\/obidos\/ASIN');
$(this).attr('href',replace);
});
});
</script>
---
5 Google Adsense「ページ単位の広告」を導入
<ダッシュボード→設定→詳細設定→headに要素を追加>
最近サービスの始まったページ単位の広告を導入するために次のコードを記入します。google_ad_clientのところには、自分のアカウントを記入してください。
---
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || ).push({
google_ad_client: "ca-pub-0480400615575305",
enable_page_level_ads: true
});
</script>
---
6 背景画像を設定
<ダッシュボード→デザイン→カスタマイズ→背景画像>
左側上から14番目のグレーの画像を選択します。
7 ソーシャルパーツを設置
<ダッシュボード→デザイン→カスタマイズ→記事→ソーシャルパーツ>
・はてなブックマークボタン
・Facebookシェアボタン
・ツイートボタン
・Google+1ボタン
・LINEで送るボタン
・pocket追加ボタン
・はてなブックマークコメント
にチェックを入れます。
8 記事上に「読者になる」ボタンを設置
<ダッシュボード→デザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事上>
下記のコードを記入して、読者になるボタンを記事上に設置します。ブログのアドレス部分は、自分のアドレスを記入してください。
---
<iframe src="http://blog.hatena.ne.jp/soumushou/soumushou.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>
---
9 feedlyボタンの設置
<ダッシュボード→デザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事上>
各自、feedly buttonの公式サイト(http://feedly.com/factory.html)で作成した次のようなコードを記入して、feedlyのボタンを設置します。
---
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fsoumushou.hatenablog.com%2Ffeed%2F' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png' alt='follow us in feedly' width='66' height='20'></a>
---
10 記事直下にアドセンス広告を設置
<ダッシュボード→デザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事下>
記事直下にアドセンス記事を設置するために、下のコードを記入します。普通に「記事下」欄にアドセンスのコードを記入するだけでは、ソーシャルパーツの下に表示されてしまうので下のブログ記事を参考にさせていただきました。アドセンスのコードは、自分のものに置き換えてください。
---
<div id="my-footer">
<center>スポンサーリンク</center>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- はてな -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0480400615575305"
data-ad-slot="7680817905"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
---
(参考にさせて頂いたブログ記事)
11 パンくずリストの設置
<ダッシュボード→デザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事下>
SEO対策のためにも、次のコードを記入してパンくずリストを設置します。
---
<style>
div #breadcrumb div {
display: inline;
font-size: 14px;
}
</style>
<div id="breadcrumb"></div>
---
<ダッシュボード→デザイン→カスタマイズ→フッタ>
フッターにこちらを記入するのも忘れずに。
---
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
---
(参考にさせて頂いたブログ記事)
12 「あわせて読みたい」(関連記事)を設置
<ダッシュボード→デザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事下>
次のコードを記入し、記事の下に関連記事を設置します。「あわせて読みたいG」を使用させていただきました。
---
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>
<script type="text/javascript">
writeGatcha(3,'entryGatcha','category','あわせて読みたい' ,true);
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>
---
(参考にさせて頂いたブログ記事)
13 ソーシャルパーツの下にアドセンス広告を設置
<ダッシュボード→デザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事下>
普通にアドセンスを設置するだけです。
---
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- はてな3 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0480400615575305"
data-ad-slot="4939174304"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
---
14 DUDEの元々の部分はいじらない
<ダッシュボード→デザイン→カスタマイズ→デザインCSS>
これはカスタマイズではないですが、DUDEを導入した時にももともとCSSに記入されているこのコードはそのまま記入しておきます。
---
/* <system section="theme" selected="6653586347153366095"> */
@import url("http://hatenablog.com/theme/6653586347153366095.css");
/* </system> */
/* <system section="background" selected="bg11"> */
body{ background-color:#fff; background-image:url('/images/theme/backgrounds/theme11.png'); background-repeat:repeat; background-attachment:scroll; }
/* </system> */
---
15 フォントを設定
<ダッシュボード→デザイン→カスタマイズ→デザインCSS>
DUDEの元々のフォントは線が細く、画面によっては見づらいため、フォントファミリーを次のように設定します。
---
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);
body{
font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "游ゴシック" , "Yu Gothic" , "游ゴシック体", "MS Pゴシック" , "MS PGothic" , sans-serif;
}
---
16 記事下のidを非表示
<ダッシュボード→デザイン→カスタマイズ→デザインCSS>
次のコードを記入して、記事下に表示されるidを非表示にします。
---
span.author.vcard{
display:none;
}
---
17 記事下の投稿日時を非表示
<ダッシュボード→デザイン→カスタマイズ→デザインCSS>
次のコードを記入して、記事下に表示されるidを非表示にします。
---
span.entry-footer-time {
display: none;
}
---
18 サイドバーに設置したモジュールの間隔を調整
<ダッシュボード→デザイン→カスタマイズ→デザインCSS>
DUDEの元々のデザインでは、サイドバーのモジュール間の間隔が開きすぎているように思ったので、次のコードを記入して狭くします。
---
.hatena-module {
margin-bottom:20px;
}
---
19 記事とサイドバーとの間に線を引く
<ダッシュボード→デザイン→カスタマイズ→デザインCSS>
DUDEの元々のデザインだと、記事が狭い上にサイドバーとの距離が近いため、間に線を引くことで読みやすくします。モジュールタイトルを左側にずらすことでモジュールタイトル左側の四角とラインを重ねています。
---
#box2 {
border-left: 2px rgb(32, 32, 53) solid;
padding-left: 10px;
}
.hatena-module-title {
margin-left: -16px;
}
---
20 レスポンシブデザインに対応させる
<ダッシュボード→デザイン→カスタマイズ→デザインCSS>
スマホにそのままのデザインで対応させるため、下のブログ記事を参考に次のコードを記入します。サイドバーも適切に表示されるよう、元々のコードから少し修正しています。
---
/* Responsive: yes */
@media (max-width: 767px) {
/* グローバルヘッダとの隙間をなくす */
#container {
padding-top: 0;
}
/* 左右のマージンを相対指定に */
#content {
margin-left: 3.125% !important;
margin-right: 3.125% !important;
}
/* 横幅の調整 */
#container #content {
width: auto;
}
#blog-title-content {
width: auto;
text-align: center; /* ブログタイトルを中央揃えに */
}
#box2 {
width: auto;
}
}
---
(参考にさせて頂いたブログ記事)
<ダッシュボード→デザイン→カスタマイズ→スマートフォン→詳細設定>
「レスポンシブデザイン」にチェックを入れるのも忘れずに。
注意:はてなブログPROに契約していない場合は、レスポンシブデザインを使うためにはアドセンス広告を撤去する必要があります。
以下、はてなブログPROを利用されている方のみ
21 キーワードリンクを付与しない
<ダッシュボード→設定→詳細設定→キーワードリンク>
「記事にキーワードリンクを付与しない 」にチェックを入れます。
22 はてなによる広告を非表示
<ダッシュボード→設定→詳細設定→広告を非表示>
「はてなによる広告を表示しない」にチェックを入れます。これにより3つ目のアドセンス広告を設置できるようになります。
23 はてなによるヘッダとフッタを非表示
<ダッシュボード→設定→詳細設定→ヘッダとフッタ>
「ブログにヘッダとフッタを表示しない(PC版のみ)」にチェックを入れます。
<ダッシュボード→デザイン→カスタマイズ→デザインCSS>
DUDEでヘッダとフッタを非表示にすると、一番下に空白が生じてしまいます。これを解消するために、CSSに次のコードを記入します。
---
#container {
margin-bottom: 0px;
}
---
私のカスタマイズは以上になります
最後までお読みいただきありがとうございました。
DUDEという他人の褌を借りながらではありますが、お役に立てていただければ幸いです。DUDE以外のデザインで使える部分も多いと思います。
わからないことがあればお気軽に質問してください。