Blogger ページ内リンクの正しい設定方法

Quick Edit Pencil
Google Blogger ブログで

ページ内リンクが正常に働かない状態を　JavaScript　で解決する


  1. <!--ページ内リンク改善スクリプト-->
  2. <script>
  3. (function () {
  4.     var el=document.querySelectorAll("div.post-body a[href*='#']");
  5.     el.forEach(function(link) {
  6.       if(/http:\/.*?#|blogID=\d+#/.test(link.href)){
  7.         link.href = "#"+link.href.split(/blogID=\d+#|http:\/.*?#/)[1];
  8.       }
  9.     });
  10. }());
  11. </script>

管理ページの　レイアウト　footer-1　へ　「　HTML/JavaScript　」　ガジェットを追加し　JavaScript　をコピペして保存する。

これでブログ内のリンク内ページのリンクが自動修正され正常に動作する。

目次




症状

ページ内リンク（アンカーリンク）を正しく設定しても、編集モードを切り替えたり、再編集を行うとページ内リンクに余計な情報が付加され、リンク先がブログ管理ページへのと代わってしまう。



対処方

ページ内リンクに対して行われる余計なリンク情報を掃除する Javascript を仕込むことで正常なページ内リンクに戻す。



アンカー名の重複を防ぎ、ページ内リンクをより健全にするために

投稿記事の単体ページではアンカー名が重複しなくても、複数の投稿が１ページに表示されるアーカイブページでは、アンカー名（ID）が重複する可能性があります。

これを防ぐためにアンカー名を一意とする必要があります。



アンカー名の命名規則



アンカー名（ジャンプ先の名前）命名規則

アーカイブページでのアンカー名重複を防ぐための命名規則として

postID+アンカー名

<div id="アンカー名+postID"></div>

postIDは記事の編集画面のアドレスバーで確認できます。この記事のpostIDは3265737230123688960となっているので、アンカー名は次となります。これでブログ内で一意のアンカー名となります。

<div id="footer-3265737230123688960"></div>

※idの先頭文字はアルファベットとしてください。







このブログの人気の投稿

PowerShellのGetDetailsOf メソッドでプロパティの詳細情報のID番号と項目名を列挙します

※PowerShell初心者 ※下の方に画像が持つExif情報を列挙する方法もあります。 例えば、あるJPG画像（C:\IMG_0001.JPG）のカメラ機器のモデル名とExifの撮影日時に関する情報が欲しいとします。 1. PowerShellでは、Get-ItemPropertやGet-ChildItemを使いFileInfoプロパティ取ることができます。 $path = "C:\IMG_0001.JPG" Get-ItemProperty $path | Select-Object * | Format-List $path = "C:\IMG_0001.JPG" Get-ChildItem $path | Format-List -property * 結果: しかし、Get-ItemPropert等を使い取ることができるFileInfoプロパティには必要な情報がありません。 そこで、 GetDetailsOf を使い、ファイルプロパティの詳細情報から必要な情報を取得します。 PSPath : Microsoft.PowerShell.Core\FileSystem::C:\IMG_0001.JPG PSParentPath : Microsoft.PowerShell.Core\FileSystem::C:\ PSChildName : IMG_0001.JPG PSDrive : C PSProvider : Microsoft.PowerShell.Core\FileSystem Mode : -a---- VersionInfo : File: C:\IMG_0001.JPG InternalName: OriginalFilename: FileVersion: FileDescription: Product: ...
Read more »

Blender: 辺の長さを数値で指定するアドオン

イメージ
二つのアドオンが見つかりましたが、開発者は同じの方のようです。 二つ試しましたが、どちらも便利に使うことができます。とても重宝します。 距離が入力できるアドオン（2.7用） ブレンダーで設定した単位が反映、 単位（m,cm,mm） を入力値で指定 可能 、入力値に スケールは 反映されない 。 mesh_edges_length.py (ver1) mesh_edges_length_unstable.py （ver2） ダウンロード blender_addons/mesh_edges_length.py at master · peppelinux/blender_addons · GitHub 距離と角度が入力できるアドオン（2.7用） ブレンダーで設定した単位が反映、 単位（m,cm,mm） を入力値で指定 不可能 、入力値に スケールが反映 される。 mesh_edges_length_angle_yi.py ブレンダーフォーラム [Addon] Directly Set Length(edge) and Angle(edges) [v0.2] 日本語の情報 Blender Addon Review: 辺の長さを数値入力で設定できるアドオン（Directly Set Length(edge) and Angle(edges)） – CGrad Project お気に入りの設定
Read more »

書字方向　横書方向変換スクリプト　左書きから右書きへ（コピペ用途）

左横書きを右横書きへ簡易変換します．（コピペ用途） 変換処理はウェブブラウザだけで完了．ネットワーク通信が発生しないので安心．注，複数行の場合は一行になりそう．また，句読点（符号），顔文字の正確な変換は１００％無理っぽ． 変換する文字列（横左方向→） テスト 変換した文字列（←横右方向） 書字方向　横書方向変換スクリプト　HTMLソース JavaScriptコード 変換する値（横左方向→） <form name="form1"> <textarea cols="50" name="textarea1" rows="5" value="1">テスト</textarea> </form> <input onclick="clickBtn1()" type="button" value="変換" /> <input onclick="clickBtn2()" type="button" value="クリア" /> <p>変換した値（←横右方向）</p> <p id="rtl" style="background-color: lightgrey; box-sizing: border-box; color: darkslategrey; line-height: 1.6; overflow: auto; padding: 1rem; text-align: right;"></p> <script> function clickBtn1(){ // 値を取得 const ta1 = document.form1.textarea1.value; const reversed = [...ta1].reduceRight((p, c) => p + c);// 配列に変換し右から左へたたみ込む。 document.getElementById(...
Read more »

ヤバい！JAPANNEXT WQHD対応 27型ワイド液晶ディスプレイ「JN-IPS2716WQHD」を注文してみた！！！

イメージ
注文翌日にはブツが届き、梱包も本体にもおおむね満足している。通電も映像も設定も問題はない。メーカー対応は未知数だが品物はクールだ。さらに詳しくは下に... 何かと怪しさ満点のJAPANNEXT IPS液晶モニターのJN-IPS2716WQHD 27型 WQHD ディスプレイをアマゾンで注文してみたレポ。２０１６・５・５ JN-IPS2716WQHD 27型 WQHD モニター 60Hz対応ワイド液晶ディスプレイ （2560×1440 ) HDMI/DVIポート搭載 アマゾンが発送するので品物が届かないという不安は無さそうなのでお遊びで注文してみたが...
Read more »

PowerShellで複数ファイルのプロパティを取得する方法（準備編）

イメージ
プロパティの詳細を一括でリストで書き出すPowerShellスクリプト 完成したスクリプトは 別ページ にて完成編として公開しています。 PowerShellで画像のプロパティを書き出す PowerShellで詳細プロパティの値を取得する（フォルダーを指定して複数ファイルを対象） $shell=New-Object -Com Shell.Application Get-ChildItem D:\Pictures\EOS` D30 -recurse | Where-Object {-not $_.PSIsContainer} | ForEach-Object {$folderobj=$shell.NameSpace($_.DirectoryName);$item=$folderobj.ParseName($_.name);$folderobj.GetDetailsOf($item, 22 )} > test.txt 凡例 任意指定 　　 ` はpath記述でスペースをエスケープ 　　　　　　 22 はプロパティ詳細の説明のタイトル項目の番号（末尾に一覧番号あり） オプション 　 -recurse はサブフォルダも含む 　　　　　　 > は上書き、 >> は追記 別の書き方として、次の「 若手基盤系SEの日記。 」さんのスクリプトでも同じ結果が得られます。 Get-ChildItemはオプションの指定で、拡張子やファイル名、ファイルサイズなどで検索して結果が得られます。 以下参考にしたサイト様 PowerShellで詳細プロパティの値を取得する（フォルダーを指定して複数ファイルを対象） 若手基盤系SEの日記。 大量のWordファイルのページ数を簡単に集計する方法（Powershell） http://blog.livedoor.jp/ryanorano/archives/2015-05-13.html # 指定されたパス配下のファイルのファイル名とページ数をCSV出力する。 # 変数 $path = " D:\temp " $output = $path + " /output.csv " # 指定されたパス配下...
Read more »

決定版　Edgeでローカルファイルを開く　パワーシェルスクリプト　（ウインドウズでドロップレット）

Edgeで開きたいファイルを、ドロップか送るかして開きます。 次のパワーシェルコマンドを任意の場所に保存します。 便宜上、C:\エッジで開く.ps1　にして保存します。 #テスト実行用のパス #$args = "C:\test.html" # 未指定の実行を防止 if(!$args){Write-Error "ファイルが指定されていません。送るかドロップしてください。"; exit} # 単独ファイルの他フォルダがドロップされたらパス配下のファイルも取得（サブフォルダーも含む） $target = Get-ChildItem $args -recurse -Include *.html, *.txt, *.mp4 | Select-Object | Where-Object {-not $_.PSIsContainer} #ループ処理してEdgeで開く $target | ForEach-Object { start shell:AppsFolder\Microsoft.MicrosoftEdge_8wekyb3d8bbwe!MicrosoftEdge $_ } 次に、保存したエッジで開く.ps1　を右クリックしてショートカットを作成 作ったショートカットを右クリックしてプロパティを表示 リンク先に次を入れて保存 C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -ExecutionPolicy RemoteSigned -File "c:\エッジで開く.ps1" 以上でドロップレットの完成です。 任意のhtmlファイルなどをショートカットにドロップするとエッジでローカルファイルが開きます。 尚開くファイルの種類を拡張子で指定できます。コマンド中のGet-ChildItemしている箇所のIncludeに追加します。 さらに便利に、エッジで開きたいファイルを右クリックしてエッジに送る方法です。 スタートボタンで右クリック＞ファイル名を指定して実行 shell:sendto して送る場所を開いて、さっきつくったショートカットを移動 これで、開きたいファイルから　右クリック＞送...
Read more »

カルチャーラジオ 科学と人間　薬と毒の歴史をひも解く　日本薬科大学教授…船山信次

イメージ
カルチャーラジオ 科学と人間 | 聴き逃し | NHKラジオ らじる★らじる 1 1 月 4 日 金曜   午後8時30分 ～   午後9時00分 「薬と毒の歴史をひも解く」（1）＜全13回＞ 【はじめに-薬毒同源】 日本薬科大学教授…船山信次 「薬毒同源」という言葉は、薬も毒も使い方次第でどちらにもなりうるということから、講師の船山さんが提唱する考え方です。使い方次第で毒にも薬にもなるものの例を紹介し、人類が歴史の中で薬や毒をどのように使ってきたのかを、古代エジプトや中国、日本の史実からお話しします。 2 1 月 11 日 金曜   午後8時30分 ～   午後9時00分 「薬と毒の歴史をひも解く」（2） 【古代の薬と毒1-人類の誕生と薬と毒との出会い】 日本薬科大学教授…船山信次 今回のテーマは古代の薬と毒。古代においても病気やけがなどの対処法を記録することは、どの民族でも行われていました。古代エジプトではその記録法に特徴があり、それが各地に伝わった歴史があります。古代エジプトの記録にある薬と毒の記述を紹介し、さらに古代ローマやギリシア、インド、中国での薬と毒の記録をたどっていきます。 3 1 月 18 日 金曜   午後8時30分 ～   午後9時00分 「薬と毒の歴史をひも解く」（3） 【古代の薬と毒2-人類の誕生と薬と毒との出会い】 日本薬科大学教授…船山信次 今回は日本の古代における薬と毒がテーマです。日本にもさまざまな薬と毒についての記録が残っています。古くは推古天皇が薬草などを採取する「薬狩り」をしたといった記述があり、万葉集にも薬として用いていた秋の七草について記されています。また私たちが花として見ているものの中には、もともと薬として海外から持ち込まれたものもあります。さまざまな記述を通して日本の薬と毒の歴史をみていきます。 4 1 月 25 日 金曜   午後8時30分 ～   午後9時00分 「薬と毒の歴史をひも解く」（4） 【中世の薬と毒1-魔女と錬金術と大航海時代】 日本薬科大学教授…船山信次 2回にわたって中世の時代を振り返りま...
Read more »

Windows10でアプリケーションごとに輝度を設定、自動で変更する　-　AutoHotkey

AutoHotkeyスクリプトで実現。 AutoHotkeyをダウンロードしてスクリプトをコピペして輝度を変更したいソフトを指定してファイル保存、保存したファイルをダブルクリックして実行するとタスクバーの通知エリアに常駐するので、不要になれば終了する。とても簡単です。 グラフィック系アプリを使うときは最大輝度にて、ブラウザやオフィス系アプリに移動したらデフォルトの輝度に戻す-という使い方が最近多い。 チャームから輝度を変更できるが都度面倒なので、アプリを切り替える度に、設定した輝度に自動で変更するスクリプトを調べてみた。（イベントはアクティブウインドウの変更又はActiveWindowの切り替え） フリーソフトなども調べてみたがアプリ毎に輝度を設定できるユーティリティは見つけられなかった。 当初、PowerShellで実現できる予定だったが、アクティブウインドウ変更のイベント取得方法がわからなかったので、AutoHotkeyを使いアプリ毎に輝度の変更を自動で行うスクリプトをつくってみた。（ほぼコピペでスミマセン、一応思い通りの結果が得られて満足） マーカー部分が追記分 60行目に輝度を設定するアプリを文字列で指定。アプリ毎に識別できる文字列を含む変数が違うので ウィンドウを特定する - hoge を参考に設定。 ノートやタブレットなどの液晶一体型でウインドウズから輝度を調整できるパソコンでのみ効きます。 #Persistent ; スクリプトを常駐させる /* GPD WINの画面輝度をあれこれするAutoHotkeyスクリプト http://qiita.com/diaphragm/items/9769c79789d7a9958f8a 輝度を変更するスクリプト */ prev_brightness := GetBrightness() GetBrightness() { WMI := "winmgmts:{impersonationLevel=impersonate}!\\.\root\WMI" MonitorBrightness := ComObjGet(WMI).ExecQuery("SELECT * FROM WmiMonitorBrightness WHERE Activ...
Read more »