編集

BloggerテーマはF-lightにしました

｜2024/01/31
F-lightテーマを使ったデモサイトが表示されている

Bloggerテーマはやっぱり巷に溢れる自作テーマにしたい

シンプルでかっこいい、Bloggerテーマ、“F-light”を使ってみることにしました。ライトテーマとダークテーマをワンタッチで切り替えられるのが良いのではないかと。

制作者はふじやんさんです！ふじやんさんの凄いところは、テーマカラーのカスタマイズに関しての要望を出した際に1日足らずのあっという間でバージョンアップで対応してくださったところです。お若いプログラマーさん(？)の様なので、今後も開発は続くのではないのでしょうか！面識はないので予想ですが！

ちなみに“F”はふじやんさんのイニシャルというだけでなく、もともと欠点を意味する“flaw”の頭文字ということで。信じられない。めちゃめちゃflawlessなのに。

ふじろじっく(ふじやんさんのブログ)
F-lightのデモサイト

テーマカラーを入れた

メインのテーマカラーは水色なのですが、ダークテーマでは明るすぎるのでそちらではダークブルーにしました。

テーマカラーはheadタグの中のどこかにmetaタグで入れれば良いです。 これで対応環境で端末をライトモードにしている方ならブラウザの縁が明るい水色に、ダークモードにしている方ならダークブルーになるはずです。

<meta content='rgb(90,196,247)' media='(prefers-color-scheme: light)' name='theme-color'/>  <meta content='rgb(0,81,128)' media='(prefers-color-scheme: dark)' name='theme-color'/>

また、ダークモードとライトモードのいずれもF-lightでは編集できる様になっています。一応このブログで編集したCSSを貼り付けておきます。

/*==== ダークモード用配色 ====*/
:root {
  --dark-bg: rgba(0,81,128,1); /*濃い背景色*/
  --light-bg: rgba(51,51,51, 1); /*薄い背景色*/
  --light-bg-t: rgba(51,51,51, .9); /*薄い背景色(半透明)*/
  --shadow: #000; /*影*/
  --color: #fff; /*文字色*/
  --dark-color: #fff; /*薄い文字色*/
  --dark-color-t: rgba(255, 255, 255, .5); /*薄い文字色(半透明)*/
  --red-color: tomato; /*赤文字*/
  --blue-color: #8cb4ff; /*青文字*/
  --green-color: #00d061; /*緑文字*/
  --link: turquoise; /*リンク色*/
  --brand: rgba(90,196,247, 1); /*濃いブランド色*/
  --brand-t: rgba(90,196,247, .9); /*濃いブランド色(半透明)*/
  --brand-light: rgba(90,196,247, 1); /*薄いブランド色*/
  --brand-light-t: rgba(90,196,247, .9); /*薄いブランド色(半透明)*/
  --brand-font: #000; /*ブランド色背景用文字色*/
  --sub-brand: #FFFFA0; /*サブブランド色*/
  --sub-brand-font: #000; /*サブブランド色背景用文字色*/
  --kbd-color: #ddd; /*キーボード色*/
  --kbd-letter: #000; /*キーボードの文字色*/
  --kbd-shadow: #999; /*キーボードの影の色*/
  --bgimg: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHUo7Sk-CI0X-gmKe2CPpAhZvieAmhZyZwNUgWH1lEVdLCuX4QYIDWnHTt08IZMNsY7IPJ1oU-dFNbK_JzeVvyh8-fNa2TTvZ05us4PiKKYTOSQ1ph2jYqqu_HeOo70zfpog2R4sUTwOCc9qL9pff1RzBzSkWTkJCEL_YJ7_-ZyK96b0N_KsvgFOB-rg/s1600/tp-android-chrome-192x192.png); /*ヘッダー用アイコン*/
}

