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

Quick Edit Pencil
Google Blogger ブログで

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


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

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

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

目次




症状

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



対処方

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



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

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

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



アンカー名の命名規則



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

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

postID+アンカー名

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

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

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

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







このブログの人気の投稿

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

左横書きを右横書きへ簡易変換します．（コピペ用途） 変換処理はウェブブラウザだけで完了．ネットワーク通信が発生しないので安心．注，複数行の場合は一行になりそう．また，句読点（符号），顔文字の正確な変換は１００％無理っぽ． 変換する文字列（横左方向→） テスト 変換した文字列（←横右方向） 書字方向　横書方向変換スクリプト　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 »

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 »

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 »

簡単　YouTube動画をダウンロード、音声のみ保存する方法　2019

初心者も安心 簡単な動画ダウンロード方法、簡単な音声分離、保存方法を解説します。 ウェブブラウザと１つの無料ソフトだけでダウンロードと音声保存が可能です。パソコンはWindowsでもMacでもオッケーです。 使用するソフトは古くからある無料のVLC media playerを使います。 目次 ようこそ VLC media player （ ダウンロード ） （ インストール ） YouTube動画 ダウンロード ※VLC media playerで音声のみへの変換／保存が存可能 （ 準備：動画ロケーションURLの取得方法 ） （ ウェブブラウザで動画を保存・ダウンロードフォルダに保存される ） （ VLC media playerで動画を変換／保存・名前を付けて任意の場所に保存できる ） 音声のみを保存 （ VLC media playerで動画を変換／保存 ） ようこそ ここではパソコン初心方でも、比較的簡単に動画をダウンロードして音声を分離できる方法を解説します。 YouTube動画のダウンロードは推奨できる行為ではありませ。（本来YouTubeのサイトやアプリでオンラインで視聴するのが正統な楽しみ方です。） しかし、自分がアップロードした動画のマスターを失った場合などはダウンロードしてローカルにバックアップしたいものです。 本記事の内容は私的利用に限ります。 VLC media player （ダウンロード） VLCメディアプレイヤーの公式ダウンロード - VideoLAN VLC media playerダウンロードは窓の杜からも可能です。 「VLC media player」定番の無料メディアプレイヤー - 窓の杜 （インストール） インストール方法は、次の解説サイトをご紹介しておきます。 VLC Media Playerのダウンロードとインストール方法 - ぼくんちのTV 別館 Googleの検索リンクも貼っておきます。 VLC media player インストール方法 - Google 検索 YouTube動画 ダウンロード （準備：動画ロケーションURLの取得方法） ウェブブラウザで目的のYouTube動画を表示
Read more »

DOMノードオブジェクトを文字列に変換する

object HTMLScriptElement to string .toString()、.toSource()、JSON.stringifyなどでオブジェクトを文字列に変換できそうだけどダメだった。 Node.textContentでは要素の中身しか取れないので、 何か親となるオブジェクトを作成し、そこに指定要素のクローン追加し、.textContent か.innerHTMLで文字列として取得する。 <script> //取得したいスクリプト var script = document.getElementsByTagName("script")[0]; //取得したスクリプトを複製 var scriptClone = script.cloneNode(true); //複製したスクリプトを格納する新しい要素 var newElement = document.createElement('dialog'); //新しい要素のインナーHTMLを取得することでstringHTMLScriptElementオブジェクトを文字列に変換する var stringHTMLScriptElement= modal.innerHTML; console.log(stringHTMLScriptElement); </script>
Read more »

AppleScript 改行 コード 置換

改行を置換 returnキーはLF、ASCII character (10)と\nはLF、ASCII character (13)と\rはCR、controlキー + returnキーはラインブレーク   (* テスト文字列を変数にセット *) set str to "1LINE(LF)" & ( ASCII character (10)) & "2LINE(CR)" & ( ASCII character (13)) & "3LINE(LineBrake) 3LINE_2" log " ★生 str: " & str & " ★ " (* ★生 str: 1LINE(LF) 2LINE(CR) 3LINE(LineBrake) 3LINE_2 ★ *)   (*LF 置換 *) set LFstr to do shell script "echo " & quoted form of str & " | perl -pe 's/\\n//g'" log " ★ LF 置換 str: " & LFstr & " ★ " (* ★ LF 置換 str: 1LINE(LF)2LINE(CR) 3LINE(LineBrake) 3LINE_2 ★ *)   (*CR 置換 *) set CRstr to do shell script "echo " & quoted form of str & " | perl -pe 's/\\r//g'" log " ★ CR 置換 str: " & CRstr & " ★ " (* ★ CR 置換 str: 1LINE(LF) 2LINE(CR)3LINE(LineBrake) 3LINE_2 ★ *)   (* ラインブレーク置換 *) set LAINBLAKEstr
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 »

Powershell: プロパティの詳細情報インデックスと項目名の列挙

# プロパティの詳細情報インデックスと項目名の列挙 # https://www.google.co.jp/search?espv=2&q=getdetailsof+properties+titles+PowerShell&spell=1&sa=X&ved=0ahUKEwjSzKfYhM7QAhUJXbwKHc4SCfwQvwUIGSgA&biw=1418&bih=941 # https://blogs.technet.microsoft.com/jamesone/2008/12/09/borrowing-from-windows-explorer-in-powershell-part-2-extended-properties/ $objShell = New-Object -ComObject Shell.Application $objFolder = $objShell.namespace(“C:\”) 0..400 | foreach {“{0,3}:{1}”-f $_,$objFolder.getDetailsOf($Null, $_)} 0:名前 1:サイズ 2:項目の種類 3:更新日時 4:作成日時 5:アクセス日時 6:属性 7:オフラインの状態 8:利用可能性 9:認識された種類 10:所有者 11:分類 12:撮影日時 13:参加アーティスト 14:アルバム 15:年 16:ジャンル 17:指揮者 18:タグ 19:評価 20:作成者 21:タイトル 22:件名 23:分類項目 24:コメント 25:著作権 26:トラック番号 27:長さ 28:ビット レート 29:保護 30:カメラのモデル 31:大きさ 32:カメラの製造元 33:会社 34:ファイルの説明 35:マスター キーワード 36:マスター キーワード 37:プログラム名 38:継続時間 39:オンライン 40:再帰 41:場所 42:任意出席者アドレス 43:任意出席者 44:開催者住所 45:開催者名 46:アラーム時刻 47:必須出席者アドレス 48:必須出席者 49:リソース 50:会議の状態 51:
Read more »