Blogger Labo:【Vaster2】知っておくと便利な機能の備忘録

Vaster2を使うにあたって、知っておくと便利な機能などをまとめておくことにする。

下記に挙げる機能設定は複雑な内容になるので、基本的には各項目のリンク先を見てもらったほうがよい。

なお、カスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

Vaster2のカスタマイズ方法はこちら


便利な追加機能


LINEボタンの追加


【方法1】Vaster2のSNSボタンのようなデザインにする

・他のSNSボタンと同様に、LINE設定のHTMLとCSSを書き加える

※これについては「休日の空間」さん が詳しく説明していらっしゃる

【方法2】忍者ツールズのおまとめボタンに差し替える

・「忍者ツールズ」に登録する
・「忍者ツールズおまとめボタン」を選択し、コードを取得する
・「HTMLの編集」からSNSボタンの部分に取得したコードを貼り付ける

※これについては「Vaster2カスタムブログ」さん が詳しく説明していらっしゃる

ページトップボタンを追加


【方法1】フッターに常時表示されるページトップボタンを設置する

・「レイアウト」からフッターに「HTML/JavaScript」ウィジェットを追加
・ウィジェットの中にページトップボタンのコードを記述する(コードについてはリンク先を参照)

※これについては「休日の空間」さん が詳しく説明していらっしゃる

【方法2】スクロールすると現れるページトップボタンを設置する

・「HTMLの編集」からページトップボタンのHTML・Java・CSSを書き加える(コードについてはリンク先を参照)

※これについては「Vaster2カスタムブログ」さん が詳しく説明していらっしゃる

トップページの記事リストの画像なし記事に代替サムネイルを追加する


【方法】

・代替サムネイル画像をアップして、画像アドレスを取得する
・「HTMLの編集」から代替サムネイル追加のコードを書き加える(コードについてはリンク先を参照)
・コードの画像指定部分を画像アドレスに書き換える

※これについては「プゥ二郎さんの日記」さん が詳しく説明していらっしゃる

人気記事ウィジェットの画像なし記事に代替サムネイルを追加する


【方法】

・代替サムネイル画像をアップして、画像アドレスを取得する
・「HTMLの編集」から代替サムネイル追加のコードを書き加える(コードについてはリンク先を参照)
・コードの画像指定部分を画像アドレスに書き換える

※これについては「プゥ二郎さんの日記」さん が詳しく説明していらっしゃる
※サムネイルは画像が真四角でないと反映されないので注意

記事ページのラベル(タグ)にリンクをつける


【方法】

・「HTMLの編集」からラベル(タグ)のHTMLを書き換え、CSSを書き加える(コードについてはリンク先を参照)

※これについては「父ちゃんの日々ログ」さん が詳しく説明していらっしゃる

パンくずリストに全てのラベルを表示させる


【方法】

・「HTMLの編集」からパンくずリストのHTMLを書き換え、CSSを書き加える(コードについてはリンク先を参照)

※これについては「父ちゃんの日々ログ」さん が詳しく説明していらっしゃる

最終更新日の自動挿入


【方法】

・「HTMLの編集」から最終更新日の自動挿入コードを書き加える(コードについてはリンク先を参照)

※これについては「某氏の猫空」さん 「すたすた式」さん が詳しく説明していらっしゃる

目次の自動生成


【方法】

・「HTMLの編集」から目次の自動生成のHTML・Java・CSSを書き加える(コードについてはリンク先を参照)

※これについては「トーマスイッチ」さん が詳しく説明していらっしゃる
※追加した目次のレイアウトが崩れる場合は、箇条書きリストのCSSを削除すると改善するかも(関連記事

最新記事ガジェットの導入


【方法】

・「ガジェットの提供元サイト」にアクセスし、設定して導入する

※詳しくは コチラの記事 で説明

番号付きページナビの導入


【方法】

・「コード提供元サイト」にアクセスし、コードをテンプレートに導入する

※詳しくは コチラの記事 で説明

アドセンス関係


記事内にアドセンスを横並びに貼る


【方法】

・アドセンスコードを取得する
・アドセンス冒頭のJavaScriptコードを書き換える
・テーブルタグを使って横並びにする

※これについては「あかりlog」さん が詳しく説明していらっしゃる
※上記はレクタングル広告の場合を指す

アドセンス(レスポンシブ広告)をPC表示で2つ、スマホ表示で一つにする(上の続き)


【方法】

・アドセンスコード(レスポンシブ広告)を取得する
・アドセンス冒頭のJavaScriptコードを書き換える
・コードの「data-ad-format="auto"」を削除
・コードのstyleを「style='display:block;width: 300px;height: 250px;'」に書き換える
・テーブルタグを使って横並びし、2つのコードを貼る
・スマホで非表示にしたいコードのins classを「ins class='adsbygoogle adslot_1'」に書き換える(一つだけ)
・スマホで非表示にしたいコードのstyleを「style='width: 300px;height: 250px;'」に書き換える(上と同じコード)
・CSSにスマホ時に「.adslot_1」を非表示にするCSSを書き加える(コードについては「KaKuKaKu」さんを参照)

※これについては「KaKuKaKu」さん 「あかりlog」さん が詳しく説明していらっしゃる
※この方法はレスポンシブ広告以外でやると規約違反になるらしい