【コピペOK】いい感じのページをサクッと作ろう【Privatter＋】

📖17,999文字数／推定読了時間：36分🐏
※文字数には配布コードも含まれます。

こんにちは、夜月です🐏
今回は2023年12月に公開されたPrivatter+ぷらいべったーぷらすにおけるデザインについてをテーマにお話していきます。

※本記事内容は無料でご覧いただけます。有料部分はオマケ話ですので、必要に応じてご購入くださいませ。

無料で使えて、とてもいいサービスなのですが、デザインをしっかり整えようと思うと、どうしても独自タグやマークダウン記法、HTMLなどの知識が必要になります。

そこで、サクッとコピペで作れるページを無料配布しちゃおう！といそいそと準備してみました✨

※本記事は2024年10月10日に記載しております。サービスの状況により、本記事の内容と異なる場合がございます。あらかじめご了承ください。

▼「コピペでサクッと」をテーマにした記事をマガジンにまとめました

▼便利で高機能なのにシンプルなレジアプリ「LambRegi」

「Privatter+」とは？

もともとPrivatterぷらいべったーというサービスがあるのですが、その後継サービスです。

主にテキストや画像を投稿することができ、ログイン限定公開やフォロワー限定、パスワード制など、公開範囲の選択が可能なのも特徴です。

記載の通り、以前はX（旧Twitter）とのアカウント連携が必要で、途中、X側のAPI仕様変更などがあった際、IDとPASSによるログインも実装されたのですが、デザインなどを一新して現在の「+」に引き継がれています。

実際、pixivやカクヨムなどの小説投稿が可能なサイトを利用している人も、Privatter+を併用しているなど、情報をまとめるには非常に使い勝手の良いサービスだと思います。

筆者も自分の作品情報を先日やっと移行し、まとめ終わりました（無駄に量が多くて……）ご興味あったら覗いてみてください🐏💕

ちなみに、Privatter+は個人で開発しているとのこと。すごすぎます。応援や広告非表示プランは以下のサイトから購入できるそうなので、そちらも紹介しておきますね。

▼広告非表示用コード発行後、下記ページに入力し送信してください。

毎月コードを入れ直す必要がありますが、広告表示が気になる場合にはぜひご利用ください。

PrivatterからPrivatter+への移行はカンタン

先にPrivatterを利用していた人は、Privatter+への移行も簡単です。
IDですぐに連携でき、Privatterで過去に投稿していたものは投稿日時などもそのまま移行ができます。

詳しい手順を解説してくださってる記事がありましたので、そちらをご参照くださいませ🐏

私の場合、当時Privatter+で対応していないタグなどを使っていたこともあり、この方法での移行ができませんでした。が、通常特別な使い方をしていなければ、移行はめちゃくちゃスムーズで楽だと思います！

デザインをご利用になる前に

今回、私が配布するデザインは一般的によくあるもののうち、Privatter+でも使えるように調整したコードです。

ご利用になる前にまずは下記の内容をよくご確認ください。

基本タグなどについては下記のページにまとめていますし、公式のマニュアルもございますのでここでは割愛させていただきます。

【コピペOK】いい感じのページをサクッと作ろう【サンプル】
デザイン設定の確認／基本タグについて

さて、それでは以下より今回のメイン、コピペでいい感じのページを作るためのデザイン配布コードを羅列していきます。時折解説も挟みますが、基本的にはコピーして貼り付けて、ちょっと色を整えて、というだけですぐ使っていただけるかな、と。

【コピペOK】見出しデザイン各種

各コード（黒い背景に小さい文字で書かれた部分）は下記の画像のようにマウスポインターを乗せたり、タップすると、ワンボタンでコピーができるアイコンが出てきますので、ご活用ください✨

<div style="margin: 0.1em 0 0.1em 0;font-size: 1.65em;font-weight: bold;">1-1：divタグ見出し／h3に似せたもの</div>

<div style="margin: 0.1em 0 0.1em 0;font-size: 1.65em;">1-2：太字にしない</div>

<div style="margin: 0.1em 0 0.1em 0;font-size: 1.65em;font-weight: bold; color:#FF0000;">1-3：文字色#FF0000</div>

※カラーコードはこちらのサイトなどで調べられます。

<div style="margin: 0.1em 0 0.1em 0;font-size: 1.65em; color:#FF0000;">1-4：太字にしない、文字色#FF0000</div>

<div style="margin: 0.1em 0 0.1em 0;font-size: 1.65em;font-weight: bold; text-align:center;">1-5：中央寄せ</div>

