HBK

はてなブログのカスタマイズにハマりいろいろまとめています!

はてなブログを作ったらやる事&カスタマイズ!今回使ったテーマは『Spirea』!


スポンサーリンク

 

はてなブログの設定&カスタマイズ!

 

 

はてなブログを作ったらまず何をやるかまとめてみたよ!

はてなブログproにして何個もブログ作ってたら

毎回個別でカスタマイズについて調べるのが大変だったんだ!

何個もサイトを作るならマニュアル化しちゃおうと思った!

そのほうが迷わず行動できるもんね!

 

 

設定とカスタマイズに分けてまとめてみたよ!

はてなブログ始めたばかりの人は良かったら参考にしてみてね!

 

 

 

 

 

 

今回使ったテーマは『Spirea』。

 

 

テーマのダウンロードはこちら

Spirea - テーマ ストア

 

 

テーマ『Spirea』の作者さんのサイトはこちら

www.ituore.com

 

 

はてなブログ設定

 

 

基本設定

 

「設定-基本設定」

で変更できるよ!

 

  1. ブログ名 
  2. ブログの説明
  3. コメント設定
  4. コメント承認

 

 

詳細設定

 

「設定-詳細設定」

で変更できるよ!

 

  1. トップページの記事数(PC版)
  2. はてなブログpro キーワードリンク
  3. はてなブログpro 広告を非表示
  4. はてなブログpro ヘッダとフッタ
  5. Google Analytics 埋め込み
  6. ブログの概要(meta description)
  7. ブログのキーワード(meta keywords)
  8. headに要素を追加

 

 

Googleアナリティクス設置

 

 

 参考にさせてもらったサイト

はてなブログにGoogleアナリティクスを設定する手順【2017最新版】

 

 

Googleアドセンスの設置

 

 

Googleアドセンス記事上

 

入力する場所

「はてなブログ-デザイン-カスタマイズ-記事-記事上」

 

 

 

Googleアドセンス記事下2つ並べる

 

入力する場所

「はてなブログ-デザイン-カスタマイズ-記事-記事下」

 

 

 

Googleアドセンスサイドバー

 

入力する場所

「はてなブログ-デザイン-カスタマイズ-サイドバー-モジュール追加-HTML」

 

 

上の段にスポンサーリンク。

下の大きい枠にGoogleアドセンスコード。

 

 

トップページを記事一覧に飛ばす

 

 

「設定-詳細設定-検索エンジン最適化-headに要素を追加」に入力する!

 

 

 

 

サイドバー整理

 

 

「デザイン-カスタマイズ-サイドバー」

 

 

削除する項目

 

  • リンク

 

追加する項目

 

  • 注目記事 
  • カテゴリー
  • HTML

 

 

HTML

 

  • Googleアドセンス

 

カテゴリー編集

 

  • アルファベット順

 

プロフィール編集

 

  • プロフィール画像 非表示
  • はてなID 非表示

 

 

はてなブログカスタマイズ

 

 

ここからはカスタマイズの紹介をしていくよ!

基本的に「デザイン-カスタマイズ-CSS」にコピペしてカスタマイズできるよ!

あとは好きな色でカスタマイズしてみてね!

 

 

/* 文字色 */」「<!-- ここに入力 -->」このマークは削除して大丈夫だよ!

カスタマイズしやすいようにメモと、

あとでカスタマイズの変更するときにわかりやすいようにしているんだ!

入力するときに邪魔な場合は削除してね!

 

 

見出し変更

 

 

h3見出し

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

h4見出し

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

h5見出し

 

コピペする場所

「設定-詳細設定-headに要素を追加」

 

 

 

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

参考にさせてもらったサイト

【保存版】Font Awesomeの使い方まとめ:Webアイコンフォントを使おう

 

 

タイトル文字

 

フォント
サイズ
太さ

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

タイトル背景色変更

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

ヘッダー

 

 

高さ変更

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

グローバルメニュー&トグルメニュー

 

 

 グローバルメニュー
トグルメニュー

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

 

コピペする場所

「デザイン-カスタマイズ-ヘッダ-タイトル下」

 

 

 

 

 

グローバルメニューの上にボーダーライン

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

グローバルメニューの下にボーダーライン

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

カテゴリー

 

 

カテゴリーをタグにする
カテゴリーを枠で囲む

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

記事一覧のSNSボタン非表示

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

記事タイトルを枠で囲む

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

記事タイトルを枠で囲むについての記事

blogkasutamaizu.hatenablog.com

 

記事一覧のカテゴリーCSS

 

 

色変更
フォバー時の色変更

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

記事本文のカテゴリーCSS

 

 

色変更
フォバー時の色変更

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

サイドバータイトル

 

背景
文字サイズ
太さ
フォント
文字色

 

 

追加したカテゴリーの色が変更できなかったので

CSSを追加したよー!

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 

サイドバー1番下固定

 

 

コピペする場所

「デザイン-カスタマイズ-フッタ」

 

 

 

日付カスタマイズ

 

 

文字色
文字サイズ
背景色
文字太さ
日付を枠で囲む

 

 

好きな色をコピペして使ってね!

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

記事下のIDと投稿日を非表示

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

参考にさせてもらったサイト

はてなブログで記事下のIDと「何時間前」「何日前」の日付を消す方法 - 子持ち共働き夫婦の家計日記

 

フォント変更

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

 ヨメレバとカエレバのレスポンシブのCSS

 

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

参考にさせてもらったサイト

ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! - Yukihy Life

 

まとめ

 

今回ははてなブログを作ったらやることと

はてなブログのカスタマイズを紹介したよ!

 

設定もカスタマイズも自分らしいサイトになるように好きなところだけカスタマイズしてみてね!

 

見やすいかどうかチェックするのも忘れずにね!