夜月星礼
12697文字
Public
【コピペOK】いい感じのページをサクッと作ろう【サンプル】
詳細な解説はnoteで行っています。
デザイン設定の確認
まずはご自身のPrivatter+にてデザイン設定を確認しましょう。▼本ページの設定はこちら。
フォント ：ゴシック
文字サイズ：小
行間 ：普通
色につきましては、ライトモードとダークモードのどちらから見てもわかりやすい色選びをするとよいでしょう。また、どちらかを推奨、とホーム画面やページの最初に記載しておくのも親切でよいですね。
デザイン設定、ご利用機種によって、本ページデザインと同じタグを入れても見た目が変わりますので、その点はご了承ください。
◆基本タグについて
公式が出してくれているマニュアルに書かれていることをまとめつつ、使用時のちょっとした注意などもまとめています。下記も合わせてご確認ください。https://privatter.me/manual/tags
埋め込み表示
URLを貼ると、そのメディアを埋め込み表示できるようになりました。
▼X(旧Twitter)
※投稿URLのみ。プロフィールは埋め込みできないようです。
▼Bluesky投稿
※投稿URLのみ。プロフィールは埋め込みできないようです。
▼YouTube動画
※ショート動画はきちんと「埋め込み用URL」で貼り付けが必要。
おそらく、URL構造(ディレクトリ)が通常の動画と違うからではないかと予想していますが、詳しいことは専門家じゃないのでわからないです🐏💦
▼ニコニコ動画
※自分の動画はないため、大好きなお気に入り動画を貼っています。
▼ClipStudioのサンプルURLも貼れちゃう！?
※クリップスタジオで「作品を見せる（SHARE）」で設定し、発行されたURLが必要です。
◇テキストの装飾
- 太字
「 （アスタリスク2つ）」で囲んだ部分が太字になります。
本文内で強調したい時によく使われるタグなので覚えておくと便利ですね。
- 斜体
「 * （アスタリスク１つ）」で囲んだ部分が斜体になります。
アルファベット表記や、何か特別な表記が必要な時に利用すると良いタグ。ただし、使いすぎると読みにくくなるので、ここぞ、という時の方が効果が高いです。
- 打消し線
「 ~~ （チルダ2つ）」で囲んだ部分に打消し線が入ります。
過去に記載した事項の訂正などにはこちらが有効ですね。
- ルビ（Privatter+標準・カクヨムやnoteでも同じ記法です）
最初の文字「│」(罫線で代用しています)がマークダウン記法の表と相性が×。表内で使う際は下のpixiv記法が良いでしょう。
- ルビ（pixiv記法）
リンクの時と違って、こちらはなぜか「>」の前後に半角スペースがなくてもOK
- 傍点
文字の上に「・」が付くタグなのですが、他タグと相性が悪いことが多いので、あまり使用はおすすめできません。
- 引用
夜月のPrivatter+ ホーム
別の場所からテキストをお借りするときに引用「>」の後に半角スペースありで表記すると装飾されます。
- 箇条書きリスト
- ホーム
- 作品
- 問い合わせ
- 戻る
- 数字リスト
- ホーム
- 作品
- 問い合わせ
- 戻る
◇見出し
「#」の数と半角スペースで表現できる装飾です。
見出し1……大きいですね
見出し2……まだ大きいです
見出し3……中くらい。
見出し4……このあたりから夜月は使いやすいです。
見出し5……一番お気に入りな大きさ。
見出し6……これもまぁ使いやすい。
本来はインターネット検索における最適化対策（専門用語でSEOと言われています）では、きちんと「見出し1」から使うのが良いとされることが多いのですが、その辺を気にしなければデザイン性から選んでも大丈夫です。
＜もしもSEOを意識するなら＞
見出し1（h1／タイトル／部）
本文テキスト～～～～～見出し2（h2／大見出し／章）
本文テキスト～～～～～見出し3（h3／小見出し／節）
本文テキスト～～～～～見出し3（h3／小見出し／節）
本文テキスト～～～～～見出し2（h2／大見出し／章）
本文テキスト～～～～～見出し3（h3／小見出し／節）
本文テキスト～～～～～・
・
・
このように使うのが理想と言われています。お仕事でも趣味でも使える知識なので、覚えておいて損はないですよ🐏
◇章タイトル
章タイトル
見出し4と同じくらいの大きさです。
こちらはpixiv記法のひとつなので、こちらも使い分けていくとよいでしょう。◇リンクの置き方
・直置き
夜月のPrivatter+ホーム：https://privatter.me/user/yaduki_shorai
URLをそのまま置いてもリンクになります。
・テキストリンク（Privatter+標準）
夜月のPrivatter+ホームはこちら
［リンクにしたいテキストや画像URL］と（URL）を入れるだけのシンプルなタグ。半角スペースなどがないタグ構造のため、他タグとの干渉が起きにくく、かつシンプルで使いやすいタグです。
※同じ記法で事前に飛ばしたい箇所に＜div id="○○"＞と記載しておき、［リンク］（#○○）とURLの代わりに設定したidの文字をハッシュタグとして置いておくと、そのページ内で該当箇所に飛ぶことができます。ただし、ページ区切りがされている場合は無効です。
例：以下テキストリンクでこのページの最初のほうへ飛びます。
基本タグについて
・テキストリンク（pixiv記法）
夜月のPrivatter+ホームはこちら
「jumpuri:」のあとにリンクにしたいテキストや画像を入れ「>」のあとにURLを指定するタイプのタグ。pixivを長く利用している人だと、こちらの方が使いやすいことも。また、pixivへそのまま投稿できるというのも良いところ。ただし、タグ挿入機能で追加した際「>」の前後に半角スペースがあり、これが他タグと干渉してしまうこともあるので、気を付けたいところ。半角スペースなくてもタグとしては問題ないです。
・画像リンク（正しい形式）
画像添付すると[[ランダムテキスト .png]]のような文字列が挿入されます。
間違えやすいのが「[[ランダムテキスト .png]」の部分を選択した状態でタグ挿入機能を使ったリンクを使うこと。実は、それだとダメで、「[[ランダムテキスト .png]」のすぐあとに「( )」半角の括弧を置き、URLを書くだけ。これ、私も結構間違えててあれ？あれ？となりました。
以下の２つは間違った記法で置かれたリンクです。違いがわかるように置いておきます（Privatter+標準の方を押したら一度ページ更新の必要があります）
画像テキストを選択してPrivatter+標準のタグ挿入機能利用
画像テキストを選択してPixiv記法のタグ挿入機能利用
どちらも画像を置くことはできますが、うまくURL先に飛ぶことができません。
◇画像サイズの指定
これまで、画像サイズはhtmlタグが必要でしたが、挿入画像の後ろに「{width:○○}」「{height:○○}」などのサイズ指定ができるようになりました！
その際、画像リンクとしたいときは、先ほど同様にサイズ指定の後に「( )」半角の括弧を置き、URLを書いてください。
width:300px指定
height:400px指定
width:50vw指定 画面やブラウザの横幅に合わせて50％の大きさを指定
※ブラウザの横幅を変えたり、スマホなどの画面を縦横変えてみると画像の大きさが変化します。
height:50vh指定 画面やブラウザの高さに合わせて50％の大きさを指定
※ブラウザの高さを変えたり、スマホなどの画面を縦横変えてみると画像の大きさが変化します。
width:200px;height:40px指定＆リンク
元画像の比率を無視して指定するとこうなります。
◇html要素とstyle属性について
ここはhtmlを使い慣れている人でないと、最初は混乱するかと思います。
なので、基本的に最初はすでに作られたタグをコピペして使ってみましょう。
どの部分を変えたらどんな変化があるのかは、実際に試してみる方が覚えやすいです。
style属性が適用できる要素タグが増えましたので、以下にまとめておきますね。
| html要素 | 説明 |
|---|---|
| div | コンテンツの区間を指定する要素です。大きな箱のようなもの、と考えるとわかりやすいかと思います。 |
| span | こちらも区間を指定するものですが「div」のより内側、仕切りを引くようなものと考えるとわかりやすいかもしれません。 |
| p | テキストや画像などの段落を指定する要素です。 |
| details | 折り畳み、アコーディオン要素です。「summary」とセットで使います。 |
| summary | 「details」内での概要やキャプション、説明などを表します。 |
| ruby | ルビを付けられます。実際のルビは次の「rt」で囲って指定します。 |
| rt | フリガナを指定します。 |
| rp | 「ruby」に対応していない場合に使用する。使い方にコツが必要なので、無理に覚える必要はない。 |
| rb | ルビ要素の一つですが、現在は対応しているブラウザが少なく、使用は非推奨です。 |
| ul | 箇条書きリスト要素です。「li」とセットで使います。 |
| li | リストのテキストを囲んで使用します。 |
| ol | 数字リスト要素です。「li」とセットで使います。 |
| b | 太字表示にする要素です。 |
| i | 斜体表示にする要素です。 |
| strong | 太字表示にする要素です。「b」が使用できないときに使いましょう。 |
| em | 斜体表示にする要素です「i」が使用できないときに使いましょう。 |
| u | 以前まではただの下線を入れる要素でしたが、HTML5以降では。下線入れて注釈があることを示す要素です。 |
| del | 打消し線表示にする要素です。 |
属性に関して
一応、公式が現在書き出してくれている属性が何を指定できるのか簡単にまとめておきますね。基本は左のとこに「○」となっているのを覚えておけば何とかなりますし、コピペしたタグの編集もスムーズになるかも。
| 覚えておくと○ | 属性 | 説明 |
|---|---|---|
| * | background | 背景を指定する。 |
| ○ | background-color | 背景の色を指定する。 |
| * | background-image | 背景の画像を指定する。 |
| * | background-position | 背景画像の位置を指定する。 |
| * | background-repeat | 背景画像をどのように繰り返し表示するか指定する。画像ソフトの「タイリング」みたいなもの。 |
| * | background-size | 画像のサイズを指定する。 |
| ○ | border | 装飾する罫線ボックスを指定する。サイズや形、太さ、色などを指定できる。 |
| ○ | border-bottom | 装飾する罫線の下部分だけ指定する。サイズや形、太さ、色などを指定できる。 |
| ○ | border-left | 装飾する罫線の左部分だけを指定する。サイズや形、太さ、色などを指定できる。 |
| ○ | border-right | 装飾する罫線の右部分だけを指定する。サイズや形、太さ、色などを指定できる。 |
| ○ | border-top | 装飾する罫線の上部分だけを指定する。サイズや形、太さ、色などを指定できる。 |
| ○ | border-radius | 装飾する罫線の角を丸める指定ができる。一部分だけ、または全体の指定が可能。 |
| ○ | color | テキストの文字色を指定する。 |
| * | height | テキストや画像、そのタグで囲まれた部分の高さを指定する。 |
| * | width | テキストや画像、そのタグで囲まれた部分の幅を指定する。 |
| * | max-widrh | テキストや画像、そのタグで囲まれた部分の幅の最大値を指定する。 |
| * | min-width | テキストや画像、そのタグで囲まれた部分の幅の最小値を指定する。 |
| * | bottom | テキストや画像、そのタグで囲まれた部分の下からどの位置に置くかを指定する（原則、左上からなので） |
| * | right | テキストや画像、そのタグで囲まれた部分の右からどの位置に置くかを指定する（原則、左上からなので） |
| * | z-index | テキストや画像、そのタグで囲まれた部分の同士のZ位置（重なり、レイヤー順）を指定する（数字が大きいほど上にくる） |
| * | align-items | テキストや画像、そのタグで囲まれた部分の配置を指定する。左寄せ、中央寄せ、右寄せから選べる（指定しない場合は原則左寄せ） ※試したところうまく動作しないことも。「text-align」で代用できそうです。 |
| * | opacity | テキストや画像、そのタグで囲まれた部分の不透明度を指定する。 |
| * | display | テキストや画像などの表示形式を指定する。よく使われる指定は「none（表示しない）」「block（この属性のついたタグで囲んだところを一つの塊とする）」だが、覚えなくてもいい。 |
| * | flex-shrink | テキストや画像などが画面からはみ出てしまう時に縮小する計数を指定する。難しいので覚えなくても良い。 |
| * | position | テキストや画像、そのタグで囲まれた部分の配置を指定する。 |
| * | font-family | フォントを指定する。フォントの正式な固有名称や表記の仕方が決まっているので、使いたい場合はきちんと調べてから使うのが望ましい。通常は指定しなくても良い（サービス標準でも十分なので） |
| ○ | font-size | テキストの文字サイズを指定する。 |
| * | font-style | テキストを斜体・イタリックなどのスタイルに指定する。「*」での囲み表示による斜体がdivやspanなどのタグでは反映されないため、代わりに使うことで同じような表記ができる。 |
| ○ | font-weight | テキストの文字の太さを指定する。「」での囲み表示による太字がdivやspanなどのタグでは反映されないため、代わりに使うことで同じような表記ができる。 |
| ○ | line-height | テキストの行間を指定する。 |
| * | letter-spacing | テキストの字間を指定する。 |
| ○ | text-align | テキストの位置を指定する。左寄せ、中央寄せ、右寄せから選べる（指定しない場合は原則左寄せ） |
| * | text-justify | text-align属性で「justify」を指定したときに必要な属性。 |
| * | word-break | テキストの折り返しを指定する。「text-justify」と併記することが多い。 |
| * | word-wrap | テキストの折り返しを指定する。「text-justify」と併記することが多い。 |
| ○ | margin | タグで囲まれた要素の外側のスペースを指定する。一部分だけ、または全体の指定が可能。 |
| * | margin-bottom | タグで囲まれた要素の外側の下部分のスペースを指定する。 |
| * | margin-left | タグで囲まれた要素の外側の左部分のスペースを指定する。 |
| * | margin-right | タグで囲まれた要素の外側の右部分のスペースを指定する。 |
| * | margin-top | タグで囲まれた要素の外側の上部分のスペースを指定する。 |
| ○ | padding | タグで囲まれた要素の内側のスペースを指定する。一部分だけ、または全体の指定が可能。 |
| * | padding-bottom | タグで囲まれた要素の内側の下部分のスペースを指定する。 |
| * | padding-left | タグで囲まれた要素の内側の左部分のスペースを指定する。 |
| * | padding-right | タグで囲まれた要素の内側の右部分のスペースを指定する。 |
| * | padding-top | タグで囲まれた要素の内側の上部分のスペースを指定する。 |
| * | overflow | テキストや画像が指定したブロック内に収まらない場合にどういった表示をするかを指定する。 |
| * | overflow-x | テキストや画像が指定したブロックの左右に収まらない場合にどういった表示をするかを指定する。 |
| * | overflow-y | テキストや画像が指定したブロックの上下に収まらない場合にどういった表示をするかを指定する。 |
※ここにない属性も実は使えるものがいくつかあります。サンプルではそうしたものも含まれていますので、Privatter+の仕様変更時にはそれらが原因でデザインが崩れる場合もございます。予めご了承ください。
ちなみにこの↓の下線もdivタグで指定してます
指定した属性と指定値はこちら。
＊padding: 0.5em 0.5em 0em 0.5em;
→「内側（ここで言うとテキストの位置）の上0.5em、右0.5em、下0em、左0.5emのスペースをとってね」
＊font-size: 1.2em;
→「テキストのサイズを1.2emにしてね」
＊font-weight: bold;
→「テキストを太字にしてね」
＊border-bottom: 1px dashed #A9A9A9;
→「罫線下を1pxの太さで、ダッシュの形で、色は#a9a9a9（darkgray）で表示してね」
※emとはサイズの単位の1つで、元々の親要素（そのタグのさらに外側を囲っているタグのこと）で決められたfont-sizeを参照して、相対的にサイズを指定する方法です。ほとんどのサイトで「1em=16px」ですが、Privatter+では恐らくここが「デザイン設定」によって皆さん変わってくる可能性がありますね。
この辺、私は感覚でやっているので、正確なピクセル数はわかりません……。きちんとしたデザイナーさんはもしかしたらそこのピクセル数も計算してるのかと思うと……すごいですね！
▶TOPに戻る
▶noteに戻る
