些細な日常

サイト作成でhtmlの番号なしリストのulや番号付きリストのolを使ってcssの中寄せ：text-alignのcenterを指定した場合に内側のリストタグのliしか移動せず、ulの中黒やolの数字のマーカーが付いて来なくて左端に残ったまま、ずれてしまうのを修正できる方法はないか。
cssのlist-style-positionのinsideを使う
考えて番号なしリストのulや番号付きリストのolにcssのlist-style-positionのinsideを指定するとリストタグと一緒に中黒や数字のマーカーも位置合わせが可能になると分かった。
同時にcssのtext-alignのcenterを指定しておくと中寄せになるし、または値をrightに変えれば右寄せでもマーカーがリストタグと揃って移動するから大丈夫なんだ。
cssのlist-style-positionのinsideを使うとリストタグのマーカーをリストの内側に埋め込むスタイルになる。番号なしリストのulや番号付きリストのolのデフォルトのデザインの値はoutsideだからマーカーがリストの外側に置かれていて位置合わせを変えても付いて来ないわけだ。
マーカーを中寄せした縦並びリスト
中寄せしてもマーカーが一緒の番号なしリスト
html
<ul class="center-list"> <li>中寄せしても</li> <li>マーカーが一緒の</li> <li>番号なしリスト</li> </ul>
css
.center-list {text-align:center;list-style-position:inside;padding-left:0;}
実用上、位置合わせとマーカーの埋め込みだけではリストの先頭にulやolに特有の余白が残ってバランスが悪いので、cssのpadding-leftの0も指定して消すと良いと思う。
cssのlist-styleでも全く同じに指定できる
list-style要素は他のlist-style-type（マーカーの種類や消去）やlist-style-imageの値と併せて使えるのが便利なんだ。値は一つだけでも構わないし、list-style-position要素を完全に代用できる。
サン…

サイト広告のアドセンスを使う場合には様々な規約違反を防がなくてはならない。ペナルティーから一度でもライセンスを失うと取り戻せなくなるかも知れない。サイトにアドセンスのサイト広告を載せたら利用規約やプログラムポリシーに細心の注意を払って運営するのが大切だ。

アドセンスの様々な規約違反の中にプライバシーの項目が含まれている。サイトに載せたサイト広告での訪問者の個人情報の取り扱いについてプライバシーポリシー／個人情報保護方針を設置する必要がある。
サイトにアドセンスのプライバシーポリシーをどのように設置するかの方法には法律が影響するし、個人サイトと法人サイトで記述は幾らか変わると思う。欠かせないアドセンスのプライバシーポリシーの基本部分は同じにせよ、概して後者は前者よりも商取引での制限が社会的にさらに加えられるだろう。
僕は個人サイトを運営しているので、アドセンスのプライバシーポリシーの基本部分をしっかり覚えてサイトに的確に設置するつもりでいる。

目次
アドセンスの利用規約のプライバシープライバシーポリシーの設置に必要な二つの要件アドセンスのプログラムポリシーのプライバシーアドセンスのコンテンツポリシーのCookieの使用サイトでプライバシーポリシーをどう記述するかアドセンスのプライバシーの一般的な記述例第三者配信による広告掲載のための追加項目第三者配信による広告掲載の追加項目の記述例EUユーザーの同意ポリシーへの対応

アドセンスの利用規約のプライバシー
お客様は、本サービスを利用するに際しては、常に、明確に表示され、簡単にアクセス可能なプライバシー ポリシーを広告媒体に必ず付すものとし、当該プライバシー ポリシーにより、Cookie、デバイス特有の情報、ロケーション 情報、および本サービスに関連してエンド ユーザーのデバイスに保存され、当該デバイスにおいてアクセスされ、当該デバイスから収集されるその他の情報（場合により、Cookie 管理に関するエンド ユーザーのオプションに関する情報を含みます）についての明確かつ包括的な情報をエンド ユーザーに提供するものとします。Cookie、デバイス特有の情報、ロケーション情報または本サービスに関連したエンド ユーザーのデバイスに関するその他の情報の保存およびアクセスに対してエンド ユーザーの承諾が法律により要求される場合は、エンド ユーザー…

