列を揃える罫線を引いてテーブル風にしてみるキャプションと背景色をつけてみましたTableタグを使わずにulとliを使ったリスト形式で表組み(段組み)を作るほうが、セマンテックな観点からは適切な場合があります。SEO的にも多少は有利だと思います。綺麗に仕上げるコツはspanの使い方にあります。罫線や背景色を付して表組のセルがあるように見せることもできます。スポンサーリンクテーブルとリストの違い表組みを作るときはTableタグを使うのが一般的です。Tableタグを使って表組み(段組)を作ると、セルとセルの間の論理関係が明確になりません。Tableを使って書くとたとえば、3人の人物の担当楽器を表にする、という場合、Tableタグを使った表のソースコードは下記のとおり。「人名と楽器の組み合わせだから、横方向に見ればよいのだろう」と見当がつきます。HTMLのタグ自体には下図のどちらの矢印に沿って読むべきか明示されていません。li要素を使って意味を明確にするこのようなケースでは、liタグを使ってリスト形式で記載したほうが、HTMLのソースコード的には意味がわかりやすくなります。ドラムこう書けば、人名と楽器名の対応関係が3つあるという論理構造が明確です。コンテンツの内容とHTMLタグが意味的に合致しているので、検索エンジンにとってはこちらの方がわかりやすく、SEO的にも多少は有利になるかもしれません。リスト(liタグ)で段組み風に見せる方法しかし、ulとli要素によるリスト表示は、ブラウザで見たときに、Tableタグのような整ったレイアウトになりません。文字幅が微妙に異なるため、2番目(楽器名)の頭がずれます(下図の黄色部分)。スペースの挿入で多少は調節できますが、アルファベットやカナが混在するとどうしても少しずれてしまいます。列を揃えるこのズレを解決するため、spanタグを使って1番目(上の例でいうと人名)の要素をフロートし、2番目(楽器名)のspan要素に左マージンを設定して位置を固定してみます。実際の表示結果はこうなります。愛美ちゃんピアノTomoくんベースさおりさんドラムこれならきっちり揃います。ブラウザの表示ではデーブルタグを使っているように見えますが、実際のソースコードは以下のようにulタグとliタグで構成されています。(なお、Ulタグに「list-style:none;」を指定して各項目の頭の丸ポチを非表示にしています。110px;}罫線を引いてテーブル風にしてみる前項で作ったリストに罫線を引いて、表組み風にしてみました。愛美ちゃんピアノTomoくんベースさおりさんドラムブラウザの表示ではTableタグを使った表に見えますが、HTML的にはあくまでリスト(ul,li)です。検索エンジンのロボットもこれをリストと認識します。最初のli要素にclass(.first)を付けて、上下左右にborderを設定しています。二段目以下のli(.next)は、left,rightとbottomにのみborderを設定します。class=”dan2′′)にborder-leftを設定して、独立したセルのように見せています。#ccc;}キャプションと背景色をつけてみましたキャプションと背景色をつけると、もっと表組み風になります。実際にli要素とcssで表組みした作例です。愛美ちゃんピアノTomoくんベースさおりさんドラム背景色は、liタグに背景色を指定して列ごとの色を決めたうえで、右半分の楽器名の箇所(span.dan2-r)にも背景色を指定して、その部分の色指定を上書きしています。ソースは次のとおりです。フリーのWebツールでHTMLを圧縮HTMLの最小化(縮小、圧縮)をするフリーのウェブサービスを3つ紹介します。これらのサイトの特徴は、まず無料であること、そして、縮小後のHTMLファイル内のJavascriptが正常に作動することです。Adsenseの広告が表示されないトラブルもないようです。複数のHTMLファイルの自動的な一括処理はできません。記事を読むAdsenseのレスポンシブユニットをスマートフォンサイトのファーストビューに設置する方法Adsenseのレスポンシブユニットをページ上部に配置すると、スマートフォンで見たときにレクタングル広告が表示され、規約違反(ポリシー違反)になります。この問題はCSSのメディアクエリを利用することで回避できます。記事を読むFC2ブログの「注目記事・ランキング・広告」を削除/非表示にする方法【スマホ版】FC2ブログの無料版をスマートフォンで表示すると、多数の広告バナーとともに、フッターに「注目記事」や「ランキング」が挿入されます。これらを消す方法を考えました。CSSやHTMLを編集することで、非表示にしたり、移動や削除ができます。記事を読むFC2ブログからワードプレスへ-SEOに配慮した移転の方法FC2ブログからWordpressに移転する方法です。文章と画像を移転したら、SEO対策のためにMETAタグで転送を設定し、検索エンジンに引っ越したことを知らせます(301リダイレクトと同等の効果があります)。記事のURL形式をFC2形式から変更する場合は、htaccessでの転送(再転送)も必要です。規約違反に気づいたら自己申告しましょうAmazonアソシエイトでは、新規サイトにアフィリエイトリンクを貼るときは、事前に承認を受ける必要があります。この手続きを怠ると規約違反です。報酬支払停止、アカウント停止などの処分があります。規約違反に気づいたら、Amazonに自己申告して審査を受けましょう。わたしはリンクはそのままの状態で申請して、承認をもらいました。Windowsパソコン用HTMLファイルをアップロードする際に、圧縮してサイズを縮小しておくと、ページ表示速度が早くなり、SEO的によいとされます。この記事では、自分のパソコン上で、フォルダ内のHTMLファイルを一括して圧縮する方法をご紹介します。MacとWindowsに分けてご説明します。Server)の「エコノミー」プランは、MySQL(データベース)が使えません。裏技を使えば、Wordpressの導入が可能です。Integrationというプラグインを使って、MySQLなしでWordpressをインストール、運用する方法をご紹介します。さくらインターネットのライトプランや、ロリポップのエコノミープランでも同じ方法が使えます。)ミニバード(ネットオウル社)のレンタルサーバーをレビューします。評判どおり安定しています。今までサーバ落ちなどのトラブルはないです。転送量の制限(上限)に余裕があり、反応速度や転送速度も問題ないです。Wordpressの脆弱性対策へのセキュリティ対策もおこなわれています。料金支払いはコンビニ、クレジットカード、銀行振り込みです。記事を読むWorkFlowyのNoteを非表示/全文表示にする方法WorkFlowyの初期設定では、Noteは最初の一行が常時表示されています。これを非表示にして、アウトラインを見やすくするためのCSSを作成しました。ブラウザ拡張機能「Stylish」を使ってWorkFlowyのデザインを変更する方法を解説します。Noteを全文表示するためのテーマ&スキンや、使い方もご説明します。」(ノンブレーキングスペース)が黒丸「・」になってしまう問題が指摘されています。その原因と解決法を考えてみます。