些細な日常
所有サイトが複数の場合に他の所有サイトのホームページやブログやソーシャルメディアを指定する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"」を追加する。リン…
1973年にファンクバンドの ルーファス のボーカルとしてデビューした チャカ・カーン がソロ活動を開始した1978年のデビュー曲に発表したのが I'm Every Woman だった。今から振り返ると四十年前の音楽だけれどもちっとも古びない感じがして改めて良いと思う。 Chaka Khan - I'm Every Woman on Jimmy Kimmel｜Chaka Khan R&B（リズムアンドブルース）の楽曲では比較的に珍しくて爽やかな印象を与える。クールなソウルとしては ブランニューヘヴィーズの Never Stop や ジャミロクワイの Virtual Insanity のようなシャズファンクの乗りが好きな一曲だ。お洒落な心地良さというか、または気持ちから捉えると和やかな楽しさが際立っている。総じて素敵な音楽だろう。 久々に聴いたチャカ・カーンの動画はアメリカの Jimmy Kimm…
Michael Jackson's Drummer Jonathan Moffett Performs "Beat It"｜Drumeo ドラマーの ジョナサン・モフェット が マイケル・ジャクソン の Beat It を叩いている動画を見付けた。８ビート（eighth note rhythm）の切れ味の鋭いグルーヴに引き込まれる。リズムを刻んでいるだけで素晴らしいドラムの世界を著しく覚える。いつまでも聴いていたくなる感じがして本当に凄い。 ８ビートのドラム：グルーヴの基本的なパターン Vier viertel takt by Havelbaude / Public domain 譜面では四分の四拍子で、一小節に八回のハイハット（金物）を打つ間にバスドラム（大太鼓）とスネアドラム（小太鼓）を一回ずつ交互に、二回、繰り返して叩く。 マイケル・ジャクソンの Beat It では冒頭から８ビ…
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…
サイトのアクセスアップのためにソーシャルメディアへリンク付きの投稿を行う。 Social media by FirmBee / Pixabay 実際にどのくらい人が来るかはアクセス解析（ Googleアナリティクス など）のリファラー／参照元にソーシャルメディアのURLが表示されるかどうか、そして表示されれば数によって投稿のリンクが、何回、押されて使われたかが分かる。 自分で行わず、他の誰かがサイトを共有した場合でも同じで、ソーシャルメディアでの宣伝効果がアクセス解析のリファラー／参照元には反映している。 主なソーシャルメディアのリファラー／参照元 Facebook ／フェイスブック facebook.com（デスクトップ） m.facebook.com（モバイル） l.facebook.com（Link Shimのデスクトップ） lm.facebook.com（Link Shimのモバイル） ※Link Shi…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableのソースコードの冒頭付近に normalize.css が付いている。 normalize.cssはCSSの標準化を意味していてブラウザ毎のサイトのHTMLのデフォルトのデザインの互換性を保つためのCSSの独自のソースコードなんだ。 normalize.cssはデフォルトのHTML要素のスタイルにクロスブラウザを一貫して良く供給する小さなCSSファイルです。それは従来型のCSSリセットへの現代的でHTML5に対応した代替です。 原文 Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, …
サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えて レスポンシブ でデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法は グリッドデザイン ：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。 目次 グリッドデザインで画像に文字を重ねるソースコード 画像の中央に文字を重ねる 画像の右上に文字を重ねる 画像の左上寄りに文字を重ねる 文字の位置取りを余白で調節する 区分けしたレイアウトで画像に重なる文字を整序させる 画像の中央の下のスペースの中央に文字を重ねる 文字を整序して位置取りを余白で調節する 文字の幅を確保しながら画像に重ねる グリッドデザインで画像に文字を重ねるソースコード 画像に文字を配置するスペースの割合を計算する 計算されたスペースの中に文字を実際に配置する CSS のdisplayのgr…
Bloggerはウェブのテーマのカスタマイズ／Bloggerテーマデザイナーの「背景」からヘッダー画像を設定できる。デフォルトで用意された中から画像を選んで取り付けるとブログの最下段のフッターには「テーマ画像の作成者」と本人の名前のオリジナル画像のページへのリンクも表示される。自分で写真や絵をアップロードしてヘッダー 画像を取り付けるとブログのフッターには何も出ない。 僕はブログのヘッダー画像に写真を使っているけれども自分で撮影するとか作成したわけではない。 幸せの良さ として 素晴らしく気に入ったクリスティン・フォークトの写真 を使っている。ライセンスが パブリックドメイン と変わらないクリエイティブコモンズのCC0だから出典を示さず、誰でも勝手に使って良いんだけれども気前良く提供してくれた本人への感謝を込めて少しでも紹介しておきたいと思う。 ソースコードで「テーマ画像の作成者」は表示できる Blogg…
2017年の公式テーマ のContempoとSohoとEmporioとNotableのカスタマイズで、 記事／追加ページの固有タイトルの見出しタグをh3からh1に 、そして ブログ名の見出しタグをh1からh2に 変更した。何れも HTML構文 と SEO対策 のためだけれどもさらに他の部分との見出しタグのバランスを考えるとページリスト（先頭）と人気の投稿のガジェットを使っているので、それぞれのh3をh2に変更するべきなんだ。 ページリスト（先頭）はトップやアーカイブなどのインデックスページで表示される。見出しタグがh3だとh1のブログ名に対して大きさが一つ飛んでしまっている。h2にすると順番良く並んだマークアップになる。 人気の投稿は記事／追加ページの本文の下に置かれている場合に見出しタグを変更した固有タイトルのh1に対してh3だとやはり一つ飛んでしまっていてマークアップの流れが損われているからh2に変更した…
検索エンジンから好かれてブログのアクセスが大きく伸びると嬉しかったはずの 独自ドメインへの移転 は三ヵ月が過ぎても無料ブログの頃と殆ど変わらない。 日々、更新して記事を増やしているにも拘わらず、訪問者がさほど増えないのだから ドメインパワーのSEO効果 もないに等しいといわざるを得ない。 検索結果での表示回数は順調に増えている 検索パフォーマンス｜ Search Console ｜ Google ただしGoogle検索での状況は改善している。一日の表示回数が二千回に迫っていて千九百回を越え始めたのが有り難い。無料ブログから独自ドメインへ移転して三ヵ月を過ぎてからかつてなかった状況が生まれている。 以前、七百件以上の記事を公開していても無料ブログの頃の表示回数は千五百回前後で先へ進み難かったんだ。 独自ドメインへ移転して三ヵ月で記事をさらに増やしたからGoogleで表示回数が幾らか増えるのは当たり前かも知れないけど…
サイト作成のために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のレビュー 入力画面｜WebMaster's HTML Editor Lite｜ We…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableでは記事ページに新しい投稿や前の投稿のページネーションがデフォルトで付いてないけれどもHTML編集のカスタマイズによって付ける方法が見付かって些細な日常で取り入れてみた。 ソースコードでは最初からページネーションのスペースが取られていて表示しないようにしているだけだからブログの記事ページに設置するための考え方は一から始めるよりは速やかなのが助かる。 目次 ページネーションを取り入れる二つの手順 独自タグでページネーションを設定する方法（Sohoは省略可能） 独自タグでページネーションを配置する方法 CSSでページネーションにデザインを付ける ページネーションの位置取りを調整する方法 ページネーションの上下の余白を調整する方法 ページネーションを取り入れる二つの手順 テンプレートに設定する 必要なリンクを生成する テ…