Googleの無料サービスでアクセス解析のアナリティクスをサイトのホームページやブログに使う場合にはプライバシーポリシーを同時に設置するように利用規約で定められている。

法律が影響するから個人サイトと法人サイトで、プライバシーポリシーの捉え方が幾らか変わる。基本部分は同じで――アナリティクスの利用規約のプライバシーに示される以外ではない――記述では前者よりも後者に社会的な制限が強い部分が商取引に関連する法律に応じて付け加えられそうだ。僕は個人サイトをやっているからアナリティクスのプライバシーポリシーの基本部分を覚えてサイト運営に取り入れたい。

目次
アクセス解析の個人情報保護の必要性アナリティクスの利用規約のプライバシーサイトのプライバシーポリシーの設置アナリティクス用の一般的な記述例広告向け機能の追加項目の記述例EUユーザーの同意ポリシーへの対応

アクセス解析の個人情報保護の必要性
サイトで訪問者のアクセスのデータを入手しているために訪問者に固有の経緯を開示するのが望ましい。
アナリティクスが使われているかどうかはサイトのソースコードに載っているけれども表向きは全く分からない。訪問者は知らない間にサイトに来たとかページを移動したなんてデータを収集されていて後から知ったら騙されたみたいに気分を害されないとはかぎらない。無条件には想定されないし、アクセスのデータを勝手に取られて大きく悲しむ人も概して少ない世の中だろう、知りたい人だけが確実に知るべき方法を与えておくのがせめても必要なんだ。
人々の個人情報の感覚が変わって――欧州連合ではブラウザのCookieのデータのサイトでの取り扱いについてもう既に法制化されている――特有の法律が強く施行されたりすればサイトで最初に告知するように求められるかも知れないし、常日頃と世の中の動向や提供されるサービスの更新へ注意しておいても良いと思う。
アナリティクスの利用規約のプライバシー
実際のGoogleアナリティクス（2018年6月時点）の利用規約のプライバシーを読む。
お客様は、Google が個人情報として使用または認識できる情報を Google に送信したり、第三者によるかかる行為を支援または許可したりしないものとします。お客様は適切なプライバシー ポリシーを用意および遵守し、訪問者からの情報を収集するうえで、適用されるすべての法律、ポリシー、…

Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン（縦横を均等に表示する／タイル張り）を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。
サイト作成でcssのGrid Layout：displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。

目次
Bloggerの投稿画像の横並びやグリッドデザインの前提条件個別の記事にcssのGrid Layoutを取り入れる記述についてBloggerの投稿画像にdisplayのgridを的確に反映させる新テーマでのソースコードの修正点旧テーマでのソースコードの修正点cssのGrid Layoutの画像向けの一般的な使い方横並びの2×0のサンプルグリッドデザインの2×2のサンプルグリッドデザインの2×1のサンプルグリッドデザインの縦横に細分化したサンプル

Bloggerの投稿画像の横並びやグリッドデザインの前提条件
投稿画像のレイアウト選択 via Blogger
何れの公式テーマでも共通して必要なのは投稿画像を選択する際の位置合わせで「なし」を選ぶ。さもないと画像に位置合わせのデザインが付いた領域タグのdivが付いて来て複数で改行するようになってしまう。横並びやグリッドデザインに不要なので、デザインを変えるにも非常に難しくならざるを得ない。
旧テーマだと投稿画像の位置合わせを外しておくだけでも複数枚を合わせて記事の横幅よりも小さければ横並びは可能で、さらに行毎に分けさえすればグリッドデザインも可能だと思う。
他のデザインが特に干渉しないようなので、cssのGrid Layoutを新しく取り入れても反映し易いんだ。
厄介なのが新テーマで投稿画像の位置合わせを外すだけでは付けた場合と同じようにやはり複数枚は縦並びにしかならない。調べると画像に付けられるオリジナルサイズへのリンクタグのaに付けられた「imageanchor="1"」というデザインの属性が影響している。それも削除して外せば記事幅よりも小さいかぎりで複数枚の横並びやグリッド…

