特殊な動的部品

こちらはトグル系の部品が主になっています。やり方は簡単ですが、少し複雑になってくるので慎重に組んで行ってください。

os
特殊系部品 TUS-01(本文のコンテンツエリアへ直接配置する場合はこちらを)
内容1番目の表示内容
内容2番目の表示内容
内容3番目の表示内容
内容4番目の表示内容
「TUS-01」編集解説
この部品は本文コンテンツエリアに直接配置するときに使ってください。
タブメニューの数は制限ありませんが、多すぎるとかえって見にくくなるのでほどほどに。
同一ページ内に何個でも配置して使えます。

上部のタブ見出しの編集
記述を見ると
<!-- ●上部メニュータブここから● -->
<ul class="kp-tab">
<li>タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
</ul>
<!-- ●上部メニュータブここまで● -->
こんな記述が見つかると思います。ここが上部タブメニューです。 <li>タブ1</li>  これで1タブ見出しとなるので、コピペで増やしたり削除したりしてください。
自動でメニュの数の均等割になります。
内容の編集
<!-- □内容1番目ここから□ -->
<div class="kp-content">
内容1番目の表示内容
</div>
<!-- □内容1番目ここまで□ -->
こんな記述が並んでいると思います。  タブに対する内容の部分です。設定したタブメニューの数だけここを調整します。
上記のここからここまでの注釈で1タブ分の内容となります。あとは上から順番に1番目のメニュー 2番目のメニューという感じで対応していきます。
内容を組んでいく際に注意が必要なのは、注釈の内側の1行分をそれぞれ残して部品を組んでいくことです。
<!-- □内容1番目ここから□ -->
<div class="kp-content">
内容1番目の表示内容
</div>
<!-- □内容1番目ここまで□ -->
こんな感じでピンクの部分2行は残してその内側の黒い文字の部分を部品等を入れて組んでいきます。ピンクの2行を削除してしまうと正常には稼働しなくなります。
部品の色変えは
この部品は抜き型仕様なので、色は1撃で変えられます。
<div class="tab-wap" style="background-color:#4f6cbf;"> こんな記述が1行目に見つかると思います。
ピンクの部分が全体の色なので色のコードで差し替えてみてください。
特殊系部品 TUS-02(フレームやエリア部品など、何かの部品内に配置する場合はこちらを)
内容1番目の表示内容
内容2番目の表示内容
内容3番目の表示内容
「TUS-02」編集解説
この部品は何かの部品の中に配置するときに使ってください。
タブメニューの数は制限ありませんが、多すぎるとかえって見にくくなるのでほどほどに。
同一ページ内に何個でも配置して使えます。

上部のタブ見出しの編集
記述を見ると
<!-- ●上部メニュータブここから● -->
<ul class="kp-tab">
<li>タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
</ul>
<!-- ●上部メニュータブここまで● -->
こんな記述が見つかると思います。ここが上部タブメニューです。 <li>タブ1</li>  これで1タブ見出しとなるので、コピペで増やしたり削除したりしてください。
自動でメニュの数の均等割になります。
内容の編集
<!-- □内容1番目ここから□ -->
<div class="kp-content">
内容1番目の表示内容
</div>
<!-- □内容1番目ここまで□ -->
こんな記述が並んでいると思います。  タブに対する内容の部分です。設定したタブメニューの数だけここを調整します。
上記のここからここまでの注釈で1タブ分の内容となります。あとは上から順番に1番目のメニュー 2番目のメニューという感じで対応していきます。
内容を組んでいく際に注意が必要なのは、注釈の内側の1行分をそれぞれ残して部品を組んでいくことです。
<!-- □内容1番目ここから□ -->
<div class="kp-content">
内容1番目の表示内容
</div>
<!-- □内容1番目ここまで□ -->
こんな感じでピンクの部分2行は残してその内側の黒い文字の部分を部品等を入れて組んでいきます。ピンクの2行を削除してしまうと正常には稼働しなくなります。
部品の色変えは
この部品は抜き型仕様なので、色は1撃で変えられます。
<div class="tab-wap" style="background-color:#f44191;"> こんな記述が1行目に見つかると思います。
ピンクの部分が全体の色なので色のコードで差し替えてみてください。
特殊系部品 TUS-03
■ Open/Close クリックで開け閉じする段落
配置後に文字の打ち直しや文字の大きさ、色などをワードプレスのエディターで編集します。
部品記述の中に background-color: #2b4367;" こちらが見つかると思います。 #から始まる6桁の英数字が帯の背景色です。好きな色のコードに差し替えてください。(英数字6桁以外の記号等は削除しないように気をつけてください)
■ Open/Close クリックで開け閉じする段落
配置後に文字の打ち直しや文字の大きさ、色などをワードプレスのエディターで編集します。
部品記述の中に background-color: #2b4367;" こちらが見つかると思います。 #から始まる6桁の英数字が帯の背景色です。好きな色のコードに差し替えてください。(英数字6桁以外の記号等は削除しないように気をつけてください)ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
■ Open/Close クリックで開け閉じする段落
配置後に文字の打ち直しや文字の大きさ、色などをワードプレスのエディターで編集します。
部品記述の中に background-color: #2b4367;" こちらが見つかると思います。 #から始まる6桁の英数字が帯の背景色です。好きな色のコードに差し替えてください。(英数字6桁以外の記号等は削除しないように気をつけてください)
「TUS-03」編集解説
配置後は、<!-- □内容1番目ここから□ -->  <!-- □内容1番目ここまで□ -->
この注釈の間に部品を入れて行ってください。
os
特殊系部品 TUS-04