<div style="margin: 0.1em 0 0.1em 0;font-size: 1.65em;font-weight: bold; text-align:right;">1-6：右寄せ</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 1px solid;">2-1：実線下線1px</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 5px solid;">2-2：実線下線5px</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 5px solid #FF0000;">2-3：下線5px色#FF0000</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;color:#FF0000;border-bottom: 5px solid;">2-4：文字色#FF0000、下線5px色指定なし</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;color:#A9A9A9;border-bottom: 5px solid #FF0000;">2-5：文字色#A9A9A9、下線5px色#FF0000</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 1px dashed;">3-1：破線下線1px</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 5px dashed;">3-2：破線下線5px</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 1px dotted;">4-1：点線下線1px</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 5px dotted;">4-2：点線下線5px</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 5px double;">5-1：二重線下線5px</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-bottom: 10px double;">5-2：二重線下線10px</div>

※二重線は太めのpxにしないと二重線になりません。細いと実線のように表示されます。

※3～5までの色変更などは2と同様なので省略。

<div style="margin: 0.1em 0 0.1em 0; padding-left: 0.5em; font-size: 1.65em;font-weight: bold;border-left: 1px solid;">6-1：左線1px（色指定なし）</div>

<div style="margin: 0.1em 0 0.1em 0; padding-left: 0.5em; font-size: 1.65em;font-weight: bold;border-left: 10px solid;">6-1：左線10px（色指定なし）</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-left: 10px solid; border-bottom: 1px solid;">6-3：左線10px（色指定なし）</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;background: #A9A9A9;">7-1：背景色＃A9A9A9</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-left: 10px solid; background: #A9A9A9;">7-2：左に線+背景色＃A9A9A9</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-left: 10px solid; border-bottom: 1px solid;background: #A9A9A9;">7-3：左と下に線+背景色＃A9A9A9</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em; font-size: 1.65em;font-weight: bold;background: #A9A9A9; border: 3px solid;">7-4囲み実線+背景色＃A9A9A9</div>

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em; border: 3px solid;"><div style="padding: 0.5em; font-size: 1.65em; font-weight: bold; background: #A9A9A9;">7-5囲み実線2+背景色＃A9A9A9</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(45deg, #000000, #A9A9A9, #FFFFFF);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">8-1：左上から斜めグラデーション+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(-45deg, #000000, #A9A9A9, #FFFFFF);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">8-2：右下から斜めグラデーション+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(180deg, #000000, #A9A9A9, #FFFFFF);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">8-3：上からグラデーション+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(0deg, #000000, #A9A9A9, #FFFFFF);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">8-4：下からグラデーション+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(-45deg, #A9A9A9, #A9A9A9 12px, #FFFFFF 12px, #FFFFFF 24px);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">9-1：斜めストライプ柄+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(45deg, #A9A9A9, #A9A9A9 12px, #FFFFFF 12px, #FFFFFF 24px);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">9-2：斜めストライプ柄2+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(0deg, #A9A9A9, #A9A9A9 12px, #FFFFFF 12px, #FFFFFF 24px);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">9-3：横ストライプ柄+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(90deg, #A9A9A9, #A9A9A9 12px, #FFFFFF 12px, #FFFFFF 24px);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">9-4：縦ストライプ柄+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(90deg, rgba(169, 169, 169, 0.8), rgba(169, 169, 169, 0.5) 12px, transparent 12px, transparent 24px), repeating-linear-gradient(0deg, rgba(169, 169, 169, 0.6), rgba(169, 169, 169, 0.3) 12px, #FFFFFF 12px, #FFFFFF 24px);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">9-5：チェック柄+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: repeating-linear-gradient(45deg, rgba(169, 169, 169, 0.8), rgba(169, 169, 169, 0.5) 12px, transparent 12px, transparent 24px), repeating-linear-gradient(-45deg, rgba(169, 169, 169, 0.6), rgba(169, 169, 169, 0.3) 12px, #FFFFFF 12px, #FFFFFF 24px);"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">9-6：斜めチェック柄+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: #A9A9A9; background-image: radial-gradient(#ffffff 15%, transparent 20%), radial-gradient(#ffffff 15%, transparent 15%); background-position: 0 0, 0.5em 0.5em; background-size: 1.2em 1.2em;"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">9-7：ドット柄+不透明度80%白背景+黒文字</div></div>

<div style="margin: 0.1em 0 0.1em 0; padding:1em; background: #A9A9A9; background-image: radial-gradient(#ffffff 30%, transparent 20%), radial-gradient(#ffffff 30%, transparent 15%); background-position: 0 0, 0.5em 0.5em; background-size: 1.2em 1.2em;"><div style=" padding: 0.5em; font-size: 1.65em;font-weight: bold; color:#000000; background-color: rgba(255, 255, 255, 0.8); width: 100%;">9-8：大きめドット柄+不透明度80%白背景+黒文字</div></div>

