メモ用。
色々配置ルール
以下を前提に、HTML+CSS制作→wordpressテーマへの実装を。
qiitaにも大変お世話になった。
https://qiita.com/kazukichi/items/5126a4fd259d374e99ae
まず前提として、さすがの高橋のりさん。
参考：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
固定ヘッダ
・fixedを包含ブロックに。【z-index】は、常に最前列に固定メニューを配置するため。
参考：【CSS】固定ヘッダーとか作った時に役立つ「z-index」指定して最前面に
・子ブロックで幅と、ブロック全体を画面に対して中央にそろえています。
・子ブロック内でのメニュー右寄せは、メニューのcssに記載。
div#header-fixed{
position: fixed;
z-index: 9999;
top: 0px;
left: 0px;
width: 100%;
height:70px;
}
div#header-bk{
width:93%;
margin: 30px auto;
height:70px;
padding:0;
}
画面に対して縦幅比率を揃える
参考：CSS のみで高さを可変にして要素の比率を維持するテクニック
超便利！！
背景画像のサイズ指定、上下左右配置
サイズはwidthに引っ張られてる感じ。heightを指定しない場合は、上にのってるブロックの高さに切り取られる。
この方法だと一点問題だったのが、heightを指定しなくてはいけないがゆえに、画面の幅を変えた時に高さを自由に変化させられないこと。そこで上の高さ可変テクを利用。
.billboardback { width:100% ; height:500px;
background-image:url(お好み.jpg) ;
background-repeat:no-repeat ;
background-position:top right ;
background-size:70% ;
}
flexboxによるリスト表示
参考：Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
まずはこれをコピペで、試しにflexboxを使ってみる。
参考：【Flexbox】幅・伸縮率を指定するflexboxのプロパティ
参考：css3のflexboxを使うとすごい簡単になるレイアウトを試してみた
flexboxを用いた、各種レイアウトの参考例に。
日本語対応！CSS Flexboxのチートシートを作ったので配布します
https://qiita.com/junara/items/dd9f34a4f2baccf58b89
（個人的まとめ）よく使うflexboxの設定
★flexboxで最下段が変になる問題。
→「flexbox 最下段 左寄せ」で色々出てくる。
floatとflexboxのハザマで揺れ動く…。
とはいえやはりflexboxの扱いやすさは光る。
flexのflexstartで幅を調節するか、後ろに疑似コンテナを作るか、どちらかという感じか。
http://blog.webcreativepark.net/2016/08/15-125202.html
https://keitahirai.net/archives/694
https://qiita.com/QUANON/items/e14949abab3711ca8646
Flexbox で全体を中央に配置しつつ最後の行を左揃えにする
ハンバーガーメニュー
参考：CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋
参考：ひたすらハンバーガーアイコンを作ったので9種のソースを公開します！
フェードイン表示
http://www.mirusika.com/wordpress/123.html
http://skill-stock.hokoweb.com/skill/31/
HTML、CSSチェック
http://www.htmllint.net/html-lint/htmllint.html
wordpressテーマへの変換
ループ回数制御
抜粋文制御
カスタム投稿タイプループ制御
https://hirashimatakumi.com/blog/18.html
wordpress側のもろもろカスタマイズ
カスタム投稿タイプ
https://techacademy.jp/magazine/2842
固定ページ用テンプレートの作成
→作りたいページ.phpをつくった上で固定ページからテンプレ選択することで、そのページを作成することが可能。
http://d.hatena.ne.jp/seiginohiiro/20120317/1331969046
固定ページの本文を取得するには
カスタム投稿タイプ別にレイアウトや記事ページに出す情報を分岐させたい
→single.php内にif分岐をつくり、別phpテンプレートをつくる。
http://notnil-creative.com/blog/archives/1288
wp_queryについて知る
カテゴリ一覧の作成
ループ表示におけるページごとの「前・次」生成
その他
前へ次へ問題。
http://nabokov.blog.jp/archives/722481.html
https://www.google.co.jp/amp/s/webnaut.jp/others/513.html/amp/
jqueryって何
はじめてのjquery…。
https://techacademy.jp/magazine/9444
今さら聞けない！jQueryとは【初心者向け】
wordpressでjqueryを使う時の推奨方法まとめ
jQueryのことがよくわからなかったので、ちょっと勉強…。
・jQueryとは、javascriptを簡単に記載できるようにしたライブラリ。要するに「javascriptでできることまとめ」。
・googleなどのCDNから配信されている。（色々なところから配信されているが、全て同じもの？）
それをHTML上で読み込んで使うのが普通。
・wordpress自体に既にjqueryが同梱されている。（CDNを使えば、常にバージョンアップできるメリット。）
そのため、functionにwp_headで適切にjqueryを読み込むように記載しておく。
ふわっと表示
http://kyasper.com/jquery-tips/
ページ内リンクのスムーススクロール
http://skill-stock.hokoweb.com/skill/31/
要素をふわっと表示
ページ全体をふわっと表示
https://daneden.github.io/animate.css/
参考：いろんなアニメーション
jquery参考
1/8追記・ハンバーガー、SVG
wordpress基礎から
https://thewppress.com/
ハンバーガーメニュー
https://www.seleqt.net/design/demystifyingthehamburgermenuexamples/
↓これでいきたい
http://git.blivesta.com/drawer/
or
SVGを使って波線をひく
http://www.webopixel.net/javascript/1024.html
1/10追記：z-indexとスタック文脈
https://app.codegrid.net/entry/z-index-1
1/25追記：target=”_blank”時のCSS指定
https://hacknote.jp/archives/2031/
tinyMCEを使った、オリジナルタグ挿入カスタマイズ。
https://nelog.jp/wordpress-tinymce-custom
http://hiro007.com/web/185
画像のトリミング
その他のads案
リストが表示されない件
見出しデザイン
オブジェクトフィット
レスポンシブ広告ユニットを横長指定する方法
順番！
