假面特攻隊の一寸先は闇！読みにくいブログ（笑）

★★★特撮・アニメ・時代劇・サブカル思想をフォロー！（予定・汗）★★★　～身辺雑記・小ネタ・ニュース速報の類いはありません

トップ > 覚え書き > 元祖「はてなダイアリー」のデザインそっくりな「はてなブログ」のデザインに移行！　～ドロップダウンする画面上部固定グローバル・メニュー追加！

元祖「はてなダイアリー」のデザインそっくりな「はてなブログ」のデザインに移行！　～ドロップダウンする画面上部固定グローバル・メニュー追加！

覚え書き

拙ブログ・トップページ（最新10記事）
拙ブログ・全記事見出し一覧


[覚え書き]　〜全記事見出し一覧



１．旧「はてなダイアリー」のシンプルな初期デザインにそっくりな新「はてなブログ」の「デザイン・テーマ」を発見


　ケッ！　オシャレ・サブカル系の小洒落た「はてなブログ」デザインなんてヘドが出らぁ！　取り澄ましやがって！！
　汗クサさや泥クサさを過剰なまでに忌避して、デオドラント（無臭・無菌）を目指すあたり、世の中の半分だけしか見ていないような、半分だけを見て歯の浮くようなキレイごとをのたまっているような気配がして、オレさまちゃんの敵だ！　くらいに思ってしまっていたので、旧「はてなダイアリー」から新「はてなブログ」への移行にはなかなか踏み切れず（汗）。


――いやまぁ、大衆・大勢向けをねらうのであれば、オシャレ・サブカル路線を目指すのが正しいのは重々承知してるけど（笑）――



　しかし、ナンで「サイドバー」が右側にあって、しかも「サイドバー」のヨコ幅がやたらに広いんだヨ！
　その分、「本文」の方がやたらとヨコ幅が狭くなってるヨ。「ブラウザ画面」のヨコいっぱいに、ブログ本文を表示させてくれヨ！！


　文章・本文を読ませたいのであって、ブログのデザインとかはドーでもイイよ！　特にブログのヘッダー（タイトル）とかで、「ブラウザ画面」の上部の半分の面積を占めるようなデザインなんて、サイテー最悪！！


　「ブログ記事一覧」に、記事中の「画像」をアイコン表示させる機能なんて不要だヨ。「記事タイトル」だけを表示してくれればイイよ！


　コレだったら、当方が使用しつづけている、元祖「はてなダイアリー」の元祖も元祖な基礎の基礎みたいなシンプルなデザインをギリギリまで使用しつづけたい！　と思いつづけて半年ほど。


　ついに、２０１９年春（２月２８日（木））での旧「はてなダイアリー」の「株式会社はてな」側での保守運用の終了告知に伴ない――日記更新は１月２９日（火）から不可――、観念して２月２日（土）は「はてな」側にて奨励されている新「はてなブログ」への自力での移行に伴なう前調査にいそしんでみた次第。


　それと並行して、なにかシンプルぷるぷるでも良いデザインはないかなぁと、「はてなブログ」の各種デザインが格納されている「はてなブログ・テーマストア」（http://blog.hatena.ne.jp/-/store/theme/）のあまたの「公式デザイン」や「ユーザー作成デザイン」をすべて隈なく渉猟すること半日ほど。


　ついに！　ついに！　ついに！　おそらくは奇特な御仁がネタ＆洒落で作ったのであろう（？）、元祖「はてなダイアリー」のデザインをそっくりに模した「はてなブログ」用のデザインテーマ「Hatena for はてなブログ」を発見！


blog.hatena.ne.jp



・「サイドバー」が左側にある！――左から右へ読んでいくヨコ書きの常で、「サイドバー」に眼が行きやすくなることで、ブログ内を巡回してもらえる可能性も高くなる！？――
・「サイドバー」のヨコ幅がムダに広くない！
・「本文」のヨコ幅もムダに狭くならずに、「ブラウザ画面」の拡大に応じて、ヨコいっぱいに広がる！
・ブログのヘッダー（タイトル）が、最小面積になってるヨ！


　コ、コ、コ、コレは、オレのために作られたのか！？（そんなワケはない）



　元祖「はてなダイアリー」のデザインに内心ひそかに愛着を持っていたけど、「はてなブログ」へと移行するにあたって、「はてな」側で推薦されていた、自称シンプル・自称文章中心向けデザインを心ならずもセレクトしてしまった御仁も、それなりにいたのではなかろうか？


　てなワケで、旧「はてなダイアリー」を新「はてなブログ」に移行するに際して、選択した「はてなブログ」のデザインが、不肖のキモオタのワタクシめごときの拙ブログのデザイン！
――どうぞ「顔真っ赤にして必死なデザイン！」と指さして揶揄してください（汗）――。


　「サイドバー」も旧「はてなダイアリー」時代は、「デザイン」設定画面の「ページのフッタ」項目にHTML言語をシコシコと加筆して、「サイドバー」に自ブログ記事への「リンク」を増やしていったけど、この「サイドバー」への「リンク」追加もツール化されていて、「記事名タイトル」＆その「URL」を記述するだけで済んで、HTMLを書かなくてよくなって、旧「はてなダイアリー」時代の手書きで追加していた「サイドバー」の完全復元もラクラク！
――「１行空白」や「２行空白」空け、固定の文言に色付けした箇所にのみ、やはり「サイドバー」追加ツールを用いてHTML言語にて記述――


　「はてなブログ」の人気ベスト３のデザインを採用すべし！　界隈におけるブログ・デザイン改造記事の類いも豊富だから！　と唱えているブログもあるけれど、当方はアレらの人気ベスト３のデザインなんて絶対にイヤだヨ（笑）。


　てなワケで、テキスト中心で見せたい、スカしたオシャレ・デザインにはまるで関心がない奇人変人の同好のみなさま（爆）には、この元祖「はてなダイアリー」のデザインそっくりの「はてなブログ」のデザイン「Hatena for はてなブログ」を強くお勧めしたいと思います！　……まぁダウンロード数を見ると、つくづく人気がないデザインであることもよぉくわかりますけれど。


――ただ、「検索窓」がハミ出てて、右すぐヨコの「本文」側に少しだけ跨ってしまっているのが、おマヌケでタマにキズだけど（汗）。コレはドーやったら直せるんですかネェ。教えて！　エラいヒト！（笑）――
――２０１９年３月１３日（水）加筆：ナンと！　「はてなブログ」の当該デザイン「Hatena for はてなブログ」が２０１３年１０月５日の誕生、および同年１０月１２日のフォント変更以来、６年ぶりに神さま・造物主さまご自身がデザインストアに降臨せられて、「検索窓」がハミ出ていたのを２０１９年３月１０日（日）に直されました！　よって、「検索窓」のハミ出る問題も解消してしまったのでありやした！　ありがとうございます（平身低頭）――


　ただ、問題はナイどころか、むしろウェルカムの大カンゲイだけれども、ＰＣでもスマホでもタブレットでも同じデザイン画面で表示されるという「レスポンシブ対応」のデザインでもないし、拙ブログ自体の詳細設定を「レスポンシブ対応」にもしていないのに、自身所有のタブレットで拙ブログを表示させると、旧「はてなダイアリー」時代は「記事一覧」が表示されてたのに、新「はてなブログ」ではＰＣと同様の「トップページ」が表示されましたヨ！――むろんヨコ幅の文字数はタブレット画面に合わせて減っていますけど――


――２０１９年２月９日（土）加筆：上記でいろいろと書いていますけど、誤解・錯覚がありました。「はてなブログ」画面は「タブレット」では「ＰＣ」準拠で画面表示がされるのがデフォルト・初期設定である模様（汗）。当方、「スマホ」は所有しておらず、６～７年前から「ガラケー」＆格安ＳＩＭの７インチ「タブレット」使いであるために、改めて家族所有のスマホで拙ブログを閲覧してみたところ、「はてなブログ」で一律に用意されている「スマホ専用」画面（７件程度の最新記事見出し一覧）が表示されてしまうことが判明してガックシ（後日付記：ＰＣ上でも各種ブラウザ、たとえばＣｈｒｏｍｅで右クリックの「検証」⇒白い二重四角型の「スマホ」型のアイコン選択などで表示可能でした）。してみると、「タブレット」の画面サイズ端末からのアクセスの場合は「ＰＣ」専用表示と同様の扱い、「スマホ」の画面サイズ端末からのアクセスの場合は「スマホ」専用表示の扱いとして、「はてな」側にて識別をしていると判定できます。ソコで取った方策は後述いたします――――



追伸
　旧「はてなダイアリー」から新「はてなブログ」へのインポートに長時間～数日間を要するという、昨夏ごろの各種記事を散見しました。「はてな」側でのサーバーの増強のせいか、皆さまの引っ越しのピークがとうに過ぎていたせいか（笑）、当方は世間のブログよりも１記事あたりがはるかに長文とおぼしき約７５０の記事のインポート作業でしたけど、２０１９年２月３日（日）午前０時台に作業したところ、トータル４５分ほどで完了いたしました――家庭内Ｗｉ－Ｆｉ接続です――。


　以上、一例としてご参考までに～。



――２０１９年４月１４日（土）追記：遅まきながら、一昨日に気付いたのですけど、公式「週刊はてなブログ」２０１９年４月４日分のブログ記事にて、「２０１９年はてなブログデザインテーマコンテスト」の受賞結果が発表されています。（http://blog.hatenablog.com/entry/2019themecontests_result_）
　それで、ビックリ。拙ブログの改造にいそしんでいた２０１９年の２月中下旬に、当該「元祖はてなダイアリー」風デザインテーマ「Hatena for はてなブログ」と同じコンセプトのデザインテーマ「classic diary（日記向け）」がちょうどリリースされており、しかも、１月１６日～３月１４日募集の「２０１９年はてなブログデザインテーマコンテスト」の「銅賞」を受賞していたのでありやした！　（http://blog.hatena.ne.jp/-/store/theme/17680117126981573769）
　ウ～ム、このすでに類例のあるデザインテーマが受賞してしまってもよかったのであろうか？　……まぁ別にヨシとするか（笑）。


