はてなブログを始めたら、記事を書く前にまずは設定すること一覧

はてなブログで新しいブログを作った際に、私が設定していることをまとめます。

テーマはDUDEを使用したとして書きます。

(※このブログはレスポンシブなテーマを使っているので下記カスタマイズはしていません。)

基本設定

設定、詳細設定でまずは変更すること。

• 「すべて表示しない -すべての記事のすべてのコメントを表示しない」にチェック
• 「記事にキーワードリンクを付与しない」にチェック
• 「はてなによる広告を表示しない」にチェック
• 「ブログにヘッダとフッタを表示しない（PC版のみ）」にチェック
• GoogleAnalyticsの設定
• Googleサーチコンソールの設定（サイトマップはブログURLの後に「sitemap.xml」とRSS「feed」を追加）
• 検索エンジン最適化-ブログの概要（meta description）とブログのキーワード（meta keywords）を設定

フォントを見やすく変更

テーマDUDEに設定されているフォントは細くて読みづらいので、変更します。

body {
  background-color:#fff;
  color:#333;
  font-size: 16px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
  line-height:1.5;
}

サイドバーのコンテンツ感覚を調整

.hatena-module {
margin-bottom:25px;

外部リンクを別窓で表示させる

設定→詳細設定→headに記載

<script type="text/javascript">
$(function(){
$("a[href^=http]").not('[href*="'+location.hostname+'"]').attr({target:"_blank"});
});
</script>

Amazonリンクの修正

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>

関連記事（あわせて読みたい）の表示設定

記事下に記載

<!-- 解説はこちら http://bulldra.hatenablog.com/entry/read-together-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>

参照：はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 - 太陽がまぶしかったから

パンくずリストの表示設定

フッタに記載

<style>
div #breadcrumb div {
display: inline;
font-size: 13px;
}
</style>
<div id="breadcrumb"></div>

参照：はてなブログでGoogleにパンくずリストを認識させるカスタマイズ - 太陽がまぶしかったから

記事下のAdSenseを記事直下のSNSシェアボタンの上に設置

• デザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事下に記載

<div id="my-footer">
<center>スポンサーリンク</center>
<!-- この下の空白部分に自分のAdSenseコードを設置（336×280など） -->

<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

記事中で真ん中あたりの大見出し直前にAdSenseを自動挿入

• デザイン→カスタマイズ→記事→記事上下のカスタマイズ→記事下に記載

<script>
var adsenseCode = (function () {/*

<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content > p + h3,h4,h5');
    $target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense'));

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>

参照：はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ

→参照：【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ

以前紹介していたコードの改良版があると作者の方から連絡をいただいたのでコードを変更しました。

スマホ表示でトップバナーを追従型に

元記事は下記ですが、記事が無くなっているのでコードを記載。（記述は掲載当時のまま）

http://www.sho-yamane.me/entry/2015/06/21/135754

デザイン設定→スマホ→ヘッダー→タイトル下に貼り付ける。 （「スマートフォン用にHTMLを設定する」にチェックを入れるのを忘れずに）

<style>

/*ヘッダーがふんわり表示されるようにするコード*/

#header,.sp-menu {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/*ここまで*/

/*はてなブログのロゴなどを非表示*/

#globalheader-container {
  display: none;
}

/*ここまで*/

/*はてなブログのロゴを非表示したので位置調整*/

#container {
  padding-top: 0px;
  position:relative;
}

/*ここまで*/

/*新しくヘッダーとなる部分*/

#header {
  text-align: center;
  margin: 0px auto;
  width: 100%%;
  border-bottom: 1px solid #eaeaea;
  padding: 12px 0 12px;
  position: fixed !important; /*追尾にする*/
  top: 0;
  background: rgba(255,255,255,0.8); /*ヘッダーメニューの色*/
  z-index: 9999;
}

/*ヘッダーのブログタイトルの文字を変更（すきな書式に変更して下さい）*/

#header #title {
  font-size: 18px;
}

