公開サイトに独自のアイデンティティを与える
PostnHost は公開サイト全体で主に2つのブランド画像を使用します：サイトロゴとデフォルトOG画像です。ロゴはヘッダーやその他の共通エリアであなたの公開物を識別します。デフォルトOG画像は、ページがソーシャルネットワークで共有され、そのページ固有の画像がない場合に使用されます。
どちらも 設定 → アセット から管理できます。
2つの画像を準備する
小さいサイズでも判読できるシンプルなロゴを使用してください。透過PNGやWebPが一般的に適しています。デフォルト共有画像には、公開物の名称やシンプルなブランド処理を入れた横長の画像を用意してください。ソーシャルプレビューには 1200 × 630 ピクセル 程度が信頼できる選択です。
PostnHost は PNG、JPEG、GIF、WebP、HEIC の画像を受け付けます。ファイルは適度に小さく保ち、公開ページの読み込みを速くしてください。
サイトロゴを追加する
- 設定を開き、アセットを選択します。
- サイトロゴの下で、コンピュータからロゴファイルを選択します。
- プレビューが更新されるのを待ちます。
- ページが未保存の変更を示している場合は、アセットを保存を選択します。
プレビューで、サイトで使用されるサイズでロゴがはっきり見えるか確認できます。詰まりすぎている、または小さすぎる場合は、元の画像を簡素化して再アップロードしてください。
デフォルトOG画像を追加する
- 同じページで デフォルトOG画像 を探します。
- 横長の共有用画像を選択します。
- 大きなプレビューで予期しない切り抜きや文字の判読性を確認します。
- 必要に応じて アセットを保存 を選択します。
設定 → アセット には公開物のロゴとデフォルトのソーシャル画像が一緒に保存されます。
デフォルト画像が表示されるタイミングを知る
デフォルトOG画像はサイト全体のフォールバックです。独自のカバー画像を持つ記事は、その記事の画像が共有時に使用されます。特定の画像を持たないページは代わりにデフォルトを使用できます。これにより重要な記事には固有のビジュアルを与えつつ、一貫したブランドを保つことができます。
画像を置き換えるまたは削除する
アセットを置き換えるには、同じフィールドで新しいファイルを選択して保存します。アップロード済みの画像を削除するには、そのプレビュー横のゴミ箱操作を使い、操作を確認してください。PostnHost は利用可能なパッケージに含まれるデフォルトに戻ります。
結果を確認する
別のタブで公開サイトを開き、ロゴが鮮明で適切なサイズになっているか確認してください。次に独自のカバー画像を持たないページを表示し、お好みのソーシャルプレビューツールで共有画像をチェックします。どちらかのアセットにテキストが含まれる場合は、大画面とスマートフォンサイズのプレビューの両方でテストしてください。
S3互換ストレージを設定する
PostnHost は開発環境ではローカルファイルシステムにアップロードを保存します。本番環境では S3 バケットや Tigris のような S3 互換サービスを設定して、アップロードしたロゴ、ソーシャル画像、カバー画像、エディタ画像がデプロイ後も利用可能であるようにしてください。
暗号化された認証情報エディタを開きます：
bin/rails credentials:editpostnhost: の下にアップロード用の認証情報を追加します：
postnhost:
aws_access_key_id: YOUR_ACCESS_KEY
aws_secret_access_key: YOUR_SECRET_KEY
aws_region: us-east-1
aws_bucket_name: your-upload-bucket
aws_endpoint_url_s3: https://s3.us-east-1.amazonaws.comストレージプロバイダが提供するエンドポイントを使用してください。これらの値をソース管理に含めないようにし、config/initializers/carrierwave.rb が存在することを確認し、アップロードされたオブジェクトが公開されて配信できることを確認してください。認証情報を変更したら本番アプリを再起動し、設定 → アセット で小さなテスト画像をアップロードして、公開URLから引き続き読み込めることを確認してください。
代わりに同じ値を config/initializers/postnhost.rb に設定することもできます。そのイニシャライザではバケットオプションが config.aws_bucket という名前です；イニシャライザに明示的に設定された値は暗号化された認証情報より優先されます。