ブログで待ちに待った瞬間が訪れた。というのもアドセンスの関連コンテンツユニットが開放されて使えるようになったためだ。管理画面を覗くと不意に関連コンテンツユニットをサイトに取り入れるヒントが表示されていた。使えないのにおかしいと怪しみながら広告の設定の広告ユニットから「＋新しい広告ユニット」を押すと以前は欠けていた部分が埋まっているのを初めて知った。
新しい広告ユニット via Google AdSense
無条件に使えるテキスト広告とディスプレイ広告、インフィード広告、記事内広告に関連コンテンツが新たに加わって四種類の広告ユニットの全てが設定可能に揃っていた。アドセンスで発表されたのは先一昨年の四月なので、僕が承認された同年九月からすると、二年半以上、経ってついに夢が叶ったと感じる。

目次
関連コンテンツユニットの使用条件関連コンテンツユニットの設定方法基本設定の四項目最適な配置のヒントラベル／見出しの有無関連コンテンツユニットのカスタマイズ周りの余白の取り方広告コードの編集

関連コンテンツユニットの使用条件
四つの広告ユニットで関連コンテンツだけが無条件に使えない。
関連コンテンツは、特定の要件を満たすサイト運営者様のみご利用いただけます。ご利用になるには、サイトのトラフィック量とページ数が最低要件を満たしている必要があります。この要件は、関連コンテンツによってサイトのユーザーに確実に優れたエクスペリエンスをお届けするために設けられています。
関連コンテンツ機能について via AdSense ヘルプ
関連コンテンツユニットの使用条件は基本的に二つしかない。すなわち「サイトのトラフィック量とページ数」なんだ。アドセンスとして特定の要件として挙げられていて実際にどのくらいの数字が必要なのかまでは提示されてない。
些細な日常の関連コンテンツ開放時点の状況
トラフィック量一日二百人前後／月間約8000PVページ数七百件以上八百件未満の記事
事前に調べていた情報では一日五百人／月間約19500PV以上のアクセスと百ページ以上のコンテンツが開放の目安として推測されていたんだ。
普通に考えて「ページ数」は自分でコンテンツを作成して増やせるからサイトをしっかり更新するかぎり、心配はなくて大変なのは 「トラフィック量」だけれども自分以外の訪問者に左右されるから何とかならないかとアクセスアップに励みつつも…

ブログで生活費を稼ぐプロブロガーの代表格がイケダハヤトだ。一つの生き方を新たな職業から作り出した魁だし、アクセスアップで人気者かどうかではもはや神レベルの実力を誇っている。何にせよ、ブログだけで知名度が断トツに高いのは本当に恐れ入る。
僕はプロブロガーを目指すけれども将来的に大丈夫と初めて実感したのはイケダハヤトの生活を知ったのが切欠だった。
サイト広告のアフィリエイトなどで金儲けが可能な状況は昔からあったけれども調べても生活費を稼ぐまで実現できるかどうかは良く分からなかった。どこかで誰かが収支報告を公開していてもコンテンツを捏造するのは比較的に容易な世の中だし、信憑性が、中々、得られなかったわけだ。
本当に難しいとなるとブログに人生を賭けるのは命取りだから止めておくにかぎると危ぶまれるし、飛んだ馬鹿を見て早死にしないために何年も踏ん切りが付かなかった。
しかしGoogleアドセンスが始まったのを気付いてサイト広告の収益率が従来の何十倍も高くなっているから生活費を稼ぐだけのプロブロガーも昨今の人工知能の検索エンジンからのアクセスアップ／SEO（検索エンジン最適化）対策と組み合わせて優れた記事を増やし続ければ十分にあり得ると自分で計算して予測を立てながら何とかなりそうだとライセンスを取得して決意を固めるに至った。
アクセスアップやアフィリエイトを考え直そうと改めて調べているうちに見付け出したのが現実に生活費を稼いでいるらしちと納得させ得る要するに神レベルのプロブロガーのイケダハヤトだった。
本人のブログのまだ東京で消耗してるの？（ブログ名は折りに触れて変わったりもするみいだ）が有名で、知ると耳に残る言葉なのが驚いた。ひっとしたらもう既にどこかで聞いていたみたいな印象まで与えられながら、一体、誰だろうの予兆に心震えるけど、とにかくこれならば人気者になるのも当然とすんなり頷いてしまうくらい世の中へ向けてキャッチーな表現が取られていた。いい換えるとコピーライト（広告案）のセンスが非常に高いのではないか。イケダハヤトはブログ名だけでも一言か二言の極僅かな口振りで皆を大きく引き付ける感じがするからアクセスアップとアフィリエイトのプロブロガーへの作家活動の実力を信用するし、現実に生活費を稼ぐ可能性を容認するには申し分がなかった、正しく。
イケダハヤトでも月収五十万円以下のプロブロガー
「プロブ…

