スキップしてメイン コンテンツに移動

投稿

ラベル(独自タグ)が付いた投稿を表示しています

Bloggerのsvgアイコンの共有ボタンにはてなブックマークなどのデフォルト以外の共有先を追加する方法

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableでsvgアイコンの共有/シェアボタンが搭載されるようになった。記事やスニペットの上段や下段にスイッチが付いていて押すと「リンクを取得」と「Facebook」と「Twitter」と「Pinterest」と「メール」の五種類がデフォルトで表示されて使用可能になっている。 世の中でブログの共有先は他にも数多くあって日本だと僕もやっているけれどもはてなブックマークが人気のソーシャルメディアの一つで、検索エンジンでのサイト評価を高めるSEO対策を含めてブログのアクセスアップに大きく役立つと考えられるから共有ボタンになるべく入れておきたい。 以前はブログのテンプレートにBloggerのシンプルテーマを使って共有ボタンは外部のWebサービスの共有ボタンのAddToAnyが便利で、デザインもsvgアイコン…

Bloggerブログのテーマのhtml編集/テンプレートのソースコードの基本構造と使用可能な独自タグについて

イメージ
Bloggerは無料のブログサービスとして何よりもサーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じるけれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーディングを覚えるのに役立つ情報源html:HTML: HyperText Markup Language、HTML5(目的別)などcss:CSS: カスケーディングスタイルシート、CSS3(目的別)などJavaScript:JavaScript、JavaScriptなどBlogger:レイアウト用ページ要素タグについて/レイアウト用のウィジェット タグ、Les balises Blogger [introduction]など 一般的にサイト作成はhtmlとcssという構成とデザインのマークアップ言語とその他にJavaScri…

BloggerのContempoとSohoとEmporioのテンプレートで記事/追加ページにハンバーガーメニューを出す

イメージ
Bloggerの2017年の公式テーマはブログの最上段にフローティングバー(固定/スティッキーのメニューバー)が付いている。 ところがNotableを除いてContempoとSohoとEmporioはデザインが一般的ではない。トップやアーカイブなどのインデックスページは総合メニューのサイドバーを開閉するハンバーガーメニュー(≡)が表示されるのに記事/追加ページでは変わってホームボタン:トップページへのリンクの左矢印(←)が表示される。子ページだからデザインの意味付けは悪くはないにしても記事/追加ページから親ページへはフローティングバーやヘッダーにブログ名のリンクもあるから重複している。A hamburger with vegetables by Valeria Boltneva [CC0], via Pexels 折角の総合メニューのサイドバーを記事/追加ページから使えないのは勿体ない…

Bloggerブログでスマホのインデックスページへ記事下のアドセンスのサイズを小さくして振り分けて載せる

イメージ
Bloggerブログのスマホのインデックスページの記事下のアドセンスはサイズが大き過ぎるので、html編集のカスタマイズでページを振り分けてサイズを小さくしてモバイルバナーの320×100で表示するように変更したんだ。Contempoなどの新テーマは記事下のアドセンスがスマホのインデックスページでも表示される。記事の抜粋のスニペットに挿入される。それ以前のシンプルなどの旧テーマではウェブバージョンのパソコンやタブレットだけで、モバイルバージョンのスマホでは無理だったので、明らかに改善されていると感心する。 新テーマの記事下のアドセンスはブログの投稿ガジェットから設定するとテンプレートのBlogのwidget内のinlineAdのincludableタグで出力されるけれどもソースコードはdefaultAdUnitのincludableタグで定義付けられていて個々に共通したデザインを保ちな…

Bloggerのカスタマイズのページ毎の振り分けの一覧と条件分岐のifの使い方

イメージ
Bloggerブログのテンプレートは振り分けを使ってページ毎にコンテンツを表示できる。使い方は条件分岐の独自タグのifの開始タグと終了タグでコンテンツを囲むだけだから非常に簡単だ。Bloggerのブログのカスタマイズにとても便利なので、どんなページにコンテンツを振り分けて表示できるかを一覧に纏めておきたいと思う。 目次data:view型の振り分けタグdata:blog型の振り分けタグBloggerの振り分けタグの使い方条件や条件の判定を切り替える複数の振り分け条件を盛り込む data:view型の振り分けタグ ifに振り分け条件のcondを個別に付ける。 公式テーマのContempoとSohoとEmporioとNotableから追加された。しかし以前のテーマでも同じように使える。新しいタイプの振り分けタグだ。 ホームページ(トップページ)<b:if cond='data…

