Tips

Tipsは、ウェブサイトの執筆のマニュアルです。
Tipsの例文は全てコピー＆ペーストできますので、是非使ってみて下さい。

Multi Langage

日本語、フランス語、英語の2カ国語を下記のような構文を使って1ページに併記することで、言語切り替えを実現しています。

<div class="vv-lang fr">フランス語の記事</div>
<div class="vv-lang en">英語の記事</div>
<div class="vv-lang ja">日本語の記事</div>

Layout

レイアウトには、レスポンシブ・デザインに対応するために Bootsrtrap 使っています。
Bootstrap – introduction/

記事の横幅を「container – コンテナ」
コンテナの横の列を「row – 行」
縦の列を「col – カラム」と呼びます

カラムは、col-12 12分割を基本とし、 記事や写真のレイアウトに「何カラム」使うかを指定します。

• col-sm – Small Device スマートフォンなどの場合にレイアウトに使うカラム数
• col-md – Midium Device タブレットなどの場合にレイアウトに使うカラム数
• col-lg – Large Device PCなどの場合にレイアウトに使うカラム数

スマートフォンは12カラム使い、タブレットは6カラム使います。
PCのウィンドーの横幅を小さくすると、カラム2が下に下がります。

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
      カラム1
    </div>
    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
      カラム2
    </div>
  </div>
</div>

スマートフォンは12カラム使い、タブレットは4カラム使います。
PCのウィンドーの横幅を小さくすると、カラム2と3が下に下がります。

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
      カラム1
    </div>
    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
      カラム2
    </div>
    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
      カラム3
    </div>
  </div>
</div>

Kana 1

ドメーヌのタイトルの日本語表示

<h2>Andre Ostertag</h2>
<span class="domaine-name-jp">ドメーヌ・アンドレ・オステルタグ</span>

Andre Ostertag

ドメーヌ・アンドレ・オステルタグ

Kana 2

ルビータグを使用したフリガナの例

<ruby>葡萄<rt>ぶどう</rt></ruby>

葡萄ぶどう

新しい記事につけているマーク

<i class="fa-brands fa-pagelines"></i>

Images

画像サイズ

oeno-connexion.fr
ヘッダー　2000×1000 pixels 横長
生産者のポートレート 1080×1620 pixels 縦長
生産者のポートレート FacebookなどSNS用 1200×630 pixels 横長

clubpassionduvin.com
ヘッダー　2000×1250 pixels 横長
記事のお写真 長編が2000 pixels 縦横自由
記事のポートレート FacebookなどSNS用 1200×630 pixels 横長

画像ファイル名

画像のファイル名には、
記事の日時-キーワード-番号.jpg のように整理されることをお勧めします。
例) 20230915-Parcelles-1.jpg

Alt、Caption

Alt には簡単な画像の説明を入れて下さい。
Caption は Altに似ていますが、実際に画像の左下にキャプションが書かれます。

画像ソフト

無料画像編集ソフト ファイヤーアルパカ
https://firealpaca.com/

イメージサイズは、画像を拡大縮小します。
Edit > Image Size

キャンバスサイズは、画像をトリミングして切り取ります。
例では、真ん中を中心に、2000 x 1200 pixelsに切り取っています。
Edit > Canvas Size

カラーコレクションは、明るさ、コントラスト、色合いなどを調整できます。
Filter > Brightness/Contrast
Filter > Hue
Filter > Tone Curve など

Google My Map

Google My Map : Domaine – Oeno Connexion
Andre Ostertag の例
地図の緯度と経度を入力して、その地域が見通せるくらいのカメラ位置を設定します。

<div class="map">
<iframe src="https://www.google.com/maps/d/embed?mid=1oj3yepFQ1FgKo3C0hWCDd4enyU4qXlg&ehbc=2E312F&ll=48.36258%2C7.45246&z=8" width="640" height="480" style="border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

上の例文をコピー&ペーストしてから、緯度と経度を、マイマップから数値を得て、Z値を調整することをお勧めします。