僕がサイト運営を始めたのは2002年の詩のホームページで、大体、五年後くらいにGoogle検索からのアクセスアップを考えるようになったかも知れない。すると十年を過ぎてついに漸く初めて達成されたけれどもSearch Consoleでブログの些細な日常の七百件以上の全ての記事がGoogle検索にインデックスされてパーフェクトなのが確認された。ページ数が増えると部分的に抜け落ちて難しくなってしまう。押し並べて百以上か、サイトの管理人として頑張ってもいつも全てのページのインデックスは無理だったのにサイトアドレスを独自ドメインに切り替えた途端に一ヵ月ちょっとであっさり夢が一つ叶ってしまった。
サイトマップ インデックス via Search Console
Google検索へのインデックスはサイトが検索結果に表示されるための第一条件なんだ。サイト内容がページ毎に格納された状態を示している。Search Consoleではサイトマップとの照合で一目瞭然で、サイトの「送信」のページ数と「インデックスに登録済み」が一致すればパーフェクトだけど、とにかくインデックスされなければ待てど暮らせどGoogle検索からのアクセスアップはあり得ない。訪問者は断じて一人もやって来ないという。
だからパーフェクトインデックスはSEO（検索エンジン最適化） 対策でサイトを盛り上げる際には是非とも欠かしてならない最も肝心な要素に他ならなくて実現した気持ちは素晴らしいかぎりなんだ。
サイト運営で十年もかかったから振り返ると本当に難しかった。独自ドメインの有料サイト、年間千円程度の出費で初めてしかも速やかに可能だったわけで、かねて無料サイトのホームページやブログばかりやっていたのが不味かったのではないか。
SEO対策を考えると外部サイトからのリンクが多ければインデックスのためにサイトへやって来る検索エンジンのクローラーの平均巡回数を増やせるし、見付け出されたコンテンツが高品質ならばサイト評価も上がってクロールバジェットという一回当たりの割り当ても増やせるほどにパーフェクトは必ずしも無理とはかぎらないはずだけど、しかしながら結果的にどうも違うらしい。
有料サイトと無料サイトのサイトアドレス、前者は自分だけの独自ドメインと後者は他の人たちも数多く使っているサブドメインやサブディレクトリーのURLに対する検索エンジンでの…

サイトのコンテンツが縦に長くなる場合にページの下段から上段へ移動する戻るボタンを設置すると便利だと思う。方法もリンクと考え方が共通だからサイト作成に慣れていれば初歩的なマークアップで済むのが容易い。微妙に違うのはリンク先がサイトアドレスのURLではなくてコンテンツの目次のジャンプリンクの場合と変わらず、同一ページに置かれたどこかのhtmlタグのidでなくてはならない。なので記載するのはリンク元の戻るボタンのaタグに加えてリンク先のidの二ヵ所に増えている。