/*==== ライトモード用配色 ====*/
:root[data-theme-mode="light"] {
  --dark-bg: rgba(220, 200, 250, 1); /*濃い背景色*/
  --light-bg: rgba(235, 235, 235, 1); /*薄い背景色*/
  --light-bg-t: rgba(235, 235, 235, .9); /*#fbfbffe6 薄い背景色(半透明)*/
  --shadow: #888; /*影*/
  --color: #000; /*文字色*/
  --dark-color: #000; /*薄い文字色*/
  --dark-color-t: rgba(0,0,0, .5); /*薄い文字色(半透明)*/
  --red-color: #d30038; /*赤文字*/
  --blue-color: #592bff; /*青文字*/;
  --green-color: #007936; /*緑文字*/;
  --link: darkblue; /*リンク色*/
  --kbd-color: #444; /*キーボード色*/
  --kbd-letter: #fff; /*キーボードの文字色*/
  --kbd-shadow: #000; /*キーボードの影の色*/
  --bgimg: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMq7OdoMDtoUOujNh-Y1D_4nQaS39uAXD0i4fn7nEyOT_vpUV9wGiZY-ppvWYFp-jUhXas6mfsPpSb84v9Je_8pu4_3Vh7nnYn-C24dbifr5jwdkE7naavwDq2Fn6rVWr-iTvI7r7Q8ELKSU06plb39PuptGoMm4Dd2GK_5hkXxtwKXQkwbOFrMsTpQ/s1600/light-android-chrome-192x192.png); /*ヘッダー用アイコン*/
}

詳しくは上のふじろじっくさんのサイトやF-lightデモサイトのカスタマイズ欄を見ていただきたいのですが、この様にほとんどの色を変数にして設定することで、文字色はこれ、背景色はこれ、として場所ごとの編集の手間を無くし、ダークモードとライトモードの切り替えを実現しているのです。なお、--bgimgとなってリンクを貼っているところは、ヘッダーのメガホンのアイコンです。ダークモードでは暗い金色、ライトモードでは明るい金色に水色背景、となる様に設定しています。

ヘッダーにファビコンと同じアイコンを入れて、ダークモード対応した

ふじろじっくさんの真似をして、ヘッダーにファビコンとして使っているメガホンのアイコンを使いました。せっかくファビコンを作ったので、ヘッダー部分に出してみようかと。

ライトモードのヘッダー画像。メガホンが明るい色調。
ダークモードのヘッダー画像。メガホンが暗めの色調。

ダークモードとライトモードで色が変わる様に先ほどの変数を使い、また、大きさがレスポンシブになる様にbackground-size: contain;としました。

header {
background-color: var(--light-bg);
background-image: var(--bgimg);
background-position: right top;
background-size: contain;
background-repeat: no-repeat;
}

ソースコードハイライトと行番号

これはもうほとんど上に書いたふじやんさんのブログの記事、highlight.js を導入しましたをそのまま参考にしています。highlight.jsというオープンソースのJavaScriptを利用させてもらっています。本当に便利なものです。JavaScript自体はCDNで利用しています。

また、ふじやんさんにならって行番号を表示するためのJavaScript、highlightjs-line-numbers.jsも導入しました。これもCDNを利用しています。ソースコードハイライトをしたい記事では、それぞれ呼び出しのスクリプトを貼り付けています。いちいち貼り付けるのは面倒と言えば面倒なのですが、コードを全然記載しない記事にもJavaScriptを読み込ませるのは無駄ですからね。

具体的にはふじやんさんの記事を見ていただくとして、CDNのリンクをブログのHTMLに貼り付けて、起動させるスクリプトをそれぞれ1行書くだけでハイライトしてくれます。一応記載しておきます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js'></script>
<script>hljs.highlightAll();</script>
<script>hljs.initLineNumbersOnLoad();</script>

本当はこれにスタイルシートも必要なのですが、スタイルシートは大した容量ではなかったのでF-lightのCSSを書く欄に直接書いています。ダークテーマでとても見やすいと感じたAtom One Dark Reasonableというテーマを採用しました。重要な情報がしっかり色分けされていて使いやすいです。F-lightのもとから有るCSSと合わせて、重複しているものを削ったりして、スタイルシートはこんな感じになりました。

pre * {
  font-family:Menlo,Consolas,"Hiragino Kaku Gothic ProN","BIZ UDGothic",Monospace;
}

pre {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  overflow: auto;
  position: relative;
  padding: 0;
  font-size: 1.5rem;
}

pre code{
  display: block;
  margin-top: 24px;
  padding: 0;
  max-height: 240px;
  line-height: 1.5;
  overflow: auto;
}

