fbpx
メルマガのぞき見!【限定情報】をGETする方法

Cocoonでボックスブロックにタイトル(見出し)を付ける方法3ステップ【Gutenberg・初心者向け】

にっきー

はい!にっきーです!

先日、にっきーのブログチームのコミュニティで「Cocoonでもボックス装飾の線上にタイトルを入れられないか」と質問をいただきました。

↓こちらが、達成したいボック装飾です。

確かに、タイトルが自分で変えられたら便利ですよね!

今回の記事では、Cocoonユーザーさんに向けて、タイトルを自由に変えられるボックス装飾(ボックスブロック)の作り方を説明していきます!

 

にっきー

下記の記事を参考にしています!
参考 【Cocoon】コピペで簡単!タイトル入力可のおしゃれなボックスを作る!ぽんひろ.com

ぽんひろさんのブログはとっても分かりやすいのですが、いかんせん「クラシックエディタ」向けなので、グーテンベルク(ブロックエディタ)だと操作方法が違ってしまいます。

初心者さんだとエディタが異なるだけで混乱してしまうと思うので、この記事ではCocoonユーザーであり、ブロックエディタを使っている人に向けてやり方を説明します!

MEMO
  • ブロックエディタ(グーテンベルク)の人向けてです
  • Cocoon(コクーン)ユーザー向けです
  • 初心者さん向けなので「そんなの知ってるゾ」ってことも話します

 

設定がきちんと完了すると、こんな感じのボックスが使えるようになります!

 

CSSにコードを貼り付ける

 

そもそもの考え方として、今回はブログのシステムの設定としてのコード(CSS)と、記事本文で使うコード(HTML)の2種類を使う必要があります。

そのため、使うための設定もCSSの設定HTMLの設定の2段階に分かれています。

にっきー

それぞれの設定はそんなに大変ではないのですが、「2つセットで設定することで稼働する」とイメージしておくことが大切です!!

 

ぽんひろさんのサイトのコードをコピーしてくる

 

まずはCSSをコピーします。

ぽんひろさんのサイトにあるボックス装飾の中から使いたいもの「コードを表示」を押して、「.box〜」となっているコードをコピーします。

にっきー

コードを表示させると、2つの枠が出てくるのですが、下側の方です!これは間違えないように。

にっきーが例で使っうものはオレンジの枠線のものなので、こちらに一応転記しておきます。

コード
.box3-yellow {
position: relative; /* 配置に関するもの(ここを基準に) */
max-width:600px; /* ボックスの横幅 */
margin: 2em auto; /* ボックスの外側余白(上下:2em 左右:auto) */
padding: 1.7em 2em; /* ボックスの内側余白(上下:1.7em 左右:2em) */
border: 2px solid #fdc44f; /* ボックスの線 (太さ 線の種類 線の色)*/
border-radius: 4px; /* ボックスの角丸 */
}
.box3-yellow .box-title {
position: absolute; /* 配置に関するもの(ここを動かす) */
top: -10px; /* 上から(-10px)移動*/
left: 30px; /* 左から(30px)移動 */
background: #fff; /* タイトル背景色 */
color: #fdc44f; /* タイトル文字色 */
padding: 0 10px;/* タイトルの余白 */
line-height: 1;/* タイトルの行の高さ */
font-size: 20px;/* タイトル文字の大きさ */
font-weight: bold;/* タイトル文字の太さ */
}
.box3-yellow p {
margin: 0; /* 文字の外側余白リセット*/
padding: 0; /* 文字の内側余白リセット*/
}

 

コピーが終わったら、自分のブログに貼り付けます。

 

ブログのCSSをカスタマイズする

 

「外観」→「カスタマイズ」で、カスタム画面を開きます。

 

一番下にある「追加CSS」をクリックします。

 

使っているスキンによっては、すでにいろいろとコードが書かれていると思います。

一番下に、コピーしてきたコードを貼り付けます。

にっきー

貼り終えたら「公開」を押してください!

これで、ブログで動かすための下準備が完了です!!

 

記事で使うための準備をする

 

下準備が終わったので、次は記事で使うための準備をしていきます。