目次
戻るボタンのサンプル戻るボタンのフローティングについてフローティングの戻るボタンのサンプル四角の戻るボタンのサンプル角丸の戻るボタンのサンプル正方形や真ん丸の戻るボタンについて正方形の中揃えの戻るボタンのサンプル真ん丸の中揃えの戻るボタンのサンプル戻るボタンで良く使われる他のデザイン

戻るボタンのサンプル
リンク先
<h1 id="header">タイトル</h1>
リンク元
<a href="#header">↑</a>
戻るボタン
↑（ブログ名へ飛ぶ）
リンク先はh1などのコンテンツのhtmlタグにidを付け加えておく。リンク元はリンクのaタグを使ってhrefに半角シャープ（#）とidを指定する。
サイトで戻るボタンと反対に上段から下段へ送るボタンを設置する場合でも同一ページのidへ向けてリンクを貼る方法は全く同じだ。
戻るボタンのフローティングについて
ブラウザの画面にフローティングで固定して戻るボタンを表示するとサイトの閲覧中にいつでも押せるから非常に便利だと思う。
リンク元のhtmlタグにデザインのcssでpositionのfixedを指定して位置取りをtopかbottomかrightかleft（上か下か右か左）を使って決めるだけだからさほど難しくない。
フローティングの戻るボタンのサンプル
リンク元のhtml
<a class="return" href="#header">↑</a>
フローティングのcss
.return {position:fixed;right:2em;bottom:2em;}
戻るボタンの↑のリンクが画面の右から二文字分と下から二文字分の位置にフローティング…

サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ／タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイスに貼り付けられたりする。ファビコンとウェブクリップアイコンの何れの画像もサイトの顔みたいに訪問者へどんなサイトなのかを直感的に示すのに役立つ。
ファビコンの汎用的な設定について

サーバーに専用の画像をアップロードサイトのhead内にlinkタグで画像URLを記載
ファビコンのサイズ縦横16～64px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。
大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。
ファイル形式はpngが小さめの画像の画質には崩れ難くて適しているけれどもWindowsのIEブラウザがicoしか対応してない、またはiOSがpngに対応してない場合があるらしいから合わせるには注意しなくては行けないし、両方とも用意しても良いと思う。
ファイル変換はWebサービスのCloudConvertが高性能で、変換ミスが全くないし、個人的に良く使っている。日本語に対応したWebサービスではファビコン作成が使い易そうだ。
サーバーにアップロードする画像のファイル名は「favicon.png」や 「favicon.ico」などの「favicon」にしなくては動作しない。
そしてサイトのhead内にlinkタグで画像URLを記載してファビコンのファイルを呼び込む。
<link rel="icon" hrel="画像URL">
詳しくはrelの「shortcut icon」で、typeの「image/画像のMINEタイプ」も記載するけど、前者を短縮して後者を省略しても反映する。
サイズを変えてブラウザ、またはデバイス毎に何種類も記載することもできてlinkタグに「size」で「size="16×16"」のように付け加えるんだ。その場合、ファビコンのファイル名も「favicon16.ico」のように「favicon」に番号を付けて区別する。記載した複数のlinkタグの優先順位はブラウザに依存しているらしい。問題が…