　この「classic diary（日記向け）」は「ＰＣ」での表示だと、「記事本文」＆「サイドバー」の活字がやや大きく行間も少々開いており、それに応じてか「サイドバー」のヨコ幅もやや広めなあたりが、個人的には少々キズ・欠点であり。
　「タブレット」での表示だと、「サイドバー」がなくなって、いわゆる「サイドバー」部分が「本文記事」の一番下に表示される、いわゆる「１カラム」表示となる。コレはまぁフツーなのだけど、個人的には「タブレット」や「スマホ」でも「サイドバー」を表示させて、過去記事にも導線を引いておきたいので、コレがカナリちょっと（汗）。
　もちろん「タブレット」でも「ＰＣ版サイト」での表示に変更することは可能で――「タブレット」でわざわざ「ＰＣ版サイト」での表示に変更するような奇特な御仁も滅多にいないでしょうけれど――、それで「サイドバー」を表示させると、「サイドバー」のヨコ幅がやはりやや広くてその逆に「本文」の活字はやや小さい。


　大見出し（記事タイトル）・中見出し・小見出し・小小見出し……などを表示させる「はてな記法」もビミョーに旧来のモノとはズレているようで……。
　先頭に「**」のように「*」を２文字付けて（「ｈ４」タグの見出しの意味）、その直後に「見出し」の文言を続けることで、「中見出し」――青いアンダーライン付きの見出し――とする旧来の「はてな記法」だと、先頭に青い四角が付くだけの見出しとなってしまい。
　先頭に３文字の「***」で「小見出し」（「ｈ５」タグの見出しの意味）――単なる太字の見出し――とする旧来の「はてな記法」だと、先頭に青い右向き三角が付いた小見出しとなって、いろいろとズレた「見出し」表示となってしまって……（加えて、この３文字の「***」＝「ｈ５」タグ表示で、２行に渡る長い見出しになると、１行目と２行目が重なって表示されてしまうバグがあるみたいだけど、ブログデザイン作者さまに指摘してあげるべきか否かは悩む・汗）。
　とにかく、ウチのブログで多用している「はてな記法」の「**」で、「青いアンダーライン付きの中見出し」を一律に表示させたいよ～（笑）。


　あと、「アーカイブページ」（全記事見出し一覧ページ）が、全３０記事だか全５０記事を青い細いラインで一括して囲んだ一覧表型式の旧「はてなダイアリー」風のスタイルではなく、１記事１記事が青いラインで囲まれたスタイルであるあたりも、一瞥閲覧性でのヒキには少々欠けるようにも思えて……。


　以上の事項は、改造すれば解消できる程度のことなのでしょうけれども（見出し表示の変更は右記のサイトが参考になりそうです：http://www.future-nova.com/entry/sumaho-css）、当方のように基礎知識がなく、類例から憶測で改造していて、しかもある程度のブログ改造が済んだら、ブログ記事の方の執筆に励みたい人間にとっては、もうメンドくさくなってきた（笑）。
　しかし、前述したブログデザイン提供のＵＲＬ（http://blog.hatena.ne.jp/-/store/theme/17680117126981573769）には、および左記ＵＲＬからもリンクされている当該デザイン作者さまが製作された他のデザインテーマ（http://blog.hatena.ne.jp/-/store/theme/-/author/blogcustomize）のページ群にも、各種のデザインカスタマイズの方法が記述されており、ブログを改造してみたい方々には参考にはなりそうです。


　てなワケで、拙ブログ管理人は当該「Hatena for はてなブログ」のデザインを引き続き使用する予定であります――


２．「アーカイブ・ページ」（全記事見出し一覧ページ）の改造

　（２０１９年２月８日（金）加筆）

「はてなダイアリー」風に、「サムネイル画像」＆「記事本文・冒頭」を非表示、「記事タイトル」のみで表示


　世間一般的にはともかく、テキスト中心種族にとっては、「はてなブログ」の「アーカイブ・ページ」に「サムネイル画像」＆「記事本文・冒頭」が表示されるのも、「ブログ」の全記事の目次的な一覧瞥見性にいささか欠けて、鬱陶しいのではなかろうか？（あくまでも私見です・笑）


　で、ググったら、「はてなブログ」の「アーカイブ・ページ」も、「はてなダイアリー」のそれのように「サムネイル画像」＆「記事本文・冒頭」を非表示にする手法がありました！

　
q.hatena.ne.jp


　コレをまるパクリで、「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク・カスタマイズ）」⇒「デザインＣＳＳ」欄に、既存の入力値――初期値として「はてなブログ」の採用デザイン・テーマの番号が記述されたＵＲＬのＣＳＳが記述されている――は残したまま、その後ろに以下のＣＳＳを加筆して、上方の「変更を保存する」を押下！

/*==============================================
「はてなブログ」の「記事一覧ページ」（archiveページ）の「サムネイル画像」と「記事本文」を非表示にし、「はてなダイアリー」のように「記事名」のみで一覧表示化
================================================*/
.archive-entry .entry-description, .entry-thumb {
    display: none;
}
.page-archive .archive-entries section {
    margin-bottom: 0px;
}



