Bootstrapで創作個人サイトを作る記録と、役立つ無料ツールの紹介。ランディングページだけならすぐ出来る。
あとは画像をwebp形式に対応したり、PHPを8のモジュール版にしたり………。見えないところでGoogleに好かれようと必死。
【1/7追記・Bootstrap5に更新してパフォーマンスを100にした】
今回の更新内容
サイト運営の覚書。
- BootstrapのLP作成
- PHP8のモジュール版へバージョンアップ
- 画像をwebp形式に変更
※ブログはまだ検証ができてないのでモジュール版になってない。まずテーマを新しくしてから対応したい。7.4にしたばっかりだしね。サブドメにしてあると別個対応できて楽。
LP作成
今はカードリンク機能があるので、個人サイトのバナーなどいらない。※画像が出ないのはrobots.txtで画像を読み込めなくしてるからです。
奥付や連絡先に書いておくURLはhttps://juliet-project.com/になってる。各SNSへのリンクと書店の案内だけのせてある。
LP（Landing Page/ランディングページ）は最初にアクセスして「着地」するページ。昔の言い方だとトップページのこと。
もうWebサイトっていうから、ホームページって単語も懐かしい。古き良きインターネットを偲ぶ会、名誉会員。
ドメイン持ちですが、本籍はgeocitiesのPlaytownドミノ通りです。
Twitterもpixivもどうなるかわからないので、LPを自分で持っておく。Twitterは公式の情報を得るのが楽なので、なんとかいい感じに継続してほしい。
Bootstrap
BootstrapはTwitter社が開発したWebフレームワーク（＝すでに用意されたテンプレ）ポートフォリオ系であれば動的WordPressより静的Bootstrapがいい。
開発元がTwitterなので、下にスクロールしていくサイトが出来上がる。
ページを分けたりせず、全部1ページでまとめてしまう。htmlファイルは一つでいい。
Webサイトを作るテンプレやアイコンがあるので、コードのコピペするだけでおしゃれなレスポンシブサイトが作れちゃう優れもの。
しかも、オープンソースなので無料。商業利用もできちゃう！
勝手にレスポンシブになってくれる。これが最大の特徴。CSSだけちょっと自分でやろう。それらも省きたい人は「Bootstrap5 テンプレ」で検索してそれを利用する。
同人サイト1ページなら1時間ぐらいで作れちゃう。アンソロやWebオンリーなんかの企画ページで、これを利用すると運営が楽かもね。
Bootstrapの日本語対応
Bootstrapは日本語での表示を考慮されていない。デザインが崩れるのでCSSで修正が必要。
text-align: justifyをautoで指定する（文字はそう多くないのでそこまで必須でもなかった）これは日本語無効なので、英数字が入る時に効かせる。あと多言語対応。
日本語というか日中韓の漢字文化圏。主に文字間と行間の調整する。漢字圏のフォント問題はGoogleというよりAdobeが頑張ってくれそう（iOS の言語設定の仕組みもなかなか難しい）
Webは総じてLTR（Left To Right/左横書き）基準。日本語対応テンプレならHonokaがある。
【文字が美しく表示されるとはどういうことか・例】
未対応状態の私のブログ
日本語固有の問題で行末が揃わない。ひらがな/漢字/括弧等の約物の幅が違うので、どうしてもあわない。
このブログは創造性の高い文章でもないのでいいかなって……（妥協大事）これがクリエイティブ職の就活ポートフォリオならちゃんとします。
これはHonokaのデモページスクショ
日本語対応されたテーマなら行末が揃う！ 整う！ 綺麗！ 日本語表示が美しいとはこのこと。
小説サイトや文字情報が多いサイトは、対応テンプレを利用するときれいになる。あまりこだわりがこない部分だけど、確実に見栄えが変わる箇所。
それでも禁則処理が入るとずれてしまう。Web媒体である以上仕方がない。版組がある紙面とは違う。多言語対応するとかなりずれる。
行末が揃ってるサイトを見ると、ちゃんとプロジェクトにデザイナーが存在するんだな～って思う。予算がないとデザイン部署はまず最初に削られるので、すぐにサ終しそうなソシャゲを見極めるのに活用できる。有料フォントを使えてるか、公式サイトのデザイン性+機能性の有無は、運営の台所事情の指標になるよ。
日本語文章の基本は「段落の最初の文字は下げる」だが、Webに於いては必要ない。
字下げせず、<p>～</p>で区切って段落間のマージンを取るだけでいい。字下げすると行頭揃わなくて見た目が整わない。小説のみ、好みで下げればいい（WEB再録で本にするときに楽だしね）
PageSpeed Insights
Google好みにするのに時間がかかる。GoogleのPageSpeed Insightsでチェック。80～60点であれば概ねOK。
Bootstrap4のテンプレなので「おすすめの方法」の点数が低い。これを最新の5に合わせて作り直す必要がある。5特有のナビゲーションが右揃えにならない問題があったので、とりあえず4で作った。今月中に5に直す。
使わせてもらってるテンプレのままだと、ユーザー補助の評価が低いので修正。フォント周りとコントラスト。元テンプレートのデザインあまり残ってないな………。
【1/7追記・Bootstrap5の採用】
- Bootstrap5で作成
- Googleフォントを自前のサーバーから読み込み
オールグリーン、パフォーマンス100になったのでこれで完了。テンプレートのもとデザインほぼ残ってなくて申し訳なくなっちゃう。
最新のバージョンにしたら得点が上がる。最新バージョンは2022/12/30。
SEO項目を100にできないのは同人サイト特有の「検索避け問題」です。検索避けもメタタグは効果がないので「ここが非公式のファンサイト」であることを明記し、robots.txtで画像検索に引っかからないようにしてある。画像検索拒否だけは強めにかけていきたい。
Twitter等SNSにアップした段階で、画像もURLもメタタグ検索避けなど無力。おまじない程度のもの。
検索避けに関しては考え方が人によるので、他人のやり方に口出し手はいけない。検索アルゴリズムもすぐ変わる。
WPもオフラインのページは除外の指定をしてるけど、そんなのお構いなしのGoogleのアルゴリズム。非公式である事の記載は怠らないようにすることしかできない。
＜/追記ここまで＞
コントラスト比
背景と文字のコントラスト比checkにはAdobe Colorを利用。
真っ白背景に黒文字はコントラスト強すぎて見ずらいので、ぎりぎり明るいグレーにする。
コントラスト比の横に✓がつく組み合わせなら、Googleも許してくれるはず。
合格ラインは7.5：1なので14あればいい。ディスプレイの明るさは夜間モードや屋外等、人により閲覧環境が違うから、できれば12～17ぐらいがおすすめ。
ちなみに白：黒は21 : 1なので、液晶画面では強すぎる。この文字色は3.1なので可視性が低くGoogleに注意される。
レスポンシブ対応
ChromeならF12を押せば、自分のサイトがスマフォでどんな表示になるか確認できる。
Bootstrapのグリッドシステムは横12枠で、それを超えると下にずれる。要素に大きさを指示する。
- <div class=“col-lg-2 col-sm-4 col-xs-6”>
スマフォで縦2列、タブレットで縦3列、PCで横1列表示になるようにタグで設定する。きれいに揃えたいので12で割れる数。
余白も綺麗に整っててすご～い
15px余白は自動で付く。知識がなくともどうにかなるBootstrapすご～い。
本は<div class=”col-md-4″>でスマフォで1列、それ以外は3列表示。結構自在にレイアウトできる。新刊だけ表1.4つなげて一つに表示させたければ、<div class=”col-md-12″>にすればいい。
古のサイトはtableタグでレイアウトをしていたけど、そんなことはもうしない。
ここで≥768pxが最大と指定したなら、表紙画像は横768pxで書き出せば十分になる。無駄なデータを作らなくて済む（実は書店の申請画像をそのまま使いまわしてるだけ）
案の定、Googleに「適切な画像サイズにしろ」って注意される（なので点数が100にならない）
Webアイコン/CDN
プレスキットのロゴはもう用意されている
フォントあつかいなので、大きさも文字の大きさにあわせて表示される。もう、いちいちフォトショップを開いてgifアイコンを作ったりしなくていい。
コーポレートロゴを使う場合、色やロゴの最小幅にだけは気をつけよう。サイトで免責事項を確認する。基本は白で扱えばだいたいのロゴは平気。絶対に使用例を示してある。
HTMLに1行追加するだけで使えるCDN（Content Delivery Network/コンテンツデリバリーネットワーク）を採用。 CDNはみんながよく使う素材を大きなところが提供してくれてるので、それを利用すること通信容量減らしましょうってこと。
Font Awesome
Font Awesome
https://fontawesome.com/
アイコンはBootstrap公式にもあるけど、Font Awesomeを利用する。有料と無料があって、無料で今のところ平気。
ユーザー登録をしてCDNのタグをもらう。
………………pixivのロゴなくない？ 国産SNSだからかな。
バッグだけど鍵マークに見えちゃう
BOOTHはpixivにリンク貼るとでてくるバッグのアイコンならある。有料だから諦め。BOOTHのポイントアイコン作って欲しい。ラクダ？のマークのやつ。
pixivはparkingのPで代用。あとでSVGに変える。
これらのアイコンはMITライセンスで、著作権表示はソースに明記すればいいので、HTML（表示されるところ）に記述をしなくてもいい。優しい仕様。
webp形式
JPG/PNG/GIFに代わるGoogleが開発した画像形式。よみかたはウェッピー。画質そのままで容量をだいぶ軽くできる。
PNGのようにアルファチャンネルが持てて、GIFのようにアニメーションもできる。
いいとこ取りだけど、Webで閲覧以外での使い勝手は非常に悪い。サムネ表示できない、扱えるアプリが少ない等。
作者側からするとメリットしかないけど、閲覧側からするとすこし難がある。見てるだけなら何も関係ないが、その画像を利用してなにかしたい人には不向き。
お品書きは買い物を頼むときにLINEに貼ったりするかと思うので、それだけはjpg対応でいく。
1996年に新しい画像形式としてPNGが生まれた経緯、ちゃんと知ってるよ（インターネットを偲ぶ会の発言）開発されて10年ぐらいで標準化していくので、2010年生まれのwebpもそろそろかなって思って…………。
Save image as Type
Save image as Type
https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd
webp画像をjpgで保存するプラグインがあるので、これを使ってください。特に保存するようなサイトでもないので、徐々に置き換えていく。
Squoosh
ブラウザ上で使えるwebp無料変換ツール。開発はGoogle。
Squoosh
https://squoosh.app/index.html
スライダーでどれくらい圧縮するか調節する
左がwebp（143kB）右がjpg（1005kB）なので、同じ画質で1/10軽くなる。サイズが大きな画像ほど効果がある。【ｋが103 Kが210】
最近フォトショップでも読み込み/書き出せるようになった。クリスタもそろそろ頼む。
備忘録
サイト運営の備忘録メモと、友達への説明。
「個人サイト作ってみた～い」という人は、ツールは無料を駆使しても問題ないが、セキュリティ面だけはちょっと金をかけてほしい。
ファイル転送
セキュリティはSFTP＞＞＞FTPS（FTPよりマシ）＞FTP。もうやめろ、古のノリでFTPでネットにアップロードするのは!!!
自分は
SFTP【推奨】
SFTPはSSH（Secure Shell）でファイル転送を行う。全てのデータを暗号化して通信する。
デメリットは転送が少しだけ遅い。気になる程度ではない。みんな在宅ワークのデータはこれでやってると思う。この方法が主流。
「個人サイトならエコノミープランで容量は十分」とおすすめされても、容量ではなくセキュリティ部分がコストダウンされてることを、わかった上で選んでほしい。
個人サイト作成を手軽にするためだけど、セキュリティ部分にはあまり語られないので………。趣味の個人同人サイトはいいけど、企画サイトで下位プランは危険ではなかろうか？
※みんな大好きFFFTPは、すでに開発が終了しているのでSFTPに対応していない。いまるのは引き継がれてるもの。
FTPS
SSL（Secure Socket Layer）でファイルを転送を行う。ネットバンキングやクレカのときの通信なので馴染みある。
SFTPが使えないならこっちを使おう。
なお、これでデータをアップしようとすると、Windowsのファイアウォールに阻止されるので、設定変更が必要。しっかり仕事するWindows、えら～い。
ロリポップの下位プラン利用なら、せめてFTPSを利用しよう。FTPS接続対応ソフトを利用し、パーミッションを変える等は必ずやってほしい。
スタンダート以上であれば、WinSCPなどを利用してください。もうFTPソフト立ち上げるの面倒という場合はVScodeから直接アップするという横着ルートもあります（自分はこれ）
昔懐かしFTP【非推奨】
FTPはサーバーに平文でファイル転送行う。
通信内容もユーザ名もパスワードも暗号化されていない。同人サイトの画像なんて大した情報ではないけど、パスワードも無防備というゆるふわっぷり。ロリポップは一つしか利用できないから余計困る。
古き良き個人サイトで使われてた従来の通信方法なので、セキュリティが追いついていない。正直令和の世に使わないでほしい。やめろって！ほんとやめろって！！！
昔個人サイトを作ってた元管理人の皆様は、ここだけ注意。
HTML5→HTML Living Standard
FTPはもう使えないが、覚えたhtml知識はまだ健在。みんなが大好きなtableとframeはくたばった。
W3CのHTML5は2021年1月28日に廃止され、WHATWGのHTML Living Standardに仕様が一本化。
特に内容が大幅に変わってるわけではなく、運営が変わっただけ。
「HTML LS」で「HTML6」と連番でないのは、アジャイル開発になったから。
HTML5の知識が無駄になるわけではない。仕様が統一されてむしろWeb開発がしやすくなった。IEが消えたことによってだいぶ楽になってる。IE、安らかに眠って。
WHATWGはApple（Safari）＆Google（Chrome）＆Mozilla（Firefox）と、2017年からMicrosoft（Edge）が加わって牛耳ってる共同運営してる。この錚々たる4社強そう。ブラウザ作ってる4社が言うことには従わざるを得ない。
途中から入ったEdgeくんの立場弱そうだよね。なんでIEとEdgeがネタ扱いされてるかは、W3CとWHATWGの関係を調べるとちょっとわかって面白いよ。
IEくんは利用者が少ないからネタにされてたのではなく、W3Cに従わなくてハミゴにされてたんだね！ かわいそう！
CSS3
CSS（Cascading Style Sheets/カスケーディングスタイルシート）Webデザインやレイアウト担当。
後ろの数字はバージョンではなくレベル。できることが増えていくだけなので、互換性がある。
CSS4は「未だ存在はしないが概念としてはある」という不思議な存在。16進数で透明ができるようになるとかなんとか………。ブラウザがまだ対応してないし、まだレベル3で勧告されてないのがある。4はソシャゲで言う未実装のキャラ扱いって考えて。
CSSに関しては、「数字はバージョンではない」ということだけ覚えておけばいい。
同人サイトで活用できそうなやり方が全部書いてある本。いくつか見てるけど、昔個人サイトを作ったことがあるなら、この書籍がおすすめ。
役立つ関連書籍は自分のスキルによって異なるので、KindleUnlimitedを利用して内容確認後、自分に合いそうなら物理書籍で入手にしてる。
