ラベル(コンテンツ)が付いた投稿を表示しています すべて表示

HTMLのemとstrongとiとbの使い分けについて

イメージ

サイト作成でHTMLのemとstrongはHTML5/Living Standardで強調と重要性の違いがあるもののどちらも使い方が似ていて分かり辛い。そして初期のデザインが斜体と太字なのがそれぞれにiとbと同じなので、見た目からどちらを使っても良いのかと混乱してしまう。 em/強調タグとは何か strong/重要性タグとは何か i/斜体タグとは何か b/太字タグとは何か 紛らわしい四つのタグの意味をしっかり捉えて的確に使い分けができるようにしたい。 em/強調タグとは何か HTMLのemタグのemはemphasis/強調の冒頭の二文字で、コンテンツの強調を表すために使われる。 em要素は、要素のコンテンツの強調を表す。 コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。 強調の設置は、文の意味を変更する。このように要素は、コンテンツの不…

Dropboxで直リンクのURLを取得する方法

イメージ

クラウドストレージの Dropbox はサイトで自由にコンテンツを表示できる直リンクのURLをあらゆるファイル形式で取得することができる。 Dropboxの共有リンクのURL 直リンクをURLを取得するには共有リンクが有効になってなくてはならない。 Ringtone|Dropbox ファイルのメニューの「リンクをコピー」から共有リンクを取得できる。 DropBoxの共有リンクのURLの例 https://www.dropbox.com/s/gmgraajvzjninyg/Ringtone-Original%2014.ogg?dl=0 ドメインの「www.dropbox.com」から共有リンクのコードとファイル名が半角スラッシュ(/)に区切られて続いて最後にパラメーターの「?dl=0」が付く。 アクセスするとDropboxのファイルのプレビューになる。 パラメーターの「d…

iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio

イメージ

サイトで他のページを表示するiframeタグはYouTubeの埋め込み動画などで良く使われるけれども画像のimgタグと異なり、コンテンツの縦横比をレスポンシブで維持することができない。なのでデバイスの画面幅に一杯で表示するようにすると訪問者の異なるデバイスの画面幅によってコンテンツの縦横比が変わってしまうのが厄介だった。 以前からCSSのaspect-ratio要素がiframeの縦横比を一発で指定する方法として出ていて理想的だったけれども対応するブラウザが少なかった。しかし最近になって漸く主要なブラウザの多くが対応するようになった( Can I Use )からついに自分のブログでも取り入れることに決めた。 aspect-ratioのマークアップ 10 modern layouts in 1 line of CSS|Google Chrome Develop…

サイトのGoogle検索へのインデックスを向上して検索結果に表示し易くしよう

イメージ

サイトがGoogle検索に表示されない原因は大きく分けて二つある。 一つはインデックスされず、Googleにサイト内容が把握されてない。もう一つはランキングが低く、インデックスされたページがあってもサイト評価が低くて検索結果の順位を落とされるか消されている。 ランキングの向上に関しては余りはっきりしたことはいい難いし、Google検索のサイト評価がどのように行われるかはGoogleの関係者も分からないくらい複雑怪奇な面がある。個人的に 公式の検索エンジン最適化(SEO)スターターガイドが最も信頼できる と思う。ランキングの方向性(何が良くて何が悪いか)がGoogle検索の視点から示されているからたとえランキングが更新されても付いて行けるようなサイト運営が可能になるに違いない。 本稿ではインデックスの向上を考える。ランキングと違って決められたことをやれば大丈夫…

無限スクロールを作成する:JavaScriptのIntersection ObserverにFetchを組み込んだプログラム

イメージ

サイトの無限スクロールのプログラムのアイデアは大きく二つの部分に分けられる。一つは要素判定で、今のページが画面のどこまで来たら次のページを表示するように動作するかを決める。もう一つは生成処理で、次のページをAjax通信でサーバーから読み込んで今のページに実際に追加する。JavaScriptのプログラムで前者に正しく画面と要素の交差を監視できて最適な Intersection Observer API 、後者にAjax通信の時間差の難点も克服できて便利な Fetch API を使って無限スクロールを作成する方法を取り上げる。 無限スクロールのプログラムの基本的な流れ Brown grasses under white clouds at daytime by Glenn Carstens-Peters  on Unsplash 通常、同じデザインのページがページネー…

