必要なものだけを収めた
あなただけのブログ基盤
Bloffy が読者のページに置くのは 3.2KB の小さなスクリプトだけです。読者と検索エンジンは同じページを見ます。広告を入れるか、どの分析ツールを使うか、どのドメインで公開するかは、あなたが決めます。
エディタで自由に書いてください。
プレーンテキストにはセマンティクスがありません。ブロック型のエディタでは、それを表現しにくいものです。
Bloffy は、マークダウン・HTML・CSS・JavaScript で 意図したセマンティクスをそのまま表現できる ように設計されています。みなさんの記事は、その意味構造を保ったまま公開されます — ボットと読者が受け取るものと同じ構造です。
Mermaid で図を描き、LaTeX で数式を書きます。 図と数式は公開の時点でレンダリングされ、読者には無駄のない完成した HTML だけが届きます。とても速く、軽いです。
<style>.highlight {background-image:linear-gradient(90deg,rgba(91,46,229,0.7),rgba(139,107,255,0.4));color:white;}</style>
## Bloffy のエディタは本当に書きやすいです。
左にエディタ、右にプレビュー。分割された画面でそのまま書けます。便利でしょう？
### え。それだけ？
いいえいいえ。Bloffy のもうひとつの魅力は、最適化のさらに先まで最適化したことです。みなさんのブログは [PSI 基準](https://developers.google.com/speed/docs/insights/v5/about) で <strong class="highlight">Web Vitals とパフォーマンス、ベストプラクティス、SEO、アクセシビリティの100点に届くよう設計されています。</strong> 速いでしょう？ <small>もちろん、ブログによって多少の差はあります。</small> 三つだけ聞かせてください。
```mermaid
flowchart LR
Q1([自分だけのブログがほしい。]) -->|はい| Q2([自前のホスティングは手入れが大変。])
Q1 -->|いいえ| P[プラットフォームのブログで十分]
Q2 -->|はい| Q3([パフォーマンスが大事。])
Q2 -->|いいえ| W[自前でホスティング]
Q3 -->|はい| B[Bloffy]
style B fill:#5b2ee5,stroke:#8b6bff,color:#fff
```
三つとも「はい」なら、Bloffy を試す価値があります。
ほかにも... 自分のドメインを使えて、CSS でブログを自由に飾れて、多言語で記事を公開できて、IndexNow で検索エンジンに早く伝えられて、ドメイン評価を守る土台があって、ブログにメンバーを追加できて ... ~~このへんにしておきます。~~
ゆたかなテーマ
どんなブログにしたいですか？
雑誌の表紙、文芸誌、ニュースレター、フォトモザイク ...
気に入ったテーマを選んで適用してみてください。
ぴったりのテーマがありませんか？
あなたのブランドに合わせて仕立ててください。
ブログを自由に仕立てられます。
ボタンやセレクタだけの UI では、細かいところまで仕立てられません。
CSS で細かいところまでブログを仕立ててください。
カスタム CSS
72 --color-surface-1: #ededea;
73 --color-surface-2: #e4e4e0;
74 --color-hairline: #dcdcd7;
75 --color-hairline-soft: #e6e6e1;
76 --color-ink: #1a1922; /* 16.2:1 */
77 --color-ink-muted: #55525f; /* 7.1:1 */
78 --color-accent-iris: #5b2ee5;
79 --color-accent-iris-deep: #4a23c4;
80 --color-accent-iris-bright: #6a3df5;
81 --color-link: #5b2ee5; /* 6.6:1 */
82 --color-link-hover: #4a23c4;
83 --color-focus: #5b2ee5;
84 --color-on-accent: #ffffff; /* 7.1:1 on an iris fill */
85 color-scheme: light;
86}
87
88/* Dark theme. Depth comes from lifting surfaces, not from borders. */
89:root[data-theme="dark"] {
90 --color-canvas: #0a0a0d;
91 --color-surface-1: #141318;
92 --color-surface-2: #1d1b23;
93 --color-hairline: #28252f;
94 --color-hairline-soft: #1b1921;
95 --color-ink: #f5f4f6; /* 18.0:1 — off-white, to soften glare */
96 --color-ink-muted: #9b97a5; /* 6.9:1 */
97 --color-accent-iris: #5b2ee5;
98 --color-accent-iris-deep: #4a23c4;
99 --color-accent-iris-bright: #8b6bff;
100 --color-link: #8b6bff; /* 5.31:1 — plain iris is only 2.79:1 on dark */
101 --color-link-hover: #a892ff;
102 --color-focus: #8b6bff;
103 --color-on-accent: #ffffff;
104 color-scheme: dark;
105}
106
107/* Follows the reader's system preference until a theme is chosen explicitly. */
108@media (prefers-color-scheme: dark) {
109 :root:not([data-theme]) {
110 --color-canvas: #0a0a0d;
111 --color-surface-1: #141318;
112 --color-surface-2: #1d1b23;
113 --color-hairline: #28252f;
114 --color-hairline-soft: #1b1921;
115 --color-ink: #f5f4f6;
116 --color-ink-muted: #9b97a5;
プレビュー
インストールなし、クッキーなし
どの記事が読まれているか、どこから来ているか、どれくらい滞在しているか。ブログ単位でも記事単位でも、期間を選んで詳しく見られます。
クッキーを使わず、IP を保存せず、データを第三者に渡さないので クッキー同意バナーを出す必要もありません。 読者のプライバシーを最優先に守ります。
<script src="/b.js" defer>2,596B
ブログ、ワークスペース、ユーザー。
柔軟で、体系的な構造
ひとつのブログに複数のメンバーを置けますし、複数のブログを運営できます。 そのすべてがワークスペースの中で完結します。記事を書く権限と、ブログを管理する権限は分かれています。
ワークスペース
あなたのワークスペース
あなたの技術ブログブログ
あなたの日常ブログブログ
あなたのチームブログブログ
Kim
Miller
Caterワークスペース
ほかのワークスペース
あなたの会社ブログブログ
ブログ
オーナー
メンバー
メンバー
メンバー
メンバー
あなた
ブログに必要なものすべて
PostsOriginal 1 · Translations 5
English
How to build a lightweight blog
Published1,284Español
Cómo crear un blog ligero
Published417Français
Comment créer un blog léger
Published236日本語
軽量なブログの作り方
Published188한국어
가벼운 블로그를 만드는 법
Published142繁體中文
如何打造輕量部落格
Draft—Localizationひとつの原文と翻訳版をまとめて管理します。
PageSpeed Insights
100Performance
100Accessibility
100Best Practices
100SEO
Web VitalsGood
FCP0.8s
LCP1.7s
TBT0ms
CLS0
PerformancePageSpeed Insights の四項目とラボ指標を確認できます。
<html>
<head>
<meta charset="utf-8"> <title>…</title>
GA4gtag('config', 'G-XXXXXXX')
</head>
<body>
AdSense<script async src="…/adsbygoogle.js?client=ca-pub-XXXX">
<article> … </article>
Empty
</body>
</html>
Code Injection好きなコードを head と body にそのまま入れられます。
Custom Domainブログごとに自分のドメインをつなげます。
384w
640w
828w
1200w
webp · avif
Image Optimization本文の画像は幅ごとの候補と新しい形式で公開されます。
Edge Cache公開したページを世界各地のエッジから届けます。
maize.bloffy.blog › ja › how-to-build-a-lightweight-blog
maize.bloffy.blog › ko › how-to-build-a-lightweight-blog
maize.bloffy.blog › en › how-to-build-a-lightweight-blogHow to build a lightweight blogLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam.
hreflang ×6sitemapJSON-LD
SEO言語ごとの URL とサイトマップ、構造化データが一緒に出ます。