こちらはメニューバーです。ヘッダー画像のすぐ下に配置したいときは、ワードプレスのエディターの一番上にこの部品を配置してください。

os
「TUS-04」編集解説
エディターの一番上にこの部品を配置すると、ヘッダーの下に密着します。

色の編集
最初の行に
<div class="navi-bt" style="background-color: #ffc9dd;">OPEN MENU</div>
<div class="navi-wapper">
<nav class="global-navi" style="background-color: #ffc9dd;">
こんな記述が見つかると思います。
ピンクの部分2箇所が色です。マウスが乗ったときの色だと思ってください。(通常時の色は勝手に入れた色が薄くなります)
上の色はパソコンで開いたときはみせませんが、スマフォで開くとボタンとして表示されます。
メニューの数の編集
<li><a href="#">Home</a></li>
<li><a href="#">メニューリンク1</a></li>
<li><a href="#">メニューリンク2</a></li>
こんな記述があると思います。 この <li>  から  </li> までが1つのメニューリンクになります。 コピペで増やしたり削除して減らしたりしてみてください。
リンク先は
<li><a href="#">Home</a></li>
<li><a href="#">メニューリンク1</a></li>
このピンクの部分の#をリンク先のアドレスへ書き換えてみてください。ちなみにですが
<a href="#"> この部分を <a href="#" target="_blank"> こうすると 今のウインドウは残して別ウインドウでリンク先が開きます。
特殊系部品 TUS-05

スクロールすると後から遅れてついてくるリンクメニューです。
ここではサンプル表示はできないので、ワードプレスで試しにデフォルトで配置してみて動きやどんな部品かを試してみてください。
コードの配置場所はどこでも良いのですが、わかりやすいようにエディターの一番下(フッターリンクを入れた場合でもその下)がわかりやすいです。

os
「TUS-05」編集解説
部品はどこに配置してもかいません、位置の指定は特にないのでわかりやすいように下の方がよいかもです。

まずは追いかけてくる丸ボタンの編集から
<!-- □ボタンここから□ -->  <!-- □ボタンここまで□ -->  という記述があると思います。この注釈に挟まれた部分がボタン関連です。
style="background-color: #FFFFFF; こんな記述があると思います。このピンクの部分がボタンの地色です。今は白ですがページに合う色に変えてみてください。
文字はワードプレスで打ち替えて色などを編集していきます。
注意点としては、改行する場合は「強制改行部品」を必ず使ってください。
ワードプレスは通常の改行コードは勝手に整理してしまう場合があるので。
メニューの数の編集
<li><a href="#">Home</a></li>
<li><a href="#">メニューリンク1</a></li>
<li><a href="#">メニューリンク2</a></li>
こんな記述があると思います。 この <li>  から  </li> までが1つのメニューリンクになります。 コピペで増やしたり削除して減らしたりしてみてください。
リンク先は
<li><a href="#">Home</a></li>
<li><a href="#">メニューリンク1</a></li>
このピンクの部分の#をリンク先のアドレスへ書き換えてみてください。ちなみにですが
<a href="#"> この部分を <a href="#" target="_blank"> こうすると 今のウインドウは残して別ウインドウでリンク先が開きます。
リンクエリアの地色
2行目に <div id="abox-tab2" style="background-color: #FFFFF4;"> こんな記述があると思います。
ピンクの部分が地色です。入れたい色に差し替えてみてください。
特殊系部品 TUS-06

ページを開くと一度だけフェードインして表示されるボックスです。
どう使うかは自由なのでお任せいたします。ここではサンプル表示はできないので、ワードプレスで試しにデフォルトで配置してみて動きやどんな部品かを試してみてください。
コードの配置場所はどこでも良いのですが、わかりやすいようにエディターの一番下(フッターリンクを入れた場合でもその下)がわかりやすいです。

os
「TUS-06」編集解説
部品はどこに配置してもかいません、位置の指定は特にないのでわかりやすいように下の方がよいかもです。

ボックスの編集
記述の最初の方に
<div id="ff-box" style="width: 400px;top: 100px;left: 100px;background-color: #ffecf3;"> が見つかると思います。
ピンクの4箇所が編集対象です。
width: 400px  この部分は、ボックスの横の長さです。(縦は作った内容の長さそのまま)
top: 100px;left: 100px この部分は、出現位置です。画面の上から100 左から100 の地点にボックスの左上の角がきます。
background-color: #ffecf3 この部分はボックスのコンテンツ部分の地色です。
<!-- □内容はここまで□ -->
</div>
<div id="ff-box-close" style="background-color: #ed1567;">
この内容はここまでのすぐ下に上記の記述が見つかると思います。ここは、一番下の閉じるボタンの帯の色です。
リンクエリアの地色
2行目に <div id="abox-tab2" style="background-color: #FFFFF4;"> こんな記述があると思います。
ピンクの部分が地色です。入れたい色に差し替えてみてください。

後はどんな内容を作って入れるかです、
写真で作ってしまい、「単独写真配置部品」を使い写真を配置するとか、他の部品を組み合わせて何か作ってみるなど自由です。
os