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

投稿

ラベル(マークアップ)が付いた投稿を表示しています

BloggerブログでIntersection Observerの画像の遅延読み込みをかけるカタマイズ

イメージ
サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策(検索できる最適化)にも有効と考えられるGooglも推奨するJavaScriptのIntersection Observerを使ったサイト作成を気に入ってブログに実装している。 Bloggerでのカスタマイズはどのように可能かを取り上げてみたいLots of packed blueberries by elizadean [CC0], via Pixabay 手順は二つあって特に2017年の公式テーマのContentsとSohoとEmporioとNotableのインデックスページのサムネイル画像――ページ毎に何枚も表示される…

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

イメージ
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のContempoテーマで記事タイトルの右横の共有ボタンを消す

イメージ
BloggerのContempoテーマの記事タイトルの右横の共有ボタンはユニークなデザインで気に入っていたけど、ところが殆ど誰も使わないようだし、ソースコードは、結構、長くて表示速度を下げてしまう恐れも否定できないので、消すべきではないかと感じ始めた。 記事タイトルはメインのコンテンツを訪問者に最も印象付けるブログの生命線だから右端まで伸ばしてきっちり表示しておくのがアクセスアップに大事かも知れない。Flower latte art by Kevin Menajang [CC0], via Pexels もう既に繁栄していて皆から気軽に広めて貰える状況でもないかぎりは共有ボタンではなくて記事タイトルこそ見立たせるのがブロガーとして得策だ。 目次記事タイトルの右横の共有ボタンを消す方法Contempoの記事タイトルの右横の共有ボタンのソースコード記事下の共有ボタンを単独で表示する方法Co…

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

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

インラインsvgのpathタグで描いた線の両端を繋ぎ合わせるにはZコマンドを使う

イメージ
pathは座標からどんな線でも数多く描けるインラインsvgで最も自由度の高いタグだ。 しかし使ってみると一本の線の開始点と終了点の両端がスムーズに繋がらない場合があって参った。<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 320 240"> <path d="M50 110 L160 20, 270 110 h-220 M80 110 v110 h160 v-110 M240 140 h-50 v80 M95 125 h65 v40 h-65 v-40" stroke-width="4" stroke="#4682b4"…

インラインsvgで線や丸や四角や三角や弧を描いて色を塗るマークアップ

イメージ
htmlのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 svgはScalable Vect Graphics(スケーラブルベクターグラフィックス)の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の一般的なjpgやpngやgifの画像のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにsvgファイルの画像を表示するにはimgタグで<img src="画像URL">とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データを、直接、マークアップする。sv…

cssのpositionのstickyでコンテンツをサイトの一定の範囲内にフローティングする

イメージ
ブログの記事/追加ページの本文の右下にフローティングの戻るボタンを付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事/追加ページの本文のところだけとかアドセンスのサイト広告を避けられるブログの一定の範囲内に表示すれば大丈夫だと気付いてcssのpositionのstickyを使って試したら上手く行った。Pineapple floating in water by Pineapple Supply Co. [CC0], via Pexels stickyは画面のスクロールに応じてコンテンツを固定できる cssのpositionで同じような値にfixedがある。どんな場合でも画面にコンテンツを固定する。使うと、常時、フローティングで表示されるデザインになる。 stickyはfixed…

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(検…