/* highlight.js */
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:0}.hljs{color:#abb2bf;background:#282c34}.hljs-keyword,.hljs-operator,.hljs-pattern-match{color:#f92672}.hljs-function,.hljs-pattern-match .hljs-constructor{color:#61aeee}.hljs-function .hljs-params{color:#a6e22e}.hljs-function .hljs-params .hljs-typing{color:#fd971f}.hljs-module-access .hljs-module{color:#7e57c2}.hljs-constructor{color:#e2b93d}.hljs-constructor .hljs-string{color:#9ccc65}.hljs-comment,.hljs-quote{color:#b18eb1;font-style:italic}.hljs-doctag,.hljs-formula{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

/* for line numbers */
.hljs-ln-line {
  max-width: 100%;
  padding-left: 0px;
}

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: right;
    color: #CCC;
    border-right: 2px solid #CCC;
    padding-right: 8px !important;
    vertical-align: center;
    white-space: normal;
    word-break: keep-all;
}

/* for block of code */
.hljs-ln-code {
    padding-left: 8px !important;
}

これだけでも綺麗にハイライトできて行番号も出て、長すぎるコードはスクロールできて、と表示自体には不満はないのですが、やはりハイライトにはコピーボタンがつきものなので、それも追加しました。これもふじやんさんのブログから経由して拝見した、mizusameさんという方のブログ、ソースコード表示にコピーボタンを実装する（Clipboard API 対応版）のページを参考にしました。JavaScriptは最初全く分からなかったのですが、色々調べながらmizusameさんが記載した内容だけは分かるようになりました。本当によくできています。JavaScript、CSSの順に書きます。

<script>
// コピーボタン作成用コード
(function(d){
  const pre = d.querySelectorAll('pre');
  if(pre.length == 0){
    return
  }
  for(let i = 0; i < pre.length; i++){
    const btn = d.createElement('button');
    btn.className = 'copy-button';
    btn.textContent = 'Copy';
    pre[i].insertBefore(btn, pre[i].firstElementChild);
    btn.addEventListener('click', copy_code, false)
  }
})(document);

// コピー機能用コード
function copy_code(){
  const code = this.nextElementSibling.innerText;
  if(navigator.clipboard){
    navigator.clipboard.writeText(code).then(() => {
      this.textContent = 'Copied!!!';
      setTimeout(() => {
        this.textContent = 'Copy'
      }, 500)
    }).catch(e => {
      alert('コピーできませんでした\nお手数ですが手動でコピーしてください\n\n' + e.message)
    })
  } else{
    alert('このブラウザは Clipboard API 非対応です\nお手数ですが手動でコピーしてください')
  }
}
</script>

.copy-button{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  margin: 0 auto;
  padding: 0 1em;
  height: 24px;
  border: none;
  line-height: 1;
  font-weight: bold;
  background: rgb(90,196,247);
  color: #000;
  cursor: pointer;
}

.copy-button:hover{
  background: #FFFFA0
}

さらに、ふじやんさんにならってコードタイトルも入れることにしました。これもふじろじっくで行われているのとほぼ同じ形です。highlight.jsではcodeタグにclass指定をすることによってどの言語を書いているのかを指定できます。例えばHTMLであればcode class="language-html"となります。このclass指定に使われる言語の省略形は各言語につき決まっています。HTMLなら"language-html"、JavaScriptなら"language-js"と言う様に。言語を指定するこのclassを使って、CSSで要素を指定し、その前に擬似要素を作り、それに文字を置くことでコードタイトルをつけていきます。使う省略形はhighlight.jsのGitHub公式ページからSupported Languagesという場所に進むことにより確認できました。

以下にコードタイトルを付けるのに使ったCSSを記載します。

/* コードタイトル */
pre code.language-js::before {
    content: "JavaScript";
}
pre code.language-jsx::before {
    content: "GAS";
}
pre code.language-css::before {
    content: "CSS";
}
pre code.language-html::before {
    content: "HTML";
}

pre code.language-js::before,
pre code.language-jsx::before,
pre code.language-css::before,
pre code.language-html::before {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0 auto;
    padding: 0 1em;
    height: 24px;
    font-weight: bold;
    color: var(--color);
    background: var(--dark-bg);}