※背景色を指定するときは文字色がデザイン設定に左右されることもあるため、文字色指定もしておくか、ライト・ダークどちらのモードでも遜色ない背景色にするのがベスト。

※背景と罫線がずれた装飾タグもネット検索するとよく出てくるのですが、Privatter+では「box-shadow」が利用できないのでうまく反映されないと思います。可愛いのに残念。

【コピペOK】ページデザイン

記事や規約など、情報をまとめる系のテキスト量があるページを想定して作っています。もちろん、カスタマイズしてもOKです！

①Privatter+標準タグのみ

サンプルページはこちら。

### いい感じのページをサクッと作る【Privatter+標準タグのみ】
このページは、主にデザインのサンプルです。適宜、ご自身のページ用に修正してくださいませ。

#### 見出しサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

**■小見出しサンプル**
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

・箇条書きサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

・箇条書きサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

| 表サンプル | 表サンプル | 表サンプル | 表サンプル |
| - | - | - | - |
| 表サンプル | 表サンプル<br>表内改行サンプル | 表サンプル | 表サンプル |
| 表サンプル | 表サンプル | 表サンプル<br>表内改行サンプル | 表サンプル |
| 表サンプル | 表サンプル<br>表内改行サンプル | 表サンプル | 表サンプル |
| 表サンプル | 表サンプル | 表サンプル | 表サンプル<br>表内改行サンプル |

#### 見出しサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

**■小見出しサンプル**
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

①[[rb:箇条書き>かじょうがき]]サンプル
②[[rb:箇条書き>かじょうがき]]サンプル
③[[rb:箇条書き>かじょうがき]]サンプル

#### 見出しサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

**■問い合わせ先**
ページ制作者：夜月星礼の[BlueskyのDM](https://bsky.app/profile/yaduki-shorai.bsky.social)まで
※サンプルで置いているだけなので記載必須とかではないです。

ページ作成日：2024年10月10日
ページ更新日：2024年10月10日

②HTMLタグも交えて

サンプルページはこちら。

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; font-size: 1.65em;font-weight: bold;border-left: 10px solid; border-bottom: 1px solid;">いい感じのページをサクッと作る【HTMLタグも交えて】</div>
このページは、主にデザインのサンプルです。適宜、ご自身のページ用に修正してくださいませ。

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; font-size: 1.2em;font-weight: bold; border-bottom: 6px double; display:inline-block;">見出しサンプル</div>
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

**■小見出しサンプル**
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; border: 3px dotted;">
・箇条書きサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

・箇条書きサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

</div>

| 表サンプル | 表サンプル | 表サンプル | 表サンプル |
| - | - | - | - |
| 表サンプル | 表サンプル<br>表内改行サンプル | 表サンプル | 表サンプル |
| 表サンプル | 表サンプル | 表サンプル<br>表内改行サンプル | 表サンプル |
| 表サンプル | 表サンプル<br>表内改行サンプル | 表サンプル | 表サンプル |
| 表サンプル | 表サンプル | 表サンプル | 表サンプル<br>表内改行サンプル |

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; font-size: 1.2em;font-weight: bold; border-bottom: 6px double; display:inline-block;">見出しサンプル</div>
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

**■小見出しサンプル**
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

①[[rb:箇条書き>かじょうがき]]サンプル
②[[rb:箇条書き>かじょうがき]]サンプル
③[[rb:箇条書き>かじょうがき]]サンプル

<div style="margin: 0.1em 0 0.1em 0; padding: 0em 0.5em 0em 0.5em; font-size: 1.2em;font-weight: bold; border-bottom: 6px double; display:inline-block;">見出しサンプル</div>
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプル

<div style="margin: 0.1em 0 0.1em 0; padding: 0.5em;text-align:center; border: 3px dashed #000000; color:#000000; background: rgba(255, 255, 255, 0.5)">**■問い合わせ先**

ページ制作者：夜月星礼の[BlueskyのDM](https://bsky.app/profile/yaduki-shorai.bsky.social)まで
※サンプルで置いているだけなので記載必須とかではないです。
</div>

ページ作成日：2024年10月10日
ページ更新日：2024年10月10日

Privatter+でデザインに困ったらご連絡ください

これまでの知識や経験をフル活用して、あなたのページ作りをお手伝いします🐏ご相談内容・作業状況によりますが、基本1ページ5000円から承っております。

ご相談はメールへお気軽に。

※ページ内容のデザインを整える+文字校正が基本セット。ページ内容の作成や画像作成もご希望の場合には応相談。

通常のHTMLが使えないことも！？Privatter+を使いこなすコツ

作品情報をPrivatterから移行してみたり、今回のデザイン配布のためにいろいろ試した結果、少しだけわかったPrivatter+コツと特徴をご紹介します。

この先はオマケ話です🐏