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

夜月🐏

2025年4月5日 01:27

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

こんにちは、夜月です🐏
今回は以前にも書いたPrivatter+ぷらいべったーぷらすにおけるデザインのお話です。

前回から数か月経ち、かな～～～～り便利にアップデートがされたので、追加要素を紹介しつつ、サクッといい感じのデザインを配布しちゃいます💪✨

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

ちなみに、前回の記事はこちら☟

▼③もできました！

「Privatter+」とは？

前回の記事でもご紹介しましたが、Privatterぷらいべったーの後継サービスです。テキストや画像をログイン限定公開やフォロワー限定、パスワード制など、公開範囲選択をして投稿できます。

しかも、これがすべて無料で使えちゃう！
本当にいいんですか……と、感謝しかないですね。

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

今回、私が配布するデザインは一般的によくあるものを Privatter+でも使えるように調整したコードです。デザインをご利用いただく場合には、以下のリンクより「デザイン利用規約」などをよくご確認ください。

追加された機能・タグのご紹介

前回から追加された要素を紹介していきます。
なお、サンプルページでは各要素の見本やちょっとした使い方のコツや解説なども記載していますので、参考にしてみてください。

①URLで埋め込み表示

これ、意外と便利なんですよ。
noteでもそうなのですが、X(旧Twitter)やBluesky、YouTubeやニコニコ動画などの投稿を埋め込めるようになりました！

しかも、ClipStudioのサンプル公開URLにも対応。クリエイターに優しい仕様ですね！これまでの作品を一覧化したポートフォリオなどにいいかも？

②引用、箇条書き、数字リスト

こちらも地味に欲しかった要素。
ただし、箇条書きと数字リストは階層の表現ができませんので注意。
引用は複数階層にも対応しているので、表現の幅が広がりますね。

③画像サイズの指定

もともと<div>などのstyle属性でサイズは指定できたのですが、それを簡単にできる記述が追加されました。また、それに伴い相対値指定の「vw」「vh」も使用可能に。

「vw」=「viewport width」のこと。
「vh」=「viewport height」のこと。

これはなに？という方のために簡単な説明画像を作ってみましたのでご参照くださいませ🐏

vwとvhの話ついでに「width」と「height」の二つの単語。たまに幅なのか高さなのかわからなくなる人に、私の覚え方も置いておきます。

④html要素、style属性が追加

これまでは「div」「span」「p」といった基本的な要素だったのですが、ここが一気に充実！マークダウンでも表現できますが「div」内などでは使用できず、表現に制限がありました。それが、どーんと増えたのです。やったね！

こちらのページで要素や属性を表にし、何に使うのかというのを軽く説明を入れていますので、よろしければ参考にしてみてください。

⑤投稿の並び替えが可能に

これ、これです！本当にこれは欲しかった！
通常は私のPrivatter+の投稿は片手で数えるほどしか見えないようにしています。ですが、実は一覧に表示していないだけで、すでに20個ほど投稿がありまして……新しく作ったものが一番上に投稿されます。

それはそれで助かるのですが、今回のように「過去に投稿したものを編集する」というのが高頻度であり、該当の投稿を探すのが本当に大変でした。

カテゴリなどでも分けてはいるのですが、それでも見失ってしまうことがあったんですよね。

ですが、この並び替えによって、よく編集する投稿を上に置いておく、というのができるようになったので、さらに便利になりました！
ありがとうございます！！！

以上、現在までに追加されたものの紹介でした。

ここからは、コピペでサクッといい感じのページを作るためのデザインコードを配布していきます。今回は恐れ入りますがコードは有料でのご提供とさせていただきます。記事のご購入後、コードをコピペしてご利用ください。

なお、デザインの取り扱いについては、下記ページの「デザイン利用規約」をよくご確認ください。

ご不明点等がございましたらメールまたはマシュマロ等でご連絡ください。

事前準備：画像URLの取得

今回のデザインでは、通常のPrivatter+が用意してくれているタグや画像の挿入方法はあまり使いません。基本、HTMLで構成しています。

そのため事前準備として、画像のURLを取得できるようにしてください。
取得方法は画像を参照🐏

なお、Privatter+さんでは、画像のURLは以下からはじまるようなので、これの後に画像を挿入したときに表示される[ ○○○○.jpg ]や[ △△△△.png ]などをコピペして「original/」の後に入れるだけでもできます。

https://media.privatter.me/img/18291/original/

毎回取得するのが面倒なときは、配布しているコードでもこのアドレスを利用しているので、うまく活用してみてくださいませ🐏

24種のデザインサンプルをご紹介

今回ご紹介するデザイン24種を画像でまとめてみました✨
画像とテキストのセットで、ちょっとしたメニューの表示や作品一覧などでもご利用いただけるシンプルなデザインでまとめています。

こちらの画像でデザインをご確認いただき、気に入ったものがありましたら、記事をご購入後、コードをコピーしてご利用くださいませ。