そういうのがいいブログ

某SIerで働く30代サラリーマンSEが、WEBエンジニアに憧れてプログラミング勉強をするブログ

【はてなブログ】カスタマイズまとめ(CSS・アドセンスAdSense審査)

はてなブログ】カスタマイズ方法まとめ(CSSの変更からアドセンスAdSense審査のコツまで)

はてなブログ」のカスタマイズ方法を探している方へ。

当ブログで実施している、はてなブログのカスタマイズ方法を紹介します

本記事では、下記の内容を解説します。

  1. はてなブログCSSカスタマイズまとめ
  2. ブログ作成で役立つ画像サイトなど
  3. はてなブログ無料版でのAdSenseアドセンス
  4. SEOのための検索順位チェック方法

後半では、はてなブログでのアドセンスのやり方、検索順位チェックのやり方も紹介します

この記事を書いている私は、某SIerに勤務しながら、
WEB系エンジニア・インフラエンジニアに憧れて、プログラミングおよびインフラ技術の勉強をしています。
私が実機で試したコマンドや画像を載せて書いています。
記事の信頼性担保に繋がると思います。

はてなブログCSSカスタマイズまとめ

更新日を表示するカスタマイズ法(Minimalism対応)

SEO対策のために、ブログの投稿日の隣に、更新日を表示させるカスタマイズ方法の紹介です。

souiunogaii.hatenablog.com

記事の投稿日のアイコンをカスタマイズするCSS(Minimalism対応)

記事のエントリー日の日付表示の隣にあるアイコンを、
Minimalismテーマのデフォルト(カレンダーマーク)から、
時計マークに変更したときのカスタマイズ方法のメモです。

souiunogaii.hatenablog.com

トップページを記事一覧表示にする方法(無料版に対応)

はてなブログでは、PRO版では、設定>トップページの表示形式(PC版)PRO で、
・全文形式
・一覧形式
のどちらかを選べます。
無料版でもできる方法がないかと探したら、見つかったのでその方法を紹介します。

souiunogaii.hatenablog.com

タイトルの下にナビゲーションメニューを設置(Minimalism対応)

はてなブログのタイトル下に、
ナビゲーションメニューを設置するカスタマイズ方法を紹介します。
テーマ「Minimalism」に対応しています。
スマホ表示では、横にスライドします。

souiunogaii.hatenablog.com

スーパーpre記法でスクロールバー(縦横)を表示させる手順

はてなブログスーパーpre記法で、コマンド実行結果やソースコードを記載するときに、
行数が長い場合に、縦にダラダラと長くなってしまうので、
ある程度の行数を指定して、縦スクロールバーが表示されるようにするCSSのメモを紹介します。

souiunogaii.hatenablog.com

スーパーpre記法で背景色・文字色(シンタックスハイライト)を変える手順

はてなブログスーパーpre記法で、
背景色・文字色とシンタックスハイライトの色を変えたいときのCSSを紹介します。

souiunogaii.hatenablog.com

コード部分に行番号を表示するカスタマイズ

はてなブログで、スーパーpre記法でコードを表示するときに、
左側に行番号を表示させるカスタマイズ方法のメモです。

あと、左上にコード種類名も表示させます。

souiunogaii.hatenablog.com

似顔絵アイコン吹き出しセリフ形式ブロックを表示するCSS【似顔絵作成サイトも紹介】

はてなブログのカスタマイズで、似顔絵アイコン画像から、吹き出しの形でセリフ形式のブロックを作って、
その中に文章を表示させるためのカスタマイズCSSを紹介します。

記事の後半では、このブログでも使用したおススメの似顔絵アイコン画像作成が無料でできるサイトも紹介します。

souiunogaii.hatenablog.com

<strong>強調タグで文字列に蛍光ペン風マーカーをつけるCSS

強調したい文字列に<strong>タグを使いますが、単なる太字にするだけでなく、
蛍光マーカーペン風のラインを文字列に表示させるのが、最近のブログの流行りみたいなので、 やってみました。

souiunogaii.hatenablog.com

<blockquote>引用タグのデザインをカスタマイズするCSS

引用タグ<blockquote>で囲んだ部分のデザインをカスタマイズしたCSSのメモです。
Awesome フォントを使う方法も簡単に紹介します。

souiunogaii.hatenablog.com

<ul><ol>箇条書きリストをカスタマイズするCSS

箇条書きリストul liol li のデザインをカスタマイズするCSSのメモです。

souiunogaii.hatenablog.com

目次もくじのデザインをカスタマイズするCSS

はてなブログの「目次(もくじ)」のデザインを少しカスタマイズしたので、 そのときのCSSのメモです。

souiunogaii.hatenablog.com

ブログ作成で役立つ画像サイトなど

ブログ作成時に役立つサイトまとめ

はてなブログ(画像加工やCSSによるカスタマイズ)で使える役立ちサイトをまとめました。

souiunogaii.hatenablog.com

はてなブログ無料版でのAdSenseアドセンス

はてなブログ無料版でAdSenseアドセンス審査に通った件(記事数・準備したこと)

はてなブログの無料版でも、AdSenseアドセンスの審査に通ることができたので、
そのときに準備したことと、記事数、一度審査に不合格になった後に合格するためにやった手順を紹介します。

souiunogaii.hatenablog.com

SEOのための検索順位チェック方法

無料の検索順位チェックツールSERPOSCOPE(Windows版)インストール手順

検索順位チェックツール『SERPOSCOPE』Windows版のインストール手順を紹介します

souiunogaii.hatenablog.com