Cocoonアピールエリアの表示スタイルをいじる

ワードプレスのテーマCocoonについて
この記事は約6分で読めます。

最後と言いながら1点、標準のアピールエリアのプロクラムを修正せていただきました。

これは全くの好みというか、見た目だけの修正なので本来は控えるべき話ではありますが、トップページの部分なのでご容赦いただければ幸いです。

※なお本記事は3/13日に下記の見直しを実施しました。
・メッセージやボタンの配置を見直し
・styleタグをclassに変更
・既存のclassの修正を追加

スポンサーリンク

見た目だけの修正ですが…

見た目だけの修正であれば、スタイルシートを変更すべきところですが、直した際の影響度を理解していないところもあり、「appeal.php」のプログラムを修正しています。

修正する場合は、 Cocoon Master/tmpに置かれている上記プログラムを子テーマのtmpフォルダーに(初めての場合は作成し)同じ名前で保存します。

なおCocoon設定→アピールエリアの中にある設定項目は事前に登録する必要があります。

修正内容

「appeal.php」にはアピールエリア内にタイトル、メッセージ、ボタンを配置についてHTMLで記述されています。
直し方は人それぞれになるかと思いますが、修正の目的としてはトップページのアピールエリアに設定している画像の水玉が隠れないようにしたかっただけなので、下手な直し方をしています。

  • 5行目の<div>タグでappeal-contentを外し、代わりにmy-appealというclassを作り設定する
  • 18行目に</div>を追加、更に19行目に<div>タグを追加し、classにappeal-contentを設定
  • CSSのappeal-title、appeal-message、appeal-button、appeal-contentへの追記

なおこのプログラムの4行目に記述されている、divタグの「id=”appeal-in” class=”appeal-in wrap”」をいじるとCocoon設定画面がくずれてしまうので注意が必要です。

<?php //アピールエリアを表示するか
if (is_appeal_area_visible() && !is_amp()): ?>
<div id="appeal" class="appeal<?php echo get_additional_appeal_area_classes(); ?>">
  <div id="appeal-in" class="appeal-in wrap">
    <div class="my-appeal">
      <?php //タイトルが存在するか
      if (get_appeal_area_title()): ?>
      <div class="appeal-title">
        <?php echo get_appeal_area_title(); ?>
      </div>
      <?php endif ?>
      <?php //メッセージが存在するか
      if (get_appeal_area_message()): ?>
      <div class="appeal-message">
        <?php echo wpautop(get_appeal_area_message()); ?>
      </div>
      <?php endif ?>
    </div>
    <div class="appeal-content">
      <?php if (get_appeal_area_button_message() && get_appeal_area_button_url()): ?>
      <a href="<?php echo get_appeal_area_button_url(); ?>" class="appeal-button" target="<?php echo get_appeal_area_button_target(); ?>">
        <?php echo get_appeal_area_button_message(); ?>
      </a>
      <?php endif ?>
    </div>
  </div>
</div>
<?php endif ?>

CSSの既存classの修正内容
※style.cssはCocoon子テーマにあるファイルにコピーをして修正します。

.appeal-title {
  font-size: 1.5em;
  font-weight: bold;
}
.appeal-message {
  margin-bottom: 1em;
  padding-left: 1em
}
.appeal-content {
  width: 30%;
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.85);
  margin: auto;
  padding: 10px 0px;
  text-align: center;
  border-radius: 4px;
  display: block;
}
.appeal-button {
  color: #fff;
  text-decoration: none;
  background-color: #dd4b39;
  font-weight: bold;
  text-align: center;
  display: block;
  max-width: 90%;
  margin: auto;
  padding: 10px 0px;
  border-radius: 4px;
}
  • appeal-titleはfont-sizeを1.1から1.5emに増加
  • appeal-messageはpadding-leftを追加
  • appeal-contentはwidth: 30%を追加し、paddingを1emから10px 0pxに変更
  • appeal-buttonはmax-widthを80%から90%に変更し、paddingの左右を2emから0pxに変更

アピールエリアのメッセージにスタイルを追加設定する

Cocoon設定→アピールエリアタブにあるメッセージ欄はHTMLの入力ができるように設定されています。

そのため本サイトでは上記の修正と合わせて下記のようなclasの追加設定をしています。

.my-appeal {
  display: block;
  margin: auto;
}
.my-appeal-message {
  color: #044c81;
  background-color: rgba(255, 255, 255, 0.85);
  font-weight: bold;
}

backgroundの色は、右側のボタンの周りの背景色と同じに設定して見ました。

以上、ご報告申し上げます。

p.s.
なお本サイトでは更に3/3日から、「NEW!!」のgif画像を追加しました。入れた場所は21行目のaタグの前にimgタグを追記しましたが、上記コーディンクには反映していませんので、悪しからずご了承ください。

スポンサーリンク