――ここのみ、２０１９年４月６日（土）加筆：当初、上記のＣＳＳ文は、
・当初：「.archive-entry .entry-description, .entry-thumb, .social-buttons {」となっておりました。
・改訂：「.archive-entry .entry-description, .entry-thumb {」に変えております。（末尾の「, .social-buttons」の記述を削除いたしました）
理由：上記の「, .social-buttons」（ソーシャル・ボタン）などの記述は、「記事一覧ページ」（archiveページ）に限定した設定ではなく、「本文記事ページ」にも共通で適用される設定であるためです。当初「, .social-buttons」の記述があったばかりに、これが次の行の「display: none;」命令にて各種の「ソーシャル・ボタン」が非表示扱いとなってしまい、「本文記事ページ」中の上下にも表示されるべき「はてなブックマーク」や「Ｔｗｉｔｔｅｒ」に「ＬＩＮＥ」などのマークの「ソーシャル・ボタン」群が一律に非表示になってしまっていたのでありやした（汗）――


３．「カテゴリー」ごとの「アーカイブ・ページ」（全記事見出し一覧ページ）に、「～に関する記事一覧」の文言を追加

　（２０１９年２月８日（金）加筆）


　前述の「２．」にて、「アーカイブ・ページ」（全記事見出し一覧ページ）から「サムネイル画像」や「記事本文・冒頭」を除去しても、「はてなブログ」の「カテゴリー」ごとの「アーカイブ・ページ」（記事見出し一覧ページ）は、旧「はてなダイアリー」時代のそれと比すると殺風景なデザインで、そもそも「記事見出し一覧ページ」であること自体が分かりにくい！
　コレもサーフィンしていたら、先達による解決策を発見いたしました。これにならって、大見出しの「カテゴリー」名の直後に「～に関する記事一覧」の文言を追加！


focus3.hatenablog.com


　こちらのブログさまを参考に、最後の部分のみをパクらせていただき、「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク
・カスタマイズ）」⇒「デザインＣＳＳ」欄に、やはり既存の記述は残したまま、その後ろに以下のＣＳＳを加筆して、上方の「変更を保存する」を押下！

/*==============================================
「カテゴリー」ごとの「記事一覧ページ」の大見出しである「カテゴリー」名の末尾に、「に関する記事一覧」の文言を追加
================================================*/
.archive-header-category .archive-heading::after  {
    position: relative;/*相対位置（不要？）*/
    content: " に関する記事一覧";/*追加文言*/
    font-size: 1.2rem;/*追加文言をカテゴリ名よりも小さい字で表示*/
}




４．「グローバル・メニュー」の追加（…文字の小ささがGoogle Search Console機能で問題視されるようになったために、拙ブログでは廃止中・汗）

　（２０１９年２月８日（金）加筆）

「ブログ・タイトル」直下に、「グローバル・メニュー」（「カテゴリー」ごとの「記事一覧」などの「リンク」集の「メニュー・バー」）を追加


　「グローバル・ナビゲーション」or「ヘッダー・メニュー」or「グローバル・ナビゲーション・メニュー」or「グローバル・メニュー」。多数の呼び名があるようです。
　コレについては、多数のサイトを参考にさせていただき、照合の果てに、拙ブログに不要な命令文は削りに削って、以下の最小限のＨＴＭＬとＣＳＳを作成（？）してみました。
　ブラウザの幅の拡縮に応じて、ヨコ幅や間隔も伸縮するかたちになっています。


（しかし、拡張させて、「カテゴリー」下の「サブ・カテゴリ―」表示、いわゆる「ドロップダウン・メニュー」が追加表示されたり、「トグル・メニュー」に変形したりはいたしません・汗）


　主に、以下のブログさまを参考にさせていただき、流用・改変させていただいております。


www.clrmemory.com


４－１．ＨＴＭＬ

　（「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク・カスタマイズ）」⇒「ヘッダ」⇒「タイトル下」欄に、以下のＨＴＭＬを加筆（⇒「変更を保存する」はこのタイミングで押下してもよいが、後続の「４－２．ＣＳＳ」側にて一括して押下するのが無難））

<!-- 通常の「グローバル・ナビゲーション・メニュー」 -->
<div class="nav">
  <ul>
    <li><a href="http://d.hatena.ne.jp/katoku99/20190601/p1">ゴジラ評論６０年史</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20220326/p1">ウルトラマントリガー総括</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20220116/p1">仮面ライダーセイバー総括</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20220503/p1">魔進戦隊キラメイジャー</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20220306/p1">シン・エヴァンゲリオン</a></li>
    <li><a href="http://d.hatena.ne.jp/katoku99/20181125/p1">ＳＳＳＳ.ＧＲＩＤＭＡＮ</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20190707/p1">ガンダム ＯＲＩＧＩＮ</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20220130/p1">宇宙戦艦ヤマト２２０５</a></li>
  </ul>
</div>

　「ＵＲＬ」と「カテゴリー名」は、各自のブログのそれに応じて読み替えてください。少々長い「カテゴリー名」は、ブラウザのヨコ幅を縮めると、両隣の「カテゴリー名」と接近しすぎてしまって見苦しいので、「グローバル・メニュー」中の表示上の「カテゴリー」名のみ半角カナに変えています。

　後述しますが、諸事情で最終的には上記を用いずに、以下のようにしています。

<!-- 通常の「グローバル・ナビゲーション・メニュー」 -->
<div class="nav">
  <ul>
    <li><a href="http://d.hatena.ne.jp/katoku99/20190601/p1">ゴジラ評論６０年史</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20200723/p1">ウルトラマンＺ序盤総括</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20200921/p1">仮面ライダー０１総括</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20200712/p1">キラメイジャー序盤総括</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20210213/p1">新型コロナ禍・2020年の日本</a></li>
    <li><a href="http://d.hatena.ne.jp/katoku99/20181125/p1">ＳＳＳＳ.ＧＲＩＤＭＡＮ</a></li>
    <li><a href="https://katoku99.hatenablog.com/entry/20190707/p1">ガンダムTHE ORIGIN</a></li>
    <li><a href="http://d.hatena.ne.jp/katoku99/20181208/p1">宇宙戦艦ヤマト２２０２</a></li>
  </ul>
</div>


４－２．ＣＳＳ

　（「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク・カスタマイズ）」⇒「デザインＣＳＳ」欄に、既存のものは残したまま、以下のＣＳＳを加筆⇒「変更を保存する」）
　（ＣＳＳは記述する位置が後半以降だと効力を発揮しない説もあったので、念のために冒頭の「はてなブログ」採用デザインテーマのＣＳＳと、先に入力した「アーカイブ・ページ」用のＣＳＳの中間に、以下のＣＳＳを加筆）

/*==============================================
「ブログのタイトル」下に、「グローバル・ナビゲーション・メニュー」追加
================================================*/
.nav>ul {
        padding: 0;/*枠線内余白*/
        margin: 0;/*枠線外余白*/
        width: 100%;
     /* margin-bottom: 30px;  枠線外・下余白（拙ブログではコメント囲いで無効化）*/
        display: block;/*ブロック要素にする*/
        overflow: hidden;/*内容が収まらない場合、非表示*/
}

.nav>ul>li {
        box-sizing: border-box;/*paddingやborder-widthの幅に関係なくwidthに指定した値優先。幅にborderとpaddingを含む？*/
        width: calc(100% / 11);/*メニュー幅÷メニューカテゴリ数（※各ブログごとでの改変対象数値）*/
        height: 20px;/*メニュー・ブロックの高さ（※各ブログごとでの改変対象数値）*/
        line-height: 20px;/*メニュー・１行の高さ（※各ブログごとでの改変対象数値）*/
     /* background: linear-gradient(#1a1a1a, #676767, #1a1a1a);  グローバルメニュー背景色（拙ブログではコメント囲いで無効化）*/
     /* border-left: 1px solid white;  要素の左辺に白いボーダー（枠線）付与（拙ブログではコメント囲いで無効化）*/
     /* color: white;  グローバルメニュー文字色（拙ブログではコメント囲いで無効化）*/
        font-size: 70%;/*カテゴリ名の文字の大きさを縮小（※各ブログごとでの改変対象数値）*/
        float: left;/*初期表示はタテ並びのカテゴリ⇒左寄せでヨコ並び化*/
        list-style-type: none;/*カテゴリ名の先頭に中点や番号なし*/
        text-align: center;/*左寄せや右寄せではなく均等配置*/
        position: relative;/*相対位置*/
     /* transition: box-shadow .3s ease-in-out;  マウスオーバー時の動き（影を付与）（拙ブログではコメント囲いで無効化）*/
}

/*first-child：要素内で最初に現れる子要素を対象にスタイルを適用*/
.nav>ul>li:first-child() {
        border-left: 0;/*要素の左辺にボーダー（枠線）付与。０指定だから付与なしの意味？　不明なので残してます（汗）*/
}

/*  .nav>ul>li:hover {  （拙ブログではコメント囲いで無効化）*/
     /*   box-shadow: 0 0 50px 25px #1a1a1a inset;  マウスオーバー時に最終的にメニューのカテゴリ名のエリアの縁に影を付与？？（拙ブログではコメント囲いで無効化）*/
/*  }  （拙ブログではコメント囲いで無効化）*/

.nav>ul>li>a {
        color: #0000FF;/*グローバル・メニューのカテゴリ名の文字色＝青*/
        position: absolute;/*絶対位置*/
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}

　……スイマセン。知識がない人間が類推や憶測で整理して、削りに削って作成していったモノです。少なくとも拙ブログでは、コレで問題がありませんでした。
　思わぬ副産物としては、「アーカイブ・ページ」（記事見出し一覧ページ）や、「カテゴリー」ごとの「アーカイブ・ページ」にも、この「グローバル・ナビゲーション・メニュー」……というか「カテゴリー名」のリンクが表示されるため、結果論としてますます「アーカイブ・ページ」が旧「はてなダイアリー」のそれに近づきました（笑）。


　拙ブログには不要であった「グローバル・ナビゲーション・メニュー」部分の背景色を指定する「background:」命令文や、「グローバル・ナビゲーション・メニュー」部分の左辺に白いボーダー（枠線）を付与する「border-left: 1px solid white;」命令文、カーソルを「グローバル・ナビゲーション・メニュー」部分に寄せるとアニメ的なプチ動画効果を発揮する「transition: box-shadow .3s ease-in-out;」命令文などは、ググってその意味合いを調査した上で不要と判断して削っています。


　コレらの命令文ほかが必要な方々は、ヨソさまのサイトを照合して、命令文の意味もググって理解した上で、追加していってくださいまし～（汗）。


５．当該ブログ・デザインは「レスポンシブ対応」公称ではないけど、「レスポンシブ対応」設定したら、スマホでもＰＣ専用の画面が問題なく表示

　（２０１９年２月９日（土）加筆）


　スマホからのアクセスだと、ＰＣでの「はてなブログ」の画面表示とは異なり、スマホ専用の最新７件の記事一覧（「サムネイル画像」＋「記事本文・冒頭）が表示されることは、みなさまご承知の通りだと思います。
　庶民・大衆・大勢向けにはこの方がきっとイイから（？）、このような画面が採用されているのでしょうけれども、当方は先のアーカイブ・ページ対策同様に、一覧瞥見性に欠けるこのスマホ専用トップページである最新７記事だけの一覧画面を好ましくは思っていません（笑）。ツカミにも弱いと思っています。


　そこで、今どきの通信速度や端末性能であれば、スマホでもＰＣと同様の画面を表示させても、そんなに遅くはならないだろ！　そもそも短文しか読めないような人種は、お客さんとしてカウントしてないヨ！　ということで（汗）、試しに拙ブログの画面表示設定にも「レスポンシブ対応」設定を実施してみて、（タブレット使いの自身は所有していないので家族の）スマホを使用して、拙ブログにアクセスして表示内容が崩れたりしていないかの確認をしてみました。


　……特に何も「サイドバー」も「記事本文」のレイアウトも崩れてないじゃん！　「グローバル・メニュー」も崩れてないじゃん！　「スマホ」画面の幅に応じて「記事本文」の１行あたりの字数は減っているけど、キレイに「ＰＣ」同様に表示されてるじゃん！　表示もそんなに遅くないじゃん！
　まぁ「スマホ」１台のみの結果をもって、「スマホ」全体には敷衍はできず、統計的にはイミがないやもしれませんけど、拙ブログみたいな単純・シンプルなデザインであれば、多分どの「スマホ」でもほぼ大丈夫であろう！　と勝手に決めつけて、当該デザイン・テーマは「レスポンシブ対応」設定でも大丈夫！　と太鼓判を押すことにいたしやす！（……だ、大丈夫なのかなぁ？・汗）


　「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「スマホ（スマホのマーク）」⇒「詳細設定」⇒「レスポンシブデザイン」欄に「レ」点を入力⇒「変更を保存する」



　ただし、「スマホ」だと、画面上部に「はてな」が挿入してくる広告が表示されることで、記事１件目の記事名タイトルが隠れてしまうという大きな問題もありますけど……。まぁイイや。（←イイのか？・汗）

５－１．ＣＳＳ（未設置）

　当該デザイン・テーマの拙ブログでは、家族のスマホの「Ｇｏｏｇｌｅ」ブラウザ（Ｇｏｏｇｌｅの「Ｃｈｒｏｍｅ」ブラウザにあらず）で参照するかぎり、特に字が異常に小さく表示されることなく（？）表示されました。
――字が異常に小さく表示される場合は、「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク・カスタマイズ）」⇒「デザインＣＳＳ」欄に、既存のものは残したまま、以下のコメント行のかたちをしたＣＳＳを加筆⇒「変更を保存する」を実施すると、「はてな」社側にてレスポンシブ対応してくれる仕様になっておりますが、拙ブログでは以下のコメント行が記述されていなくても、特に支障を感じていないために、以下のＣＳＳは加筆しませんでした（汗）。しばらく様子見といたします――

/*==============================================
「はてなブログ」用「レスポンシブ対応」宣言
================================================*/
/* Responsive: yes */



――２０１９年３月２８日（木）加筆：上記の『「はてなブログ」用「レスポンシブ対応」宣言』である「/* Responsive: yes */」を「デザインＣＳＳ」欄に加筆して、スマホで参照してみました。
　結果、「サイドバー」の占める面積が増えてしまい、「本文」の方も活字が大きめになってしまって、マヌケな表示となりはてて……（タブレットでの表示は大丈夫でした）。
　てなワケで、拙ブログの「デザイン・テーマ」では、『「はてなブログ」用「レスポンシブ対応」宣言』である「/* Responsive: yes */」なる指定は加筆しない方がイイと思われます（汗）――


６．「固定グローバル・メニュー」かつ「ドロップダウン・メニュー」の追加（…文字の小ささがGoogle Search Console機能で問題視されるようになったために、拙ブログでは廃止中・汗）

　（２０１９年２月１６日（土）加筆）

スクロールしても、PC・タブレット・スマホの画面上部に固定される「グローバル・メニュー」。かつ、「サブ・カテゴリー」も一覧表示させる「ドロップダウン・メニュー」に改造

（ただし、画面最上部ではなく、「はてなブログ」規定ヘッダーの直下。スクロール時は画面上部の本文の上に「メニュー・バー」が浮かび上がる表示・汗）


　コレについても、多数のサイトを参考にさせていただき、照合の果てに、もといパクって試しても上手く動作しない失敗を重ねた末に（笑）、やはり「ｊＱｕｅｒｙ」だの「Ｊａｖａ」だのの言語を使うと動作が少々重たくなるそうなので、以下の最小限のＨＴＭＬとＣＳＳを作成（もとい、ほぼ流用）してみました。


　主に以下のブログさまを参考にさせていただき、ＣＳＳ言語を９０％程度（汗）解読できた上で、流用・改変をさせていただいております。


www.bambi.pro


　本来は、「はてなブログ」初期表示の「ブログ」画面の最上部が表示された状態では、この「固定グローバル・メニュー」は表示されておらず、画面を最上部から下部へとスクロールさせることで、「固定グローバル・メニュー」が画面最上部に貼りついたかたちにて出現、表示されつづけるという仕様のモノとなります。
　しかし、試行錯誤の実験＆ＣＳＳ言語の解読の果てに、画面の最上部の「はてなブログ」規定ヘッダーの方が「固定グローバル・メニュー」よりも画面表示の優先順位が高いから、初期表示では「固定グローバル・メニュー」が表示されていない――「はてなブログ」規定ヘッダーのウラ側に隠されている――ことを発見！　スクロールして「はてなブログ」規定ヘッダーが画面の最上部から離脱することで、ウラ側に隠れていた「固定グローバル・メニュー」が代わりに表示されるようになっていたのでありやした（多分～汗）。


　けれども、やはり「はてなブログ」初期表示の段階でも、画面の上部のドコかに「固定グローバル・メニュー」を表示させたいなぁ。……と思っていたところに、貧乏神のインスピレーションがヒラメいた！
　「固定グローバル・メニュー」を画面の最上部の「はてなブログ」規定ヘッダーの位置ではなく、その直下の位置にして、拙ブログ・タイトルの直上、その両者の狭いスキマの位置に表示をさせればイイ！（笑）


――最上部には表示させていない、もうひとつの理由もココに記述いたします。「タブレット」や「スマホ」でインターネットの画面を上方にスクロールし続けると、画面を表示している「ｃｈｒｏｍｅ（クロム）」などの「ブラウザ」自体の外ワクの最上位の「タブ」やその直下の「ＵＲＬ」の表示部分などが、「タブレット」や「スマホ」画面の上方の外側にハミ出るようなかたちでの画面表示になっていると思います。実はコレに巻き込まれて「固定グローバル・メニュー」も画面上方の外側にハミ出るイメージでの非表示となってしまうことが往々にしてあるので、コレを最上部ではなく、最上部の少々下部に表示させることで回避しようという目論見もありました。
　ただし、「タブレット」や「スマホ」でブログ「本文」部分を指でダブル・タップして、「サイドバー」は画面ヨコにハミ出すかたちで、画面のヨコ幅を「本文」のヨコ幅に合わせて拡大表示させてしまうと、その拡大表示比率に釣られて「固定グローバル・メニュー」がまたも「タブレット」や「スマホ」画面の上方の外側にハミ出て非表示となってしまうという問題は残ります。
　なので、コレを回避するために、「固定グローバル・メニュー」の位置を、「はてなブログ」規定ヘッダー直下ではなく、さらに下部である拙ブログ・タイトルの直下に表示させることも検討はしたのですけれど……。ブログ「本文」ダブル・タップでの少々拡大しての画面表示時はともかく、通常の画面表示時だと「固定グローバル・メニュー」がまだまだ画面上部に位置して表示されているとはいえ、やや画面中央に垂れ降り過ぎでさすがにウザいし見苦しいし、読者の気が散ってしまうかとも思えますし、上方へのスクロール時には画面上方にハミ出て見えなくなっても、下方へスクロールの向きを変えれば、画面上部の「固定グローバル・メニュー」も再度見えるようになるので、その存在を読者に認知させることはできるだろう、むしろ適度に画面の上方にハミ出てくれることでウザさも回避できるであろうと、我が身の無策・不作為・怠惰さも自己正当化するかたちで（笑）、拙ブログでは「はてなブログ」規定ヘッダーの直下に「固定グローバル・メニュー」を設置してみた次第です――


　その結果が、以下の通りとなります。
――「ＰＣ」では大丈夫ですけど、「タブレット」だと拙ブログ・タイトルの活字上部がビミョーに欠けております（汗）。設定的には「メニューバーの高さ」の箇所に該当し、「1px」分を減らせば大丈夫なのだろうけれども……。もうイイや（笑）――


６－０．「４－１」での加筆「ＨＴＭＬ」と、「４－２」での加筆「ＣＳＳ」は削除して、以下を代入加筆
６－１．ＨＴＭＬ

　（「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク・カスタマイズ）」⇒「ヘッダ」⇒「タイトル下」欄に、以下のＨＴＭＬを加筆（⇒「変更を保存する」はこのタイミングで押下してもよいが、後続の「６－２．ＣＳＳ」側にて一括して押下するのが無難））

<!-- 固定の「グローバル・ナビゲーション・メニュー」 -->
<ul class="navi-top">
   <li><a href="https://katoku99.hatenablog.com/">最新10記事</a></li>
   <li><a href="https://katoku99.hatenablog.com/archive">全記事一覧</a></li>
   <li><a href="#!">▼ウルトラ</a>
      <ul>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A6%E3%83%AB%E3%83%88%E3%83%A9">ウルトラ</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A6%E3%83%AB%E3%83%88%E3%83%A9%E7%B7%8F%E8%AB%96">ウルトラ総論</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A6%E3%83%AB%E3%83%88%E3%83%A9%E7%B5%82">ウルトラ終</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A6%E3%83%AB%E3%83%88%E3%83%A9%EF%BC%83%EF%BC%91">ウルトラ＃１</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A6%E3%83%AB%E3%83%88%E3%83%A9%E6%98%A0%E7%94%BB">ウルトラ映画</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%A1%E3%83%93%E3%82%A6%E3%82%B9">メビウス</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%9E%E3%83%83%E3%82%AF%E3%82%B9">マックス</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%8D%E3%82%AF%E3%82%B5%E3%82%B9">ネクサス</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%8D%E3%82%AA%E3%82%B9">ネオス</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E5%A4%A7%E6%80%AA%E7%8D%A3">大怪獣</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E5%B9%B3%E6%88%90%E3%82%A6%E3%83%AB%E3%83%88%E3%83%A9">平成ウルトラ</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A8%E3%83%BC%E3%82%B9">エース</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%BF%E3%83%AD%E3%82%A6">タロウ</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%AC%E3%82%AA">レオ</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%B6%E2%98%86%E3%82%A6%E3%83%AB">ザ☆ウル</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%EF%BC%98%EF%BC%90">８０</a></li>
      </ul>
   </li>
   <li><a href="#!">▼ライダー</a>
      <ul>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC">ライダー</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E7%B5%82">ライダー終</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E6%98%A0%E7%94%BB">ライダー映画</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E6%98%AD%E5%92%8C%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC">昭和ライダー</a></li>
      </ul>
   </li>
   <li><a href="#!">▼戦隊ほか</a>
      <ul>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E6%88%A6%E9%9A%8A">戦隊</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E6%88%A6%E9%9A%8A20%E4%B8%96%E7%B4%80">戦隊20世紀</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E6%88%A6%E9%9A%8A%E6%98%A0%E7%94%BB">戦隊映画</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E8%B6%85%E6%98%9F%E7%A5%9E">超星神</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E7%89%B9%E6%92%AE%E4%BB%96">特撮ほか</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E7%89%B9%E6%92%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88">特撮イベント</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E8%A5%BF%E9%81%8A%E8%A8%98">西遊記</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E6%99%82%E4%BB%A3%E5%8A%87">時代劇</a></li>
      </ul>
   </li>
   <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%B4%E3%82%B8%E3%83%A9">ゴジラ</a></li>
   <li><a href="#!">▼特撮洋画</a>
      <ul>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A2%E3%83%A1%E3%82%B3%E3%83%9F%E6%B4%8B%E7%94%BB">アメコミ洋画</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E7%89%B9%E6%92%AE%E6%B4%8B%E7%94%BB">特撮洋画</a></li>         <li><a href="https://katoku99.hatenablog.com/archive/category/%E7%89%B9%E6%92%AE%E9%82%A6%E7%94%BB">特撮邦画</a></li>
      </ul>
   </li>
   <li><a href="https://katoku99.hatenablog.com/archive/category/%E7%89%B9%E6%92%AE%E6%84%8F%E8%A6%8B">特撮意見</a></li>
   <li><a href="#!">▼アニメ</a>
      <ul>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1">アニメ</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1%E6%98%A0%E7%94%BB">アニメ映画</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0">ガンダム</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%A4%E3%83%9E%E3%83%88">ヤマト</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%9E%E3%82%AF%E3%83%AD%E3%82%B9">マクロス</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%9E%E3%83%B3%E3%82%AC">マンガ</a></li>
      </ul>
   </li>
   <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0">ガンダム</a></li>
   <li><a href="#!">▼オタ思想他</a>
      <ul>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%82%AA%E3%82%BF%E3%82%AF">オタク</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E6%80%9D%E6%83%B3">思想</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E8%BF%BD%E6%82%BC">追悼</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E3%83%89%E3%83%A9%E3%83%9E">ドラマ</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E8%8A%B8%E8%83%BD">芸能</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E5%90%8C%E4%BA%BA%E8%AA%8C">同人誌</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E7%9B%AE%E6%AC%A1">年度目次</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/%E8%A6%9A%E3%81%88%E6%9B%B8%E3%81%8D">覚え書き</a></li>
         <li><a href="https://katoku99.hatenablog.com/archive/category/InDesign%E8%A6%9A%E6%9B%B8">InDesign</a></li>
      </ul>
   </li>
</ul>

　「ＵＲＬ」と「カテゴリー名」は、各自のブログのそれに応じて読み替えてください（汗）。
――「ＵＲＬ」を「#!」と記述している「親・カテゴリー」の箇所は、クリックやタップをしてもドコにもジャンプさせない、という意味の規定語です。理由は後述――


６－２．ＣＳＳ

　（「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク・カスタマイズ）」⇒「デザインＣＳＳ」欄に、既存のものは残したまま、以下のＣＳＳを加筆⇒「変更を保存する」）
　（ＣＳＳは記述する位置が後半以降だと効力を発揮しない説もあったので、念のために冒頭の「はてなブログ」採用デザインテーマのＣＳＳと、先に入力した「アーカイブ・ページ」用のＣＳＳの中間に、以下のＣＳＳを加筆）

/*==============================================
画面上部に貼りつく「固定グローバル・メニュー」かつ「ドロップダウン・メニュー」
================================================*/
ul.navi-top, ul.navi-top a {
        color:blue;/*メニューバーの文字色*/
        background-color:white;/*メニューバーの背景色*/
}

ul.navi-top a:hover {
        color:white;/*マウスオーバー時の文字色*/
        background-color:grey;/*マウスオーバー時の背景色*/
}

ul.navi-top {
        position:fixed;/*位置固定（left:0やtop:0と合わせての画面上位に固定？）*/
        left:0;
        top:0;
        margin-top: 3.3em;/*枠線外・上余白・メニュー文字の３．３文字分（？）を空けることで、「はてなブログ」規定ヘッダーと当該ブログ・タイトルの隙間（汗）に当該「固定グローバル・メニュー」を表示（※各ブログごとでの改変対象数値）*/
     /* margin: 0;  枠線外・余白（コメント囲いで無効化）*/
        padding:0;/*枠線内・余白*/
        font-size:65%;/*カテゴリ名の文字の大きさを縮小（※各ブログごとでの改変対象数値）*/
     /* font-size:14px;  カテゴリ名の文字の大きさ（コメント囲いで無効化）*/
        width:100%;
        text-align:center;/*左寄せや右寄せではなく均等配置*/
        z-index:50;/*重なり順（※10000などの巨大数を指定すると、「はてなブログ」規定ヘッダーに上塗り優先する形で、当該「グローバル・メニュー」が表示されるが、規約違反なので不可！　画面スクロール時に最優先表示の「はてなブログ」規定ヘッダーから離脱することで、当該「グローバル・メニュー」が本文よりも優先表示される模様）*/
}

/*１階層目*/
ul.navi-top li {
        width: 80px;/*１階層目の幅（※各ブログごとでの改変対象数値。★画面幅の拡縮に応じて変化する「width: calc(100% / メニューのカテゴリ数 )」を指定したら、２層目が表示不可になってしまった。どなたか解決策を教えてくださいませ！・汗）*/
        display: inline-block;/*ヨコ並びのブロック要素だが、幅・高さ・内外余白指定可（※float:leftの代替？　高度版？）*/
        list-style-type: none;/*カテゴリ名の先頭に中点や番号なし*/
        position: relative;/*相対位置*/
}

ul.navi-top a {
        line-height: 18px;/*メニューバーの高さ（※各ブログごとでの改変対象数値）*/
        text-align: center;/*文字位置・中央寄せ*/
     /* padding-left:10px;  枠線内・左余白（コメント囲いで無効化）*/
        text-decoration: none;/*文字装飾・なし*/
        font-weight: nomarl;/*文字の太さ・普通*/
        display: block;/*タテ並びのブロック要素で、幅・高さ・内外余白指定可*/
}

/*２階層目*/
ul.navi-top ul {
        display: none;/*非表示？？*/
        margin:0px;/*枠線外余白*/
        padding:0px;/*枠線内余白*/
        position: absolute;/*絶対位置*/
}

ul.navi-top ul a{
        width: 100%;/*２階層目の幅（※小さい数値の％だと崩れる）*/
} 

ul.navi-top li:hover ul {
        display: block;/*タテ並びのブロック要素で、幅・高さ・内外余白指定可*/
}

　……流用元のブログさま、あるいは各種の「グローバル・メニュー」を設定しているブログさまでも散見される現象ですけど、「ＰＣ」では問題ないけど「タブレット」や「スマホ」だと、「グローバル・メニュー」の「親・カテゴリー」名を指先でタップして「サブ・カテゴリー」を「ドロップダウン」表示させると、「ドロップダウン・メニュー」自体は表示されるのですけど、そのまま滞空せずに即座に「サブ・カテゴリー」ではなく「親・カテゴリー」自体のリンク先の画面に遷移してしまう傾向があるようです。ゆっくりタップすると、「ドロップダウン・メニュー」が表示された画面のままで滞空するようではありますが……。


――ここのみ、２０１９年２月２０日（水）加筆：「タブレット」や「スマホ」でタップして「ドロップダウン・メニュー」を表示させると、「サブ・カテゴリー」を選択する前に「親・カテゴリー」のリンク先にジャンプしてしまう問題を回避するために、「親・カテゴリー」の「ＵＲＬ」にクリックやタップをしてもドコにもジャンプさせない規定語「#!」を指定しました――


　あと、「ＰＣ」の場合、この「固定グローバル・メニュー」は、画面のヨコ幅の縮小に応じて、「カテゴリー」配置があくまでも１行に収まったままでの均等配置では縮まらずに、あまりに画面のヨコ幅を狭くしてしまうと「カテゴリー」の後段が２行目の「メニュー・バー」として表示されてしまいます（汗）。
　それはまだしもイイとしても（？）、１行目の任意の「カテゴリー」を選択して「サブ・カテゴリー」を「ドロップダウン」表示させると、「サブ・カテゴリー」の１件目が「固定グローバル・メニュー」の２行目の「カテゴリー」表示のウラ側に隠れてしまって表示がされない……という問題もあります。
――「タブレット」や「スマホ」では、拡大表示は可能でも、縮小表示は基本不可能なので、直上の問題は生じないと思います――


　しかし、このへんの問題を解消するスキルも知識もなく、画面をそこまで極端に狭めて表示させる御仁もそんなにいないだろうし（？）、トータルでの得失を勘案して見切り発車で当該方策を採用し、物理的・肉体的にヒトが傷ついてしまうような悪事でもなかろうと（汗）、上記のＨＴＭＬとＣＳＳも公表させていただきました。


７．悪ノリして、「グローバル・メニュー」＆「固定グローバル・メニュー」の両方を表示（…文字の小ささがGoogle Search Console機能で問題視されるようになったために、拙ブログでは廃止中・汗）

　（２０１９年２月２３日（土）加筆）

「４．」の「グローバル・メニュー」＆「６．」の「固定グローバル・メニュー」を同時に表示

　「カテゴリー」ごとの「記事一覧」などの「リンク」集を表示させている「固定グローバル・メニュー」とはまた別に、新「はてなブログ」のブログ・タイトル直下に表示される当該「ブログの説明」文中に、「オススメ記事」へのリンクをいくつか貼れないかなぁ、とついつい欲張ったことを考え出してしまう。
――旧「はてなダイアリー」時代においては、「ページのヘッダ」設定画面にＨＴＭＬを加筆することで、ブログ・タイトルの直下に固定文言や「おすすめ記事」への「リンク」も加筆可能であったため――
　で、「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「設定」⇒「基本設定」⇒「ブログの説明」欄に、リンクを貼る意味のＨＴＭＬを加筆して「変更する」押下で試してみたところ……、見事に玉砕。ＨＴＭＬ言語がそのままで表示されてしまう（汗）。


　そこで、ビンボー症の神さまのインスピレーションがまたハタとヒラメいた（笑）。「４．」の「グローバル・メニュー」＆「６．」の「固定グローバル・メニュー」を同時に表示させてしまおう！


　てなワケで、「デザイン」⇒「ヘッダ」⇒「タイトル下」に、


・まず、「６ー１．」の「固定グローバル・メニュー」のＨＴＭＬを貼付し、
・直後に、直上のＨＴＭＬと直下のＨＴＭＬの境目を識別しやすくさせるための便宜で、数行の空白を空けて、
・最後に、「４．ー１」の「グローバル・メニュー」のＨＴＭＬを貼付して、


「はてなブログ」規定ヘッダーの直下は「固定グローバル・メニュー」を、拙ブログ・タイトル直下には通常の「グローバル・メニュー」を設置してみた次第（爆）。


　今回追加した通常の「グローバル・メニュー」は、「カテゴリー」名ではなく「オススメ記事」名を表示させているため、「リンク」部分の文字数が多く、しかも各々の「リンク」の文字数の長短も異なるため、均等配置だとかえって不格好になるために、文字数に応じて各々の「リンク」の間隔も詰めたかったのだけれども、いろいろと試しても当方のスキルではうまくいかず……。今後の課題といたしやす。


　「ＣＳＳ」は、先の「４－２」の通常の「グローバル・メニュー」と基本は同一ですけど、


・「width: calc(100% / 11);/*メニュー幅÷メニューカテゴリ数（※各ブログごとでの改変対象数値）*/」
　　　　　　　　　　　　　↓
・「width: calc(100% / 8);/*メニュー幅÷★メニューおススメ記事数（※各ブログごとでの改変対象数値）*/」


・「font-size: 70%;/*カテゴリ名の文字の大きさを縮小（※各ブログごとでの改変対象数値）*/」
　　　　　　　　　　　　　↓
・「font-size: 65%;/*★記事名の文字の大きさを縮小（※各ブログごとでの改変対象数値）*/」


上記の２箇所のみを、変更しております。


――２０１９年３月２９日（金）加筆：上記の固定しない方の「グローバル・メニュー」については、「ＰＣ」上においてはＧｏｏｇｌｅのブラウザ、Ｇｏｏｇｌｅの「Ｃｈｒｏｍｅ」ブラウザ、マイクロソフトの新世代ブラウザ「Ｅｄｇｅ」では問題なく表示されることを確認。「タブレット」においてもＧｏｏｇｌｅのブラウザ、Ｇｏｏｇｌｅの「Ｃｈｒｏｍｅ」ブラウザでは問題なく表示されることを確認。「スマホ」においてもＧｏｏｇｌｅのブラウザでは問題なく表示されることを確認。
　しかし、「ＰＣ」上においてはマイクロソフトのブラウザ「インターネット・エクスプローラー」だと、拙ブログを例に取れば、全８のオススメ記事中、先頭の７記事はメニューの１行目に表示されるも、最後の１記事のみ２行目にハミ出て表示されてしまうことが発覚（汗）。
　ただまぁ大過はナイと思うし、マイクロソフトは「インターネット・エクスプローラー」のバージョンアップは終了して、新ブラウザ「Ｅｄｇｅ」への移行を奨励していることもあるので、「インターネット・エクスプローラー」での「グローバル・メニュー」の表示が少々オマヌケになっても、そのまま放置することにします（汗）――


８．「アーカイブ・ページ」をさらにスマート化

　（２０１９年２月２３日（土）加筆）

「全記事見出し一覧」や「カテゴリーごとの記事見出し一覧」ページの行間詰め

改行後の「左詰め」の「カテゴリー」リンクの表示も、改行なしでの該当行内で「右詰め」化

（ただし、記事名が長いと、右詰めの「カテゴリー」リンクと、記事名の末尾が重複～汗）


　「はてなブログ」の「アーカイブ・ページ」の行間等々が空きすぎていたり、各記事ごとの「カテゴリー」を示すリンクも、ナゼか「記事名タイトル」を表示する行から改行されて、その１行下に「左詰め」（！）で表示されて、各々の記事がドコの「カテゴリー」に属しているのか即座に判別しがたい見づらいモノなので、ナンとかしたいなぁと、コレもまたサーフィンしていたところ……、ありました！


　以下のブログさまを参考にさせていただき、そのまま流用（汗）させていただきました。


www.detourist.net


８－１．ＣＳＳ

　（「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク・カスタマイズ）」⇒「デザインＣＳＳ」欄に、既存のものは残したまま、先の「２．」と「３．」の「アーカイブ・ページ」のＣＳＳも残したまま、その下に以下のＣＳＳを加筆⇒「変更を保存する」）

/*==============================================
「記事一覧ページ」をさらにスマート化（ただし、記事名が長いと、右詰めの「カテゴリー」のリンクと重複～汗）
================================================*/
.archive-entry-header {
    display: table;
    width: 100%;
    border: none;
    padding: 0;
}
.archive-entry-header .date {
    display: table-cell !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    width: 86px !important;
    text-align: right !important;
}
.archive-entry-header .entry-title {
    display: table-cell !important;
    padding: 2px 0 2px 1em !important;
    margin: 0 !important;
    font-size: 100% !important;
    font-weight: normal !important;
}
.archive-entry {
    position: relative;
    margin-bottom: 0 !important;
}
.archive-entry .categories{
    position: absolute;
    right: 0;
    bottom: 2px;
    margin: 0 !important;
}
.archive-entry .entry-thumb-link, 
.archive-entry .archive-entry-body {
    display: none !important;
}




９．リダイレクトされない旧「アーカイブ・ページ」のＵＲＬを、新「アーカイブ・ページ」のＵＲＬに一括変換

　（２０１９年３月１日（金）加筆）
　旧「はてなダイアリー」の各記事のＵＲＬから新「はてなブログ」の各記事のＵＲＬへの遷移は、「はてな」社側にて自動でリダイレクト遷移してくれるので、記事中に過去日付の記事の旧ＵＲＬでリンクを貼っていたままで放置しても問題はなし。
　しかし、各記事中に手書きで記した、「アーカイブ・ページ」（全記事見出し一覧）の旧ＵＲＬや、カテゴリーごとの「アーカイブ・ページ」の旧ＵＲＬについては、リダイレクトされないことが発覚（汗）。
――厳密には、前者の　旧「全記事見出し一覧」　⇒　新「ブログ」トップページ　にリダイレクト。後者の　旧「カテゴリーごとの記事見出し一覧」　⇒　新「全記事見出し一覧」　にリダイレクト。いずれにしても、望ましい画面遷移のされ方ではない（汗）――


　こんなのは、新旧ＵＲＬの語句に法則性がある変更なのだから、リダイレクト設定するのはカンタンだろ！　「はてな」社側で「アーカイブ・ページ」も旧ＵＲＬから新ＵＲＬへリダイレクトしてくれよ～。とダメ元で、「はてな」の「お問い合わせ」フォームから要望してみようと思ったものの、「待て、待て」。
　新「はてなブログ」登場が８年も前の震災の年の２０１１年。それから８年も経ていれば、ごくごく少数でも上記のような要望はすでになされているハズ。しかも対応はカンタンなハズ（？）。それでも実装されていないということは……。少なくともこの件についてだけは、「はてな」スタッフ諸氏にもヤル気がなかったということなのか？（爆）


　てなワケで、「はてな」社に頼らずに、好事家の職人有志が、上記の目的を達成するような便利ツールを作成しているのではなかろうか？　とググってみたら、「あった！　あった！！」（笑）。
　「はてなブログ」の全記事中の特定語句――各記事中に手書きしていた「ＵＲＬ」の記述も含む！――をひとつずつ、いちいち手書きで修正するのではなく、複数記事にまたがる語句であっても、「変更前の語句」と「変更後の語句」を指定してあげれば、一括して変換・置換してくれるツールが！


　少なくとも、以下の３種の「はてなブログ」用の記事中の語句一括変換ツールがありました。

９－１．「はてなブログ一括置換ツール」

（紹介記事）
www.notitle-weblog.com
（実サイト）
spiderwebs.tokyo


９－２．「ReplaceEntryContent（はてなブログ用ツール）」

（紹介記事）
www.zbuffer3dp.com
（実サイト）
smdn.jp


９－３．「はてなブログライター」

ima.hatenablog.jp



　拙ブログ管理人である当方は、一番操作がカンタンである「９－１」の「はてなブログ一括置換ツール」を用いて、語句やＵＲＬの一括変換（置換）を実施――ただし、「はてな」側のサーバー負荷を軽減するため、全記事を一括変換できるツールではなく、最新の記事からさかのぼって１００記事ずつを指定して一括変換するツール――。


　しかし、大は小を兼ねないことも往々にしてあり、「アーカイブ・ページ」（全記事見出し一覧）のＵＲＬを最初に一括置換してしまうと、カテゴリーごとの「アーカイブ・ページ」のＵＲＬの共通先頭部分と識別が付かなくなってしまい、のちの一括変換に支障が生じるために、以下の順番にて、語句変換やＵＲＬ変換を実施しています。


（１）．カテゴリーごとのアーカイブ・ページの旧ＵＲＬ　⇒　カテゴリーごとのアーカイブ・ページの新ＵＲＬ
（例：『http://d.hatena.ne.jp/katoku99/archive?word=%2a%5b%a5%a6%a5%eb%a5%c8%a5%e9%5d』　⇒　『https://katoku99.hatenablog.com/archive/category/%E3%82%A6%E3%83%AB%E3%83%88%E3%83%A9』）


　「全カテゴリー」について、「１カテゴリー」ごとに上記の一括変換を実施。「全カテゴリー」について、共通の先頭語句である『http://d.hatena.ne.jp/katoku99/archive?word=』⇒『https://katoku99.hatenablog.com/archive/category/』についての一括変換はしてはイケナイし、しても無意味。
　その理由。旧「はてなダイアリー」と新「はてなブログ」では、「文字コード」が「Ｓ－ＪＩＳ」（エス・ジス）からその上位拡張版（？）である「ＵＴＦ－８」（ユーティーエフ・エイト）に変更になったようで（？）、「カテゴリー」名が新旧で同じでも、ＵＲＬ上でのスペルは異なる英数字や記号になってしまうため。
（コレが理由で、「はてな」社側では「カテゴリー」ごとの「アーカイブ・ページ」をリダイレクトしてくれないのであろうか？　だとしても、「カテゴリー」なしの「全記事見出し一覧」はリダイレクトしてくれてもイイようにも思うけど・汗）


（２）．年月ごとのアーカイブ・ページの旧ＵＲＬ　⇒　年月ごとのアーカイブ・ページの新ＵＲＬ
（例１：『http://d.hatena.ne.jp/katoku99/archive/199712』　⇒　『https://katoku99.hatenablog.com/archive/1997/12』）
（例２：『http://d.hatena.ne.jp/katoku99/archive/1997』　⇒　『https://katoku99.hatenablog.com/archive/1997』）


　拙ブログでは、旧「はてなダイアリー」が開設される前の２０世紀～２１世紀初頭の「年月」単位の記事の「アーカイブ・ページ」を、特定の旧作品やシリーズの「全記事見出し一覧」としても使用していて、各記事中でこの「年月」単位の旧「アーカイブ・ページ」のＵＲＬのリンクを貼っているので（まぁフツーの方はこんなアクロバティックなリンクは貼らないでしょうけど・汗）、コレも一括変換の対象とした。ただし、「年月」中の「月」は置換対象にはいちいち含まずに「年」までの語句に留めて、「年」の直後の末尾に「/」（スラッシュ）を付与して一括変換（置換）を実施する方が、１２ヵ月分＝１２回の置換を１回にて済ませることができるので、よりクレバー。
――厳密には、「年月」単位の旧「アーカイブ・ページ」のＵＲＬは、「年月」単位の新「アーカイブ・ページ」のＵＲＬへとリダイレクトされる。しかし、直下の（３）の分と同時に一括変換して、新ＵＲＬ規定の末尾「1997/12」ではなく「年」と「月」の間の「/」（スラッシュ）抜きの末尾「199712」で一括変換してしまうと、新「アーカイブ・ページ」にリダイレクトされても「Ｎｏｔ　Ｆｏｕｎｄ　　お探しの記事は見つかりませんでした。」となってしまう支障が生じるので、先に当該の「年月」単位の「アーカイブ・ページ」のＵＲＬだけで一括変換（まぁ工夫をこらせば、（３）のあとに変換してもイイのだろうけれど）。
　ちなみに、「年」単位の旧「アーカイブ・ページ」のＵＲＬは、「年月」単位のそれとは異なり、新「アーカイブ・ページ」のＵＲＬへとリダイレクトしてくれない（新ブログのトップページへ遷移する）。ナンでやねん（汗）――


（３）．全記事のアーカイブ・ページの旧ＵＲＬ　⇒　全記事のアーカイブ・ページの新ＵＲＬ
（例：『http://d.hatena.ne.jp/katoku99/archive/』　⇒　『https://katoku99.hatenablog.com/archive』）


　上記（１）（２）の変換後にはじめて、「年月」や「カテゴリー」や「特定の作品」や「特定のシリーズ」に限定されない、真の意味での「全記事見出し一覧」の旧ＵＲＬの記述を新ＵＲＬへと一括置換。


（４）．旧「はてなダイアリー」での検索窓「searchdiary」や、アーカイブ・ページでの検索窓「archive」での語句検索結果ＵＲＬ変換　
（例１：『http://d.hatena.ne.jp/katoku99/searchdiary?word=～』　⇒　新「はてなブログ」では検索結果の全記事「全文」を表示する機能自体がナイ（？）。（検索結果の全記事「一覧」ページはあり））
（例２：『http://d.hatena.ne.jp/katoku99/archive?word=～』　⇒　『https://katoku99.hatenablog.com/search?q=～』）


　前者の検索窓「searchdiary」での検索結果の全記事「全文」は、新ブログ側に該当ページがないので（？）、検索結果の全記事「一覧」のＵＲＬに代替させるのがイイと思われます。
　後者の旧アーカイブ・ページでの検索窓「archive」での検索結果は、「～」が検索語句に該当しますけど、先にも述べた新旧ブログで「文字コード」が変更されている問題があるために、新ブログ側での該当語句での検索結果の画面のＵＲＬを、変換後のＵＲＬとして指定するのがイイでしょう。
　……コレらのＵＲＬを、記事中にリンクとして貼っていた御仁は極少だとは思われますが（笑）。



　個人的には、一番操作がカンタンである「９－１」の「はてなブログ一括置換ツール」をオススメするけど、拙ブログの場合、カテゴリー数が多かったために、単純計算では、


（１）．全３２「カテゴリー」数　×　８回（１００記事ずつの全・約７５０記事なので８回変換）　＝　　２５６回（汗）
（２）．４種の「年月」（「１９９７年１２月」と「２０００年１１月）ほか全４種ほどの「年月」）　×　８回（同上）　＝　３２回
（３）．８回（同上）
（４）．数回


と３００回前後、平日の帰宅後の深夜に数日間を要する変換作業を実施するハメに（汗）。そう考えると、「９－２」の「ReplaceEntryContent（はてなブログ用ツール）」か「９－３」の「はてなブログライター」を用いた方がよかったとも後悔……。


　あと、正しく一括変換されたか否かについては、最後に上記のツール群ではなく、新「はてなブログ」の「記事の管理」画面で、過去記事の「語句」検索機能を用いて、変換漏れ――変換前の語句やＵＲＬ――を探した方が、１００記事単位ではなく全記事単位での検索でもあるのでラク。変換漏れが発見されれば、「はてなブログ」側なり各種の変換ツール側にて個々に再変換することを忘れずに～。
――原因は不明だけれども、当該ツールで一括変換しても、ごくごくマレに変換されない記事が発生することはアリ。まぁ大過はナイので、最後に新「はてなブログ」の「記事の管理」画面で、過去記事の「語句」検索機能を用いて、変換されなかった記事については個々に手修正で変換すればよし！――


１０．「サイドバー」の固定

　（２０１９年３月１日（金）加筆）

スクロールして下端に達すると画面に固定される、ＣＳＳのみで設定可能な「サイドバー」

　コチラもググると、「ｊＱｕｅｒｙ」や「Ｊａｖａ」等の動作が少々重たくなる言語を使用しないでも可能な「サイドバー」の固定法がありました。以下の３箇所のサイトを参考にさせていただきました。


www.okuni.me
www.bambi.pro
www.foxism.jp


１０－１．ＣＳＳ（未設置）
/*==============================================
スクロールして下端に達すると、画面に固定される「固定サイドバー」
================================================*/
#box2{/*サイドバー全体の箱*/
	    display: -webkit-flex;
	    display: flex;
}	
.hatena-module:last-of-type{/*サイドバー最後の要素*/
	    position: -webkit-sticky;
	    position: sticky;
	    top: 0;/*上から離す距離（50pxなど）*/
}


しかし！　拙ブログでは「サイドバー」がなぜだか固定されない模様（汗）

　原因は不明です。ただし、２０１９年３月１３日（水）、それまでに生じていた以下の別件は解決しておりました。


　「『拙ブログ・デザインでは「サイドバー」が「記事本文エリア」側に少しハミ出て表示される不具合が発生するため、当該ＣＳＳの設置は保留（汗）」


　上記の問題が解消した理由は、当該「はてなブログ」デザインの本家本元の造物主さまが、２０１９年３月１０日（日）に「サイドバー」中の「検索窓」が「ブログ」の「本文」側にハミ出てこないようにデザインを改修されたことに起因するのでは？　あるいは、ついでに「サイドバー」自体を改修してくださったのでは？　と愚考しております。
　経緯としては、「検索窓」のハミ出し問題が改修されたので、試しに「サイドバー」固定用の当該ＣＳＳを設置してみたところ、「サイドバー」が「記事本文エリア」側に少しハミ出て表示される不具合は解消されていることは確認できた次第です。ただし、ハミ出はしないし、むしろ大カンンゲイですけど、「サイドバー」は１行あたり１文字ほど増えて表示されております――「サイドバー」中の「最新20記事一覧」（拙ブログでは「ここｸﾘｯｸで全記事一覧」名義）の方は例外でして、ナゼだかコチラは１行あたりの文字数には変更はありませんでした（それによる支障もまったくありませんが・笑）――。




――２０１９年３月２８日（木）加筆：「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「スマホ（スマホのマーク）」⇒「詳細設定」⇒「レスポンシブデザイン」欄に「レ」点を入力した状態で、『「はてなブログ」用「レスポンシブ対応」宣言』である「/* Responsive: yes */」を「デザインＣＳＳ」欄へはあえて加筆しない設定の状態、かつ上記の「サイドバーの固定」のＣＳＳを加筆してある設定の状態で、スマホの方も参照してみました。
　結果、「サイドバー」がサイドに寄らずに、画面の中央に表示される「ミドルバー」状態になってしまうことが発覚！（爆～タブレットの方は大丈夫でした）
　仕方がないので、上記「サイドバーの固定」のＣＳＳを削除したところ、スマホでも「サイドバー」はキチンとミドルならぬサイドへと寄りました。てなワケで、拙ブログの「デザイン・テーマ」では、「サイドバーの固定」はしない方がイイのかも？（汗）――


――２０１９年４月１４日（土）追記：当該デザインテーマ「Hatena for はてなブログ」で、「サイドバーの固定」が可能か否かを本格的（？）に調査してみました。
　当方も利用している「はてなブログ」無料ユーザープランでは、「はてなブログ」を合計３つ開設できるので、以下のサイトを参照して（https://walkingyorimichi.hatenablog.com/entry/hatena-beginner-05）、非公開設定のダミーブログを作って、「サイドバー固定」指定文以外のＣＳＳを省いて確認してみたところ……、「サイドバーの固定」はならず（笑）。よって、他の用途のＣＳＳが悪さをしているという可能性もゼロとなりました。


　試しに、２０１９年２月中下旬に追加されたばかりの旧「はてなダイアリー風」の同系デザインデーマ「classic diary（日記向け）」でも、「サイドバーの固定」が可能か否かをダミーブログの方で確認してみました。
　結果……。コチラもダメでした（爆）。
　いやまぁ別にイイんですけれどもネ。一応、確認してみないと気が済まない、実験してみたかっただけで、大きな支障があるとはいえないので、天秤にかければ当該デザインテーマ自体をとても気に入っていることもあり、このまま使用をしつづけるつもりです。あとは、それぞれのデザインテーマの造物主さまが気まぐれで降臨してくださり、改造でもしてくだされば……といったところですかネ（笑）――



１１．「リンク切れ」チェック・ツール

　（２０１９年３月２０日（木）加筆）
　旧「はてなダイアリー」から新「はてなブログ」への移行ついでに、記事中に貼っていた過去日付記事へのリンクＵＲＬが誤記になっていて、リンク先に実は記事が存在しないところがあれば、やはり今どきのことだから、奇特な職人の方々が「リンク切れ」チェックツールを作成していて、ネット上にフリー（無料）で置いておいてくださるであろうと推測。
　それで、ググってみたところ……。やっぱり、あった、あった、ありました（笑）。


lonestar.hatenablog.com
hukugyouhoukoku.hatenablog.com
gotubo.hatenablog.jp
https://www.zakkiblog.net/entry/link-checkwww.zakkiblog.net
webtan.impress.co.jp


　で、操作がカンタンそうなので、上記のブログ群でも多く言及されていた、以下のサイトの「リンクチェッカー」（dead-link-checker）を使って、拙ブログ全記事に対して、過去記事へのＵＲＬの誤記ということに留まらず、外部リンクの「リンク切れ」も含めて確認してみた。
www.dead-link-checker.com


１１－２．「リンクチェッカー」使用時の注意点＆反省点

　上記のブログ群では数十分～数時間はかかると言及されている。拙ブログでは全記事数が約７５０記事で各々が比較的に長文で、過去の日付記事へのリンクも各記事・各所で膨大に貼ってあることから、通常以上に長時間を要するであろうと予想はしていたけれども……。
　実行してみると、２４時間かかっても終わらなかった（爆）。１回目は１日半。２回目は１日強。そして、注意点や事前の準備が必要なことも判明。

１１－２－１．リンクチェック中に、別サイトを表示中だと、リンクチェック活動も休止

　インターネットのサイトを表示させるブラウザで、別の「タブ」を開いて、そこで他のサイトを表示させたままにしておくと、その間はリンクチェック活動も休止になってしまう――別「タブ」やウラ側でリンクチェックが進行することはない――。「リンクチェッカー」サイトに刻々と表示されつづけていくログ（記録）の時刻で、他サイト閲覧中は休止状態になっていると判断可能。

１１－２－２．パソコンがスリープ状態になると、リンクチェック活動も休止

　パソコン自体が電電ＯＮでも、５分・１０分・１５分間、操作がナイと、自動で電源ＯＦＦではなく、電源は落ちていないけど低電力消費モードであるスリープ状態となって、画面も真っ暗になってしまうが、その間もリンクチェックが休止してしまう。
　２４時間なり就寝中にチェックを実施する場合は、スリープ状態にならないように、設定を変更しておくこと。その方法は以下のサイトなどの通り。
www.tipsfound.com
――ついでに、今どきのパソコンは、「電源に接続時」と「バッテリー駆動時」の２種に分かれたスリープ設定があることも知る。そうか、だから当方宅のＰＣは電源コンセントを抜いて、持ち歩いてバッテリー駆動させていると５分でスリープ状態になってしまっていたのか（汗）。ちなみに、「画面」（モニター・ディスプレイ）だけ規定時間が過ぎるとＯＦＦになる設定もあるけど、「画面」がブラックアウトするまでの時間の方を短く、パソコンが「スリープ」状態になるまでの時間を長く設定しておけば、「画面」が先に真っ暗になってもパソコン自体は「スリープ状態」にはならずに活動中（リンクチェック中）にすることも可能――

１１－２－３．「はてなブックマーク」ボタンは非表示にしないと、リンク切れ扱い

　ヨソさまの「はてなブログ」で当該「リンクチェッカー」を使用したところ、自ブログ記事の「被・ブックマーク・ページ」が「リンク切れ」扱いとなってエラー表示されたとは聞かないので、拙ブログ特有の現象もしくは一時的な不具合現象やもしれないけど、拙ブログのおそらく個々の記事ごとの全「被・ブックマーク・ページ」が「リンク切れ」扱いとしてエラー表示されてしまったのであった――実際には「被・ブックマーク・ページ」自体は「４０４　Ｎｏｔ　Ｆｏｕｎｄ」にはならずに、実在はしているというのに！（たとえば、http://b.hatena.ne.jp/entry/https:/katoku99.hatenablog.com/entry/20181125/p1）――
　これにより、約「７５０」記事ある拙ブログの「リンク切れ」エラーの数は「８１１」個にもなってしまった（爆）。


　試しに、「はてなブログ」画面の右上方の「自分のはてなＩＤ」⇒「デザイン」⇒「ＰＣ（スパナのマーク・カスタマイズ）」⇒「記事」で、ブログ記事中に表示させる「ツイートボタン」や「Ｆａｃｅｂｏｏｋ『シェア』ボタン」などの「ソーシャルパーツ」欄から、「はてなブックマークボタン」欄の「レ」点を取り除いて、同ボタンを非表示設定にしてから、「リンクチェッカー」を再実行してみたところ、エラーの数は「４１」個に激減した。
　というワケで、当該「リンクチェッカー」を実施する前には、「はてなブログ」の記事中に表示させる「はてなブックマークボタン」は一時的にでも「非表示」に設定しておいた方がイイと思われる。

１１－２－４．その他

　上記の「被・ブックマーク・ページ」がエラー扱いとなる問題は解消したが、「はてなブックマークボタン」経由ではなく、意図的に表示させている「はてなブックマークページ」（http://b.hatena.ne.jp/entrylist?url=https%3A%2F%2Fkatoku99.hatenablog.com%2F&sort=count）については、実在するのに「リンク切れ」扱いとしてエラーになってしまう。コレも実際にはエラーではないので無視してイイ！


　その他、旧「はてなダイアリー」や新「はてなブログ」でデフォルトの、記事中の語句に自動でリンクが貼られた先の「はてなキーワード」や「はてなキーワード」の「アマゾン商品ページ」もリンクチェックしてくれているのはイイけれど、実在するコレらの「はてなキーワード」ページでもマレに「リンク切れ」扱いとしてエラーになってしまう。
　いずれにせよ、「はてなキーワード」ページで「リンク切れ」エラーとなっていたものも、実際には実在するページなのでエラー表示は無視してイイ！


　このへんはナンでであろうか？　表示されるまでのアクセス速度がやや遅かったりするので、それを「リンク切れ」扱いと判定してエラー表示としているのであろうか？
　ただ、特に大きな支障ではなく、そこまで万能を求める気もナイので、目視で全記事の「リンク切れ」検査などはできない以上は、当該ツールを開発した職人さんには感謝したい（笑）。


　なお、拙ブログでは、各記事中に過去記事への膨大なリンクを貼ってはいるけど、手前ミソで恐縮だけれども誤記による「リンク切れ」はほぼナシ――厳密には２件ほど誤記が発覚して、それは手修正を完了。まぁ「リンク切れ」ならぬ「リンク先・間違い」については、自動・機械ツールではチェックのしようがないので、そのへんについては不明です（汗）――。
　ただし、マレに貼ってある外部サイトへのリンクは、趣味系・オタク系商業サイトであれば閉鎖されていたり、秋葉原ラジオ会館にあった輸入ＤＶＤ専門店が閉店になっていたり、ｓｏ－ｎｅｔやｂｉｇｌｏｂｅやｎｉｆｔｙや弱小電子書籍のサイトがなくなっていたりで、諸行無常の響きあり。ヨソさまの９０年代中盤に子供時代を送ったとおぼしきブログにリンクした先がプライベートモードで実質閉鎖になっていたけど、その引っ越し先サイトでは現在、商業ライターとして活躍中！　というモノもあったりして「あらあら……」と隔世の感。


　いずれについても、「リンク」ＵＲＬの抹消はせずに、「リンク」の直後に「（２０１９年現在、リンク切れ）」の文言を追加することで対応。好事家の方はご存じ、インターネットの草創期から、全世界の全サイトを記録・収集している「インターネット・アーカイブ」（http://warp.da.ndl.go.jp/contents/reccommend/world_wa/world_wa02.html）（https://archive.org/）というモノがあり――完璧には収集しきれていないようではありますけど、オプションに「Search archived web sites」を指定すれば検索可――、そこでＵＲＬを指定して、遷移した先の次画面で「年月日」も指定すると、消滅してしまったハズの過去記事が読めることがあるので――拙ブログの旧「はてなダイアリー」時代のＵＲＬ（http://d.hatena.ne.jp/katoku99/）もそこにて参照可（汗）――、万々が一のための歴史記録的便宜として「リンク切れ」のＵＲＬ自体は残してみた次第。ＳＥＯ（サーチ・エンジン・対策）的にイイとか悪いとかは、この場合は二の次です（笑）。



　以上となりま～す。


１２．後日付記：当該ブログ・デザインの「スマホ」表示面での「ＳＥＯ」（サーチ・エンジン・対策）に関わる問題が、「Google サーチコンソール」にて発覚！（汗）

　（２０２２年６月２３日（木）加筆）

「貴サイトが 3 件の モバイル ユーザビリティ の問題に影響を受けていることが検出されました」

テキストが小さすぎて読めません
クリック可能な要素同士が近すぎます
ビューポートが設定されていません

（上記のメッセージの数日後に、モバイル ユーザビリティで「コンテンツの幅が画面の幅を超えています」というメッセージも到着した・汗）


　当該デザインに変更して３年後（汗）に、改めて「Google サーチコンソール」というモノで、拙ブログのトップページのＵＲＬをGoogleのインデックスに登録してみたところ――もちろんGoogle側にて自動的にすでにインデックスには登録済だったものの――、上記のメッセージとともに、


「上記の問題をできる限り解決されることをおすすめします。問題を解決することで、サイトのエクスペリエンスや Google 検索結果での表示を最適化できます」


という検証結果が表示されてしまうことが発覚！――「Google サーチコンソール」の「URL検査」の「公開URLをテスト」だと、上記の問題はナシだと表示されるのだが、数時間～半日後にメールで「貴サイトが 3 件の モバイル ユーザビリティ の問題に影響を受けていることが検出されました」の旨のエラーメッセージが送信されてくるので、「公開URLをテスト」の方はアテにはならない模様だ（汗）――


　つまり、モバイル媒体での表示においては、拙ブログのデザインでは、


①テキストが小さすぎる　（「本文」の箇所か？）
②クリック可能な要素同士が近すぎます　（ドロップダウンする画面上部固定グローバル・メニュー」のことか？）
③ビューポートが設定されていません　（「ＣＳＳ」で設定する定義のことらしい）
④コンテンツの幅が画面の幅を超えています　（「③」の派生事項であろうか？）


上記の４点で問題が発生しているらしい。


　ダミーで拙ブログと同じデザインのブログを作成して――記事については当該記事をコピペした１記事のみとし、サイドバーは初期設定で表示されるもののみとする――、それに対して、以下の変更＆テストを実施して、この問題が解消されるか否かについての検証を実施してみる予定。


①については、『「５－１」ＣＳＳ（未設置）』にて記述した、設置してしまうとスマホでは本文の文字が小さめになると感じていた以下の未設置のＣＳＳを、そこに設置してみせることで解消されるか否かを確認。
　設置後に、「①を解消したので再チェック」または「再リクエスト」の旨のボタンをクリックしたところ、「検証には数日かかることがございます。処理が完了し次第お知らせいたします。以下のリンクにアクセスして、テストの進捗状況をご確認いただくこともできます」との文言が表示された。実際には翌朝に、眼件名『「モバイル ユーザビリティ」の問題が修正されました』のメールが到着。
　つまり、①さえ解決すれば、②と③の問題が残っていても『「モバイル ユーザビリティ」の問題が修正されました』になってしまうということなのだろうか？


　一応は以下の「ＣＳＳ」設置で解決されることは判明した。ひょっとすると、同時に「②」と「③」も解決されたのやもしれない。
　しかし、①については、やはりスマホ画面で表示させると――ＰＣ上でも各種ブラウザ、たとえばＣｈｒｏｍｅで右クリックの「検証」⇒白い二重四角型の「スマホ」型のアイコン選択などで表示可能――、サイドバーの幅が極端に大きくて全幅の半分以上を占めてしまって、本文の幅の方が狭くなってしまうという（汗）、あまりに論外の読みにくいデザインとして表示されてしまう。……よって、以下の「ＣＳＳ」の設置はやはり却下！
/*==============================================
「はてなブログ」用「レスポンシブ対応」宣言
================================================*/
/* Responsive: yes */


②についても、ダミーの同デザインのブログから「ドロップダウンする画面上部固定グローバル・メニュー」を削除してみて、解決されるか否かを確認してみる予定。


③については、各所の同様トラブルでの対策記事を参考に、ダミーの同デザインのブログに「はてなブログ」側の「設定」⇒「詳細設定」⇒「

要素にメタデータを追加」に、


を記述することで解消されるとの記述を発見！　……しかし、この処置を施してみたあとでスマホ画面で表示させてみると、「①」での「レスポンシブ対応宣言」の「ＣＳＳ」設置で生じた現象と同様の、サイドバーの幅が極端に大きくて全幅の半分以上を占めてしまって、本文の幅の方が狭くなってしまうという（汗）、あまりに論外の読みにくいデザインとして表示されてしまう現象が発生。……よって、「ビューポート」設定もやはり却下！


　結果については、おいおい備忘録的に加筆していきます（汗）。



[覚え書き][関連記事]
画面の回転（画面の向き）が不可の場合の対処　〜2010年度NECノートPC･LaVie･Windows7･グラフィックドライバーがintel(R) Graphics Media Accelerator HDの場合
　　http://d.hatena.ne.jp/katoku99/20131111/p1
同人誌即売会オンライン申込用のサークルカット作成方法（一例）
　　http://d.hatena.ne.jp/katoku99/20121210/p1
テキストエディターで行数（非改行）が表示されるのはTeraPad
　　http://d.hatena.ne.jp/katoku99/20120801/p1
テキストエディターでの禁則処理・句読点のぶら下がり設定（私家版）
　　http://d.hatena.ne.jp/katoku99/20120802/p1
強制改行で保存されたＭＳ−ＤＯＳ（テキスト）文書の、強制改行の外し方
　　http://d.hatena.ne.jp/katoku99/20120803/p1
InDesignで日本語の原稿用紙マス目イメージ・文字組み・禁則処理と同一にしたい場合
　　http://d.hatena.ne.jp/katoku99/20050102/p1



15分で丸わかり！はてなブログで稼ぐ方法: 知識ゼロから始める不労所得作り 15分で丸わかりシリーズ

15分で丸わかり！はてなブログで稼ぐ方法: 知識ゼロから始める不労所得作り 15分で丸わかりシリーズ

15分で丸わかり！はてなブログで稼ぐ方法: 知識ゼロから始める不労所得作り 15分で丸わかりシリーズ

Amazon
はてなブログ Perfect GuideBook 改訂第2版

はてなブログ Perfect GuideBook 改訂第2版

Amazon
はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

Amazon
初心者向けブログで役立つ本！【はてなブログ偏】 (ムースブックス)

初心者向けブログで役立つ本！【はてなブログ偏】 (ムースブックス)

Amazon
はてなダイアリーガイドブック―ウェブログでつながる新しいコミュニティ

はてなダイアリーガイドブック―ウェブログでつながる新しいコミュニティ

Amazon
はてなダイアリー 実践デザインカスタマイズガイド

はてなダイアリー 実践デザインカスタマイズガイド

Amazon


[覚え書き]　〜全記事見出し一覧
拙ブログ・トップページ（最新10記事）
拙ブログ・全記事見出し一覧