サイトをデザインしていく上で不要な要素を非表示にしたくなることがあると思う。例えば、チェックボックスで要素の状態を切り替えたい時やレスポンシブデザインなどを設定したい時などは要素を非表示する必要が出てくる。そんな時はCSSで要素を非表示にすることができるが、その方法にはいくつかある。
【Blogger】Bloggerでフッター下に余白が出来てしまう原因について
Bloggerのお役立ち情報をまとめていくブログです（今はVaster2のカスタマイズ情報が中心）。
以前コメントで当サイトのテンプレートのコメント欄についてアドバイスをいただきました。そのアドバイスを参考にコメント欄をアップグレードしてみたので、その詳細と旧バージョンからの変更方法についてまとめることにします。
Twitterカードに画像が正常に表示されない不具合の修正報告
当サイトのテンプレートについて、コメント欄で「Twitterカードに画像が表示されない」という不具合報告をいただきました。そこで、自分なりに調べてみたところ、指摘された不具合を解消することができたので ここで修正報告をさせていただきます。
font-awesomeのアイコンが□で表示される原因と対処法
当サイトのテンプレートにはfont-awesome（フォントオーサム）というアイコンフォントを使用しています。このフォントは外部からファイルを読み込んで表示するもので、<head>タグにこれを読み込むコードを書いておけば自分のサイト内で使うことができます。 しかし、読み込むための記述を間違いなく書
Bloggerでは管理画面のレイアウトからファビコン（ブラウザで表示されるサイトアイコン）を設定できますが、設定できるのはPC用で、モバイル用のファビコンには非対応のようです。そこで、今回は「スマホ版のファビコンを設定する方法」を紹介したいと思います。
【Hello, world!】最新記事ガジェットをトップページで表示させない方法
当サイトの自作テンプレートには「最新記事ガジェット」を設定していますが、デフォルトの設定ではトップページでも表示されるようになっています。しかし、トップページにはすでに最新記事が表示されているため、最新記事ガジェットの内容と重複してしまいます。 個人的にはあまり気になりませんが「トップページのみ最新記事ガジェットを非表示にしたい」という意見もあるようなので、今回は「最新記事ガジェットをトップページで表示させない方法」について解説してみたいと思います。
【自作テンプレート補足】画像クリック時に標準のビューアが作動しない問題について
当サイトの自作テンプレートの仕様について、Twitterで「記事の画像がBlogger標準のビューアで開けない」とのご指摘をいただきました。この件について色々と試してみたので、その結果をここに書き残しておこうと思います。
【自作テンプレート補足】番号付きページャとアーカイブの相性について
当サイトの自作テンプレートの仕様について、コメント欄で「アーカイブページでページャを使うとリンク先がおかしくなる」とのご指摘をいただきました。この件について色々と試してみたので、その結果をここに書き残しておこうと思います。
【Blogger】新テーマでmoreタグのJavaScriptが効かなくなるバグを回避する方法
Bloggerが新テーマになり、管理画面の仕様が相当変わってしまいました。これに伴って、当ブログで制作したテンプレートのJavaScriptが効かなくなるバグが発生する可能性があるので、これの回避方法をお知らせしておきます。
当サイトの自作テンプレートはカスタマイズ推奨です。テンプレートのカスタマイズについて、自己流ではありますがおすすめのカスタマイズ方法がありますので、その流れをざっと紹介しておきたいと思います。
Bloggerの日本語テンプレート第2弾「Smart」の紹介
当サイトオリジナルのBloggerテンプレートの第2弾になる「Smart（スマート）」が完成しました！ このテンプレートは、カスタマイズを前提にした日本語対応の国産テンプレートです。ソースコードにいちいち説明がついているので、カスタマイズ初心者でもコードの意味合いが分かりやすくなっていると思います。また、カスタマイズなんてしない という人のためにも、そのままで十分使える機能を備えた造りになっています。 なお、Smartは以前に公開したテンプレートの「Hello, world!」がベースになっているので、基本的にカスタマイズした部分をそのまま載せ替えることができます（HTMLの変更部分は記事リストのみ）。ちなみに、このデザインは当ブログ（Blogger Labo）のベースにもなっています。
【Hello, world!】記事中・記事下のアドセンスの設定方法（コード変換ツール付）
自作テンプレートのリリース情報の補足として、テンプレートの記事中・記事下にアドセンスを設定する方法をまとめておこうと思います。この記事の内容は基本的には当サイトで制作したテンプレートのみに対応していますが、Vaster2など記事中・記事下にアドセンスを配置できるタイプのテンプレートに転用することができます（ただし、クラス名は変更しなければなりません）。
【Blogger】アドセンスの設定方法（コード変換ツール付）
自作テンプレートのリリース情報の補足として、Bloggerでのアドセンスの設定方法をまとめておこうと思います。この記事の内容は、当サイトのテンプレートのみならず、Bloggerの仕様上でのアドセンスの設定方法になりますので、他のテンプレートを使っている場合でも役に立つ内容になっている思います。
Bloggerの日本語テンプレート「Hello, world!」が完成しました！
当サイトオリジナルのBloggerテンプレート「Hello, world!（ハローワールド）」がついに完成しました！ このテンプレートは、カスタマイズを前提にした日本語対応の国産テンプレートです。ソースコードにいちいち説明がついているので、カスタマイズ初心者でもコードの意味合いが分かりやすくなっていると思います。また、カスタマイズなんてしない という人のためにも、そのままで十分使える機能を備えた造りになっています。
Bloggerテンプレート自作 #27：テーマデザイナーに対応させる
前回の「SEO用のコードを記述する」に引き続き、今回は「テーマデザイナーに対応させる」を実践してみようと思う。 Bloggerではテーマデザイナーを使うことで、ブログの配色設定なんかを簡単にすることができるが、テンプレートを自作する場合はこの辺も自分で設定しなければならない。まあ、テーマデザイナーを使ってできるカスタマイズなんて知れているので、そもそもこの機能が必要なのかという疑問もあるが、初心者にとってはやっぱり必要な機能になると思う。 というわけで、今回は「テーマデザイナーのメリット・デメリット」と「テーマデザイナーの設定方法」についてまとめていくことにする。
前回の「スマホ用のヘッダーナビを作る」に引き続き、今回は「SEO対策をする」を実践してみようと思う。 SEO対策とは検索エンジン最適化のための対策だが、近年ではSNSでの最適化も必要になっているようだ。また、そもそもブラウザ表示にエラーが出ないようにHTMLやBloggerの設定を適切に読み込ませる設定も必要になる。 というわけで、今回はSEO対策に必要な「メタタグの基本設定」「OGP設定」「schema.orgの設定」についてまとめることにする。
Bloggerテンプレート自作 #25：スマホ用のヘッダーナビを作る
前回の「ページトップアイコンを作る」に引き続き、今回は「スマホ用のヘッダーナビを作る」を実践してみようと思う。 ヘッダーナビはヘッダー付近に設置されるバー状のリンクリストのことだが、リンクを増やすにつれてサイズが大きくなっていくので、デザインが崩れる原因になりやすい。なので、基本はリンクを隠しておき、必要な時にボタンクリックでリストを展開できるようにされることが多く、こうした方がデザイン的にもスッキリして見やすくなる。 というわけで、今回は「レスポンシブ対応のヘッダーナビ」の実装方法をまとめることにする。
Bloggerテンプレート自作 #24：ページトップボタンを作る
前回の「最新記事ガジェットを作る」に引き続き、今回は「ページトップアイコンを作る」を実践してみようと思う。 ページトップボタン（ページトップアイコン）とは、ページ内に追従する形で配置されたアイコンをクリックすることでページトップまで戻れるようにするアイコンのことで、ブログサイトには基本的に設置されている。というわけで、今回はこの「ページトップボタン」の作り方をまとめることにする。
Bloggerテンプレート自作 #23：最新記事ガジェットを作る
前回の「カスタム人気記事ガジェットを作る」に引き続き、今回は「最新記事ガジェットを作る」を実践してみようと思う。 Bloggerには最新記事を表示させる標準ガジェットは無い。その代わり、フィードガジェットを応用して簡易的な最新記事リストを実装することはできる。でも、できれば人気記事のようにサムネイルや要約文を入れたガジェットが欲しい。というわけで、今回は「人気記事ガジェットのような最新記事ガジェットを作る」を作る方法をまとめていくことにする。
「ブログリーダー」を活用して、ふでたまごさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
![FLUX.1 Kontext [dev]を使ってみた](https://img.blogmura.com/sites/718692/post-images/72680042.webp/crop/120x120)
