投稿

ラベル(Blogger)が付いた投稿を表示しています

SyntaxHighlighter から Prism へ移行

プログラムのサンプルコードの表示用のツールを SyntaxHighlighter から Prism へ移行した。 このサイト(blog.scaredeer.com)は Blogger で運用しており、Blogger の記事・ページとして生成されるファイル以外に、自分で任意のファイルを置けず、当然、Prism 用のファイル(prism.css と prism.js)も設置できない。 仕方ないので、サブドメイン www 用の別サーバーを用意し、そこに配置した Prism 用のファイル(css と js)をこの Blogger から指し示すようにして運用している(👉 Blogger と独自ドメインの設定 )。 Blogger のテーマの HTML のカスタム箇所 <head> ... <link href='https://www.scaredeer.com/prism/prism.css' rel='stylesheet'> </head> <body> ... <script src='https://www.scaredeer.com/prism/prism.js'></script> </body>

Favicon Generator

イメージ
Favicon Generator ( realfavicongenerator.net ) を使って SVG 画像から各種 favicon とそれ用の head 内記述用タグを自動生成できる。 今回は、Blogger サイト用の favicon を生成して、Blogger の外部サイト(www2.scaredeer.com)を用意してそこに各種の favicon データを置いてみた(👉 Blogger と独自ドメインの設定 )。Blogger の favicon ガジェットを使うと、自動で 16x16 に圧縮された物凄く汚ないアイコン画像しか使えないからである。 以下、Blogger のテーマの HTML を修正するわけだが、その場合の注意点: 各タグが閉じられていないので、タグの最後の > の直前に / を入れて /> の形式にしておく必要がある。 head 内記述用タグの挿入する位置は CSS 定義よりも前にした方が良い(自分はテーマ HTML の viewport 定義と title の間にした)。そうしないと、meta theme-color が反映されなかった。cf. This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded. 生成される manifest のファイル名が web.manifest となっているが、これは json ファイルなので、manifest.json にファイル名を変更して Web サーバー側で .json ファイルとして適切に MIME が認識されるようにした。これに伴って、head 内記述用タグの manifest のリンク先も修正した。 ついでに manifest の中のエントリーとして description の情報も補っておいた。 head 内記述用タグ manifest.json { "name": "ししおどし", "short_name": "鹿威し&qu

Blogger と独自ドメインの設定

イメージ
SEO の観点からすると、サブドメインを無闇に乱立させずむしろ一箇所に集約させた方が良いようなので、一箇所に統合することにした。 従来 blog.scaredeer.com(@blogger):ブログ www.scaredeer.com(@nginx サーバー):コンテンツはほぼトップページのみ 統合後 www.scaredeer.com(@blogger):ブログ+ページ サブドメインなしの scaredeer.com は www.scaredeer.com にリダイレクトあれ、またプロトコル面でも、http を https にリダイレクトすることで、厳密に https://www.scaredeer.com へと集約 した。 Blogger での設定 カスタムドメイン:www.scaredeer.com カスタムドメインにリダイレクトする ✅ HTTPS の使用 ✅ HTTPS リダイレクト ✅ DNS(ムームー DNS で)の設定 Blogger でのサードパーティドメインの設定の過程において、DNS 側の一定の設定を行うことが求められる。自分は DNS そのものはあまり詳しくなく、ムームー DNS での設定しか実際に操作する機会がないので、下の設定で本当に良いのかはあまり自信がないが、大体こんなものだろうと思う: サブドメイン 種別 内容 備考 A 216.239.32.21 scaredeer.com 自体の IP アドレス(1/4) A 216.239.34.21 scaredeer.com 自体の IP アドレス(2/4) A 216.239.36.21 scaredeer.com 自体の IP アドレス(3/4) A 216.239.38.21 scaredeer.com 自体の IP アドレス(4/4) TXT google-site-verification=●●● Google にドメインオーナーであることを示す www CNAME ghs.google.com www.scaredeer.com → ghs.google.com ●●● CNAME gv-●●●.dv.googlehosted.com ●●●.scaredeer.com → gv-●●●.d

SyntaxHighlighter の Blogger への導入

ここ Blogger でプログラミング系の記事を書く場合に、サンプルコードの表記に SyntaxHighlighter を使いたいなと思い、このほど導入したので、その際の注意点: テーマの 「HTML の編集」を使って JavaScript コードを追加することになるが、HTML を編集して「テーマを保存」すると、その都度、レイアウトのブログの投稿ガジェットの「投稿の間に広告を表示する」の設定が無効になってしまうので、再度有効化しておく手間が必要。 autoloader は上手く動かなかった。おそらく、自前サイト内での相対リンクでないと駄目で、blogspot から外部の http://alexgorbatchev.com/pub/sh/ への絶対アドレスを利用しようとしているからなのかもしれない(クロスサイトスクリプティング?)。 また、上の問題と関連しているのかもしれないが、autoloader を使わずに http://alexgorbatchev.com/pub/sh/current/ を指定してもまだ上手く動かず、このアドレスからリダイレクトされる先のhttps://agorbatchev.typepad.com/pub/sh/3_0_83/ を指定する必要があった。そこまでやって、やっと正常に機能するようになった。 Blogger 側で tab がスペースに置き換えられてしまうので、SyntaxHighlighter 側の smart-tabs、tab-size の設定は無意味。 PC 版表示ではあまり問題になりにくいが、モバイル版では行の折り返しが発生するので、行番号のレイアウトが狂ってしまう。行番号表示は諦めるの(gutter = false)が無難。 後日談 👉 SyntaxHighlighter から Prism へ移行

Blogger のラベルページの表示投稿数

1ページあたりに表示する投稿数は、ダッシュボードの「レイアウト」の中で変更できるのはいいのだが、ラベルごとの表示にした場合の投稿数には影響しない。 調べてみると、「 クリボウの Blogger Tips 」に方法が紹介されていた。 ダッシュボードの「テンプレート」から、使用中のテンプレートが一番上に表示されているので、その下の「HTML の編集」ボタンを押す。 ラベル(<b:widget id='Label1'>)は HTML で定義されたコードの最下部の方にあったが、テンプレートによって異なるだろう。また、デフォルトでは折り畳まれているので、「▼」を何回かクリックしてブロックを展開して内側のコードを表示する必要がある。 目的の箇所 <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>(複数箇所あり)を <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=3"'> に変更して投稿数を 3 にした。 テンプレートを保存する。 確かにこの方法で上手く行った。クリボウさんありがとう。 追記 上の手順で反映されるのは、サイドのタグの一覧だけで、各投稿のフッターのタグには反映されない。フッターのタグも操作するには、HTML で定義された別の箇所も、同様に修正する必要がある。 <b:includable id='post' var='post'> ブロックの中にある、expr:href='data:label.url' も expr:href='data:label.url + "?max-results=3"' に変更