はてなブログを開設して設定したことを忘れないようにメモりました
【はじめてサイトに来た人はこちら】←ブログ運営のいろはをまとめたページです。
ブログの記事の作成やカスタマイズに慣れてくると、導入した設定項目も増えて、どのコードが、どのカスタマイズか分からなくなります。
そこで、本ブログのカスタマイズ記録としてこのページを作成し整理してみました。
この記事は基本的に、はてなブログPROユーザー向けとなっています。
1.はてなブログPRO開設してから最初に行ったこと
①はてなブログで使用する独自ドメインを取得する
②取得した独自ドメインをはてなブログで使用する設定を行う
③トップページの表示形式（PC版）を「一覧形式」にする
はてなブログトップページの表示形式は、「全文形式」と「一覧形式」があり、「一覧形式」にすると記事がコンパクトに表示されるので個人的には「一覧形式」がお気に入りです。
④記事にキーワードリンクを付与しない設定にする
キーワードリンクとはこんな感じに、はてなキーワードに登録されている言葉に自動機にリンクされているリンクです。はっきり言って目障りなので私はキーワードリンクを付与しない設定にしています。
⑤「はてな」による広告を表示しない設定にする
はてなPROに変更しても自動的に「はてな」による広告は消えないので設定しましょう。
⑥「はてな」のヘッダとフッタを表示しない設定にする
ブログの一番上にあるやつです。不要なら表示しない設定にしましょう。
⑦ブログをAMP対応設定にする
AMP対応とは、簡単に言うと、ウェブページをモバイル端末で高速に表示させることに対応させるということです。ページの読み込み速度が上がれば読者のメリットにもなるのでAMP対応の設定で問題ありません。
2.はてなブログカスタマイズ編
①はてなブログにデザインテーマをインストールする
まず、使用するテーマは、ID「shiromatakumi」さんが作成したテーマ「Brooklyn」をインストールします。私のブログでも「Brooklyn」を使用しています。
上記にアクセスして、右側にある「プレビューしてインストール」を選択して下さい。
②デザインテーマ「Brooklyn」にグローバルメニューを導入する
グローバルメニューとは、タイトル下に表示されるメニューのことです。はてな一般ユーザー用と、はてなPROユーザー用の2つあります。はてなPROユーザー用は、ページを下にスクロールするとグローバルメニューも上部に固定されます。
はてなPROユーザー用は、はてな一般ユーザーが使用するのは禁止です。
はてな一般ユーザーは、はてなブログの標準ヘッダーを隠す機能が使用できない為、はてな一般ユーザーが使用すると、はてなブログの利用規約違反になる為です。無断で利用してブログが消えても文句は言えなくなります。
グローバルメニューの設置コード（はてなPROユーザー用）
<div id="trigger-point">
</div>
<div id="global-menu">
<div id="mobile-head">
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<ul class="global-menu-list">
<li><a href="リンク先のアドレス">メニュー1</a></li>
<li><a href="リンク先のアドレス">メニュー2</a></li>
<li><a href="リンク先のアドレス">メニュー3</a></li>
<li><a href="リンク先のアドレス">メニュー4</a></li>
<li><a href="リンク先のアドレス">メニュー5</a></li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
var $nav = $('#global-menu');
var $content = $('#content');
var $offsetTop = $('#trigger-point').offset().top;
function fixedNav() {
if($(window).scrollTop() > $offsetTop){
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
};
$(window).scroll(fixedNav);
$('body').on('touchmove', fixedNav);
$('#nav-toggle').click(function (){
$nav.toggleClass('open');
});
$('#content').click(function (){
if($nav.hasClass('open')){
$nav.removeClass('open');
}
})
});
</script>
このコードをダッシュボードの「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にコピーペーストして下さい。
その後、「リンク先のアドレス」と「メニュー1」を自由に変更して下さい。
上記のコードは、はてな一般ユーザーが使用するのは禁止です。
グローバルメニューの設置コード（一般ユーザー用）
<div id="global-menu">
<ul class="global-menu-list">
<li><a href="リンク先のアドレス">メニュー1</a></li>
<li><a href="リンク先のアドレス">メニュー2</a></li>
<li><a href="リンク先のアドレス">メニュー3</a></li>
<li><a href="リンク先のアドレス">メニュー4</a></li>
<li><a href="リンク先のアドレス">メニュー5</a></li>
</ul>
</div>
このコードをダッシュボードの「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にコピーペーストして下さい。
その後、「リンク先のアドレス」と「メニュー1」を自由に変更して下さい。
