RESOCで独自の自動ソーシャルイメージを作成します

HTMLとCSSを使用して自動化されたソーシャルイメージを作成し、それらをEleventyブログに統合し、最終的にNetlifyプラットフォームに展開します。この記事では、複雑なコードライティングなしで高レベルのソーシャルイメージ自動化を実現し、プロセス全体を段階的に導きます。

最近、自動化されたソーシャルピクチャーズがホットトピックになり、Github、Jetpackなどが関連ツールを立ち上げました。 Ryan FillerやZach Leathermanなどの開発者もこの機能をWebサイトに実装していますが、多くのカスタムコードが必要です。最近では、いくつかの新しいツールを使用して、このプロセスを簡素化できます。

このチュートリアルでは、HTMLとCSSを使用してカスタムの自動化されたソーシャルイメージを作成し、構成を通じて110のブログに統合し、最終的に展開してNetlifyを展開するようにします。

最終結果を見るのが待ちきれない場合は、プロジェクトリンクにアクセスするか、プロジェクトコードを参照してください！

ソーシャル写真とは何ですか？

HTMLで部分的には、いくつかの開いたグラフメタデータを挿入します。

<meta content="ブルースカイ戦略" property="og:title">
<meta content="雲が少なく、青" property="og:description">
<meta content="/sky-with-clouds.jpg" property="og:image">

このページをFacebookで共有すると、私たちと友人が表示されます。

LinkedIn、Twitter、WhatsApp、Slack、Scord、Imessage…これらのWebサイトはすべて、ほぼ同じように動作します。視覚的な「カード」とのリンクを提供して、より空間的でコンテキスト情報を提供します。

Twitterには、独自のメタデータタグ（Twitterカード）がありますが、非常に似ています。 TwitterがTwitterカードを見つけることができない場合、それは開いたグラフに戻ります。

ページのタイトルと説明は不可欠ですが、上のスクリーンショットでは、クリック可能な領域のサイズは言うまでもなく、空やクラウドの写真に比べて非常に小さく見えます。これがソーシャル写真の力です。リンクが共有されると、これらの画像の影響を理解するのは簡単です。

レベル0からレベル3まで

すべてのソーシャル写真が等しいわけではありません。以下は公式の用語ではありませんが、これらのソーシャルイメージカードの影響レベルを考えてみましょう。

レベル0

最も基本的な社会的絵は、写真がないということです。リンクには多くのコンテンツがあふれる可能性があり、小さな視覚領域があり、視覚的な魅力がありません。

レベル1

古典的なテクノロジーは、サイト全体に統一されたソーシャル画像を作成することです。このソリューションは入出力比が良好であるように見えますが、写真がないよりも悪いと思うかもしれません。もちろん、私たちはある程度の注意を払うでしょうが、特に人々が同じウェブサイトから多くのリンクを見ている場合、反応は否定的かもしれません。繰り返しやすく、不要です。

レベル2

次のレベルは、ブログやメディアのWebサイトの標準的な慣行です。各投稿には独自の特徴的な画像があり、互いに異なります。写真はページのコンテンツを補足できるため、この練習はニュースWebサイトにとって完全に合理的です。ここでの潜在的な欠点は、公開されているすべての記事の画像資料を見つけて作成する必要性です。

これは怠lazにつながる可能性があります。私たちは皆、明らかに写真の写真である写真を見てきました。それは注目を集めるかもしれませんが、それはあなたが本当に望んでいる注意ではないかもしれません。

レベル3

最終レベル：各ページには、豊かで意味のあるソーシャル写真があります。それがCSS-Tricksが行うことです。チームのソーシャル写真はブランドのようです。彼らは同じレイアウトを共有します。彼らは、記事のタイトルと、通常のタイトルや説明には見えない著者の名前とプロフィール写真について言及しています。彼らは印象的で思い出深いです。

このアプローチには明らかな前提条件があります：自動化。可能なリンクごとに一意の画像を作成することは不可能です。これに必要な追加作業について考えてください。重い持ち上げを行うのに役立つプログラムのソリューションが必要です。

ユニークなソーシャルイメージを含むブログを作成しましょう

ユニークなソーシャル写真を作成する正当な理由（およびサンドボックス）を与えるために、簡単なブログを作成します。このブログに記事を書いて投稿するとき、私は簡単な2段階のプロセスに従います。

1. 記事の執筆と公開
2. 公開されたURLをソーシャルネットワークアカウントに投稿します

現時点ではソーシャル写真が役割を果たす必要があります。ブログをできるだけ目を引くことを望んでいます。しかし、それは私たちの唯一の目標ではありません。このブログは、私たちの個人的なブランドを構築する必要があります。私たちの友人、同僚、ファンが私たちのソーシャルポストを見るとき、私たちを思い出すことを願っています。繰り返し可能な、認識可能で代表的なものが欲しいです。

ブログを作成するには多くの作業が必要です。自動化されたソーシャルピクチャーズはクールですが、それに時間をかけすぎるのは賢明ではありません。 （クリスは2020年末に同じ結論に達しました）。したがって、より効率的になるために、私たちは110のウェブサイトを作成しています。 Eleventyは、シンプルな静的Webサイトジェネレーターです。ゼロから始める代わりに、既存のスタータープロジェクトを使用します。実際、最初の電子ベースブログを選択しましょう。

