pickker はミニマルなフレームワーク Pico CSS をベースとした Blogger テーマです。 制作者が自分のために作成したテーマですので、いい感じに改造して使用してください。
Github : https://github.com/shiro-ka/pickker
## 特徴 ### プラグイン #### Pico CSS このテーマのメインエンジンです。 クラスユーティリティのフレームワーク (Tailwind や Bulma) と異なり、セマンティックな html タグをメインとしたミニマルな設計が特徴です。 Blogger のテーマは都合上、CDN からフレームワーク等を読み込む必要があるので、軽量なのも魅力です。
:sparkles: Pico CSS : https://picocss.com
#### markdown-it markdowm クラスを付与した要素以下の文章を MD として解釈して変換してくれます。 Blogger の作成ビューは note やはてブと比較するとどうしても扱いづらさが目立つので、html ビューからマークダウンを使用して書くことを想定しています。
また、twemoji 拡張が入っているので \:heartpulse\: と書けば :heartpulse: が出せます。
:jigsaw: markdown-it : https://markdown-it.github.io
#### Bunny Fonts Google Fonts から追跡を除去したプライバシー性のある web フォント。 基本的に Google Fonts と互換があり、URL の Google の部分を Bunny にするだけで動く。
:rabbit2: Bunny Fonts : https://fonts.bunny.net
M PLUS Rounded 1c が入っていますが、お好みで変更してください。
Google Fonts : https://fonts.google.com/specimen/M+PLUS+Rounded+1c
#### Font Awesome 6 王道のアイコンパック。 Github や Bluesky など、ブランド系のアイコンが充実しているのが魅力。
Font Awesome : https://fontawesome.com
#### Microlink リンクから OGP を api で取得できるサービス。 jsを使ってリンクから自動的にブログカード生成されるようになっています。
:link: Microlilnk : https://microlink.io こんな感じで。
#### Highlight.js コードブロックをいい感じに色付けしてくれる。
``` using System; class Program { static void Main(string[] args) { Console.WriteLine("Hello, World!"); } } ```
:rainbow: Highlight.js : https://highlightjs.org
### スクリプト #### レスポンシブ 最低限のレスポンシブ対応をしています。 細かい部分なので、いろいろ書くよりは実際にスマホで見てご確認ください。 (PCブラウザdevツールのスマホビューだと若干崩れるので、スマホ実機のがいいかもしれません。)
#### 目次生成 某エンジニア向けサイトに影響を受けたサイドバー目次が js から自動生成されます。 右に出てるコレです。:arrow_right: :arrow_right: :arrow_right: スマホの場合は上のナビバーにある目次アイコン を押すと出てきます。
#### ブログカード生成 記事に URL を書くと、js で Microlink のブログカードが自動的に生成されます。 細かい部分にはなりますが、注意点がありますので気になる方はカスタム項目の「ブログカード機能」をご確認ください。
#### テーマ切り替え ユーザー設定に応じて、ダークテーマ / ライトテーマ が切り替わります。 また、ボタンから手動で切り替えることもできます。
#### インセンティブ記事表示 ちょっと凝ったオススメ記事が表示されます。 記事一覧の画面では普通に (月間) 人気記事が3件表示されます。 個別記事の画面では人気記事が1件と、今見てる記事と同じタグの記事の中から、人気記事が1件、ランダムに1件が表示されます。 初期設定が必要ですので、使い方項目の「インストール」をご覧ください。
## README ### テーマの利用について #### カスタム 当テーマは Blogger テーマ作成に関しての自分の知見をシェアすることを目的としています。 カスタマイズはもちろんのこと、カスタマイズしたものを再配布することも大歓迎です。 その際「pickker」である事を記載する必要はありませんが、書いていただけるとうれしいです。
#### 用途 当テーマは **"純粋"** な、アウトプット、趣味、創作、世間話、など「ブログ」に使用することを目的としたテーマです。 いかなる理由があっても、広告の掲載、商用利用、アフィリエイト、などの ~~ゴミ~~ **「唾棄的ウェブサイト」に利用することはできません。**
#### 免責 当テーマを利用することにより発生したいかなる不利益について、責任を負いかねます。 テーマをインストールする前に、必ずバックアップをお取りください。
### コードについて #### カスタム 当テーマの一部 (js部分のみなど) を自分のブログに組み込むことに関しても、もちろん大歓迎です。 また、その際も上記 README の「用途」および「免責」に従いますので、ご確認ください。
## つかいかた ### インストール #### バックアップ Blogger のテーマ設定を開き、▼ から「バックアップ」を選択。 いま使っているテーマのバックアップをダウンロードする。
#### リセット バックアップはちゃんと取りましたか？？？ では、ウィジェットをリセットします。
以下のコードをコピーしてください。 ```
コピーしたら、Blogger のテーマ設定を開き ▼ から「htmlを編集」を開く。 既にあるコードをすべて削除し、コピーしたリセット用コードをペーストして保存してください。
#### インストール Github の Releases から最新のテーマをダウンロードしてください。 ダウンロードしたら、通常通りテーマ設定からインストールしてください。
#### 初期設定 テーマ設定の ▼ から「HTMLを編集」を選択。(or vscode 等で xml を開いてください)
700 行目ぐらいまで進み、「インセンティブ表示」の項目を見つけてください。 ``` // ============================================================ // インセンティブ表示 // ============================================================ /* 初期設定を行ってください document.addEventListener('DOMContentLoaded', function() { var labels = []; document.querySelectorAll('.js-post-labels a').forEach(function(a){ var t = a.textContent.replace(/\s+/g, ' ').trim(); if (t) labels.push(t); }); if (!labels.length) return; function buildFeedUrl(label) { var base = 'https:// !ここにURLを入力! /feeds/posts/summary/-/' + encodeURIComponent(label); var u = new URL(base); u.search = new URLSearchParams({ alt: 'json', 'max-results': '10' }).toString(); return u.toString(); } ```
!ここにURLを入力! という欄に、テーマを入れるブログのテーマを入れてください。 このブログであれば、 ``var base = 'https://oqlbodlpo.blogspot.com/feeds/posts/summary/-/' + encodeURIComponent(label);`` という感じ。
URL を入力したら、コメントアウトを解除します。 はじめにある ``/* 初期設定を行ってください`` と、一番最後の ``＜/script＞`` の前にある ``*/`` を削除してください。
### 書き方 #### キホン 先述の通り、このテーマではマークダウンを使用して記事を書きます。
編集画面を開いたら、左上のボタンから「HTMLビュー」に切り替えます。 マークダウンの基本的な使い方は...調べてください 😘
チートシート
| カテゴリ | マークダウン | 出力 | |---|---|---| | 見出し | `## 見出し2` | `＜h2＞ 見出し2 ＜/h2＞` | | | `### 見出し3` | `＜h3＞ 見出し3 ＜/h3＞` | | | | hタグは h1〜h6 まで対応 (h1は非推奨) | | 強調 | `**太字**` | **太字**（`＜strong＞`） | | | `*斜体*` または `_斜体_` | *斜体*（`＜em＞`） | | | `***太字＋斜体***` | ***太字＋斜体*** | | | `~~打ち消し~~` | ~~打ち消し~~（`＜s＞`） | | リスト | `- 項目` または `* 項目` | 箇条書き（`＜ul＞` , `＜li＞`） | | | `1. 項目` | 番号付きリスト（`＜ol＞` , `＜li＞`） | | | ` - ネスト`（スペース2〜4） | 入れ子リスト | | リンク | `[テキスト](URL)` | テキストリンク | | | `[テキスト](URL "タイトル")` | title属性付きリンク | | 画像 | `` | 画像埋め込み（`＜img＞`） | | | `` | title属性付き画像 | | コード | `` `インラインコード` `` | インラインコード（`＜code＞`） | | | ` ```言語名 ... ``` ` | コードブロック（シンタックスハイライト対応） | | | 行頭スペース4つ | コードブロック（旧記法） | | 引用 | `＞ テキスト` | 引用ブロック（`＜blockquote＞`）| | | `＞＞ ネスト引用` | 入れ子引用 | | 水平線 | `---` / `***` / `___` | 水平線（`＜hr＞`） | | テーブル | `\| A \| B \|` `\|---\|---\|` `\| 1 \| 2 \|` | テーブル（`＜table＞`） | | | `\|:---\|` / `\|:---:\|` / `\|---:\|` | 左寄せ / 中央 / 右寄せ | | エスケープ | `\*` `\#` `\_` など | 記号をそのまま表示（マークダウン無効化） | | 絵文字 | `:smile:` `:heart:` | 絵文字に変換 :smile: :heart: |
Twemoji https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md
#### 画像を入れる 画像を挿入すると、こんな感じになります。 ```
#### FA6 を使う FontAwsome のページからいい感じのアイコンを探し、使いたいものの html をコピペします。 https://fontawesome.com/search
`` →
#### 注意点 - h1 は非推奨 -
## カスタム ### テーマカラー