MEMO
記事で使うための方法は大きく2つあります。

  1. 記事にHTMLコードとして貼り付けるパターン
    →一番シンプルな方法だけど、自分のPCのメモ帳などにコードをコピーしておく必要がある。毎回使いたいと思うたびに、どこかからコピーしてくる必要がある。
  2. ショートコードを登録して使うパターン
    →最初のショートコード設定が面倒だけど、一度登録すればどこかからコピーしてくる必要はない。

このように2つのやり方があるのですが、できるだけ長期的に楽をしてほしいので、今回は「2」のショートコードとして登録するやり方を説明していきます。

 

HTMLを何度も使えるように用意をする

 

まずはショートコードとしてHTMLコードを登録していきます。

「プラグイン」→「新規追加」を選びます。

 

検索窓に「AddQuicktag」(アドクイックタグ)と入力して、プラグインを検索します。

葉っぱのマークのプラグインを見つけたら、インストールしてください。

 

インストールが完了したら「有効化」します。

 

AddQuick tagをインストールしたら、「設定」をしていきます。

にっきー

有効化するとプラグイン一覧ページが開くと思うので、「設定」を押してください。

 

設定の画面が開いたら、一旦コードをコピーするために別のウィンドウを開きます

にっきー

AddQuicktagのページはそのまま開いておいてくださいね!

 

ぽんひろさんのサイトから、コードの上半身をコピーしてきます。

 

にっきー

にっきーが使ったオレンジ色の枠のものは、こちらにも一応、転載しておきます!

 

コード
<div class="box3-yellow">
<div class="box-title">ここにタイトルを入力します</div>
<p>ここにコンテンツを入力します。</p>
</div>

 

コピーできたら、自分のブログのAddQuicktagの設定(WordPressのページ)に戻ります。

コピーしてきたコードを、クイックタグとして設定していきます。

記入例はこんな感じです↓

  • ボタン名
    例:線ボックス(yellow)
  • マーク
    自分が識別しやすいものを選ぶ(何でもいい)
  • グループ名
    例:ボックス装飾
  • 開始タグ
    <div class=”box3-yellow”><div class=”box-title”>※左記のコードは説明用に全角にしています。コピーしないように!
  • 終了タグ
    ここにタイトルを入力します</div><p>ここにコンテンツを入力します。</p></div>※左記のコードは説明用に全角にしています。コピーしないように!

にっきー

コードの前半と後半は、今回のコードの場合は分けにくいので・・・にっきーは「ここにタイトルを入力します」から後半にしました!

よく分からないな、という人はすべてのコードを「開始タグ」に貼ってもOKです!!

なお、設定が完了したら必ず「変更を保存」を押してくださいね!

 

記事の中で実際に使う方法(動画)

 

ここまで設定が終わったら、実際に記事の中で使っていきます。

ざっくりいうと、「クラシック」ブロックを使う必要があります。

「クラシック」ブロックを追加したら、「Quicktags」から該当するショートコードを選び、タイトルや本文を編集してください!

にっきー

動画なので、わからないときは繰り返し再生したり、よく見たいところで一時停止したりしてくださいね

 

HTMLブロックを使う場合(楽だけどコピペが必要)

 

記事にHTMLコードとして貼り付けるのは、一番シンプルな方法で、事前の設定などは不要です。

しかし、自分のPCのメモ帳などにコードをコピーしておく必要がありますので、頻繁に使う場合はおすすめしません。

にっきー

1の、HTMLとして使うパターンを選ぶ人は、下記の動画を参考にして操作してください!

 

 

 

まとめ

 

今回は、「Cocoonでもタイトルつきのボックスを使いたい」という人に向けて、AddQuicktagを使ったやり方をご紹介しました。

ぽんひろさんのサイトは非常に分かりやすいのですが、クラシックエディタ用なのでちょっと操作方法が異なります。

Gutenberg(ブロックエディタ)を使っている人は、この記事のやり方で設定してみてくださいね!

MEMO
  • Cocoonでタイトルつきのボックスを使うには、CSSの設定が不可欠
  • HTMLを使うにはAddQuicktagを使うと便利
  • 難しそうに見えるけど、コピペをすると結構簡単に設定可能
  • プレビューを見ながら設定を確認してすすめていこう!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)