shortcutのこと

html

ファビコンを設定するときに、 <link rel="shortcut icon" href="/favicon.ico">

って書いてることあると思いますが、 shortcut はIE8以下に対応するために書いていた書き方であり、 いまでは使っちゃだめらしい。

以下、のMDNによると

「icon より以前はリンクタイプ shortcut がよく使用されていましたが、
これは非準拠で無視されますので Web 作者は今後使用してはいけません。」

だそうです。

developer.mozilla.org

OGP

用語集

OGP とは

Open Graph protocol

Open Graph protocolとは

サイトの記事やページなどがSNSでシェアされるときに、タイトルやサムネイル画像等を意図した通りに表示させる仕組み。

設定の仕方

内にmetaタグとして埋め込む。

例：

<head>
<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:url" content="ページのURL" />
</head>

注意点

ファイルパスはすべて絶対パスで書く！

typeの設定

  • サイトトップページなら
    • content="website"
  • サイトトップページ以外なら
    • content="article"

imageの設定

横長の画像は1200px×630px 正方形の画像は600px×600px（以上）

※facebookの場合はシュミレーターでも使用して表示を確認 ↓ ogimage.tsmallfield.com

参考： https://ferret-plus.com/610

twitterとfacebookの話は割愛

バンドラー

用語集

ひとまとめにするツール 例：webpack

モジュールバンドラー

JavaScriptの依存関係を解決し、それらをインクルードしたひとつのファイルにまとめてくれます。

参考サイト：

http://blog.mach3.jp/2016/10/01/module-bundler.html

タスクランナー

用語集

タスクランナー

ウェブ制作における様々な処理を「タスク」という単位で扱い、このタスクを自動化するツールのことを「タスクランナー」と呼びます。

これ、タスクランナーです

gulp grunt

例えばこれがタスク

  • 画像、jsの圧縮
  • sassからcssへの変換

参考サイト：

https://ics.media/entry/3290

each_with_indexで番号を取る

front matter ruby 
- current_page.data.test_list.each_with_index do |test, index|

.number= index + 1
.test-box= test

 

説明

  • front matterでtest_listに数値をセットして、 .test-box に入れる

  • _with_index をつけると0,1,2,3,4,5,,,という数字をとれる

  • indexは0から始まるので +1 をつけて .number に入れる

 

すると、test_listにある数値の分だけindexも繰り返して表示できる

 

 

 

 

each_with_index (Enumerable) - Rubyリファレンス