#header #title a {
    font-family: sans-serif;
}

/*ここまで*/

/*ブログの説明文字は非表示に*/

#header #blog-description {
  display: none;
}

/*ここまで*/

/*ブログのアイコンは非表示に*/

#header .header-blog-icon {
  display: none;
}

/*ここまで*/

/*ヘッダーを追尾にするので本文の位置調整*/

.entry-list {
  margin-bottom: 1em;
  margin-top: 33px;
}

.entry {
  margin-top: 40px;
}

/*ここまで*/

/*ハンバーガーメニューボタンの設定*/

.sp-menu {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10000;
}

.sp-menu .fa-bars {
  cursor: pointer;
  display: inline-block;
}

.sp-menu .fa-bars:before {
  content: "\f0c9";
  font-size: 28px;
  color: #333;
}

/*ここまで*/


/*ハンバーガーメニューボタンを押すと表示されるメニュー内容の設定*/

/*表示されるメニュー全体の設定*/
#gNav {
  width: 100%;
  position: fixed;
  top: -210px; /*この部分はメニューの内容によって左右されますので適宜調整して下さい*/
  z-index: 10001;
  transition: top 1s;
  -webkit-transition: top 1s;
  -moz-transition: top 1s;
  text-align: center;
  left: 0;
}

#gNav:target {
  top: 0px;
}

/*メニューリンク*/

#gNav ul {
  background: rgba(242,115,152,0.8); /*ピンクの背景色（適宜変更して下さい）*/
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
  zoom: 1;
  overflow: hidden;
  line-height: 1.6;
}

#gNav ul a {
  color: #fff;
}

#gNav ul li {
  padding: 15px 0px 15px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  width: 50%;
  float: left;
  margin: 0 0 0 -1px;
  border-top: #ddd 1px solid;
  border-left: #ddd 1px solid;
}

#gNav ul li  span{
  display: block;
}

/*CLOSEボタン*/

#gNav .nav-close {
  font-size: 85%;
  font-weight: bold;
  text-align: center;
  padding: 15px 0px 15px;
  background: rgba(0,0,0,0.8);  
}

#gNav a.nav-close-link {
  color: #fff;
}

/*プロフィール部分*/
.nav-profile {
  background: rgba(255,255,255,0.8); /*白の背景色（適宜変更して下さい）*/
  color: #333;
  padding: 15px 10px 13px;
  font-size: 90%;
  line-height: 1.4;
}

.nav-profile span.sig {
  display: block;
  font-size: 12px;
}

.nav-profile span.sig a {
  color: #F27398;
}

/*ここまで*/

</style>

<!--font awesome読み込み-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<!--メニュー-->
<div class="sp-menu">
<a href="#gNav"><i class="fa fa-bars" style="font-size:16px;"></i></a>
</div>

<!--メニュー中身-->
<!--私のブログへのリンクがついていますが任意ですので嫌であれば削除して下さい。もちろんつけてくれていたほうが喜びます^^nofollowははずさないで下さい。-->
<nav id="gNav">
<div class="nav-profile">ここにメッセージを入力。<span class="sig">Designed by <a href="http://www.sho-yamane.me" rel="nofollow">Sho Yamane</span></div>
<ul>
<a href="#"><li><span>ABOUT</span></li></a>
<a href="#"><li><span>ARCHIVE</span></li></a>
</ul>
<a href="#page" class="nav-close-link"><div class="nav-close"><i class="fa fa-times"></i> CLOSE</div></a>
</nav>

はてならしさを排除

• 記事下のID非表示

/*記事作成者IDと経過時間の非表示*/
       entry-footer-section { 
       display: none; 
       } 

• スマホのプロフィール非表示 タイトル下に記載

.hatena-module.profile {
display: none;
}

• スマホ下部の各種リンク非表示

.footer-action-wrapper{display:none;}
.touch-item-list{display:none;}
.footer {display: none;} 
#footer-menu {display: none;}