iframeタグのコンテンツの画像比をCSSのcalc()でレスポンシブに整える

イメージ

HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。 YouTube や ドライブ など、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSの padding や position を使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可能で、…

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

イメージ

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

JavaScriptの画像などの読み込みが遅い場合に使いたいpreloadのソースコード

イメージ

ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。 二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイル audio:音楽 video:動画 track:字幕 script:JavaScript stylesheet:CSS font:フォント image:画像 fetch crossorigin:XHR/fetch worker:Wo…

JavaScriptの繰り返しボタン:押した回数を数えて実行結果を元に戻すプログラム

イメージ

サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。 onclick自体はHTMLの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにCSSを付けて作成できるだろう。 HTMLとJavaScriptでボタンを作成する 押すと画像が二枚目に切り替わる。 サンプルのソースコード HTML <img id="change-images" src="一枚目の画像URL" data-second-im…

アドセンスの審査で最終的に合格するための十分なコンテンツとは何か

イメージ

何度も落とされてもう無理だと思いながら アドセンスに合格した 瞬間にはガッツポーズを止められなかった。嬉しさの余り、悲しみを余儀なくされた数だけか、何度も繰り返して飛び上がるように部屋を駆け回ってしまうのも造作なかった。どうしても承認されないわけには行かない気持ちが非常に強かったためだろう。 A woman surrounded by many soap bubbles by Alejandro Alvarez on Unsplash 改めて アドセンス に合格できた理由を考える 大前提なのはAdSenseヘルプの コンテンツポリシー に違反しないサイト作成だけど、しかし殆ど適合しても承認されず、最も厳しいと感じるのが不合格の通知の承認されませんでしたというメールの「不十分なコンテンツ」なんだ。落とされる度に目にするし、具体的な指示がなくて、一体、何がどうなっている…

独自ドメインのサイト運営でGoogle検索への初めてのパーフェクトインデックス

イメージ

僕がサイト運営を始めたのは2002年の 詩のホームページ で、大体、五年後くらいに Google検索 からのアクセスアップを考えるようになったかも知れない。すると十年を過ぎてついに漸く初めて達成されたけれども Search Console でブログの些細な日常の七百件以上の全ての記事がGoogle検索にインデックスされてパーフェクトなのが確認された。ページ数が増えると部分的に抜け落ちて難しくなってしまう。押し並べて百以上か、サイトの管理人として頑張ってもいつも全てのページのインデックスは無理だったのに サイトアドレスを独自ドメインに切り替えた 途端に一ヵ月ちょっとであっさり夢が一つ叶ってしまった。 サイトマップ インデックス via Search Console Google検索へのインデックス はサイトが検索結果に表示されるための第一条件なんだ。サイト内容がページ毎に…

サイトのSEO対策のタイトルの文字数は三十文字前後がオススメなんだ

イメージ

人気のBloggerブログは専門性とオリジナリティーの高い記事で盛り上がっている

イメージ

Bloggerブログで一日千人以上のアクセスを得ているブロガーを何人か見付けて来た。最高では一日数万人くらいまで達成しているので、もしかしたらもっと人気のブロガーもいなくはなさそうだ。 一日十万人近くのアクセスを得る のは不可能ではないと想像してしまう。 Two Maltese puppies in the basket by haidi2002 [ CC0 ], via Pixabay 僕も頑張れば同じBloggerブログの些細な日常でアクセスアップはきっと大丈夫だと本当に励みになる。そして訪問者が一日千人という羨ましい気持ちからは何が良くて盛り上がるのかを見習いたくもなるよ。 専門性とオリジナリティーが高いと人気だ 個人的に耳が痛いし、雑記ブログとは対極的な運営だけど、一つのテーマに特化したBloggerブログが概して一日千人以上のアクセスを得ている越ているよ…

コンテンツSEOの核心はキーワードへの情報を的確に載せておくサイト作成だ

イメージ

