読者です 読者をやめる 読者になる 読者になる

わすれた.log

忘れては検索して、そしてまた忘れるその過ちを繰り返さない為に…

Googleの日本語入力を入れた

パソコンに入れた物

自分のパソコンに何を入れたか、わからなくなってしまうので、メモックス

・入れ方参考サイト
Mac - Google 日本語入力(IME)のインストール - PC設定のカルマ

コンポーネント思考のBEMとやらをメモ

CSS 用語

コンポーネント指向

commpone コンポーネント

直訳:コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語
物、ブロック
<header>,<footer>,<section>,<content>と同じ
大カテゴリー

コンポーネント指向とは部品ごとに分けて、動くCSSのこと。
Classを当てはめるだけで適用される、CSS

参考サイト
これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス

BEM

Block ブロック

コンポーネントと同じ意味、BEMではブロックという。

Element エレメント

Blockの子要素。複数ある時もある

Modifier

直訳:修飾語句
変形する物だけ使う。
例えば、新規の物はNEWとつけるとか。

参考サイト
BEM記法におけるElement/Modifierの付け方メモ - Qiita
http://qiita.com/usagi-f/items/b4e56e765384c49d5d04


これがわかっても、実際のコーディングでどうするのかが、お空の上です。

CSS3アニメとjQueryによるシンプルなスライドナビ

HTML CSS jQuery

See the Pen CSS3アニメとjQueryによるスライドナビ by yachiru (@yachiru) on CodePen.

なぜそうなるのかはよくわからない。

css3のtransitionで動きを指定、動きの終わりはjqueryに切り替える。

むーcss3でtransitionで動きを指定して、hoverで動きの終わりを指定したりするのも見たが、jQueryの切り替えでもOK
戻るときも自動でやってくれるなんて
いまいち理解できぬ。

MovableTypeのカスタムフィールドがない

Movable Type version 5.2.13のカスタムフィールドが無いのです。
本当にないです。非常におかしいです。
f:id:yachirulog:20161218211359p:plain

特にレンタルサーバなどで自動インストールサービスを行っている場合は
 要注意。自分でMTOSをダウンロードしてきてインストールしましょう。

引用元
Sys.の小路 システムのあれこれ カスタムフィールドが使えない:MovableType or MTOSのメニューにカスタムフィールドが出てこない初期インストールのテンプレート選択に原因 カスタムフィールドを使うとブログにどんどんブロックを追加できます。
http://sys.rutile.pw/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84/

身に覚えがある…サーバーはminimというレンタルサーバーでサーバー会社が提供するツールでMTをインストール。

すっごく親切にマニュアルがあるし、とても楽にインストールできました。
レンタルサーバー★ミニム MovableTypeオープンソース設置ガイド
https://www.minim.jp/MTOS.php

自分でインストールするのだるいし、失敗したら余計めんどくさいと思って避けていたら、別の罠にはまる
楽をしようとしたら結局大変だったというありがちな落ち。

「Movable Type 5実践テクニック」という本

MovableType

Movable Type 5実践テクニック
http://www.sbcr.jp/products/4797358834.html
をやっています。
サンプルがなんだか思い通りに動かないです。

chapter2でサンプルでエラー

自分はchapter2をアップロードしてウェブサイトのテーマを適用させようとしたら以下のエラーが出て、適用できませんでした。

テーマ警告

テーマの一部はウェブサイトに適用できません。1要素はスキップされます。
次の項目が適用できません: custom_fields (原因: 次の項目が見つかりません: commercial )

解決

サンプルフォルダの
/mt5bk2/themes/lifeblog_website/theme.yaml
の一部を変更したら適用はできました。
24行目

  commercial: 1.50s

コメントアウトしたら、警告は出ますが、適用はできました。

required_components: 
  actionstreams: 2.1
  # commercial: 1.50s

そのrequired_components: とは…

required_components
このテーマを利用するために、インストールされている必要があるプラグインを指定します。ハッシュ形式で、プラグインのComponent IDと、動作に必要なミニマムバージョンを指定します。プラグインとの依存関係が存在しない場合は省略可能です。

テーマの基本情報 : Movable Type ドキュメント
https://www.movabletype.jp/documentation/developer/theme/registry.html

プラグインということですかね、よくわからないですけど
とりあえずこれで適用はできました。
これで進めて先につまずくかはまだわからない。M

メモ

他の人も思い通りにいかないそうで
MovableType5実践テクニック - 初心者だけどPerlが大好き
http://d.hatena.ne.jp/trinity777/20110211/1297420494

css3のanimaがAndroidで動かない

デバック

Androidでのキーフレームアニメーション
一部が以下の内容でないと動かない

×動かない

div.sample {
animation-name: anime1;
animation-duration: 5s;
}

@keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

○動いた

div.sample {
animation-name: anime2;
animation-duration: 5s;
}

@keyframes anime2 {
from% {width: 50px; height: 50px; background-color: aqua;}
99.9%,to {width: 200px; height: 50px; background-color: blue;}
}

cssを書く注意点

CSS HTML

最近の注意されたことメモ

スマホなどでの画面の拡大率指定するかしないか把握する。
google的には拡大縮小できた方が良い。

・ブレイクポイントは3〜4個くらいにする。
・ブレイクポイントはsassの変数で管理する。

HTMLのクラス名をわかりやすくしたい

HTML マークアップ

他の人にもわかり、編集しやすい、クラス名について

×
index-images
インデックスページのイメージという意味で使いたかった。
だけどindex直訳して目次、サイトマップなら良いがインデックスページのとは意味が違う。

よく使う単語
head
body
foot
top
bottom
content
box
thum

位置関係の単語が多いなというイメージ
難しい、もっと研究が必要