コクーン(cocoon)でアピールエリアに検索フォームを簡単に挿入する方法！

コクーンでアピールエリアに検索フォームを挿入するには　どうすれば良いのでしょうか？

斎藤

こんな感じのカスタマイズなら簡単にできます。
ただ入れてどうする？という話ですがネタとして記事にしておきます。

外部リンク 404 Not Found

saito-info.com

サンプルサイトですがこのサイトのようにアピールエリア※グローバルメニューバーの下部に画像や動画とサイト内検索フォームを　コクーンのテーマで挿入する方法をこの記事で解説します。

殆どコピペですぐにデザインできるようにソースを用意していますので是非活用をしてください＾＾

サンプル即席

外部リンク 404 Not Found

saito-info.com

斎藤

ここのグローバルメニューの下の犬の画像のところがアピールブロックですが　ここに検索フォームを挿入しています。この程度のレイアウトなら殆どコピペで可能です。
是非チャレンジしてみてくださいね~

コクーン(cocoon)でアピールエリアに検索フォームを挿入する

まずはコクーンでアピールブロックを設定します。

コクーン設定⇒　アピールエリアを選択

アピール画面です。

アピールエリアに背景にしたい画像を選択します。
※画像1枚あれば　サンプルサイトのように簡単に動画のように動かす事が可能です。
※あとでまた紹介します。

殆ど操作せずに本文の部分にソースを加えます。

下記のソースを貼り付けますが、一度保存して反映した後は、自分専用に文章や文字色やサイズを変更したらテキストファイルか何かに保存するか、ブログの下書きにでもソースを保存しておく事を推薦します。

<code>&lt;div class="appeal-container">
  &lt;div class="appeal-content">
    &lt;p style="font-size: 28px; color: #0066cc; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">コクーンのブログを&lt;br>少しオシャレにカスタマイズ&lt;/p>
    &lt;p class="site-name" style="font-size: 30px;">
      &lt;a href="https://saito-info.com/cocoon/" style="color: #ff6600; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);">COCOON LAB&lt;/a>
    &lt;/p>
    &lt;div class="search-container">
      &lt;div class="micro-text" style="font-size: 15px;">
        &lt;span class="micro-content" style="
          color: #009900; 
          text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
          animation: blink 2s infinite;
          display: inline-block;
        ">＼サイト内を気になるキーワードで検索／&lt;/span>
      &lt;/div>
      &lt;form class="search-box" method="get" action="検索結果ページのURL">
        &lt;input type="text" placeholder="Search" name="s" class="search-input" style="color: #333;" aria-label="input">
        &lt;button type="submit" class="search-submit" style="color: #333;" aria-label="button">
          &lt;span class="fas fa-search" aria-hidden="true">&lt;/span>
        &lt;/button>
      &lt;/form>
    &lt;/div>
  &lt;/div>
&lt;/div>
&lt;style>
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
&lt;/style></code>

カスタマイズし易いと思います。

最初は編集せずに　そのままコピーして本文に入れてみて下さい。

捕捉メモ

この設定では、アニメーションは2秒間隔で繰り返されます。

テキストは完全に表示される状態（opacity: 1）から完全に消える状態（opacity: 0）まで変化し、再び完全に表示される状態に戻ります。

数値を変えると点滅イメージ速度など変更できます＾＾

3秒間隔バージョン

<code>&lt;div class="appeal-container">
  &lt;div class="appeal-content">
    &lt;p style="font-size: 28px; color: #0066cc; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">コクーンのブログを&lt;br>少しオシャレにカスタマイズ&lt;/p>
    &lt;p class="site-name" style="font-size: 30px;">
      &lt;a href="https://saito-info.com/cocoon/" style="color: #ff6600; text-shadow: 1px 1px 3px rgba(0,0,0,0.3);">COCOON LAB&lt;/a>
    &lt;/p>
    &lt;div class="search-container">
      &lt;div class="micro-text" style="font-size: 15px;">
        &lt;span class="micro-content" style="
          color: #009900; 
          text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
          animation: blink 3s infinite;
          display: inline-block;
        ">＼サイト内を気になるキーワードで検索／&lt;/span>
      &lt;/div>
      &lt;form class="search-box" method="get" action="検索結果ページのURL">
        &lt;input type="text" placeholder="Search" name="s" class="search-input" style="color: #333;" aria-label="input">
        &lt;button type="submit" class="search-submit" style="color: #333;" aria-label="button">
          &lt;span class="fas fa-search" aria-hidden="true">&lt;/span>
        &lt;/button>
      &lt;/form>
    &lt;/div>
  &lt;/div>
&lt;/div>
&lt;style>
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
&lt;/style></code>

HTML編集方法　文字サイズや色の変更

HTMLの編集は、

カラーと文字サイズと文面を変更する程度です。

白い文字の部分がテキストです。

「px」でサイズ、あと色に関しては　color:　とか書いてあります。

色のコードは、

外部リンク

WEB色見本原色大辞典 - HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

ここで好きな色のコードをコピペできます。

例えば…

<code>    &lt;p style="font-size: 28px; color: #0066cc; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">コクーンのブログを&lt;br>少しオシャレにカスタマイズ&lt;/p>
    &lt;p class="site-name" style="font-size: 30px;"></code>

コクーンのブログを 少しオシャレにカスタマイズ

 タグは段落を表します。
style 属性でインラインスタイルを適用しています。
font-size: 28px;：文字サイズを28ピクセルに設定。
color: #0066cc;：文字色を青色（#0066cc）に設定。
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);：文字の影を設定。
- 2px 2px 4px：影の水平方向オフセット、垂直方向オフセット、ぼかし半径。
- rgba(0,0,0,0.5)：影の色（黒色、不透明度50%）。
コクーンのブログを 少しオシャレにカスタマイズ：表示されるテキスト。
-   タグで改行を挿入。

 タグは段落を表します。
class="site-name"：クラス名「site-name」を指定。
style="font-size: 30px;"：文字サイズを30ピクセルに設定。

というソースなので、数字と色のカラー部分を好きなように変更すれば　好きな色やサイズに設定できます。

テキスト文面ももちろん自由です。

元のソースをメモ帳に保存しておけば失敗しても後でコピペで修正できますよ＾＾

とりあえずHTMLだけでは駄目なので編集はCSS挿入をしてからやりましょう。

CSSの編集を行う

続いては、スタイルシートですが　ソースを用意したのでそのまま使えるように用意しましたので　コピペで可能です。

まずワードプレスメニューから、外観　⇒カスタマイズ⇒追加CSS　から貼り付けます。

追加CSSをクリック

あとはこちらをコピーします。

<code>.appeal-content {
  text-align: center;
  color: #fff;
  width: 80%;
  max-width: 600px;
  padding: 20px;
  /* 背景色を完全に透明に */
  background-color: transparent;
}
</code>

スタイルシートを加えると　検索フォームと文字だけで背景が綺麗に消えます。