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

投稿

ラベル(Blogger)が付いた投稿を表示しています

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.とウォーターマークとエスィリアルではイン…

Bloggerブログのテンプレートのhead内のカスタマイズのために独自タグのall-head-contentを分解する

Bloggerは利便性を高めるためにブログのテンプレートの様々なソースコードを独自タグで自動化している。しかし独自タグが幅広い記述に対応して多くのソースコードが一辺に出力されるとテンプレートのカスタマイズが反対に難しくなってしまう。直接、手を加えられないので、どうすれば良いのかと悩まざるを得ないわけなんだ。公式サイトでは情報が薄いみたいだけど――ヘルプにはマークアップの基礎知識しか紹介されてない――しかし調べると独自タグの出力する内容を載せているBlogger Codeなどの専門サイトが見付かってカスタマイズにとても役立つ。Bloggerの独自タグを実際に出力される内容に置き換えて分解するとテンプレートのソースコードをさらに細かく作り替えられるようになる。前々から気がかりだったBloggerブログのhead内のカスタマイズをついに行ってみたいと思い立った。目次Bloggerブログのhea…

Bloggerのテンプレートのxmlからブログのhtmlに出て来る不要な名前空間を消す

htmlはバージョン5からそれまでのxml宣言や名前空間の記述が完全に不要になっている。しかもマークアップにはxml、またはxhtml(htmlに適合するxml)とhtmlの両方が使える仕様なので、以前よりも便利になったと思う。Bloggerのテンプレートはブログの実際のソースコードを確認する(専用の閲覧アプリか、ChromeブラウザなどではURLの最初に「view-source:」を付けてアクセスすると表示できる)とhtml5の設定になっている。html5のサイトの三つの条件<!DOCTYPE html><html></html><meta charset="utf-8">/<meta http-equiv="Content-Type" content="text/html; cha…

normalize.cssを最新バージョンで使おう

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのソースコードの冒頭付近にnormalize.cssが付いている。normalize.cssはcssの標準化を意味していてブラウザ毎のサイトのhtmlのデフォルトのデザインの互換性を保つためのcssの独自のソースコードなんだ。normalize.cssはデフォルトのHTML要素のスタイルにクロスブラウザを一貫して良く供給する小さなCSSファイルです。それは従来型のCSSリセットへの現代的でHTML5に対応した代替です。normalize.cssについて via ニコラス・ギャラガー(訳出)開発者の一人がニコラス・ギャラガーという。昨年からモバイルで使い易くなったウェブアプリのTwitter Liteの制作にも参加したらしい。世界有数のソーシャルメディアのTwitterに関与するとは相当な経歴…

Bloggerでヘッダー画像の「テーマ画像の作成者」をブログのフッターに表示する

イメージ
Bloggerはウェブのテーマのカスタマイズ/Bloggerテーマデザイナーの「背景」からヘッダー画像を設定できる。デフォルトで用意された中から画像を選んで取り付けるとブログの最下段のフッターには「テーマ画像の作成者」と本人の名前のオリジナル画像のページへのリンクも表示される。自分で写真や絵をアップロードしてヘッダー 画像を取り付けるとブログのフッターには何も出ない。僕はブログのヘッダー画像に写真を使っているけれども自分で撮影するとか作成したわけではない。幸せの良さとして素晴らしく気に入ったクリスティン・フォークトの写真を使っている。ライセンスがパブリックドメインと変わらないクリエイティブコモンズのCC0だから出典を示さず、誰でも勝手に使って良いんだけれども気前良く提供してくれた本人への感謝を込めて少しでも紹介しておきたいと思う。ソースコードで「テーマ画像の作成者」は表示できるBlogg…

Bloggerブログでページリスト(先頭)と人気の投稿の見出しタグを変更する

