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

  •  
ふでたまごさん: Blogger Labo
ハンドル名ふでたまご さん
ブログタイトルBlogger Labo
ブログURLhttps://blogger-learning-rab.blogspot.jp/
サイト紹介文Bloggerをカスタマイズするための備忘録です。
参加カテゴリー
更新頻度(1年)情報提供26回 / 19日(平均9.6回/週) - 参加 2018/05/03 07:06

ふでたまご さんのブログ記事

  • 【Vaster2】ブログタイトルを画像に置き換える方法
  • このページでは、Vaster2でブログタイトルを画像に置き換える方法を説明する。なお、このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。・Vaster2のカスタマイズ方法はこちら手順1.ブログタイトルの画像を作成するまず、ブログタイトルの代わりに置き換える画像を作る必要がある。設置後のイメージにもよるが、できれば背景を透過できるツールで画像を作成することが望ましい。個人的に [続きを読む]
  • 【Blogger】contentプロパティの文字化けを回避する方法
  • BloggerのxmlでCSSの「contentプロパティ」を使った場合、そのまま入力すると文字化けすることがある。この文字化けを回避するには「設定したい文字列」を「Unicodeに変換して入力」すれば上手くいくことが多い。そこで、下記に具体例を挙げて説明したいと思う。文字化けの具体例[例] 自動で表示される目次部分に「【目 次】」という文字を表示する「【目 次】」と直接入力した場合CSSは「#toc:before{content:"【目 次】";}」 [続きを読む]
  • 【Blogger】簡単操作で記事内にブログカードを設置する方法
  • ブログカードとは、はてなブログでよくみかける「カード風のリンク」のこと。これを使うとリンクを分かりやすくすることができるが、Bloggerには そのような機能は備わっていない。そのため、外部サービスから取り入れることになる。このようなサービスはいくつかあるが、その中でも「ShareHtmlを、もっと綺麗にしたメーカー」が使いやすかった。そこで、このサービスを使って記事内にブログカードを設置する方法を書き残しておこ [続きを読む]
  • 【Blogger】最新記事を追加する方法【Vaster2】
  • Bloggerには最新記事を表示させるガジェットが搭載されていない。そのため、これを導入するには自分で設定するか、外部から取り入れることになる。この最新記事を追加する方法にて、便利なサイトを発見したので ここに書き残しておく。導入方法ガジェットの提供元サイトにアクセスする・SNEEIT(Blogger Random ? Recent ? Specific Label Posts Widget ? All in One Post Feed Widget)まずは上のリンクから、ガジェット提供元サ [続きを読む]
  • 【ブログ制作】PCでスマホの表示を確認する方法
  • ブログをカスタマイズしていると、やがてレスポンシブデザインという壁にぶち当たる。そんな時に、今まではブログを設定しては自分のスマホで表示を確認するという面倒な作業を行ってきた。しかし、「Google Chrome」の「デベロッパーツール」を使えば、PCからスマホの表示を確認することができるので、今までの面倒な作業を省略できる。また、スマホのみならずタブレットの表示も確認ができる優れものである。とても便利なので、 [続きを読む]
  • CSSは慣れてくると面白い!
  • Bloggerを始めてからのカスタマイズといえば、編集画面からできる設定が基本だった。それから細かい部分のカスタマイズ方法を検索してコードを拾い、それらを貼っては少しずつサイトを変化させていく。コードを貼り付けてサイトが思い通りに変化していく様は面白いが、貼り付けたコードについては中身を理解していないので、新しいコードを上書きするとレイアウトが崩れるなど、予期できない不具合が現れる。今までは、その辺の不 [続きを読む]
  • 【Vaster2】CSSだけでSNSボタンのデザインを変える方法
  • Vaster2にはデフォルトでスタイリッシュなSNSボタンが搭載されている。しかし、ブログをいじり始めるととデザインを自分なりにカスタマイズしてみたくなるもの。そこで、CSSを変更してカスタマイズしたSNSボタンのデザインサンプルをここに残しておくことにする。なお、本来のコードは「トーマスイッチ」さん のブログ記事にて公開されている。本記事の趣旨は、上記記事のコードを書き換えてSNSボタンのデザインを変更するというも [続きを読む]
  • 【Blogger】シンプルテンプレートをCSSでカスタマイズする
  • HTMLやCSSに慣れていないユーザーの場合、Bloggerのカスタマイズは専らテーマデザイナーを使うことになる。しかし、テーマデザイナーで変更できる範囲は狭く、細かいデザインなどを設定することはできない。Bloggerでは細かいデザインが用意されていないので、そうした部分は自分で調べていじっていくしかない。そのため、CSSのカスタマイズ方法や、CSSで変更する場所の道標となるポイントをまとめておこうと思う。なお、使用する [続きを読む]
  • 【Blogger】特定のページのみにCSSを適応する方法
  • Bloggerで見出しなどにCSSを設定すると編集する時に便利だが、特定のページのみ色を変えたいと思うことがある。今までは、HTMLでわざわざ各見出しにデザインしていたが、作業が非常に面倒だった。こんな問題を解決する「特定のページのみにCSSを適応する方法」を発見したので、ここに書き残しておくことにする。タグを使うBloggerには投稿内容をHTMLで編集できる「HTMLモード」が搭載されている。この「HTMLモード」とHTMLの「styl [続きを読む]
  • 【Blogger】ブログを作った後にやっておきたいこと
  • Bloggerで新しくブログをデザインした後、何をすればよかったのか迷うことが多い。そこで、この機会に「Bloggerでブログを作った後にやっておきたいこと」についてまとめておこうと思う。検索エンジンへの登録Googleに登録するとりあえず、Googleへのサイト登録は基本だと思う。サイトを登録するには「Search Console」から、自分のサイトURLを登録すればよい。登録状況は、自分のサイト名で検索すると分かると思われる。Bingに登 [続きを読む]
  • 【Blogger】忘れる前にやっておきたい設定
  • 新しくブログを作っても、Bloggerの設定については放置してしまっていることが多い。そのため、この機会に「Bloggerの忘れる前にやっておきたい設定」についてまとめておこうと思う。Bloggerの設定検索設定にブログ紹介文を登録Bloggerにはブログの説明の他に「検索用の説明」を設定できる。これは「description metaタグ」というもので、SEO上 titleタグに次いで重要視される項目らしい。また、これを有効にしないと、記事毎の検 [続きを読む]
  • 【Vaster2】知っておくと便利な機能の備忘録
  • Vaster2を使うにあたって、知っておくと便利な機能などをまとめておくことにする。下記に挙げる機能設定は複雑な内容になるので、基本的には各項目のリンク先を見てもらったほうがよい。なお、カスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。・Vaster2のカスタマイズ方法はこちら便利な追加機能LINEボタンの追加【方法1】Vaster2のSNSボタンのようなデザインにする・他のSNSボタンと同様 [続きを読む]
  • 【Vaster2】トラブルシューティングのための忘備録
  • Vaster2で起こったトラブルを解決できるようにトラブルシューティングをまとめておくことにする。ページ全体のトラブル日付が表示されない【方法】・「レイアウト」の「ブログの投稿」の編集から、「日付」と「時刻」の両方にチェックを入れる参考:HaLoLiAコメント欄が表示されない【方法1】・ブログのコメント設定で「無効」以外にする・各記事のオプションで「コメント許可」にする【方法2】※上記で解決されない場合・Blogge [続きを読む]
  • 【Vaster2】テーマデザイナーのカスタマイズ
  • このページでは、Vaster2のテーマデザイナーのカスタマイズ方法を説明する。このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。・Vaster2のカスタマイズ方法はこちらテーマデザイナーのカスタマイズVaster2のテーマデザイナー対応版では、特定の項目がBloggerのテーマデザイナーで変更できるよう設定されている。この項目は、記述次第でカスタマイズできるようになっている。[例]ペー [続きを読む]
  • 【Vaster2】レスポンシブデザインのカスタマイズ
  • このページでは、Vaster2のレスポンシブデザインのカスタマイズ方法を説明する。このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。・Vaster2のカスタマイズ方法はこちらレスポンシブデザインのカスタマイズレスポンシブデザインについてレスポンシブデザインとは、ページを表示するデバイス(PC・スマホ・タブレットなど)の画面サイズに合わせて表示が変わるように設定されたウェブデ [続きを読む]
  • 【Vaster2】SNSボタンのカスタマイズ
  • このページでは、Vaster2のSNSボタンのカスタマイズ方法を説明する。このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。・Vaster2のカスタマイズ方法はこちらSNSボタンの見出しのカスタマイズSNSボタンの見出しSNSボタンの見出しのCSS SNSボタンの見出しの設定 .share-title{ padding: .5em .75em; 上下・左右の余白(文字の開始位置と帯の幅) margin-bottom: 30px; 下外側の余 [続きを読む]
  • 【Vaster2】関連記事のカスタマイズ
  • このページでは、Vaster2の関連記事のカスタマイズ方法を説明する。このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。・Vaster2のカスタマイズ方法はこちら関連記事の見出しのカスタマイズ関連記事の見出し関連記事の見出しのCSS 関連記事の見出しの設定 #related-posts h2{ padding: .5em .75em; 上下・左右の余白(文字の開始位置と帯の幅) margin-bottom: 30px; 下外側の余白 [続きを読む]
  • 【Vaster2】コメント部分のカスタマイズ
  • このページでは、Vaster2のコメント部分のカスタマイズ方法を説明する。このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。・Vaster2のカスタマイズ方法はこちらコメント部分のカスタマイズコメント部分コメントの文字サイズ【方法】・「.main-outer p{」で検索・「.main-outer p{}」の中の「font-size」を変更投稿者と投稿時刻の文字サイズ【方法】・「.comments{font-size:数値px;}」 [続きを読む]
  • 【Vaster2】引用文のカスタマイズ
  • このページでは、Vaster2の引用文のカスタマイズ方法を説明する。このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。・Vaster2のカスタマイズ方法はこちら引用文のカスタマイズ引用文引用文のCSS 引用文の設定 blockquote { padding: 10px 30px; 上下・左右の内側の余白 margin: 10px 0 20px 0; 上・右・下・左の外側の余白 border: 1px solid #c8c8c8; 枠線 overflow-wr [続きを読む]