【コピペOK】いい感じのページをサクッと作ろう③【Privatter＋】
📖16,000文字数／推定読了時間：32分🐏
※文字数には配布コードも含まれます。
こんにちは、夜月です🐏
今回は以前にも書いたPrivatter+におけるデザインのお話、なんと第三弾です。
またアップデートがされていたので、追加要素を紹介しつつ、サクッといい感じの新たなデザインを配布しちゃいます💪✨
※本記事は2025年08月29日に執筆しております。サービスの状況により、本記事の内容と異なる場合がございます。あらかじめご了承ください。
ちなみに、同じシリーズ？の①と②の記事はこちら☟
「Privatter+」とは？
毎回ご紹介していますが、Privatterの後継サービスです。テキストや画像をログイン限定公開やフォロワー限定、パスワード制など、公開範囲選択をして投稿できます。
しかも、これがすべて無料で使える……すごすぎます。
デザインをご利用になる前に
今回、私が配布するデザインは一般的によくあるものを Privatter+でも使えるように調整したコードです。デザインをご利用いただく場合には、以下のリンクより「デザイン利用規約」などをよくご確認ください。
追加された機能・タグのご紹介
前回から追加された要素を紹介していきます。
なお、サンプルページでは各要素の見本やちょっとした使い方のコツや解説なども記載していますので、参考にしてみてください。
①ページ内リンクができるように
これまで、ページを区切っていればそのページへのジャンプは可能でした。
しかし、1ページでセクション（見出し）で区切っている場合に、目次などをつけて飛ばす、ということができませんでした。
それが、ページ内リンクとして以下のように設定するとできちゃいます！
▼飛ばしたい箇所に
<div id="任意の文字列"><div>
▼目次などに
[リンクにしたいテキスト](#任意の文字列)これ、ほしかった～～～～～～～！！！！
情報の多いページを作るタイプなので、これマジで助かります！
規約とか、設定とか、そういうのにすっごい便利～～～～～！！✨
私も暇を見つけては、これまで投稿してきたページをちょっときれいにしてこようと思います。
ちなみに、この機能ができていたおかげで、先日ページ校正・校閲のご依頼をいただいた際にも、とてもすっきりしたページ構成をご提案できました。
あ、以下は宣伝です。ご依頼受付中です🐏
②すべてのページ下部に共通で表示できる機能
簡単に言うと、メールの署名みたいな機能ですね。
コピーライトを書いたり、リンクをまとめたり、宣伝を入れたり、と使い方は自由( *´艸｀)ある程度でしたらdivなども使えますので、うまいことカスタムしてみましょう。
今回はこの機能で使えるデザインを主に取り扱っていきます。
これまでに配布したデザインもほとんどがそのまま入れることができるかと思いますので、お試しくださいませ✨
③中央寄せ、右寄せのタグが密かに追加
先ほどの共通テキスト機能の時に気付いたのですが、実は「中央寄せ」と「右寄せ」のマークダウン記法が実装されていました。
使用可能タグのどこにも書いてなかったよ運営さん！！！！めちゃくちゃ便利だから嬉しい！！！！
記載の仕方は以下の通り。
設定なしの左寄せ
[center]中央寄せ[/center]
[right]右寄せ[/right]これを投稿編集でも使ってみると……
できました！
これで毎回<div style="text-align:center;">とか書かなくていい😭
こちらも暇を見つけたら全ページきれいにしていこうと思います……
なお、先ほど見たらプロフィールのところにも「左寄り」のタグが！
確かにプロフィールはデフォルトで「中央寄せ」なので、あると便利な人もいそうですね！
左寄せの記載の仕方は以下の通り。
[left][/left]以上、現在までに追加された機能等の紹介でした。
それでは今回もちょっとしたものではありますが、コピペでサクッといい感じのページを作るためのデザインコードを配布していきます。
コードの一部は有料でのご提供とさせていただいております。記事のご購入後、コピペしてご利用ください。
なお、デザインの取り扱いについては、下記ページの「デザイン利用規約」をよくご確認ください。
ご不明点等がございましたらメールまたはマシュマロ等でご連絡を。
基本的にはHTML知識は不要
今回のデザインは主に新機能の「共通テキスト」で使えるデザインとして配布いたします✨
そして、無料公開分は、通常のPrivatter+が用意してくれているタグを基本としたものなので、HTMLの知識は不要です！
まずは無料のデザインサンプルを
今回ご紹介するデザインは、ちょっとしたメニューの表示や作品一覧への導線など、汎用性の高いシンプルなデザインでまとめました！
画像と見比べて、お好きなものをご利用くださいませ。
もちろん、アレンジしてOKです👌✨
なお、今回のは新たにサブアカウントを作り、デザイン設定などをしないでライトモードで出力してみました。ダークモードやデザイン設定によって見え方が異なりますので、適宜調整してください(*´ω｀)
1.シンプルなテキストとリンク
ベースとなるものですね。これだけでも十分ご活用いただけるかも！
[center]
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)[/center]2.四角でサンド
[center]■□■□■□■□■□■□■□■□■□■□■□■
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
■□■□■□■□■□■□■□■□■□■□■□■[/center]3.だんだんお顔に見えてこない？
[center]+°+°+°+°+°+°+°+°+°+°+°+°+°+°+°+°+°+
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
+°+°+°+°+°+°+°+°+°+°+°+°+°+°+°+°+°+[/center]4.もふもふパラダイス ～ひつじも添えて～
絵文字や記号は利用機種により見え方違うので、使うときは少し注意が必要かも。
[center]☁️🐏☁️☁️☁️☁️☁️☁️☁️☁️☁️
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
☁️☁️☁️☁️☁️☁️☁️☁️☁️🐏☁️[/center]5.ネズミさん、うしろうしろ！
[center]🧀🐀 🐈✨
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
🧀🐀 🐈✨/center]6.右左寄せおしゃんてぃライン
[center][left]◆◈──────────[/left]
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
[right]──────────◈◆[/right][/center]7.切り取線って可愛いでしょう？
[center][left]-----✂----------------[/left]
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
[right]----------------✂----- [/right][/center]8.幸せをお届けよ～
[center]🌳𖧧 ˒˒. . 🍀𖤣𖥧 ⠜. 🐞
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
[/center]9.一見すると気づかないオシャレ
[center]
氏名／ハンドルネームなど
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
･･･✼･･･✼･･･✼･･･✼･･･✼･･･[/center]10.名前の横に置くだけでも👍
[center]
🐝➰ 氏名／ハンドルネームなど 🍯✨
[リンク](https://)｜[リンク](https://)｜[リンク](https://)
[リンク](https://)｜[リンク](https://)
[/center]いかがでしょうか？使ってみたいデザインがありましたら幸いです。
ベースを決めたら、記号や絵文字を置くだけのシンプルなデザインなので、どなたでも簡単にアレンジしていただけると思います🐏
有料版はHTML知識が少し必要です
有料配布分はそのデザインの複雑さや、色の変更などアレンジをするのに、HTMLの基礎知識が必要なものも。シリーズ②の事前準備に関しても確認してからですと、スムーズにご利用いただけると思います。
以下①～⑭のデザインを画像内でご確認いただき、気に入ったものがありましたら、記事をご購入後、コードをコピーしてご利用くださいませ。
気になるデザインはありましたでしょうか？
ぜひ記事をご購入後、各デザイン番号のコード（黒い背景に小さい文字で書かれた部分）をコピーしてご利用ください。
※マウスポインターを乗せたり、タップすると、ワンボタンでコピーができるアイコンが出てきますので、ご活用ください✨
それでは、以下より各デザインのコードを配布いたします。
番号順に整理していますので、さきほどの画像を参照しながらコピーしてくださいね。
ここから先は
¥ 980
