はてなブログの初期設定
はてなブログデビューしたがまだ分からないことが多いので設定や作業した都度、忘れないように備忘録として記録していきたいと思います。
先ず、基本のブログ設定の初期から確認してゆきます。
1・はてなグループに新規登録
IDとパスワードを決めて入力
メールアドレス入力
画像入力
2・はてなブログの初期設定
設定
- 設定画面
- ブログURL
- ブログ名
- ブログアイコン
- 説明
デザイン
テーマ
新規で下記のテーマをインストール
公開テーマの欄で新規インストール選び、テーマストアで探す
カスタマイズ
ヘッダー
パン屑リストをチェック
サイドバー
プロフィール入力 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
見出しのデザインを変更させる
参考
.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画面と同じ仕様、表示になる。
カテゴリーは記事を書いたら設定できるようになる。