名刺作成用のテンプレートです
ブラウザの開発者ツールで画像として出力 → 編集ソフトでPDFファイルとして書き出し
とすることで入稿用データに変換できます
ハンバーガーメニュー(縦の「・・・」) → その他のツール → デベロッパー ツール
の順でクリックし、開発者ツールを開きます
- 「デバイスのツールバーを切り替え」ボタンをクリックします
![スクリーンショット 2024-08-18 10 45 39](https://private-user-images.githubusercontent.com/59269129/358877975-e22b1950-3b55-4a0e-b19b-f29ab2080ce4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTQ2NTEsIm5iZiI6MTcyNDYxNDM1MSwicGF0aCI6Ii81OTI2OTEyOS8zNTg4Nzc5NzUtZTIyYjE5NTAtM2I1NS00YTBlLWIxOWItZjI5YWIyMDgwY2U0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE5MzIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU2M2MzZDcwZDdhNTU1NjcyMTM5ZGU3YjZjOTBmZGI0ZTVjYjllMjUxYjRiYTJmMWM5ZTZiNGMzNGIwODcwNmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.oRdTXGTtPJH-UgB7LM7dm8iXizYMAK8zNtPoR1P4Qo0)
2. 「サイズ: レスポンシブ▼」 → 「編集...」 とクリックします
![スクリーンショット 2024-08-18 10 50 16](https://private-user-images.githubusercontent.com/59269129/358878116-a30abb38-79a7-4289-b435-15737a1f7947.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTQ2NTEsIm5iZiI6MTcyNDYxNDM1MSwicGF0aCI6Ii81OTI2OTEyOS8zNTg4NzgxMTYtYTMwYWJiMzgtNzlhNy00Mjg5LWI0MzUtMTU3MzdhMWY3OTQ3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE5MzIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ3YWZmYmU1N2ViZGFmYzZlZTZjYTdlMDE3MzRjNzExMzY5ZDQ4NmVhZmMwYTE4MmFlYjEzNjg3ZTZkMGVkNWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wVbOeR1ClpUrM4lEbqk39Tp7_TVo-NLxrPkiXONv2ko)
3. 「カスタム デバイスを追加...」ボタンをクリックします
![スクリーンショット 2024-08-18 10 54 25](https://private-user-images.githubusercontent.com/59269129/358878212-3f838730-1eee-4890-a12f-e6b7522ff120.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTQ2NTEsIm5iZiI6MTcyNDYxNDM1MSwicGF0aCI6Ii81OTI2OTEyOS8zNTg4NzgyMTItM2Y4Mzg3MzAtMWVlZS00ODkwLWExMmYtZTZiNzUyMmZmMTIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE5MzIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY2Y2EyZGY5NjBhOWUyZjE4YjAyZmZmM2U2NzdlZTU5OWFmYTQzNDY5YjgwMTQ0NDQwZDljMmRhMTM4NWY0ZTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.PsjWDHIKVQ7AQtieYkifmKFprQqHphV5VE64A29p3TA)
4. デバイス名、幅、高さ、デバイスのピクセル比を入力し、「追加」ボタンをクリックします
- デバイス名は任意の名前を入力してください
(今回追加するカスタム デバイスの名前になります) - 幅、高さも任意の値を入力してください
(CSSで幅と高さを固定しているため、どんな値でも影響がありません) - デバイスのピクセル比には上限の値を入力してください
(ここの値によって撮れるスクリーンショットの解像度が変わります)
![スクリーンショット 2024-08-18 10 57 48](https://private-user-images.githubusercontent.com/59269129/358878321-c84e29bb-cd10-451d-87ce-a4c77a308cb1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTQ2NTEsIm5iZiI6MTcyNDYxNDM1MSwicGF0aCI6Ii81OTI2OTEyOS8zNTg4NzgzMjEtYzg0ZTI5YmItY2QxMC00NTFkLTg3Y2UtYTRjNzdhMzA4Y2IxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE5MzIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWEwMDI2MWNmMzZhM2Y5NDc0M2UzNDRiYzE4N2MwZjU3ZDc4ZTBiOTRkYjFkNDU2ODNjZDhlN2U5NDRjNDVmNjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Pe5rxI4N82Kvvjq4t0OWUi08ZqQP3UPMPHxDlCqJpIo)
5. 「サイズ: レスポンシブ▼」 → 「(先ほど入力したデバイス名)」 とクリックします
![スクリーンショット 2024-08-18 11 09 17](https://private-user-images.githubusercontent.com/59269129/358878767-6b480a9c-7aae-4e27-b380-569854a4364a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTQ2NTEsIm5iZiI6MTcyNDYxNDM1MSwicGF0aCI6Ii81OTI2OTEyOS8zNTg4Nzg3NjctNmI0ODBhOWMtN2FhZS00ZTI3LWIzODAtNTY5ODU0YTQzNjRhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE5MzIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJhZGVhM2I2NzkxNGI4M2UxMDlmZGJjOTFhNmEwZjgzNmViZjljZGE0NjE2NDA0Y2RhNjljM2Y2OWRjMzQ5YTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.u13qr_5oFudiPziakp3QUcV900cTjBhCLVW7HypehLg)
6. 閉じるボタンをクリックします
![スクリーンショット 2024-08-18 11 11 10](https://private-user-images.githubusercontent.com/59269129/358878807-ad0d9c85-8a64-46f9-aa5f-8197533be772.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTQ2NTEsIm5iZiI6MTcyNDYxNDM1MSwicGF0aCI6Ii81OTI2OTEyOS8zNTg4Nzg4MDctYWQwZDljODUtOGE2NC00NmY5LWFhNWYtODE5NzUzM2JlNzcyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE5MzIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUyMGU0YjI2NzFmYmE1M2IyM2QzNGE0MjVkZjMxY2IwNWJhYzA0MWY4YmE0MGJjYjI2YWYwODMyOGI1ZjcwOTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5mz_hbscytBySL0GSb0kjpiOy-ETWguGPKiN2shha4w)
「要素」タブで<html lang="ja">
を右クリック → 「ノードのスクリーンショットをキャプチャ」をクリック
とすることで名刺部分だけのスクリーンショットが撮れます
あとはGIMPなりペイントなりFinderなりのお好きなツールでPDFファイルに変換して入稿してください!
reload
というパッケージが便利だったので共有しておきます
npx reload -b