画像や動画などのヴィジュアルコンテンツは訪問者を大きく引き付けて被リンクを増やす

イメージ

十月下旬で今年も後二ヵ月しかない。辛いのはブログのアクセスが予定通りに伸びるかどうか。年内に一日数百人を達成したい。 Black and white woman by felixheidrich91 [ CC0 ], via Pixabay 今月に入ってからやっと訪問者が一日百人を越え続けている。Googleでの表示回数が千回を確実に越えていて クリック数が百回を偶に越えている という状況だ。 ブログを開設して十ヵ月で一日百人のアクセスだから平均すれば一ヵ月に十人ずつ増えているわけで、 サイト広告で生活費を稼ぐには一日何千何万のアクセスが必要 なのに何年もかかるのでは伸び率が悪過ぎて死んでしまうんだ――。 人気ブロガーの イケダハヤト や まなしば にはなれないのか。あちこち宣伝して回りながら人々の注目を集めるのは大変で、やっても上手く行くかどうかは本当に難しいし、結局は検索…

Googleからブログに一日百人の訪問者を得たから何が良かったかを認識してアクセスアップをさらに加速しよう

イメージ

Tumblrが検索エンジンからのアクセスアップ/SEOに弱過ぎるのはなぜか

イメージ

かつて些細な日常は Tumblrブログ で開設していて、一年半以上、SEO(検索エンジン最適化 )対策を踏まえながら必死に運営して検索エンジンから一日二十五人くらいまでしかアクセスアップを果たせなかった。 Bloggerブログに移転したら半年で一日五十人を越えている。おかしいと思うし、僕自身は記事の作成を特に変えてないので、Tumblrブログが検索エンジンからのアクセスアップに弱過ぎるとしかいいようがなくなってしまう。 なぜかと考える。たぶん大きいのは Google からソーシャルメディアとして扱われているせいかも知れない。検索エンジンを使っていてTumblrに関連したキーワードにはTumblrブログが圧倒的に強いけど、しかしそれ以外は殆ど見かけない。ソーシャルメディアのコンテンツというと検索結果には出て来ないのが普通だと思う。アカウント自体のサイト評価はとて…

検索エンジンからブログに来る人はキーワードに相応しい記事を求めている

イメージ

ページランクのSEO効果はコンテンツとの相互作用から捉えよ

イメージ

Yahoo! Japan のYahoo!カテゴリが終了すると報じられた( 「Yahoo!カテゴリ」サービス終了について )。アメリカのYahoo!と同じように日本でもついに不要と判断されたらしい。 天使のモノクロームが登録されて とても嬉しかったから残念としかいいようがない。たった一年くらいで、しかも期待されたアクセスアップには殆ど繋がらなかったから構わないかも知れないけれども念願が叶った思い出の場所を失うのは寂しいかぎりだ。もう二度と見聞きされなくなる、実地には。 しかし改めて纏めておきたい、Yahoo!カテゴリが期待外れだったというサイトのアクセスアップに繋がらなかった原因について。 僕がサイト運営で不充分だったとすれば改善しなくてはならない。いつまで経っても同じ過ちを繰り返すばかりでは目も当てられないだろう。全ての所有サイトが成長しないのも当たり前だから本…

Google検索のドメインのサイト評価の特徴

イメージ

ブログの ページのダウンロード時間を下げるように修正して Google検索でのサイト評価が元に戻るかどうかが気が気ではない。一ヶ月くらい落ちていたから上手く行くにしても同じくらいかかってしまいそうだ。直ぐには全く変わらないし、 Search Console で分かるデータも殆ど横這いでしかない。ただ下げ止まっているのだけが確実だと思う。 しかしながら最も恐ろしいのはGoogle検索でサイトのURLの冒頭に「site:」を付けて検索すると表示できるというGoogle検索のサイトのインデックスの状況で、ブログのトップページが先頭に来てなかった。 インデックス状況 via Google 一般的にサイトのトップページは子ページからリンクが集中していてページランクが最も高いからサイト評価も相応に頭一つ抜け出しているはずなんだ。インデックスの状況で、先頭に来てないトップペー…