はてなブログの初期設定

はてなブログデビューしたがまだ分からないことが多いので設定や作業した都度、忘れないように備忘録として記録していきたいと思います。

先ず、基本のブログ設定の初期から確認してゆきます。

１・はてなグループに新規登録

IDとパスワードを決めて入力

メールアドレス入力

画像入力

２・はてなブログの初期設定

 設定

1. 設定画面
2. ブログURL
3. ブログ名
4. ブログアイコン
5. 説明

デザイン

テーマ

新規で下記のテーマをインストール

公開テーマの欄で新規インストール選び、テーマストアで探す

Minimalism

カスタマイズ

ヘッダー

パン屑リストをチェック

サイドバー

プロフィール入力　IDはチェックを外す

他の項目はモジュール追加で選択(内容もチェック）

上下の順番を移動など

フッター

はてなブログは規定で、大見出しがh3になっているのでh3をh2へ変更するもの

 大見出しh2 中見出しh3 小見出しh4 になる

 ※目次のリンクが切れてしまうので一旦停止

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('h3').replaceWith(function() {
$(this).replaceWith('<h2>'+$(this).text()+'</h2>')
});

$('h4').replaceWith(function() {
$(this).replaceWith('<h3>'+$(this).text()+'</h3>')
});

$('h5').replaceWith(function() {
$(this).replaceWith('<h4>'+$(this).text()+'</h4>')
});

});
// ]]></script>

デザインCSS

見出しのデザインを変更させる

参考

www.notitle-weblog.com

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}

.entry-content h4{
padding: 2px 8px;
border: 0;
border-left: 5px solid black;
border-bottom: 1px solid black;
}

.entry-content h5{
padding: 2px 8px;
border: 0;
border-bottom: 1px solid black;
}

記事下のID時間の非表示

 /*記事下のIDと時刻非表示*/

span.author.vcard{
display:none;
}
span.entry-footer-time {
display: none;
}
/*記事下のIDと時刻非表示*/ 

スマートホン

項目一番下のレスポンシブデザインにチェックを入れる

これでPC画面と同じ仕様、表示になる。

カテゴリーは記事を書いたら設定できるようになる。