HTMLとCSSを使用して自動(dòng)化されたソーシャルイメージを作成し、それらをEleventyブログに統(tǒng)合し、最終的にNetlifyプラットフォームに展開します。この記事では、複雑なコードライティングなしで高レベルのソーシャルイメージ自動(dòng)化を?qū)g現(xiàn)し、プロセス全體を段階的に導(dǎo)きます。

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

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

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

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

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

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

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

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

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

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

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

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

レベル0

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

レベル1

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

レベル2

次のレベルは、ブログやメディアのWebサイトの標(biāo)準(zhǔn)的な慣行です。各投稿には獨(dú)自の特徴的な畫像があり、互いに異なります。寫真はページのコンテンツを補(bǔ)足できるため、この練習(xí)はニュースWebサイトにとって完全に合理的です。ここでの潛在的な欠點(diǎn)は、公開されているすべての記事の畫像資料を見つけて作成する必要性です。

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

レベル3

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

このアプローチには明らかな前提條件があります：自動(dòng)化?？赡埭圣辚螗搐趣艘灰猡萎嬒瘠蜃鞒嗓工毪长趣喜豢赡埭扦埂￥长欷吮匾首芳幼鳂I(yè)について考えてください。重い持ち上げを行うのに役立つプログラムのソリューションが必要です。

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

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

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

現(xiàn)時(shí)點(diǎn)ではソーシャル寫真が役割を果たす必要があります。ブログをできるだけ目を引くことを望んでいます。しかし、それは私たちの唯一の目標(biāo)ではありません。このブログは、私たちの個(gè)人的なブランドを構(gòu)築する必要があります。私たちの友人、同僚、ファンが私たちのソーシャルポストを見るとき、私たちを思い出すことを願(yuàn)っています。繰り返し可能な、認(rèn)識可能で代表的なものが欲しいです。

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

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

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

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

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

當(dāng)社のウェブサイトはhttp：// localhost：8080で実行されています。

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

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

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

netlifyは當(dāng)社のサイトを展開します。

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

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

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

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

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

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

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

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

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

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

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

畫像自體を設(shè)計(jì)する時(shí)が來ました。Resoc resoc-templates/default/content.html.mustacheで設(shè)計(jì)できます。

<div>
  <main><h1>{{ タイトル }}</h1></main>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg" class="lazy" alt="RESOCで獨(dú)自の自動(dòng)ソーシャルイメージを作成します">
  <h2>フィリップ?バーナード</h2>
</div>

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

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

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

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

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

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

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

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

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

以上がRESOCで獨(dú)自の自動(dòng)ソーシャルイメージを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。