「あわせて読みたい」のボックスタブを作ってみた。cocoonカスタマイズ

wpカスタマイズ
小雪
小雪

こんにちは。上賀茂ブロガーの小雪(@kamigamolife)です。

 

本日は、先日追加になったcocoonの新機能、ボックス(タブ)を使わせていただき「あわせて読みたい」のタブを作ってみた記録です。

ほんまシンプルな「あわせて読みたい」が出来ました。こんな感じです。私がcssに書き足したものです。

 

スポンサーリンク

cssに追加する記述

.bb-link::before {
content: “\f24a あわせて読みたい”;
}

 

↓コピペして使ってください↓
((Ctrl+C)/貼り付け(Ctrl+V)/切り取り)

.bb-link::before {
content: "\f24a あわせて読みたい";
}

この3行です。

この3行を追加するファイル

wp管理画面のサイドバーのある

「外観」→「css編集」→「追加css」です。

wp 追加css

htmlに書くタグ

私は、下のような赤色のタブの「あわせて読みたい」を使おうと思いました。
hitmlに書くタグはこちらです。
↓コピペして使ってください↓
((Ctrl+C)/貼り付け(Ctrl+V)/切り取り)
<div class="blank-box bb-tab bb-link bb-red"></div>

 

もちろん他の背景色も出来ます♪

<div class=”blank-box bb-tab bb-link bb-red“></div>

bb-redこの部分を書き換えるだけです。

 

↓コピペして使ってください↓
((Ctrl+C)/貼り付け(Ctrl+V)/切り取り)
<div class="blank-box bb-tab bb-link">灰色だよ。</div>
↓コピペして使ってください↓
((Ctrl+C)/貼り付け(Ctrl+V)/切り取り)
<div class="blank-box bb-tab bb-link bb-yellow">黃色だよ。</div>
↓コピペして使ってください↓
((Ctrl+C)/貼り付け(Ctrl+V)/切り取り)
<div class="blank-box bb-tab bb-link bb-red">赤色だよ。</div>
↓コピペして使ってください↓
((Ctrl+C)/貼り付け(Ctrl+V)/切り取り)
<div class="blank-box bb-tab bb-link bb-blue">青色だよ。</div>
こんな感じです。

wpプラクインのAddQuickTagインストールしてはる方は登録しておくと楽ですね😃

AddQuicktag
AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。
素人のカスタマイズです。この記事を参考にcss等に手を加えられ、wpが表示されなくなった😣となっても、責任は取りかねます。ご了承ください(˹ᆺ˺;)✿
注意↓コピペして使ってください↓((Ctrl+C)/貼り付け(Ctrl+V)/切り取り)
ちゃんとコピペできてるでしょうか?ちと、不安(˹ᆺ˺;)✿
もしできていないようだったら、別の方法をまた試してみますので、「できへんでぇ~」とコメントで教えてください(˹ᆺ˺;)✿

【追記】2018.10.09にcocoonにブログカードタイプラベル機能が追加されました。

この記事を書いた約3ヶ月後に、cocoonにブログカードタイプを識別するラベルを付けられる機能が追加されました。

CSSをいじらなくても簡単に「あわせて読みたい」というラベルを付加できるようになりました。

ブログカードタイプラベルを追加する方法

ほんまに簡単です。やってみましょう。

内部リンクしたい記事のURLを入力します。

そのURLをマウスで選択します。

そのまま、ビジュアルエディターの「スタイル」→「囲みブログカードラベル」→「あわせて読みたい」に進むだけです。

【追記】2018.10.09にcocoonにブログカードタイプラベル機能が追加されました。

「あわせて読みたい」の他にも

  • 関連記事
  • 参考記事
  • 人気記事
  • 詳細はこちら
  • チェック
  • ピックアップ
  • 公式サイト

などがあるので、活用してみてくださいね。

小雪
小雪

では、またね。see ya٩( ᐛ )و

コメント

error:Content is protected !!
タイトルとURLをコピーしました