2017年の公式テーマのContempoとSohoとEmporioとNotableのカスタマイズで、記事/追加ページの固有タイトルの見出しタグをh3からh1に、そしてブログ名の見出しタグをh1からh2に変更した。何れもhtml構文とSEO対策のためだけれどもさらに他の部分との見出しタグのバランスを考えるとページリスト(先頭)と人気の投稿のガジェットを使っているので、それぞれのh3をh2に変更するべきなんだ。ページリスト(先頭)はトップやアーカイブなどのインデックスページで表示される。見出しタグがh3だとh1のブログ名に対して大きさが一つ飛んでしまっている。h2にすると順番良く並んだマークアップになる。人気の投稿は記事/追加ページの本文の下に置かれている場合に見出しタグを変更した固有タイトルのh1に対してh3だとやはり一つ飛んでしまっていてマークアップの流れが損われているからh2に変更した…

Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付ける

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableでは記事ページに新しい投稿や前の投稿のページネーションがデフォルトで付いてないけれどもhtml編集のカスタマイズによって付ける方法が見付かって些細な日常で取り入れてみた。 ソースコードでは最初からページネーションのスペースが取られていて表示しないようにしているだけだからブログの記事ページに設置するための考え方は一から始めるよりは速やかなのが助かる。 目次ページネーションを取り入れる二つの手順独自タグでページネーションを設定する方法(Sohoは省略可能)独自タグでページネーションを配置する方法cssでページネーションにデザインを付けるページネーションの位置取りを調整する方法ページネーションの上下の余白を調整する方法 ページネーションを取り入れる二つの手順テンプレートに設定する必要なリンクを生…

Bloggerブログで記事/追加ページのブログ名から見出しタグのh1を外す

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableで記事/追加ページの固有タイトルの見出しタグを変更する方法と併せて使える各々のブログ名の見出しタグのh1を外す方法が見付かった。前者だけだと記事/追加ページで見出しタグをh1にしてもデフォルトでh1が付いたブログ名と二つになってしまってhtml構文としてもSEO対策としても万全とはいえなかった。後者を取り入れると記事/追加ページで見出しタグのh1が固有タイトルの一つだけになるからかりにデザインは変わらないとしてもブログのマークアップは分かり易く整えられる。かねて記事/追加ページのブログ名のh1を外す方法自体は固有タイトルの見出しタグを変更して間もなく思い付いたけど、しかしデザインを他のトップやアーカイブなどのブログ名にh1を残すページと振り分けるのが煩雑で、htmlとcssを二倍にして割り当…

Bloggerで取得できるアドセンスのホスト型と非ホスト型のライセンスについて

サイト広告のアドセンスのライセンスにはホスト型と非ホストの二種類がある。アドセンスのホスト型のライセンス提供元のGoogleにホストされた一部のサイト:YouTubeやBloggerから取得して個々のサイトで設定して使用できるアドセンスの非ホスト型のライセンスGoogleアドセンスのサイトから取得して所定の広告コードを掲載できるかぎりの全てのサイトで使用できる BloggerはYouTubeと共にアドセンスのホスト型のライセンスを取得して使用できる数少ないサイトの一つで、一般サイトとしてはサブドメインのサイトアドレスでも申請できるのが例外的なんだ。 現状、非ホスト型で申請するには独自ドメインのサイトアドレスでなくてはならないし――以前はサイトアドレスのタイプは不問だったから又変わらないともかぎらない――概して有料なので、無料でもアドセンスのサイト広告で収益化を図ろうとすればホスト型のラ…

Bloggerブログで記事中の複数の画像を横並びやグリッドデザインで配置する方法

イメージ
Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン(縦横を均等に表示する/タイル張り)を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。サイト作成でcssのGrid Layout:displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。目次Bloggerの投稿画像の横並びやグリッドデザインの前提条件個別の記事にcssのGrid Layoutを取り入れる記述についてBloggerの投稿画像にdisplayのgridを的確に反映させる新テーマでのソースコードの修正点旧テーマでのソースコードの修…