searchカテゴリー選択
chevron_left

カテゴリーを選択しなおす

cancel
プロフィール
PROFILE

ふでたまごさんのプロフィール

住所
未設定
出身
未設定

自由文未設定

ブログタイトル
Blogger Labo
ブログURL
https://blogger-learning-rab.blogspot.com/
ブログ紹介文
Bloggerをカスタマイズするための備忘録です。
更新頻度(1年)

60回 / 365日(平均1.2回/週)

ブログ村参加:2018/05/03

本日のランキング(IN)
読者になる

新機能の「ブログリーダー」を活用して、ふでたまごさんの読者になりませんか?

ハンドル名
ふでたまごさん
ブログタイトル
Blogger Labo
更新頻度
60回 / 365日(平均1.2回/週)
読者になる
Blogger Labo

ふでたまごさんの新着記事

1件〜30件

  • Bloggerテンプレートの仕様をざっくりと説明します

    Bloggerテンプレートの仕様についてざっくりとまとめてみました。

  • Bloggerテンプレートの構成をざっくりと説明します

    Bloggerテンプレートの構成について、部分ごとにざっくりとまとめてみました。

  • 【初心者向け】Bloggerカスタマイズに必要な知識を無料で身につける方法

    初心者向けに、無料でできる効率の良いHTML・CSS・JavaScriptの学習方法をまとめてみました。

  • 【Blogger】「注目の投稿」をHTML/JavaScriptガジェットで自作する方法

    Bloggerの注目の投稿ガジェットをHTML/JavaScriptガジェットで自作する方法を紹介します。

  • 【初心者向け】BloggerのHTML/JavaScriptガジェットの解説と活用方法

    BloggerのHTML/JavaScriptガジェットの解説と活用方法を紹介します。

  • 【自作テンプレート補足】投稿部分に追加したガジェットの不具合対処法

    投稿部分(メインセクション)にガジェットを追加したことで不具合が発生したという報告をいくつか頂いています。この報告に対してトラブルシューティングを用意したので、不具合にお困りの方は下記を参考に修正してみてください。

  • 【jQuery】BloggerにJavaScriptを使って任意の記事に目次を作る方法

    jQueryを使って記事の任意の場所に目次を設けられる方法を編み出しました。設置や操作も比較的簡単だと思うので、興味のある方は、ぜひ試してみてください。

  • 【初心者向け】ページ内リンクを使って目次を自作する方法

    今回はwebデザインの初心者向けにページ内リンクを使って手動で目次を作成する方法を紹介しておきます。今はJavaScriptなんかを使って挿入や生成を自動化することが主流みたいですが、ページ内リンクを使った目次の作成はHTMLやCSSの基本を知る上で大変便利だと思うので、ここにまとめました

  • 【CSS】CSSで要素を隠す方法とSEO対策について

    サイトをデザインしていく上で不要な要素を非表示にしたくなることがあると思う。例えば、チェックボックスで要素の状態を切り替えたい時やレスポンシブデザインなどを設定したい時などは要素を非表示する必要が出てくる。そんな時は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ではテーマデザイナーを使うことで、ブログの配色設定なんかを簡単にすることができるが、テンプレートを自作する場合はこの辺も自分で設定しなければならない。まあ、テーマデザイナーを使ってできるカスタマイズなんて知れているので、そもそもこの機能が必要なのかという疑問もあるが、初心者にとってはやっぱり必要な機能になると思う。 というわけで、今回は「テーマデザイナーのメリット・デメリット」と「テーマデザイナーの設定方法」についてまとめていくことにする。

  • Bloggerテンプレート自作 #26:SEO対策をする

    前回の「スマホ用のヘッダーナビを作る」に引き続き、今回は「SEO対策をする」を実践してみようと思う。 SEO対策とは検索エンジン最適化のための対策だが、近年ではSNSでの最適化も必要になっているようだ。また、そもそもブラウザ表示にエラーが出ないようにHTMLやBloggerの設定を適切に読み込ませる設定も必要になる。 というわけで、今回はSEO対策に必要な「メタタグの基本設定」「OGP設定」「schema.orgの設定」についてまとめることにする。

  • Bloggerテンプレート自作 #25:スマホ用のヘッダーナビを作る

    前回の「ページトップアイコンを作る」に引き続き、今回は「スマホ用のヘッダーナビを作る」を実践してみようと思う。 ヘッダーナビはヘッダー付近に設置されるバー状のリンクリストのことだが、リンクを増やすにつれてサイズが大きくなっていくので、デザインが崩れる原因になりやすい。なので、基本はリンクを隠しておき、必要な時にボタンクリックでリストを展開できるようにされることが多く、こうした方がデザイン的にもスッキリして見やすくなる。 というわけで、今回は「レスポンシブ対応のヘッダーナビ」の実装方法をまとめることにする。

  • Bloggerテンプレート自作 #24:ページトップボタンを作る

    前回の「最新記事ガジェットを作る」に引き続き、今回は「ページトップアイコンを作る」を実践してみようと思う。 ページトップボタン(ページトップアイコン)とは、ページ内に追従する形で配置されたアイコンをクリックすることでページトップまで戻れるようにするアイコンのことで、ブログサイトには基本的に設置されている。というわけで、今回はこの「ページトップボタン」の作り方をまとめることにする。

  • Bloggerテンプレート自作 #23:最新記事ガジェットを作る

    前回の「カスタム人気記事ガジェットを作る」に引き続き、今回は「最新記事ガジェットを作る」を実践してみようと思う。 Bloggerには最新記事を表示させる標準ガジェットは無い。その代わり、フィードガジェットを応用して簡易的な最新記事リストを実装することはできる。でも、できれば人気記事のようにサムネイルや要約文を入れたガジェットが欲しい。というわけで、今回は「人気記事ガジェットのような最新記事ガジェットを作る」を作る方法をまとめていくことにする。

  • Bloggerテンプレート自作 #22:カスタム人気記事ガジェットを作る

    前回の「カスタムアーカイブを作る」に引き続き、今回は「カスタム人気記事ガジェットを作る」を実践してみようと思う。 人気記事ガジェットはBloggerの標準ガジェットなのだが、実はこれは条件分岐さえしっかりしていれば丸々自作できてしまう。なので、今回は人気記事ガジェットを自作する方法をまとめていくことにする。

  • Bloggerテンプレート自作 #21:カスタムアーカイブを作る

    前回の「サイドバーとデフォルトガジェットのデザインを作る」に引き続き、今回は「カスタムアーカイブを作る」を実践してみようと思う。 カスタムアーカイブを作る意図はデフォルトのブログアーカイブの階層リストのデザイン性が非常に悪いためである。なので、これをコンパクトに表示できるようにするのが本記事の狙いとなる。というわけで、今回はカスタムアーカイブの作り方をまとめておくことにする。

カテゴリー一覧
商用