【はてなブログ】カスタマイズ方法まとめ（CSSの変更からアドセンスAdSense審査のコツまで）
「はてなブログ」のカスタマイズ方法を探している方へ。
当ブログで実施している、はてなブログのカスタマイズ方法を紹介します
本記事では、下記の内容を解説します。
後半では、はてなブログでのアドセンスのやり方、検索順位チェックのやり方も紹介します
この記事を書いている私は、某SIerに勤務しながら、
WEB系エンジニア・インフラエンジニアに憧れて、プログラミングおよびインフラ技術の勉強をしています。
私が実機で試したコマンドや画像を載せて書いています。
記事の信頼性担保に繋がると思います。
- 【はてなブログ】カスタマイズ方法まとめ（CSSの変更からアドセンスAdSense審査のコツまで）
- はてなブログのCSSカスタマイズまとめ
- 更新日を表示するカスタマイズ法(Minimalism対応)
- 記事の投稿日のアイコンをカスタマイズするCSS(Minimalism対応)
- トップページを記事一覧表示にする方法（無料版に対応）
- タイトルの下にナビゲーションメニューを設置(Minimalism対応)
- スーパーpre記法でスクロールバー（縦横）を表示させる手順
- スーパーpre記法で背景色・文字色（シンタックスハイライト）を変える手順
- コード部分に行番号を表示するカスタマイズ
- 似顔絵アイコン吹き出しセリフ形式ブロックを表示するCSS【似顔絵作成サイトも紹介】
- <strong>強調タグで文字列に蛍光ペン風マーカーをつけるCSS
- <blockquote>引用タグのデザインをカスタマイズするCSS
- <ul><ol>箇条書きリストをカスタマイズするCSS
- 目次もくじのデザインをカスタマイズするCSS
- ブログ作成で役立つ画像サイトなど
- はてなブログ無料版でのAdSenseアドセンス
- SEOのための検索順位チェック方法
はてなブログのCSSカスタマイズまとめ
更新日を表示するカスタマイズ法(Minimalism対応)
SEO対策のために、ブログの投稿日の隣に、更新日を表示させるカスタマイズ方法の紹介です。
記事の投稿日のアイコンをカスタマイズするCSS(Minimalism対応)
記事のエントリー日の日付表示の隣にあるアイコンを、
Minimalismテーマのデフォルト（カレンダーマーク）から、
時計マークに変更したときのカスタマイズ方法のメモです。
トップページを記事一覧表示にする方法（無料版に対応）
はてなブログでは、PRO版では、設定＞トップページの表示形式（PC版）PRO で、
・全文形式
・一覧形式
のどちらかを選べます。
無料版でもできる方法がないかと探したら、見つかったのでその方法を紹介します。
タイトルの下にナビゲーションメニューを設置(Minimalism対応)
はてなブログのタイトル下に、
ナビゲーションメニューを設置するカスタマイズ方法を紹介します。
テーマ「Minimalism」に対応しています。
スマホ表示では、横にスライドします。
スーパーpre記法でスクロールバー（縦横）を表示させる手順
はてなブログのスーパーpre記法で、コマンド実行結果やソースコードを記載するときに、
行数が長い場合に、縦にダラダラと長くなってしまうので、
ある程度の行数を指定して、縦スクロールバーが表示されるようにするCSSのメモを紹介します。
スーパーpre記法で背景色・文字色（シンタックスハイライト）を変える手順
はてなブログのスーパーpre記法で、
背景色・文字色とシンタックスハイライトの色を変えたいときのCSSを紹介します。
コード部分に行番号を表示するカスタマイズ
はてなブログで、スーパーpre記法でコードを表示するときに、
左側に行番号を表示させるカスタマイズ方法のメモです。
あと、左上にコード種類名も表示させます。
似顔絵アイコン吹き出しセリフ形式ブロックを表示するCSS【似顔絵作成サイトも紹介】
はてなブログのカスタマイズで、似顔絵アイコン画像から、吹き出しの形でセリフ形式のブロックを作って、
その中に文章を表示させるためのカスタマイズCSSを紹介します。
記事の後半では、このブログでも使用したおススメの似顔絵アイコン画像作成が無料でできるサイトも紹介します。
<strong>強調タグで文字列に蛍光ペン風マーカーをつけるCSS
強調したい文字列に<strong>タグを使いますが、単なる太字にするだけでなく、
蛍光マーカーペン風のラインを文字列に表示させるのが、最近のブログの流行りみたいなので、 やってみました。
<blockquote>引用タグのデザインをカスタマイズするCSS
引用タグ<blockquote>で囲んだ部分のデザインをカスタマイズしたCSSのメモです。
Awesome フォントを使う方法も簡単に紹介します。
<ul><ol>箇条書きリストをカスタマイズするCSS
箇条書きリストul liやol li のデザインをカスタマイズするCSSのメモです。
目次もくじのデザインをカスタマイズするCSS
はてなブログの「目次（もくじ）」のデザインを少しカスタマイズしたので、 そのときのCSSのメモです。
ブログ作成で役立つ画像サイトなど
ブログ作成時に役立つサイトまとめ
はてなブログ（画像加工やCSSによるカスタマイズ）で使える役立ちサイトをまとめました。
はてなブログ無料版でのAdSenseアドセンス
はてなブログ無料版でAdSenseアドセンス審査に通った件（記事数・準備したこと）
はてなブログの無料版でも、AdSenseアドセンスの審査に通ることができたので、
そのときに準備したことと、記事数、一度審査に不合格になった後に合格するためにやった手順を紹介します。
SEOのための検索順位チェック方法
無料の検索順位チェックツールSERPOSCOPE(Windows版)インストール手順
検索順位チェックツール『SERPOSCOPE』Windows版のインストール手順を紹介します