Bloggerのdefaultmarkupタグの最初は便利で最後は不要な使い方

イメージ
Contempoなどの2017年の公式テーマからソースコードに追加されていたBloggerの独自タグの一つ、defaultmarkupとは何かを考える。Contempoテーマ via Blogger head内に幾つも記載されていて中身はincludableタグばかりなんだ。翻ってbody内には同一のidと内容を持つincludableタグが記載されていて完全に重複している。ソースコードに二つのマークアップがまるでコピーされたように含まれているのはサイト作成で謎としかいいようがない。 概して一つしか要らないはずだし、body内のincludableタグでブログは成り立つと思う。defaultmarkupタグがなぜhead内に幾つも記載されているのか。Bloggerのテンプレートでの役目、そして使い方も分からない。 defaultmarkupタグはウィジェット毎の初期設定を示す 調べるとB…

BloggerのJSON-LDの構造化データのpublisherをブログ自体に合わせる

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableは記事毎にJSON-LDの構造化データが付いていてGoogleなどの検索エンジンがサイト内容を通常よりも認識し易くなっている。 ブログのテンプレートのソースコードからマークアップを確認してみるとpublisher(公開主)がBloggerになっていてさらに画像なしの場合の画像にBloggerのロゴが記載されるのもちょっと気がかりなんだ。 Bloggerを使っているから間違いではないにせよ、ブログ自体には一致してないわけで、どちらもブログ自体に合わせてカスタマイズしたいと感じてしまう。A man who began doing parkour cartwheel on the grass by farioff [CC0], via Pixabay 検索エンジンからのアクセスアップのSEO(検…

Bloggerブログで記事の更新日を表示する方法

イメージ
公式テーマの新旧で、Bloggerブログで記事の更新日を表示する方法は異なっている。Bloggerの新テーマウィジェットバージョン2/レイアウトバージョン3 ContempoSohoEmporioNotableBloggerの旧テーマウィジェットバージョン1/レイアウトバージョン2 シンプル動的ビュー画像ウィンドウAwesome Inc.ウォーターマークエスィリアル旅行Bloggerの更新日は表示できる範囲も公式テーマの新旧で異なっていて新テーマは注目とブログと人気の投稿、旧テーマはブログの投稿のウィジェットに所定のソースコードを記載しなくてはならない。widgetタグのTypeでいうと前者はFeaturedPostとBlogとPopularPosts、後者はBlogにマークアップを行うとブログに反映する。目次二つのテーマの更新日のマークアップ新テーマで更新日を表示する独自タグ旧テーマで…

Bloggerの注目とブログと人気の投稿のウィジェットのスニペットの表示されない文字数を減らす

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのインデックスページ(トップ、アーカイブ、ラベルなど)の記事の抜粋などに使われるスニペットの文字数が実際に表示されるよりもソースコードに多く記載されている。Three types of devices by coffeebeanworks [CC0], via Pixabay調べると必要なのはスマホとパソコンで百文字と二百五十文字程度――文字サイズによって前後するし、小さなサムネイル画像と横並びの文章のデザインの場合は八十文字と百七十文字前後まで減る――なのにテンプレートはデフォルトで千文字が記事の本文の冒頭から抜き取られる設定になっているんだ。最も多く必要なパソコン版の文章だけのスニペットで表現される文字数からしても七百五十文字程度が無駄だと思うし、ブログの表示速度を下げて利便性も下げるか…

BloggerブログのJSON-LDの構造化データのSEO対策のためのカスタマイズについて

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableの記事/追加ページにはJSON-LDの構造化データがデフォルトで付けられている。目次Google推奨のJSON-LDの構造化データはSEO対策に相応しいBloggerの新テーマのJSON-LDの構造化データのソースコードインデックスページの記事毎のJSON-LDの構造化データを削除するインデックスページに専用のJSON-LDの構造化データを付ける方法JSON-LDの構造化データのソースコードのサンプル新テーマのテンプレートへのマークアップの仕方Google推奨のJSON-LDの構造化データはSEO対策に相応しいJSON-LD(推奨)ページのheadやbodyに<script>タグで埋め込まれたJavascriptの表記法です。マークアップは利用者に見える文章で挿入されてませんが、…

BloggerブログでOGP設定の画像を全ページで一枚ずつ配信する方法

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像(og:image)が記事の抜粋の画像の掲載数に一致している。OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルではイン…