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

投稿

7月, 2018の投稿を表示しています

Googleが認識する構造化データに含まれるから「rel="me"」にはSEO効果があるかも知れない

イメージ
所有サイトが複数の場合に他の所有サイトのホームページやブログやソーシャルメディアを指定するhtmlのマークアップに「rel="me"」が使えるんだ。三つの「rel="me"」の記述法head内にlinkタグで指定する<link href="所有する外部サイトのURL" rel="me">body内にaタグで指定する<a href="所有する外部サイトのURL" rel="me">body内にareaタグで指定する<area href="所有する外部サイトのURL" rel="me">実際にリンクを貼るならばbody内のaタグやareaタグに「rel="me"」を追加する。リン…

チャカ・カーンのI'm Every Womanは命の輝きの爽やかなR&Bだ

イメージ
Chaka Khan - I'm Every Woman via Jimmy Kimmel Live1973年にファンクバンドのルーファスのボーカルとしてデビューしたチャカ・カーンがソロ活動を開始した1978年のデビュー曲に発表したのがI'm Every Womanだった。今から振り返ると四十年前の音楽だけれどもちっとも古びない感じがして改めて良いと思う。R&B(リズムアンドブルース)の楽曲では比較的に珍しくて爽やかな印象を与える。クールなソウルとしてはブランニューヘヴィーズのNever StopやジャミロクワイのVirtual Insanityのようなシャズファンクの乗りが好きな一曲だ。お洒落な心地良さというか、または気持ちから捉えると和やかな楽しさが際立っている。総じて素敵な音楽だろう。久々に聴いたチャカ・カーンの動画はアメリカのJimmy Kimmel li…

ジョナサン・モフェットのドラムの8ビートの切れ味の鋭いグルーヴ

イメージ
Michael Jackson's Drummer Jonathan Moffett Performs "Beat It" via Drumeoドラマーのジョナサン・モフェットがマイケル・ジャクソンのBeat Itを叩いている動画を見付けた。8ビート(eighth note rhythm)の切れ味の鋭いグルーヴに引き込まれる。リズムを刻んでいるだけで素晴らしいドラムの世界を著しく覚える。いつまでも聴いていたくなる感じがして本当に凄い。8ビートのドラム:グルーヴの基本的なパターンVier viertel takt by Havelbaude [Public domain], via Wikimedia Commons譜面では四分の四拍子で、一小節に八回のハイハット(金物)を打つ間にバスドラム(大太鼓)とスネアドラム(小太鼓)を一回ずつ交互に、二回、繰り返して叩く…

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…

ソーシャルメディアでのサイトの宣伝効果はアクセス解析のリファラー/参照元のURLで分かる

イメージ
サイトのアクセスアップのためにソーシャルメディアへリンク付きの投稿を行う。Social media by FirmBee [CC0], via Pixabay実際にどのくらい人が来るかはアクセス解析(Googleアナリティクスなど)のリファラー/参照元にソーシャルメディアのURLが表示されるかどうか、そして表示されれば数によって投稿のリンクが、何回、押されて使われたかが分かる。自分で行わず、他の誰かがサイトを共有した場合でも同じで、ソーシャルメディアでの宣伝効果がアクセス解析のリファラー/参照元には反映している。主なソーシャルメディアのリファラー/参照元Facebook/フェイスブックfacebook.com(デスクトップ)m.facebook.com(モバイル)l.facebook.com(Link Shimのデスクトップ)lm.facebook.com(Link Shimのモバイル)…

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に関与するとは相当な経歴…

cssで画像に文字を重ねる:グリッドデザインでアイテムのスペースを合わせて表示する

イメージ
サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えてレスポンシブでデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法はグリッドデザイン:displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。目次グリッドデザインで画像に文字を重ねるソースコード画像の中央に文字を重ねる画像の右上に文字を重ねる画像の左上寄りに文字を重ねる文字の位置取りを余白で調節する区分けしたレイアウトで画像に重なる文字を整序させる画像の中央の下のスペースの中央に文字を重ねる文字を整序して位置取りを余白で調節する文字の幅を確保しながら画像に重ねるグリッドデザインで画像に文字を重ねるソースコード画像に文字を配置するスペースの割合を計算する計算されたスペースの中に文字を実際に配置するcssのdisplayのgr…

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に変更した…

独自ドメインは検索結果での表示回数とクローラーの平均巡回数を増やす

イメージ
検索エンジンから好かれてブログのアクセスが大きく伸びると嬉しかったはずの独自ドメインへの移転は三ヵ月が過ぎても無料ブログの頃と殆ど変わらない。日々、更新して記事を増やしているにも拘わらず、訪問者がさほど増えないのだからドメインパワーのSEO効果もないに等しいといわざるを得ない。検索結果での表示回数は順調に増えている検索パフォーマンス via Search ConsoleただしGoogle検索での状況は改善している。一日の表示回数が二千回に迫っていて千九百回を越え始めたのが有り難い。無料ブログから独自ドメインへ移転して三ヵ月を過ぎてからかつてなかった状況が生まれている。以前、七百件以上の記事を公開していても無料ブログの頃の表示回数は千五百回前後で先へ進み難かったんだ。独自ドメインへ移転して三ヵ月で記事をさらに増やしたからGoogleで表示回数が幾らか増えるのは当たり前かも知れないけど、もう…

Androidスマホのhtml編集の無料アプリ:WebMaster's HTML Editor Liteのレビューと使い方

イメージ
サイト作成のためにAndroidスマホのhtml編集の無料アプリをPlayストアで探したらWebMaster's HTML Editor Liteが使い易くて良いと思った。目次WebMaster's HTML Editor LiteのレビューWebMaster's HTML Editor Liteの使い方画面の最上段の五つのスイッチスイッチを押した後に出る選択肢NEW FILEを作成する際の五種類のタイプPreferencesのSettings(設定)の七項目と内容SettingsのOther(その他)の五項目と内容画面の最下段一段目のサブツールバー検索メニューの三つの操作方法画面の最下段二段目のメインツールバーWebMaster's HTML Editor Liteのレビュー入力画面 via WebMaster's HTML Editor Lit…

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

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