HTMLテンプレートを使って、自分のポートフォリオサイトを作る

6913 ワード
HTML 学習記録 デイトラ 備忘録 CSS HTML テキストリンク

デイトラWeb制作コース初級編DAY17〜19の学び

【この記事に書いてあること】


　【制作物】


参考サイト: 【初心者コーダー向け】現役Webエンジニアが教えるサーバー契約＋FTPでサイト公開までの全行程まとめ

　【学び】

＜画像ファイルは必ず圧縮する＞
画像ファイルはテキストよりも容量が大きいため、何もせず何枚も表示してしまうとサイト読み込みスピードが低下する
読み込みスピードが遅いサイトは離脱率も高くなるので、画像ファイルは必ず圧縮する！

＜最低限サイト公開前にチャックすべきポイント＞
　①　文字コードはUTF-8か　
　②　titleタグ入ってるか
　③　metaタグ設定したか（twitter cardsの設定も忘れずに！）
　④　hタグが階層構造になってるか（例：h1がサイト名、h2がセクションタイトル、h3が小見出し）
　⑤　imgタグにaltは入ってるか
　⑥　閉じタグは足りてるか
　⑦　水平スクロールしないか（画面横に不要な空白ができてないか）
　⑧　対応ブラウザで動作確認（今回はChromeでOK）

＜サーバー契約はエックスサーバー、FTPクライアントソフトはCyberduckがおすすめ＞
アドバイスや感想頂けると大変嬉しいです!　: ポートフォリオ

＜Twitterカードを設定する＞
SNSでシェアしたときのクリック率が全く違うため、必ず設定する
方法：

index.html
<meta name="twitter:card" content="カード種類" /> <!--「summary」か「summary_large_image」を入れる-->
<meta name="twitter:site" content="@ユーザー名" /> <!--Twitterアカウントのユーザー名を@に続けて入力-->
<meta property="og:url" content="記事のURL" /> 
<meta property="og:title" content="記事のタイトル" /> 
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--文字制限はないが超えた分は切り捨てられる-->
<meta property="og:image" content="画像のURL" /> <!--画像を一度アップロードしたあと、設定→WebURLを開くで取得する-->

↓

記述例：

index.html

  <!-- twitter card 設定 -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@FuRiC_twi" />
  <meta property="og:url" content="https://furic-portfolio.com/#home" />
  <meta property="og:title" content="Furic's Portfolio" />
  <meta property="og:description" content="Webクリエイターのふりっくと申します。ハイクオリティで売上に貢献するLP、Webサイトをリーズナブルな価格でご提供します。" />
  <meta property="og:image" content="https://furic-portfolio.com/img/main-img/twitter-card.png" />

反映後：

＊反映まで時間がかかることがある