PictPostPersonal、マジでいい
先日個人サイトがメチャクチャ簡単に作れるPictPostPersonalがすげーいいよってを紹介する記事を書きました。
https://natano.xyz/note/n/na36b4556955e
別アカウントで使ってたんですけどあまりに良いのでメインの個人サイトもこれにしました。便利すぎる。もうこれでいいじゃん。
詳しくは前の記事で書いたのですが、PictPostPersonal、マジで楽だ、サイト自体・お絵かきログ・メールフォームといったすべてが一度アップさえしてしまえばぜんぶブラウザ上で一元管理できる、個人サイトっていうか個人用ピクシブだよこんなの、個人サイトがマ～ジですぐ生やせておすすめです🫵💥
自分用に設置するにあたってちょっとデザインをいじったりしたので覚え書きしておきます。
ユーザーCSSをいじって見た目を変える
基本設定画面の中ほどにあるここからCSSがいじれます。
✦背景色をいじる
元から書いてあるCSSをいじります。背景の色はここです。
/* 基本背景色 */
--background-color: #f0f0f0;
--base-back-color: #fff;「 –background-color:」が全体の背景自体の色で、「–base-back-color: 」が記事が記載されるエリアの色なのでお好みのお色を指定してください。
✦背景にグラデーションとかストライプとかをCSSで指定する
新たに記述を追加します。私がやっているような背景をちょっとかわいい感じにするカスタムです。上述の背景色の記述は特に消したりとかさわらなくてOKです。これをそのまま追加してください。
/* 背景をグラデーションにする */
body {
background-image: linear-gradient(135deg, #fff1eb, #ace0f9);
background-attachment: fixed;
} /* 背景をストライプにする */
body {
background-image: repeating-linear-gradient(45deg, #e3f0d0, #e3f0d0 10px, #ffffff 10px, #ffffff 20px);
background-attachment: fixed;
}「deg」が角度で、その後にお好きな色や幅なんかを入力する感じです。
「background-attachment: fixed;」はお好みで、これを追加すると背景が一緒にスクロールしてこなくなります。
以下のサイトでグラデーションやストライプを見ながら作れるので、ここで作ったのをクラス名だけ「body」に書き換えればOKです。水玉とかチェックも作れるっぽい。
✦記事エリアの幅を変える
新たに記述を追加します。私がやっているPCで表示した時にデフォルトだと記事エリアがけっこう画面いっぱいめなのでおしゃれな1カラムブログ風に幅を狭めるカスタムです。
/*INDEXページの幅変更*/
#index-base {max-width: 600px;}
/*個別の記事ページの幅の変更・角丸処理をなくして上下ピッチリにしたもの*/
#base {
max-width: 600px;
margin: 0 auto 0 auto;
display: flex;
min-height: calc(100vh - 3em);
flex-direction: column;
border-radius: 0px;
padding: 1em;
}
/*バナーの位置調整*/
@media (min-width: 1200px) {
#link_banner {
width: 200px;
position: relative;
left: 380px;
}
}
/*ヘッダー部分の幅も合わせる場合は以下も記述*/
#header {
max-width: 600px;
margin: 0 auto 0 auto;
}
#global-header {
max-width: 600px;
margin: 0 auto 0 auto;
background-color: var(--base-back-color);
color: #777;
}
上記の例で600になっている部分を全部お好みの幅に変更してください。私はトップページに合わせて上下ピッチリの四角いページにしましたが、個別ページの角丸残したいなーって人は「max-width: 〇〇px;」のとこだけ残してあとは消していいです。
また、これをやると基本設定から設定できるリンクバナーの位置がずれるので記述を追加して調整しています、これはご自分の設定した幅に合わせて表示見ながら「left: 380px;」の部分の数値を調整してください。
✦あとはおしゃれなCSSパーツ配布サイトとか使っていろいろやってみてもろて
あとはリンクボタンだったりとかの素敵なパーツ配布してる素材サイトさんやジェネレーター系のサイトさんがけっこうあるのでそこのコードをお借りしたりしてみてください。
▼オシャレなパーツ配布してくれてる
▼テンプレート配布サイトさんですが、テンプレートの一部を切り出して使ってもOKとのこと
▼背景の時に言及したとこ、色んなパーツ作れるジェネレーターある
それと自分はWebフォント使って書体をいじるなどしています。
https://knowledge.spirers.jp/article/development/detail/3636
Zenフォント好きすぎる。印刷物でもWebでもつこてる。
検索避けのMETAタグや解析タグを入れる
アクセス解析用のタグ入れたいとかあると思うんでその時のやり方。
✦<body>～</body>内にあればいいタグ
body内にあればいいよ～ってタグは基本設定ページの真ん中らへんにあるフッターHTML欄に入力するだけでOKです。
✦<head>～</head>内に入れる必要があるタグ
検索避け用のMETAタグとかhead内に入れる必要がある解析タグとかはちょっとめんどくさいですがPPP公式サイトの記述を参考にしながら。
https://ppp.kannagi.net/log/51
https://ppp.kannagi.net/faq/log/72
ダウンロードして解凍してきたPPPの内容物の中の「templates」フォルダを「env」フォルダの中にコピペしてください。「env」にある方のテンプレデータが優先して反映されるみたいです。
コピペできたらその「env」内にある「templates」フォルダ内のphpファイルで<head>要素があるものに片っ端から貼りたい検索よけなり解析タグなどをコピペしていってください。手動でちょっと大変だけど頑張って…！
このへんめんどくさい人は解析ならサーバ提供の借りてるスペース全体を見てくれるアクセス解析つかったり、検索避けだったらrobots.txtとか.htaccessを使って検索避けするのもおすすめです。
▼参考サイト
【METAタグでの検索避け】
https://do.gt-gt.org/avoid-searching/
【robots.txtでの検索避け】
https://do.gt-gt.org/save-my-work-from-ai/
https://www.tohoho-web.com/wwwxx079.htm
【.htaccessでの検索避け】
.htaccessはPPP設置時に新しいのが生成されるっぽいのでそれに追加で記述する形で。
https://www.just-size.net/support/tips_searchdeny.php
http://kensakuyoke.web.fc2.com/htaccess2.html
メールフォームの送り先がGmailの時に迷惑フォルダに振り分けられるのを防止する
これは直接PPPのことじゃないんですけど、こういうシステムでサーバと違うドメインのメールアドレスでメールの送受信するとGmailくんは「騙りか～～??? ほな迷惑フォルダに…」ってしてくるのでメールフォームに届いたものを全部迷惑フォルダ送りにしてきます。
対処法としては、メールフォームから送受信されたメールの件名の固定の部分([PPP Mail]とかだったと思う、自分で確認してもろて)とかをGmail側のフィルタで迷惑メールラベル貼らない設定にしてあげると良いかなと思います。
詳しいフィルタの作り方はここ見てください
https://www.g-workspace.jp/googleworkspace-reference/gmail/filters/
PPPマジでいいのでみんなで秒で個人サイトを生やそう
XのAI事情とかポイピクの規約改定やPict〇〇系サービスのやらかしで行き場を失って消耗してるフォロワー見ると個人サイト勧めたくなるんですがやっぱ初手の設置がめちゃくちゃめんどくせえので手を出せないって人もけっこう多いかなと思います。
その点PPPはマジで設置が一瞬なのがすごく良いです。
マジでダウンロードしてきたファイルを丸上げするだけなんだよな。
カスタムしたらいろいろいじれはするけどカスタムなしでも十分立派なサイトができます。カスタムしたらしたでいい感じにもできる！
めっちゃおすすめです！