Bloggerに関するカスタマイズ・テンプレート・TIPSを紹介しています。

2026/02/24

BloggerではじめるGoogleアドセンス 準備から申請まで

event_note editBy まつゆう forumNo comments

1. Googleアドセンスとは?

Google AdSense(アドセンス)は、ブログやウェブサイトに広告を掲載して収益を得る仕組みです。サイト運営者は、自分のサイトに広告を表示し、ユーザーがクリックすることで報酬を受け取ることができます。

Bloggerで脚注を付ける

event_note editBy まつゆう forumNo comments

1. このCSSでできること

  • ナビに被らない着地: 固定ナビゲーションがあるブログでも、注釈リンクがヘッダーの下に隠れず、絶妙な位置で止まります。

BloggerでGoogleフォントを使用するためのガイド

event_note editBy まつゆう forumNo comments

 

1. はじめに

ウェブサイトを運営していると、「もう少しデザイン性を上げたい」「読みやすいフォントに変えたい」と思うことはありませんか?

Bloggerにスプレッドシート+GAS+JavaScriptで「いいね」ボタンを実装する

event_note editBy まつゆう forumNo comments

 

1. はじめに:ブログに「いいねボタン」を設置する魅力

読者が記事を読んで「面白い」「共感した」と思った瞬間、ワンクリックで反応できるボタンがあるとブログの魅力はぐっと高まります。

Bloggerに「この記事は◯分で読めます」と自動表示させる

event_note editBy まつゆう forumNo comments

この記事は何分で読める?読了時間表示スクリプトの紹介

ブログ記事やウェブサイトに「この記事は約○分で読めます」と表示するJavaScriptスクリプトです。読者が記事の長さを事前に把握できるため、読むかどうかの判断がしやすくなります。

BloggerでFont Awesomeを使う方法

event_note editBy まつゆう forumNo comments

1. Font Awesomeとは

Font Awesomeは、ウェブサイトで使えるアイコンフォントライブラリです。 文字として扱えるため、サイズ変更や色変更が簡単で、SVGや画像を使わずに軽量で美しいアイコンを表示できます。

2026/02/23

Bloggerでタブ切り替えを実装する方法

event_note editBy まつゆう forumNo comments

1. タブ切り替えのメリットとこのタブの特徴

関連する複数の情報を1箇所にまとめ、ユーザーが「今見たい情報」だけを表示できるため、ページが縦に長くなりすぎるのを防ぎます。

Bloggerに画像カルーセルを実装してみる

event_note editBy まつゆう forumNo comments

1. カルーセルのメリットとこのデザインの特徴

ウェブサイトで複数の画像や情報を効率よく見せるためには、限られたスペースを最大限に活用する工夫が必要です。カルーセルは、その代表的な手法のひとつです。

手のかかる子も、優等生も ─ Blogger・国産無料ブログ・WordPress、私が3つのブログで学んだこと ─

event_note editBy まつゆう forumNo comments

プロローグ

※ この記事は、まつさんの実体験・経験をもとに着想を得て、Chat-GPTにより整えたものです。

私は現在も、Blogger・国産無料ブログ・WordPressを平行して運用している。