とりあえずHTMLとCSSとJavaScriptくらいしかないのでこれでいいです。今後新しくハイライトしたい言語が出てきたらここに書き込めばいいですね。
2023/10/22追記　Google Apps Script(GAS)を追加したかったけどGASはハイライトに対応していませんでした。GASは大部分JavaScriptと同じなので必要ないと考えたのかもしれません。ただ、ちょうどJavaScriptの省略形がjsとjsxの2通りあったため、jsはJavaScript、jsxはGASにして、ハイライトすることにしました。　追記終了

2024/01/31追記　F-lightをアップデートしたら記事が中央揃えになって、それは問題無いのですがソースコードが変な位置に中央揃えされてしまったため、ソースコードの部分のみ左揃えにするCSSを入れました。追記終了

/* for block of code */
.hljs-ln-code {
    padding-left: 8px !important;
    /*左揃えにするためにはこの.hljs-ln-codeの所にCSSを追加する*/
    text-align: left;
}

問い合わせページ

これまたふじろじっくさんの記事Googleフォームをカスタマイズを参考にさせていただきました。本当に参考にさせていただきっぱなしです。Googleフォームの公式サイトから、Googleフォームを編集します。本当にGoogleは何でも揃っていますね。Bloggerの機能はあまり発展していませんが…。

Googleフォームの具体的かつおすすめの使用法については、BloggerなびさんのBloggerにgoogleフォームでお問い合わせページを設置するを参考にさせていただきました。本当にありがとうございます。ふじやんさんは、お問い合わせページをさらに細かくカスタマイズし、Google色を無くしてブログのデザインにぴったりと合わせる様なことをされていますが、私は出来上がったフォームをそのまま貼り付けるだけで良しとしました。そこまで細かく体裁を気にしていないので…。見栄えはブログと一致していないのですが特に問題はないと考えています。Googleフォームに来たお問い合わせがそのままGoogleスプレッドシートに記録されるのでものすごく便利だと思います。

キーコードカスタマイズ

command+Cでコピーできます、という具合に、キー入力を立体感のあるキーボード風にCSSでカスタマイズしました。こちらは、catnoseさんのkbdタグを参照しています。ダークモードに合わせてカラーを変えるのに一手間必要でした。以下にいくつか例を出してみます。

option+@
shift+つ
システム設定→Bluetooth

ほとんどはcatnoseさんの記事そのものですが、F-lightの色に合わせるため一部変更しています。キーボードのキーと、画面上の操作メニューではデザインが異なるため、キーはkbd class="key"として、メニューはkbd class="menu"として、クラス名を付与しています。また、色はダークモード対応しないといけないので、上に書いたダークモード用とライトモード用の配色のCSSも関係しています。

kbd.key {
  display:inline-block;
  color:var(--kbd-letter);
  background:var(--kbd-color);
  margin:0.2em 0.2em;
  padding:0em 0.5em;
  border-radius: 3px;
  border-bottom: 3px solid var(--kbd-shadow);
  border-right: 2px solid var(--kbd-shadow);
}

kbd.menu {
  display: inline-block;
  margin: 0.2em 0.2em;
  padding: 0.5em 0.7em;
  border: solid 1px rgb(0,0,0);
  border-color: var(--color);
  color:var(--kbd-letter);
  background:var(--kbd-color);
  border-radius: 2px;
  vertical-align: middle;
  font-size: 0.9em;
  line-height: 1.1;
}

F-light対応ブログカード導入

ふどろじっくを拝読していたら、ブログカードが導入されていて、僕もこれを導入してリンクもかっこ良い形にしたいと思いました。どうすれば出来るのかな、と思っていたらふじろじっくさん自身にそのものズバリの記事がありました。こちらです。早速導入しました。

【F-light】おすすめブログカード作成ブックマークレットの紹介 | ふじろじっく

【F-light】おすすめブログカード作成ブックマークレットの紹介 | ふじろじっく

すたすた式さんのブログカード作成ブックマークレットと The other way round さんのブログカードデザインを F-light 用に最適化したコードを紹介

ファビコンfujilogic.blogspot.com

とりあえず、今のところは以上です。また、新しいカスタマイズが有ったらそのたびに、少しずつ記載を追加していこうと思います！！