WPカスタマイズ CSS HTML

ページ作成の流れ

デモページ：https://bearfruit-hatsumou.com/subpage

WordPress > 管理画面 > ページ作成 > 新規追加 > ページ属性で「サブページ」を選択。

「フリースペース」の部分

フリースペースを選択すると幅広く自由に作成できる項目が追加される。

フリースペースの背景 HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/qgyEJQ/'>フリースペース</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

次にフリースペース内で使える項目をまとめています。

大見出し(h2)

編集画面イメージ

テキストを入力すると大見出し(h2)が作れる。class=”subh2″が反映されるようにして頂きたいです。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/MLXdoq/'>MLXdoq</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

中見出し(h3)

編集画面イメージ

テキストを入力すると中見出し(h3)が作れる。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/ZwRNvV/'>h3</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

小見出し(h4)

編集画面イメージ

テキストを入力すると小見出し(h4)が作れる。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/xMzNWK/'>ｈ４</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

文章(自由記述)

編集画面イメージ

WordPressの編集画面にある「ビジュアル」「テキスト」を使えるようにしたい。

画像配置

編集画面イメージ

画像を何枚配置するか選べるようにして、それに合わせて下部に画像選択部分が表示
画像選択後にサムネイルを表示したい。
「リンクを貼る」は画像にリンクを設定できる。
「代替えテキスト」は画像にalt=””を付与。
「CSS」は画像にclass等が付与できる。
「その他」は画像タグ内に任意の設定ができるようにしたい。(例)オンクリック設定など。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/PVaMLZ/'>Q&A</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

画像(左)＋文章(右)

編集画面イメージ

「中見出し」はh3が生成される。未入力であれば出ないようにしたい。
「文章」はテキストが入力できるようにしたい。
「画像」は画像配置のものと同じように。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/OdEYwx/'>OdEYwx</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

文章(左)＋画像(右)

編集画面イメージ

「画像(左)＋文章(右)」の逆バージョン。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/aXKgGp/'>画像（右）＋文章（左）</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

箇条書き

編集画面イメージ

右下に入力欄が増やせるボタンを配置したい。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/ZwRdMQ/'>ZwRdMQ</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

番号付き箇条書き

編集画面イメージ

こちらも右下に入力欄が増やせるボタンを配置したい。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/NozZoQ/'>番号付き箇条書き</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

チェックリスト

編集画面イメージ

ここでの見出しは「.CheckBox-title」で生成されるものです。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/jdKjoE/'>チェックボックス</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

チャット風会話文

編集画面イメージ

右下に入力欄が増やせるボタンを配置したい。
左右どちらか未入力の場合、未入力の方は表示されないようにしたい。

HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/OdEKQP/'>チャット風会話文</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

Q&A

編集画面イメージ

右下の追加ボタンを押すと、Qの入力欄とAの入力欄が同時に１つずつ増える。

See the Pen <a href='https://codepen.io/kabuyui/pen/QYBLNq/'>Q&A</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

以上がフリースペースの項目です。

「メディア掲載実績」の部分

編集画面イメージ

メディア掲載実績の背景 HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/NoBPmd/'>メディア掲載実績背景</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

中身のHTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/BMPBQW/'>メディア掲載実績</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

「お客様の声」の部分

編集画面イメージ

お客様の声の背景 HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/gqjpgw/'>お客様の声背景</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

中身のHTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/NoBqEY/'>お客様の声</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

「施術内容」の部分

編集画面イメージ

施術内容の背景 HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/LqBNwN/'>施術内容背景</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

中身のHTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/wNEBzb/'>施術内容</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

「選ばれる理由」の部分

右下に入力欄が増やせるボタンを配置したい。

選ばれる理由の背景 HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/YBOPQO/'>選ばれる理由背景</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

中身のHTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/NoLPwP/'>選ばれる理由</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

「ステップ（流れ）」の部分

編集画面イメージ

右下のボタンを押すと入力欄が増える。

ステップ（流れ）の背景 HTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/RvYNqO/'>ステップ（流れ）背景</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

中身のHTML,CSS

See the Pen <a href='https://codepen.io/kabuyui/pen/pGOvme/'>pGOvme</a> by YUIMARU (<a href='https://codepen.io/kabuyui'>@kabuyui</a>) on <a href='https://codepen.io'>CodePen</a>.

「ページソース」の部分

下部に作成したページのソースを確認と直接編集できるようにしたい。
※Wordpress編集画面にあるビジュアル、テキスト、メディアを追加

「SEO」の部分

最下部に作成したページのSEOを設定できる入力欄を設置したい