メモ用。

色々配置ルール

以下を前提に、HTML+CSS制作→wordpressテーマへの実装を。

WordPress オリジナルテーマの作り方 3.0+

qiitaにも大変お世話になった。
https://qiita.com/kazukichi/items/5126a4fd259d374e99ae

まず前提として、さすがの高橋のりさん。

CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ


参考:CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

固定ヘッダ

・fixedを包含ブロックに。【z-index】は、常に最前列に固定メニューを配置するため。

【CSS】固定ヘッダーとか作った時に役立つ「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 のみで高さを可変にして要素の比率を維持するテクニック


参考: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を使った2カラム・3カラム・マルチレイアウトの基本と応用
まずはこれをコピペで、試しにflexboxを使ってみる。

【Flexbox】幅・伸縮率を指定するflexboxのプロパティ


参考:【Flexbox】幅・伸縮率を指定するflexboxのプロパティ

css3のflexboxを使うとすごい簡単になるレイアウトを試してみた


参考:css3のflexboxを使うとすごい簡単になるレイアウトを試してみた
flexboxを用いた、各種レイアウトの参考例に。

日本語対応!CSS 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+


参考:CSSで実装するハンバーガーメニュークリック時のエフェクト 10+

ひたすらハンバーガーアイコンを作ったので9種のソースを公開します!


参考:ひたすらハンバーガーアイコンを作ったので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テーマへの変換

ループ回数制御

WordPressで最新記事をループで5件表示する方法

抜粋文制御

WordPressで記事本文を抜粋表示する文字数と文末の[…]を変更する方法

WordPressで抜粋の文字数や文末文字を変更する方法

カスタム投稿タイプループ制御
https://hirashimatakumi.com/blog/18.html

wordpress側のもろもろカスタマイズ

カスタム投稿タイプ
https://techacademy.jp/magazine/2842

固定ページ用テンプレートの作成

固定ページを作成する[page.php][カスタムテンプレート]


→作りたいページ.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…。

jQueryってなに?超初心者向け入門講座

https://techacademy.jp/magazine/9444
今さら聞けない!jQueryとは【初心者向け】

wordpressで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/
要素をふわっと表示

[JS]jQuery の fadeIn() でページ読込み時にフェードインで要素を表示する


ページ全体をふわっと表示

https://daneden.github.io/animate.css/
参考:いろんなアニメーション

WordPressが捗る!超オススメjQueryプラグインまとめ12選


jquery参考

 

 

 

1/8追記・ハンバーガー、SVG

wordpress基礎から

https://thewppress.com/

ハンバーガーメニュー

https://www.seleqt.net/design/demystifyingthehamburgermenuexamples/

↓これでいきたい

http://git.blivesta.com/drawer/

or

Hover Click Slideout Sidebar Navigation

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

画像のトリミング

CSSだけで画像トリミングできたよ

その他のads案

リストが表示されない件

list-styleが表示されないときに確認すること

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

見出しデザイン

オブジェクトフィット

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

レスポンシブ広告ユニットを横長指定する方法

Google Adsense のレスポンシブ広告ユニットで、横長の広告のみを表示する方法

アドセンスを最初の見出し(h2)の上と好きな所に表示させる方法!

アドセンスを最初の見出し(h2)の上と好きな所に表示させる方法!

順番!

スマホアドセンスについて。「アドセンス→TOC→アドセンス→h2見出し」と配置してみたい