きよみん通信のワードプレス化の方法

自治会で発行している「きよみん通信」はPDF版なので、スマホでは見にくい。スマホでも読みやすくするには、「印刷用のデザイン」と「スマホ閲覧用のデザイン」を分けて考え、WordPressを“原稿の母艦”にしてPDFとLINE配信を両方出す形にするのが現実的です。wpbeginner+1

全体方針

  • きよみん通信の「元データ」はWordPressで作る
  • そこから
    • A4印刷用のPDF
    • スマホ読みやすいWebページ/画像
      を分岐させる
  • Illustratorは「印刷用の微調整」だけに限定し、なるべくWordPress→PDFの直結ルートを作るnetshop7+1

WordPress → 印刷用PDFの作り方

  1. ブラウザ印刷機能でPDF化
    • WordPressで公開orプレビューしたページをブラウザで開き、印刷(Ctrl+P / command+P)。shop-pro
    • 送信先を「PDFに保存」に設定し、余白・ヘッダー/フッターをオフにしてA4に収める。shop-pro
    • 必要なら印刷用CSS(print.css)を用意し、印刷時だけフォント大きめ・1段組・余白広めにする。yukiyuriweb+1
  2. プラグインで「印刷/PDFボタン」を付ける
    • Print, PDF, Email by PrintFriendly 等のプラグインを入れると、各投稿に「印刷」「PDF」ボタンを付けられ、きれいな印刷用レイアウトを自動生成できる。wpbeginner
    • これを自分の印刷用PDF出力にも使えるし、読者側が自分で印刷したいときにも使える。wpbeginner
  3. Word経由で整形してPDF
    • WordPressの記事本文をコピーしてWordに貼り付け、フォント・行間・改ページを調整後、WordからPDFエクスポートする方法もある。netshop7
    • 見出しごとの改ページ調整など、紙面をきっちり管理したいときに有効。netshop7

LINE向けに「スマホで読める形」にする

  1. PDFをスマホ最適化
    • スマホではA4縦の2段組などは読みにくいので、
      • 1カラム
      • フォント大きめ
      • 画像は幅いっぱい
        の「スマホ用レイアウト」で別ページをWordPress内に作成する。mypacecreator+1
    • それをPDF化してLINEで送る、という運用に切り替えると、拡大せずに読める確率が上がる。aeonmobile+1
  2. PDFではなく「URLを送る」
    • LINEで、きよみん通信のWordPress記事URLを直接送る。
    • テーマがレスポンシブ対応なら、スマホの画面幅に自動で最適化されるので、PDFより格段に読みやすい。8seminar
    • コメントをLINE上でやり取り、本文はWebで読む、という分業ができる。
  3. 画像化して送る(1ページ=1画像)
    • Webページをスクリーンショット系ツールで縦長画像にして、それをLINEアルバムで送る方法もある。8seminar+1
    • 高齢者やPDFが開けない人にも、「普通の写真」として見せられるので、読みやすさは高い。

LINEでの送信パターン

  • PDFを送る場合
    • トーク画面で「+」→「ファイル」→スマホ内のPDFを選択→送信。choge-blog+1
    • サイズが大きい場合は、SmallPDFなどで事前に圧縮しておくと通信が軽くなる。choge-blog
  • URLを送る場合
    • WordPressで公開した「きよみん通信」記事のURLを、そのままトークに貼るだけ。
    • サムネイルとタイトルがカード形式で表示され、クリックでモバイル用レイアウトのページが開く。8seminar+1

提案する運用イメージ

  • 今後:
    1. WordPressで「きよみん通信」原稿を作成(スマホで読みやすい1カラムデザイン)
    2. ブラウザ印刷 or プラグインでPDF化して印刷所へ回す
    3. 同じページ(または簡略版)のURLを、LINEで読者に配信
    4. PDFが必要な一部の人には、そのPDFをLINEで添付送信

この流れにすると、制作がWordPressに一本化され、印刷とスマホ配信の両方をほぼ同じ原稿から出せるようになります。wpbeginner+1

もし使っているWordPressテーマ名や、きよみん通信の1ページの例がわかれば、「このレイアウトならこう分けるべき」という具体的な設計案も出せます。

  1. https://www.wpbeginner.com/ja/plugins/how-to-add-a-printer-friendly-option-to-your-wordpress-posts/
  2. https://shop-pro.jp/yomyom-colorme/70398
  3. https://www.netshop7.com/blog2/wordpress-pdf/
  4. https://mypacecreator.net/blog/archives/2976
  5. https://yukiyuriweb.com/2021/01/20/change-the-output-content-and-design-when-printing-a-page-in-wordpress/
  6. https://www.nase.co.jp/?p=995
  7. https://aeonmobile.jp/column/smartphone-PDF/
  8. https://www.8seminar.com/awesome-screenshot-print/
  9. https://www.choge-blog.com/programming/pdflinesend/
  10. https://domani.shogakukan.co.jp/1093543
  11. https://reinc.jp/news/wordpress/5008/
  12. https://best3.net/wordpress%E3%81%A7%E3%83%97%E3%83%AC%E3%83%BC%E3%83%B3%E3%81%AApdf%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-13940.html
  13. https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13236860528
  14. https://www.reddit.com/r/Wordpress/comments/zl9124/is_there_a_way_to_convert_an_entire_wordpress/
  15. https://wppart.yuzumaru.co.jp/pdf%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E5%87%BA%E5%8A%9B%E3%81%97%E3%81%9F%E3%81%84%E3%81%AA%E3%82%89web%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%82pdf%E5%87%BA%E5%8A%9B%E3%81%A7%E3%81%8D%E3%82%8B/
  16. https://real-estate.leosense.co.jp/?p=510
  17. https://ja.wordpress.org/support/topic/%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96%E3%82%92%E8%A8%98%E9%8C%B2%E4%BF%9D%E5%AD%98%EF%BD%90%EF%BD%84%EF%BD%86%E7%89%88%E3%81%97%E3%81%9F%E3%81%84/
  18. https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14290235974
  19. https://wpforms.com/ja/how-to-print-your-wordpress-form-submissions-to-pdf/
  20. https://tsukuriba.co.jp/4550

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です