Google My Map – スタンダード
https://www.google.com/maps/d/embed?mid=1oj3yepFQ1FgKo3C0hWCDd4enyU4qXlg&ehbc=2E312F

緯度と経度 48.36258, 7.45246 を追加
https://www.google.com/maps/d/embed?mid=1oj3yepFQ1FgKo3C0hWCDd4enyU4qXlg&ehbc=2E312F&ll=48.36258%2C7.45246

拡大率 Z=8 を追加
https://www.google.com/maps/d/embed?mid=1oj3yepFQ1FgKo3C0hWCDd4enyU4qXlg&ehbc=2E312F&ll=48.36258%2C7.45246&z=8

Google My Mapの編集

下記アドレスから、編集したいドメーヌを選択し、位置ポインターの上のウインドーの「鉛筆マーク」から情報を編集します。
https://www.google.com/maps/d/edit?xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

OGP – Open Graph Protocol

OGPは、ソーシャルメディアなどがウェブサイトの情報を共有する際に受け渡す、簡略した情報です。
代表的な情報は次のようなものがあります。
OGPの定義は、記事ページ下部の「Yoast – SEO」で定義して下さい。

• og:url
• og:title
• og:image
• og:description
• og:site_name

記事のOGPがFacebookでシェアされた例

SEO – Search Engine Optimization

Yoast SEO

Yoastは、SEOを管理しています。
記事の一番下の「Yoast – SEO」に必要な情報を書き入れて下さい。

Facebook と Twitter は、「Social」のタブに専用のフォームがあります。

FacebookとTwitter用の画像(og:image)のサイズは、1200 x 630px です。
記事内の「画像名-OGP」というような名前に統一されると良いと思います。

WordPress

新しい記事の書き方 Login と Dashboard

下がダッシュボード、新しい記事を執筆する流れです。

Post と Page

Title – 記事の名前

Body – 本文

Futured image

Excerpt – 本文の抜粋

<div class="vv-lang fr">フランス語の抜粋</div>
<div class="vv-lang en">英語の抜粋</div>
<div class="vv-lang ja">日本語の抜粋</div>

Permalink – パーマリンク

Tags – タグ

Categories – カテゴリー

Publish – 投稿

HTML

HTMLは、Hyper Text Markup Languageの略です。
ウェブページを執筆するための文法です。
< > で区切られたタグで、文字、文章、段落を囲むことで、文章構造を作ります。
一般文書を、HTML化することを、マークアップと呼びます。
ここでは、よく使われるマークアップ方法を紹介します。

Headline – 見出し

<h1>記事タイトル</h1>

<h2>見出し</h2>

<h3>小見出し</h3>

<h4>小見出しの小見出し</h4>

Paragraph – 段落

<p>文章</p>

Anchor – リンク

<a href="https://aafj.org">AAFJ</a>

<a href="リンク先のアドレス">リンクされるテキスト</a>

<a href="mailto:hanako@aafj.org">花子</a>

<a href="mailto:メールアドレス">花子</a>

Image – 画像

ul, ol – 箇条書き

<ul>
<li>みかん</li>
<li>りんご</li>
<li>バナナ</li>
</ul>

<ol>
<li>新幹線</li>
<li>自動車</li>
<li>トロッチネット</li>
</ol>

dd – 定義説明

<dl>
    <dt>TGV</dt>
    <dd>TGVは、フランス国鉄が運行する高速鉄道の車両です。</dd>
</dl>

Strong – 強調

美味しいワインは、<strong>ナチュラルワイン</strong>です。

Del – 削除

1/19（木）
1/27（金）
<del datetime="2023-01-21T23:37:34+00:00">2/02（木）</del>
2/10（金）

Blockquote – 引用

<blockquote>憲法第９条からの引用</blockquote>

Space – スペース

<div class="break"></div>

<div class="short-break"></div>

Br – 改行

文章</br>