電子ベースブログGithubページにアクセスして、テンプレートとして使用してください。

リポジトリを作成し、リポジトリ名と説明を設定しましょう。私たちはそれを公開またはプライベートに設定することができます、それは問題ではありません。

次に、リポジトリをローカルにクローンし、パッケージをインストールしてサイトを実行します。

 gitクローン[リポジトリURL]
CD My-DemoBlog ###またはあなたが名前を付けた名前をnpmインストール
NPMランサーブ

当社のウェブサイトはhttp：// localhost：8080で実行されています。

それでは、展開しましょう。 Netlifyはこのタスクを非常に高速にします（そして無料！）。 （ああ、ネタバレ警告：ソーシャルイメージの自動化は、Netlify機能に依存しています。）

netlifyにアクセスして、アカウントをまだ持っていない場合はアカウントを作成しましょう。いずれにせよ、新しいサイトを作成します。

Netlifyがブログリポジトリにアクセスできるようにします。

netlifyは当社のサイトを展開します。

約1分後、ブログは展開されました。

1つの画像テンプレートがすべてを支配します

私たちのソーシャルイメージは、画像テンプレートに基づいています。このテンプレートを設計するには、すでに知っていて愛しているテクニックを使用します：HTMLとCSS。 HTMLは自動的に画像に変換しませんが、これを行うことができるツール、特に操り人形師とヘッドレスクロムがあります。

ただし、ソーシャルイメージスタックを自分で構築する代わりに、RESOCイメージテンプレート開発キットを使用してください。したがって、プロジェクトルートディレクトリから、端末で実行できます。

 npx itdk init resoc-templates/default -mタイトル - 説明

このコマンドは、RESOCテンプレート/デフォルトディレクトリに新しい画像テンプレートを作成します。また、新しいブラウザウィンドウで開きます。

このテンプレートをそのまま使用できますが、これにより、「影響力」範囲内でレベル2に到達することのみが可能になります。レベル3に到達し、CSS-Tricksテンプレートと一致するために必要なのは、次のとおりです。

• タイトルは右に位置付けられており、左側にいくつかのネガティブなスペースが残っています。
• 下部には、ブログ全体で使用する2つの色で構成される背景グラデーションを含むフッターがあります。
• 記事の著者の名前とプロフィール写真。

ブラウザに戻ると、テンプレートビューアーの「パラメーター」パネルに、テンプレートにはタイトルと説明の2つのパラメーターが必要であることがわかります。これは、端末で-m title-description実行したときに選択したテンプレートです。ただし、 resoc-templates/default/resoc.manifest.jsonを編集することにより、さらにパラメーターを追加できます。具体的には、2番目のパラメーターを削除して取得できます。

 {
  「部分的」：{
    「コンテンツ」：「./content.html.mustache」、
    「スタイル」：「./styles.css.mustache」
  }、
  「パラメーター」：[
    {
      「名前」：「タイトル」、
      「タイプ」：「テキスト」、
      「デモバリュー」：「絵は千の言葉の価値がある」
    }
  ]
}

ブラウザの視聴者は、変更を反映しています。

画像自体を設計する時が来ました。Resoc resoc-templates/default/content.html.mustacheで設計できます。

<div>
  <main><h1 id="タイトル">{{ タイトル }}</h1></main>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="RESOCで独自の自動ソーシャルイメージを作成します">
  <h2 id="フィリップ-バーナード">フィリップ・バーナード</h2>
</div>

これは単なるHTMLです。 OK、 {{ title }}を除く。これは、口ひげ、RESOCがパラメーター値をテンプレートに注入するテンプレートエンジンです。タイトルフィールドにテキストを入力して、どのように機能するかを確認することもできます。

プレビューを表示するときは、画像profil-pic.jpg欠落していることに注意してください。あなたの最高のプロフィール写真をresoc-templates/default/profil-pic.jpgにコピーします：

resoc-templates/default/styles.css.mustacheにCSSを書く時が来ました。この投稿のポイントは、テンプレートをスタイリングする方法ではありませんが、これは私が使用するスタイルです。

 @import url（ 'https://fonts.googleapis.com/css2?family=anton＆family=raleway&display=swap'）;

/ * ... CSSコード... */

ほとんどの寸法は、VWおよびVHユニットに依存して、テンプレートが提示する可能性のあるさまざまなコンテキストを予測するのに役立ちます。 Facebookの推奨事項、1200×630に従います。一方、Twitterカードのサイズは異なります。低解像度（600×315など）で画像をレンダリングできますが、1200×630を使用して、ピクセルを使用する必要があります。

視聴者はFacebookプレビューを1200×630でレンダリングし、画面に合わせてズームダウンします。プレビューがあなたの期待を満たしている場合、実際のオープングラフイメージも同様です。

これまでのところ、テンプレートは私たちのニーズを満たしています：

（以下のコンテンツは、元のテキスト構造に従って残りの部分を書き直し続けています。コンテンツの一貫性を維持しながら、言語式と段落構造を調整して、よりスムーズで自然にします。）

以上がRESOCで独自の自動ソーシャルイメージを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。