- 投稿日：2019-05-07T15:53:36+09:00
ClipkitでGoogle Tag Managerを利用して読了率を測定する
読了率とは？
読了率とは、記事を閲覧したユーザーがどれくらい記事を最後まで読んだかという割合のことです。どこを記事の読了地点とするかは、Google Tag Manager設定時に決めることができます（後述）。
1. Google Tag Managerを導入する
アカウントを作成後、Googleタグマネージャをインストールからそれぞれを貼り付けます。
PCとSPの「全体レイアウト」テンプレートにて、以下を
<head>...</head>内のなるべく上の方に貼り付けます。layout.html<!-- 以下はサンプルです。 --> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXX');</script> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-YYYY');</script> <!-- End Google Tag Manager -->PCとSPの「全体レイアウト」テンプレートにて、以下を開始タグ
<body>の直後に貼り付けます。layout.html<!-- 以下のそれぞれはサンプルです。 --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->2. Google Analyticsを導入する
Google Analyticsの導入方法はこちらを参照してください。
また、こちらでプレビューや非公開の記事をカウントせずGoogle Analyticsを設置することができます。
3. Google Tag Managerを設置する
Google Tag Managerにて、読了率を計測するための変数やトリガーを設定する必要があります。設定方法の詳細は、こちらを参照してください。
例として、以上のような「関連する記事」（関連記事一覧）が表示されたら読了とします。
A. 記事にページネーションがない場合の設置例
show.html{% assign items = article.items %} {% for item in items %} {{ item.render }} {% endfor %} {% assign articles = article.relevance_articles | limit: 5 %} {% if articles != empty %} <div class="list-group articles-lg"> <h2 class="completion-rate">関連する記事<small>こんな記事も人気です♪</small></h2> ⋮ </div> {% endif %}
completion-rateというclassが読了を測定するトリガーとなっています。
ユーザーのデバイスにトリガーとなっている箇所が表示されたら、読了と見なします。B. 記事にページネーションがある場合の設置例
show.html{% paginate article.items %} {% for item in paginate.collection %} {{ item.render }} {% endfor %} {% assign articles = article.relevance_articles | limit: 5 %} {% if articles != empty %} <div class="list-group articles-lg"> {% if current_page.last %} <h2 class="completion-rate">関連する記事<small>こんな記事も人気です♪</small></h2> {% else %} <h2>関連する記事<small>こんな記事も人気です♪</small></h2> {% endif %} ⋮ </div> {% endif %} {% endpaginate %}ページネーションタグ内で有効な
current_pageというメソッドを使用しているため、forループの内側に「関連する記事」を設置しています。current_page.lastで最後の記事ページを取得しています。読了率計測位置が少し変わりますが、以下のようにforループの直後（最後の記事アイテムの後）に空タグを設置するだけでも良いです。show.html{% paginate article.items %} {% for item in paginate.collection %} {{ item.render }} {% endfor %} {% if current_page.last %} <!-- 読了率計測用の空のpタグ --> <p class="completion-rate"></p> {% endif %} {% endpaginate %} {% assign articles = article.relevance_articles | limit: 5 %} {% if articles != empty %} <div class="list-group articles-lg"> <h2 class="completion-rate">関連する記事<small>こんな記事も人気です♪</small></h2> ⋮ </div> {% endif %}参考
- 投稿日：2019-05-07T12:50:25+09:00
Progateで「HTML & CSS 中級編」を終了して
Progateで「HTML & CSS 中級編」を終了
10連休の間に少しずつProgateでHTMLとCSSの学習を進めようやく中級編まで到達しました。
初級編と比べると、確かに少しレベルが上がったような気がします。
また、自分のスピードとしても慣れてきたのか少し生産性が上がった気がします。
ボタンの動きや立体感など初級編よりもワクワクする動きやおしゃれな見た目になっていき、とても楽しく学習できました。Progateでの注意点
Progateは前評判通りで初心者にオススメのサイトであると思います。
スライドが非常にわかりやすく、楽しく学んでいくことができます。
しかし、Progateで学習する上で注意しなければいけない点があると感じました。
それは、「振り返ると意外に覚えられていない」ということです。
Progateでは、解説が丁寧で、間違えてもヒントが与えられるなど、スラスラと進めていくことができます。
だがしかし、それゆえに作業のようになってしまい、主体的に吸収するという姿勢が必要なくなるのです。
だからこそ、一つ一つのポイントを吸収し、自分のものにしていくという姿勢を心がけながら取り組もうと思います。今後について
HTMLとCSSについて初級編・中級編で学習したことが身についているか確かめるため、道場コースで特訓してみようと思います。
- 投稿日：2019-05-07T11:54:13+09:00
paddingとmarginの覚え方
padとは 引用:goo辞書
1 （綿などを中に入れた）詰め物（解説的語義）
（衝撃・摩擦を軽減する）当て物，パッド，クッション，（衣料品の形を整える）パッド，（傷口などに当てる）パッド；生理用ナプキン
knee [elbow] pads
（スポーツ用）ひざ［ひじ］当て
1a スタンプ台，印肉（ink pad）；（研磨用の）パッド，（清掃・洗浄用の）スポンジ，シート；（ディスクブレーキの）摩擦パッド；《コンピュ》マウスパッド（mouse pad）；（馬の）枠のない革製の鞍（敷き）；((略式・やや古))ベッド；ねぐら，部屋，アパート
2 《動物》（動物の足裏の）肉球（解説的語義）
肉趾にくし；（肉球のある）足；〔通例～s〕（人間の）指の腹，指先の内側（◇指紋のある部分）；《昆虫》（足の）褥盤じょくばん，付着盤marginとは 引用:goo辞書
2 （ページの）余白，欄外；《郵便》マージン（◇無目打めうち切手の印面の周囲の部分）；耳紙みみがみ（selvage）（◇切手シート周囲の余白部分）
2a （時間・金銭などの）余裕，ゆとり；（誤りなどの）許容範囲
paddingの元は「パッド」でマウスパッドなど
中や間にいれる緩衝材のイメージ→内側
marginは「マージンを取る」の様に
余分なもののイメージ→外側
で覚えています。
- 投稿日：2019-05-07T02:48:13+09:00
【HTML CSS】
目次
- コーディングのコツ
- HTML
- CSS
- デフォルトに戻す
- floatと崩れ解除
コーディングのコツ
・HTMLは、左上に重力のある積み木である
・積み木の一つ一つは中身の大きさの変わる箱である
・入れ子構造である
・レイアウトは大きな箱から考えていくHTML
CSS
デフォルトに戻す
body, html { height: 100%; background-color: white; } h1, h2, h3, h4, h5, h6, p, body { line-height: 1.77; font-size: 18px; color: #4a4a4a; font-family: sans-serif; margin: 0; padding: 0; }ブロック要素のデフォルトの大きさ
横幅(width)・・・親要素の横幅と同じ
高さ(height)・・・子要素の高さの合計floatと崩れ解除
左にコンテンツの箱を作り、右にサイドバーのレイアウトの場合
html<div class="box"> <div class="left"></div> <div class="right"></div> </div>css.left_content{ width: 700px; float: left; } .right_content{ width: 140px; float: right; }float解除は、親要素=boxに対してclearfixをかけてあげることで崩れが修正される
classを追加してhtml<div class="box clearfix">cssに追記します
css.clearfix:after{ content: ""; clear: both; display: block; }
- 投稿日：2019-05-07T01:03:43+09:00
色選びを助けるマン(`･ω･´)
【はじめに】私的に役に立つ
起動時画面
①「Red」「Green」「Blue」の数値を設定をする！
②「RGB → HexcolorCodes」にチェックを入れる！
③「Create」を押下する！
④設定した色が「Hex color codes」に16進数カラーコードを各RGBに表示！
また、下のテキストボックスにコピーしやすいように表示！
⑤右の四角に色が表示される！
①「Hex color codes」の各RGBに数値を設定をする！
②「HexcolorCodes → RGB」にチェックを入れる！
③「Create」を押下する！
④設定した色が「RGB」に表示！
⑤右の四角に色が表示される！
①「Color Dialog」を押下する！
②色を選択する！
③設定した色が「RGB」「16進数カラーコード」に表示！
④右の四角に色が表示される！
【各コントロールのプロパティ】足りてるか不安…
Form：Pallet：Text(Pallet)
GroupBox：RGBGroupBox：Text(RGB)
GroupBox：HexcolorCodesGroupBox：Text(Hex color codes)
Label：redLabel：Text(Red)
Label：greenLabel：Text(Green)
Label：blueLabel：Text(Blue)
Label：hexadecimalLabel：Text(Hex color codes)
Label：sarpLabel：Text(#), Font(11.25pt)
NumericUpDown：redNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Red)
NumericUpDown：greenNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Green)
NumericUpDown：blueNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Blue)
RichTextBox：hexcolorCodesRichTextBox：ReadOnly(True), BackColor(White), ScrollBars(None), BorderStyle(FixedSingle)
CheckBox：RGBCheckBox：Text(RGB → HexcolorCodes)
CheckBox：hexcolorCodesCheckBox：Text(HexcolorCodes → RGB)
Button：createButton：Text(Create)
Button：dialogButton：Text(Color Dialog)
Panel：colorPanel：BorderStyle(FixedSingle)
ColorDialog：colorDialog：なし【コード】カキカキしまっせ
Form1.csusing System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp6 { public partial class Pallet : Form { public Pallet() { InitializeComponent(); } /// <summary> /// RGBまたは16進数カラーコードから値を取得し、色をパネルに表示 /// </summary> /// <param name="sender">イベント発行元</param> /// <param name="e">イベント情報</param> private void createButton_Click(object sender, EventArgs e) { // 「RGB → HexcolorCodes」にチェック時 if (RGBCheckBox.Checked == true && hexcolorCodesCheckBox.Checked == false) { // RGB の値を取得 int R = (int)redNumericUpDown.Value; int G = (int)greenNumericUpDown.Value; int B = (int)blueNumericUpDown.Value; //設定した色をパネルに表示 DrawingPanel(R, G, B); // 16進数カラーコードで表示 CreateHexadecimal(R, G, B); } // 「HexcolorCodes → RGB」にチェック時 else if (RGBCheckBox.Checked == false && hexcolorCodesCheckBox.Checked == true) { // 16進数カラーコードを取得し、16進数を10進数に変換 var R = Int32.Parse(redTextBox.Text, System.Globalization.NumberStyles.HexNumber); var G = Int32.Parse(greenTextBox.Text, System.Globalization.NumberStyles.HexNumber); var B = Int32.Parse(blueTextBox.Text, System.Globalization.NumberStyles.HexNumber); // 設定した色をパネルに表示 DrawingPanel(R, G, B); // RGB で表示 CreateRGB(R, G, B); } else { // チェックボックスの選択に不備があることをメッセージボックスで警告 MessageBox.Show(@"Please check either ""RGB → HexcolorCodes"" or ""HexcolorCodes → RGB"""); } } /// <summary> /// カラーダイアログから色を取得し、色をパネルに表示。または、RGB、16進数カラーコードに値を表示 /// </summary> /// <param name="sender">イベント発行元</param> /// <param name="e">イベント情報</param> private void dialogButton_Click(object sender, EventArgs e) { // カラーダイアログを表示 DialogResult dialogResult = colorDialog.ShowDialog(); // カラーダイアログからRGB の値を取得 int R = colorDialog.Color.R; int G = colorDialog.Color.G; int B = colorDialog.Color.B; // 設定した色をパネルに表示 DrawingPanel(R, G, B); // 16進数カラーコードで表示 CreateHexadecimal(R, G, B); // RGB で表示 CreateRGB(R, G, B); } /// <summary> /// 設定したRGB の色をパネルに表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void DrawingPanel(int R, int G, int B) { // パネルに設定された色を表示 colorPanel.BackColor = Color.FromArgb(R, G, B); // RGBを16進数に変換し、16進数カラーコードを「hexcolorCodesRichTextBox」に表示 hexcolorCodesRichTextBox.Text = "#" + $"{R:x2}" + $"{G:x2}" + $"{B:x2}"; // 「hexcolorCodesRichTextBox」に表示されたの文字を色分け hexcolorCodesRichTextBox.Select(1, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Red; hexcolorCodesRichTextBox.Select(3, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Green; hexcolorCodesRichTextBox.Select(5, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Blue; } /// <summary> /// RGB を表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void CreateRGB(int R, int G, int B) { // 設定されたRGBをRGBグループの各RGBに表示 redNumericUpDown.Value = R; greenNumericUpDown.Value = G; blueNumericUpDown.Value = B; } /// <summary> /// 16進数カラーコードを表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void CreateHexadecimal(int R, int G, int B) { // 設定されたRGBをHex color codesグループの各RGBに表示 redTextBox.Text = $"{R:x2}"; greenTextBox.Text = $"{G:x2}"; blueTextBox.Text = $"{B:x2}"; } } }もっと簡略的にできそうだけど、浮かばない (((;^ω^)))
【おわり】チャンチャン♪
最近やっとメソッドを理解したから使ってみた
使い方が合ってるかは、わからないが……
いろいろ指摘して欲しい ∑d(≧▽≦*)OK!!HTMLやCSSを使う時に色の試しをしたくて作ってみたが、地味に助かる(´▽｀)♪
これはこれで良いが「地味に助かる(´▽｀*)♪」じゃなく。ちゃんと助けてぇぇぇぇぇぇええええええええええええ配色に悩むことが多いからそこもフォローできるようにしたい！
色味が決まらないと心に花が咲かないというかーうんうんﾜｸo(ﾟｰﾟo)(oﾟｰﾟ)oﾜｸ
そこらへんも、ブチかましていけたら
続きとしてQiitaに書こうと思うこの頃の俺だぁ以上、「色選びを助けるマン(`･ω･´)」でした。