サイトのデザインでcssのfloat（浮遊）を使うと複数のコンテンツを両側に配置して一列に表示できる。
しかし上手く行かない場合も多くて難しい。陥りがちな失敗を二つ挙げると背景や枠線が付かないのと画像や背景がはみ出すのとで、デザインを崩してしまうんだ。
何とかならないかと考えながら対処法が見付かったので、纏めておきたい。
floatで背景や枠線が付かなければoverflowのhiddenも使おう
一文目
二文目
三文目
四文目
五文目
サンプルのソースコード
htmlの記載
<div> <p>一文目<br>二文目<br>三文目<br>四文目<br>五文目</p> <img src="画像URL"> </div>
cssの記載
div {border:2px #00008b solid;background:#fffaf0;overflow:hidden;} p {float:left;} img {max-height:135px;float:right;}
floatを使うとコンテンツが背景や枠線を指定した親ボックスのdivなどから浮き上がって抜け出してしまうから何も入ってないような感じにデザインが崩れるんだ。
親ボックスのdivなどにoverflow（超過）のhiddenを追加して使うと囲まれたコンテンツの全域にデザインが反映するようになる。
floatで画像や文章がはみ出したら先ずは両方にfloatを使おう
動かしたい画像や文章のどちらか一つにfloatを使うと親ボックスのデザインは反映する。
ただしfloatのコンテンツは浮き上がっているから実際にデザインがかかっているのはfloatがかかってないコンテンツのためなんだ。
画像や文章でfloatをかけた方よりもかけない方が小さいとデザインがはみ出してしまう。
どちらも親ボックスに収まったようにデザインをかけるにはfloatを先ずは両方に使わなくてはならない。
その上で、さらに親ボックスのdivなどにoverflowのhiddenを使うと大丈夫なんだ。
cssのfloatは親ボックスのoverflowのhiddenとセットにして使わないと含まれるコンテンツに共通のデザインを付けられないと知ると背景や枠線が付かないと画像…

ブログの記事にInstagramの写真や動画を埋め込みコードを使って載せようとするとそれ自体が長くてびっくりするけれどもJavascriptも付いていて読み込み時間が延びるのが懸念される。
マークアップの<script>と</script>の囲みで、コンピューターのプログラムだからブラウザにとっては通常の場合よりも余計に計算しなくては内容がサイトに反映しない。
しかしバージョンアップで8（埋め込みコードの冒頭付近に「data-instgrm-version="8"」と載っている）に変わってからInstagramの埋め込みコードのJavascriptが非常に軽量化されたようだ。
外部ファイルなので、手元に取り込んで調べてみるとたったの8.23KBしかなくなっている。日本語で換算すると四千文字くらいに相当するけれども以前のバージョン7の60.85KBと比べて七分の一程度の容量に収まっているから一層と使い易くなって喜ばしい。
Instagramさん(@instagram)がシェアした投稿 - 1月 30, 2018 at 3:28午後 PST
ページの読み込み時間が延びて表示速度／ページのダウンロード時間が下がると訪問者と検索エンジンに悪影響を与えてサイトのアクセスが減るかも知れない。一般的に三秒以下が望ましいとされる。スマホが普及して重いサイトは人離れが激しいとすると持ち前のスピーディーな便利さが損われているせいだろう。
Instagramは分かっていて埋め込みコードのJavascriptをついに改善したのではないか
流石に人気爆発のソーシャルメディアで、世界中で利用者を新しく増やし続けている数年来、やはり人々の気持ちを上手く取り入れていると感心する。
気付いて早速、ブログの記事に使っていたバージョン7の埋め込みコードはInstagramのオリジナルの個別ページから再び取り直したバージョン8で悉く書き換えた。
閲覧して体感的に明らかに速いので、気持ち良いばかりだ。僕だけかも知れないけれどもInstagramの埋め込みコードにはasync（非同期）が付いているからページが開くのはさほど遅くならないもののブラウザの読み込みが長引いて直ぐに止まらないのは好きではない。またはページのダウンロード時間が嵩めば検索エンジンでのサイト評価が下がってアクセ…

無料ブログというか、ホームページを含めてもBloggerでのサイト運営が最も気に入っている。

Bloggerの成り立ちはTwitterと結び付く
Bloggerは世界で最も利用者の多いブログサービスの一つだけれども元々はTwitterの創業者の一人のエヴァン・ウィリアムズがパイララボで開発したらしい。ブログやブロガーという言葉もBloggerから専ら来ているようで、だからそのままの名前が付いている（Blogger／ブロガー）のもコンセプトがオリジナルのせいだとも過言ではなかったんだ。考えると格好良いし、Bloggerはかつてホームページだけしかなかったインターネットに新たな地平を切り拓いていた。アイデアが画期的で、素晴らしいと感動を覚える。
1999年に始まって人々に大きく広まった2003年にGoogleにパイララボは買収されたんだ。以降、Bloggerはブログサービスとして現在に至るまでGoogleが提供し続けている。
エヴァン・ウィリアムズは2004年にGoogleを退社して2006年にTwitterをオブビアスで立ち上げた。Bloggerに続いて人々に又大きく広まったからビックリするし、さらに盛り上がってもいると思う。しかし何れにせよ、並外れた才気を示している結果だったのは間違いないだろう。
Bloggerは使用感がパソコン向けで辛い
僕は何も知らずにBloggerをやって日本ではさほど広まってなくて直ぐに気付かなかったせいかも知れない。やってみるとスマホでブログを作成するのが大変なので――公式アプリを使っても只単に投稿するのが精一杯みたいな現今――日本の他のブログやホームページのモバイル端末に対応した無料サービスに使用感は完全に劣っている。パソコンか、せめてタブレットでなくては厳しい状況で、たとえ色んなデザインが作り出せるとしてもウェブの編集画面が縮んだままだから面倒臭いのは事実だ。
スマホで気持ち良くブログを作成できないかぎり、もはや率先してオススメするわけには行かないと思う。
日本は海外と比べて特別かも知れないけど、ガラケーの頃からモバイル向けのホームページやブログの無料サービスが発展して来ているし、またはパソコンでやっても愉快なので、とにかく全てのデバイスに的確に対応した使用感こそ世界最高の水準とするとBloggerは追い付いてないといわざるを得ない。
一つだけ凄いの…

サイトの検索エンジンからのアクセスアップのためにSEO（検索エンジン最適化）対策を考えるけれども高品質なコンテンツが非常に重視される。一昔前はキーワードを使うだけで、良かったかも知れないけど、ところがGoogleでは自然言語処理が活用されたり、コンテンツの文章が分かるようになって来たんだ。昨今はサイトに意味がないと検索エンジンでのサイト評価は上がらない。キーワードを使うのもやり過ぎれば不正行為と見做されてペナルティーを食らうし、検索結果からは追放されてしまう。
コンテンツの文章がキーワードという単語よりも重視される状況から検索エンジンからのアクセスアップのためのSEO対策の一つとしてコンテンツSEOが新しく注目される。
簡単にいうとキーワードを適度に散りばめた意味のある文章を書かなくては検索結果で優遇されるサイトは持てないんだ。
Googleは自然言語処理によって文章だけでサイト評価を行うのを目標にしているらしいので――それこそ人間と同じように検索ロボットでもサイト内容を把握したいわけだ――将来的にはサイトにキーワードを敢えて置かなくても検索エンジンからのアクセスアップは大丈夫と考えられる。
例えば料理のレシピで、ハンバーグの作り方を検索した場合に「ハンバーグ」と「作り方」の二つのキーワードがないサイトは理解できないような事態が改善される。前者は良いとしても後者は「どう作るか」とか「調理法」なんてサイトに置かれたキーワードが微妙に変わったりするので、それぞれにコンテンツの意味が等しければぴったり合わなくても検索結果に出せるように進歩する。
現状は厳しい、ただし。Googleを使ってもキーワードがないか、または微妙に変わっているサイトは検索結果に殆ど出て来ない。本当に珍しいキーワードで、紹介するサイトがどうしても見付からないような場合にかぎって作用しているかも知れない程度だろう。
ユーザーがコンテンツを探すときに検索しそうなキーワードを考えてみましょう。そのトピックについてよく知っているユーザーは、よく知らないユーザーとは異なるキーワードを検索クエリで使用するかもしれません。たとえば、長年のサッカーファンは「国際サッカー連盟」の略語である「fifa」というキーワードで検索し、新しいファンは「サッカー プレーオフ」のようなより一般的なクエリを使用するかもしれません。検索行動におけ…

html5のサイトはdetailsタグで開閉メニュー／アコーディオンを簡単に作れると分かった。バージョン5.1から新たに加わった要素らしくて発表されないまま、かつてJqueryを使って難儀に臨むしかなかった気持ちが嘘みたいに晴れ上がっている。本当にhtmlのマークアップだけで済んでしまうからサイトの表示速度が遅くなる影響も最大限に抑えられる。
details要素は、ユーザが追加情報やコントロールを得ることができるディスクロージャーウィジェットを表す
details要素 via HTML Standard 日本語訳
detailsタグのデフォルトの記載と表示
<details><summary>概略</summary>細目<br>細目<br>細目</details> 概略細目 細目 細目
最初から開いておく
<details open><summary>概略</summary>細目<br>細目<br>細目</details> 概略細目 細目 細目
detailsタグの中にsummaryタグで概略をスイッチとして入れておいて細目の閲覧を開閉メニューで切り替えられる。最初から開いておくのも可能で、detailsタグにopen属性を追加するんだ。動作はhtmlのマークアップだけだからブラウザの読み込みに優れていて非常にスムーズだし、サイトでの使い心地は最高だろう。

気付くと些細な日常のContempo／Bloggerの2017年のテーマにも取り入れられていたんだ。サイドバーのアーカイブやラベルのリストなどがdetailsタグで記載されて開閉メニューになっている。動作が非常にスムーズなので、昨年からブログのテンプレートに新しく採用してから何なんだと驚いていたけど、ついに謎が解けたと笑う。
ブラウザが対応してないとdetailsタグを使っても駄目だけど、殆どのブラウザは大丈夫で、一部では未対応だから除外するしかない。
detailsタグのcssのデザイン
最も気がかりなのはスイッチの左端の三角のマーカーを消せるかどうかだ。新しいデザインを付けるとしたらデフォルトのデフォルトが邪魔になり兼ねないと真っ先に懸念されてしまう。現時点でブラウザ毎に対応が分かれ…

サイト作成でコンテンツのマークアップを行ったhtmlにデザインを付けるのがcss（cascading style sheets／カスケーディングスタイルシーツ）だ。記述がhtmlのようにタグで囲むだけではないからちょっと難しい。
僕は基礎を覚えるのに十年くらいかかった。デザインはテンプレートに任せておいて構わないと見向きもしなかったせいだけど、しかしcssはレベル3から色んな表現が可能だと気付いてから新しく学び出した。サイト作成が創作活動としてさらに面白くなる。
今再び初心へ帰りながらcssは実際にどう使えば良いのかを入門として簡単に纏めておきたい。

目次
デザインの設置についてCSSの三つの指定先CSSの二つの記述法cssの内容の記述についてstyleタグでデザインする例インラインstyleでデザインする例styleタグならではのデザインstyleタグのcssの複数の指定先複数の指定先を細かく絞り込む複数の指定先を広く組み合わせる

デザインの設置について
cssはhtmlのマークアップにデザインを付けるからどこで何を変えるかを指定しなくてはならない。
cssの三つの指定先
タグ自体：<div>などidのタグ：<div id="post">などclassのタグ：<div class="check">など
タグ自体にcssをかけるとページで使われる該当の要素のデザインが全て変わる。
idのタグとclassのタグはhtmlの規定ではなくて作成者が任意で割り当てる。何れもcssの効果は同じだけれどもページで使える回数が違う。すなわち割り当ての種類についてidは一つのページで一回しか使えなくてclassは一つのページで何回でも使えるんだ。htmlのマークアップからいうとidのタグは種類毎に一回ずつ、classのタグはどんな種類でも幾らでも割り当てるように働くので、前者は他とは混ざらずに、後者は広範囲に使えるのが特徴になっている。
idとclassの任意の割り当ての文字はそれぞれとそしてhtmlのバージョンでも個々に異なっている（id名/class名に使用できる文字の種類）けれども共通点から何れの場合でも半角の英字で始めて英数字や半角のハイフンや(-)や半角のアンダーバー(_)を使うかぎりは問題はないと思う。
ただしidだ…