Bloggerのページタイプ別にスタイルを適用したい

Quick Edit Pencil

Bloggerのページタイプ別にCSSスタイルを適用したい時


三項演算子を使ってテンプレートのbodyタグをいじります。

bodyタグのclassに class="pagetype" とページタイプを付け、CSSで body.pagetype .post{...}  という具合にページタイプ別にスタイルを適用できる。

下記のようにclass名をふれますので、かなりスタイルの幅が広がります。

class = "index | item | archive | static_page , mobile | desktop , home-page , xxx"

CSSサンプル
.post{...}
body.index .post{...}
body.item .post{...}
body.archive .post{...}
body.static_page .post{...}

テンプレートの変更

変更個所
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
出力結果
<body class='loading'>
↓　ページタイプのクラス名を追加する場合
<body expr:class="&quot;loading&quot; + (data:blog.isMobile         ? data:blog.mobileClass         : &quot; desktop&quot;) + &quot; &quot; + data:blog.pageType">
出力結果
<body class='loading desktop index'>

ページタイプ

インデックス ページ index
個々の投稿記事 item
アーカイブ archive
ページ static_page

更に、ホームページと特定のページのclass名を追加する
<body expr:class='&quot;loading&quot; + (data:blog.isMobile         ? data:blog.mobileClass         : &quot; desktop&quot;) + (data:blog.url==data:blog.homepageUrl         ? &quot; home-page&quot;         : (data:blog.canonicalUrl in {"http://wed@.blogspot.com/p/my-page.html"}         ? &quot; about-us&quot;         : &quot;&quot;)) + &quot; &quot; + data:blog.pageType'>
出力結果
ホームページの場合
<body class='loading desktop home-page index'> 
指定したページの場合
<body class='loading desktop about-us static_page'>
data:blog.canonicalUrlは、必ず http://xxx.blogspot.com/xxx で表示されるので、海外から閲覧した場合でも、https で閲覧した場合でも結果が保証されるはず。指定する場合は、アドレスバーに表示されているURLを http://xxx.blogspot.com/xxx  にして指定する事。

このブログの人気の投稿

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

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

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

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

PowerShellでJPG画像のリサイズとウォーターマーク画像との合成を同時に行う

指定したフォルダー内（サブフォルダも含む）のJPGファイルを一括で処理します。 # ----- ユーザー指定 ----- ## 変数 # #ターゲットディレクトリ $path = "E:\OneDrive\画像\COOLSCAN3_LS-30" # #MIXする画像は正方形のαありのPNGで透過処理等が済んでいる前提です。 $miximage = "E:\OneDrive\ドキュメント\透かし\WATERMARK.PNG" # #リサイズ値（幅または高さのどちらか一方を指定すると、縦横比率を計算したサイズを決定するようにしてあります。） $width = 360 $height = 0 #リサイズ付加名（リサイズ画像のあるディレクトリ名+$risize_name、画像名+$risize_name+.jpgとなります。） $risize_name = "_RESIZE" # ----- コード部分 ----- ## WSHのShellオブジェクトを生成 $shell=New-Object -Com Shell.Application; ## 指定されたパス配下のJPGファイルを取得（サブフォルダーも含む） $target = Get-ChildItem $path -include *.jpg -exclude *$risize_name.JPG -recurse | Where-Object {-not $_.PSIsContainer} # アセンブリの読み込み（リサイズ） [void][Reflection.Assembly]::LoadWithPartialName("System.Drawing") #[void][reflection.assembly]::LoadWithPartialName("System.Drawing.Imaging") #MIXする画像の読み込み（MIX） $image2 = New-Object System.Drawing.Bitmap($miximage) ## ファイル分だけ繰り返し $target | ForEach-Object { # 画像ファイルの読み込み（リサイズ）
Read more »