【おしらせ】RSSフィード配信を停止しました

ConoHaの美雲このは画像アイコンを使ってCocoonのボックスメニューを徹底カスタマイズしてみる

KUSANAGI for ConoHa
この記事は約14分で読めます。

WordPressテーマ「Cocoon」にはボックスメニューというウィジェット機能があります。
サイトの回遊性を上げるのに大きな効果がありそうなので、当サイトでも設置することにしました。
さらに、それをアイキャッチの通り「このはモード」にしてみたという話です。
CocoonはConoHa公認のテーマでもありますし、双方の宣伝にちょうどいいでしょう。

もちろんボックスメニューで(このは以外の)画像をアイコンする場合のカスタマイズ説明としてもお役立ていただけます。
最後にはCocoon以外でボックスメニューを設置する方法にも簡単に触れています。

※「美雲このは」はConoHaの応援団長。アイキャッチ・記事中の画像につき (C)GMO Internet, Inc. 再利用禁止

スポンサーリンク
この記事を読む方へのオススメ

このはモードとは?

「このはモード」の由来はConoHa公式ページ
右上のトグルのON/OFFで通常モードとこのはモードに切り替えられるんです。

通常モード。

このはモード。

トップページだけではありませんので、色々押して試してみてください。

スポンサーリンク

Cocoonのボックスメニューについて

ボックスメニュー(ボックスナビ)とは?

質問者の写真

言葉で説明するより見てもらった方が早い!

ということで、まずは画像を御覧ください。

Cocoonのボックスメニュー基本形

各項目をアイコンで強調した直観的なメニュー(ナビ)です。

画像の形が基本形で、PC用画面のサイドバーに設置することが多いでしょう。
カテゴリーリストを単に置くよりはわかりやすく、回遊性の向上を期待できるのがメリットです。

解答者の写真
パソコンから御覧になっているなら、本サイトのサイドバー上部側に設定しています
よろしければ実際に操作してみてください

また、応用すれば、色々な使い方ができます。
一例としてプロフィールアイコンに使った画像を載せておきます。

ボックスメニューが効果を最大に発揮すると思う場面

あくまで個人的には、ですが。

サブカテゴリの存在を訪問者に強調したいときだね

どういうことかと言いますと。

メインのメニューバーでサブカテゴリを表示するとアドセンスの規約に抵触するおそれがあります
Cocoon設定画面の「広告」タブでも次の通り注意を促しています。

これを回避するため、サイドバーのボックスメニューで代用してサブカテゴリを表示します。

私が、このはモードなボックスメニューを作った理由

当サイトの場合、WordPress関係のみサブカテゴリでわけています。
このサブカテゴリを目立たせる必要があったため、前項の理由からボックスメニューを導入しました。

そして当サイトのWordPress系におけるメインコンテンツは「KUSANAGI for ConoHa」。
ボックスメニューは画像でもFontAwesomeでもいける。
だったらいっそ「このはモード」にして、さらに目立たせようと目論んだわけです。

スポンサーリンク

このはモードボックスメニュー作成手順1 アイコンを作る

このはの公式画像を使える条件

キャラクター使用のガイドライン

ConoHa(美雲このはオフィシャルサイト)では、無料でこのはちゃんの画像を配布してくれています。

ただし、利用にあたっては条件があります。

まずはガイドラインを全て引用します。
全て掲載しないと誤解を招いてはまずいので。

1. 本キャラクター
本ガイドラインにいう「本キャラクター」とは、ConoHaの公式キャラクターとして当社が名称を付与した「美雲このは」の、その他容姿(デザイン)、性格等によって特徴づけられた抽象的存在、及び当該存在を表現するためのイラスト、映像等の当社の著作物をいいます。従って、「本キャラクター」には、当社のウェブサイト、カタログ、ポスターなどの販売促進物で使用されている「美雲このは」に関する一切の画像、イラスト、映像、音声、キャラクター名称等を含みます。

2. 使用許諾
当社は、以下の(1)の場合に限り、一般個人の方、または同人サークルが、本キャラクターをそのまま、又は本キャラクターの二次創作物を作成した上で、複製、上演、上映、公衆送信、展示その他頒布する非独占、譲渡不可、再許諾不可の権利を許諾します。

(1) 以下に列挙する行為において、非営利目的かつ無償の場合。

本キャラクターを使用した自作絵の公開
フィギュア・ぬいぐるみなどの立体物の展示、頒布
ウェブサイト、ブログ、SNSでの本キャラクター及び本サイト(http://www.conoha.jp/)の紹介
同人誌その他の出版物・同人ゲームの配布・コスプレ活動
(2) 本キャラクターの使用に関する注意事項

当社が本サイト等で公開する本キャラクターの画像をそのまま、または大きさを変える等の若干の加工をした上で使用される場合は、「(C)GMO Internet, Inc.」の表示と、再使用の禁止を明記ください。
本キャラクターの二次創作物を使用等される場合は、当該二次的創作物が、本キャラクターを題材にしている旨の表示を行うよう努めてください。
3. 別途使用許諾が必要な場合
上記2.使用許諾(1)に列挙する場合以外は、別途当社の使用許諾が必要となります。 必ず事前に弊社(連絡先は末尾)までお問い合わせ下さい。 特に以下の各号の場合には、特に当社と個別に契約書の締結をお願いすることがありますので予めご了承ください。

(1) 本キャラクターを営利目的(※)で使用する場合
※ここで言う「営利目的」とは、本キャラクターを使用した、イラスト、漫画、立体物、映像、ソフトウェア等などにおいて第三者から対価を取得すること、又は第三者から対価を取得することを目的とすることを意味しますが、対価取得目的の有無を問わず、販売促進など何らかの形で本キャラクターの使用者が利益を得る場合を含みます。又はその他の団体等(ただし同人サークルを除きます)が本キャラクター、並びに本キャラクターの二次創作物を使用する場合。

4. 使用禁止
(1) 2.使用許諾(1)の規定にかかわらず、本キャラクターを以下の態様で使用することを禁止します。

本キャラクター及び本キャラクターの二次創作物の著作者の社会的評価を損なうような使用
他者の権利を侵害する、または侵害のおそれがある使用
公序良俗に反する態様、その他本キャラクターのイメージを損なうと当社が判断する態様での使用
(2) 当社は、当社の判断により、いつでも、本キャラクター及び本キャラクターの二次創作物の使用の差し止め、許諾内容の変更、使用許諾の停止、その他当社が必要と判断する措置を行うことができるものとします。

5. 使用許諾の終了
本キャラクターの利用者が、本ガイドラインに違反した場合は、本キャラクターに関する当社の利用者に対する使用許諾は自動的に終了するものとします。

6. 本ガイドラインの変更
本ガイドラインの変更は、いつでも、当社ウェブサイト上などで変更の事実と変更箇所を告知し、本ガイドラインの内容を変更できるものとします。 本ガイドラインの変更は、変更後の本ガイドラインが当社ウェブサイトに掲載された時点で有効になるものとし、本ガイドラインの変更後に本キャラクターを使用した場合は、変更後の本ガイドラインに同意したものとみなされるものとします。

7. その他
(1) 本キャラクターの使用に際しては、本ガイドラインのほか、著作権法その他の適用法令を遵守してください。
(2) 当社は、本キャラクターに関し、特定の使用目的への適合性、第三者の権利の非侵害、その他一切の保証をいたしません。
(3) 当社は、本キャラクター及びその二次創作物の使用により使用者に発生する損害、損失、費用、負担等(以下「損害等」といいます)について一切責任を負わないものとします。
(4) 使用者が、本キャラクター及びその二次創作物の使用により当社に損害等を与えた場合は、その損害等の一切を直ちに補償するものとします。
■本キャラクター使用に関するお問い合わせ

info@conoha.jp

引用:美雲このはオフィシャルサイト 二次創作「キャラクター使用のガイドライン

ConoHaの紹介・宣伝目的という条件をクリアする

ポイントはこの箇所です。

(1) 以下に列挙する行為において、非営利目的かつ無償の場合。

(略)

ウェブサイト、ブログ、SNSでの本キャラクター及び本サイト(http://www.conoha.jp/)の紹介

(略)

ただ使うのではだめ。
ConoHaの宣伝と絡めてあげる必要があります。

解答者の写真
著者の個人的な見解ですが、次の施策によって条件を満たせると思います
  1. ボックスナビの前か後にConoHa入会勧誘のアフィリエイトを置く。
  2. ボックスナビの下に「ConoHa公式サイト」か「美雲このはオフィシャルサイト」へのリンクを貼る。可能ならボタンに「ConoHa応援団長 美雲このは」の説明を入れておく。

1でも2でもいいと思います。
私は1も2も両方やっています。

どちらかだけなら2の方が直接的な分だけ確実でしょう。
「このキャラ誰?」と思った人がリンク踏んでくれるかもしれませんから。
まさに画像が宣伝そのものです。

著作権・再使用禁止の表記

この点にも注意です。

当社が本サイト等で公開する本キャラクターの画像をそのまま、または大きさを変える等の若干の加工をした上で使用される場合は、「(C)GMO Internet, Inc.」の表示と、再使用の禁止を明記ください。

書き方の例としては、ボックスナビの見本を御参照ください。

加工可能な範囲

上記引用にて「そのまま、または大きさを変える等の若干の加工」とわざわざ書いているのは「それ以外の加工は基本アウト」と解釈するのが自然です。
著作権法の観点からも、画像の一部をトリミングして使うのはアウトと考えた方がいいです。

このはの画像をダウンロードする

こちらのページから必要な画像をダウンロードします。
トリミングをしないという前提ならデフォルメタイプの画像がアイコンにしやすいと思います。

二次創作 | 美雲このはオフィシャルサイト
このはの情報がい~っぱい!ぜひチェックしてね♪

ダウンロードしたい画像をホバー。

「PNG画像 ダウンロード」をクリックすると、新しいタブで画像が開きます。
右クリック→「名前をつけて保存」で保存します。
名前は「conoha-icon01」とでもしておけばいいでしょう。
必要な枚数分ダウンロードしたら、次の作業に移ります。

このはの画像をアイコン用に加工する

ダウンロードした画像は縦長ですので、アイコンに適するよう正方形に加工します。
ソフトは透過PNGさえ扱えればなんでもいいです。
よくわからないという方には以下で説明します。

ここではブラウザ上で画像を編集できるサイト「PXLIR」を利用します。

ブラウザ画像編集ソフト - Pixlr.comでグラフィックデザイン
無料とプレミアム版を持つオンライン写真編集ソフトです!エフェクト、フィルター、オーバーレイなどシンプルなものから細かいツールまで取り揃えています。PSD (Photoshop)、PXD、Jpeg、PNG (透過画像)、webP、SVGなどほとんどの主要画像フォーマットに対応しています。あなたにピッタリなPixlr 画像...

開いた画面。
下の「PIXLR X」(QUICK AND EASYと書いてる方)のボタンをクリックします。

ホーム。
下に表示されているクッキーポリシーの「同意する」をクリックして、編集したい画像をドラッグ&ドロップします。

ウェブを押します。

編集画面。
「レイアウト&テンプレート」を押します。

「キャンパスリサイズ」を押します。

正方形になるようにサイズを調整します。
幅と高さを同じ数字にしてください。
縦型の画像なので、透過部分だけが横方向に広がります。

こんな感じになります。
画像では見切れてしまっていますが、右下の「保存」を押します。

幅と高さを設定してダウンロードします。
サイドバーの設定がデフォルトなら60×60。
CocoonでRetina対応オプションをONにしているなら120×120です。

この作業を枚数分繰り返します。

解答者の写真
終わったらメディアライブラリに画像をアップロードしてください
スポンサーリンク

このはモードボックスメニュー作成手順2 メニューを作る

次はボックスメニュー用のメニューを作ります。
サイドバー用なら項目数は偶数の方がいいでしょう。
(列数のカスタマイズはできます)

WordPress管理画面に戻り、左サイドバーから「外観」→「メニュー」を開いて下さい。

「新しいメニューを作成しましょう」をクリックします。

メニュー名を入れて「メニューを保存」を押します。
ここでは「見本メニュー」とします。

左側のボックスから、メニューに表示したい項目を選びます。
ここでは例としてカテゴリーから「KUSANAGI for ConoHa」を選択します。
チェックを入れて「追加」を押すと、右側に項目が追加されます。

項目を開きます。
必要な事項を埋めます。

必須なのは「タイトル属性」への画像URL入力です。

メディアライブラリのアイコン画像を開いてください。
「URLをクリップボードにコピー」を押して、メニュー作成画面に戻ってペーストします。

ナビゲーションラベルはデフォルトで入力されています。
必要に応じて変更してください。

「リンクを新しいタブで開く」は必要に応じて。
ただしfunctions.phpを修正しないと、チェックしても新しいタブで開きません。
次のコードを子テーマのfunctions.phpに貼りつけてください。

//ボックスメニューのリンクを外部リンクだけ「新しいタブ」で開く
add_filter('box_menu_link_target', function ($target, $url){
if (!includes_home_url($url)) {
$target = '_blank';
}
return $target;
}, 10, 2);
ボックスメニューで外部リンクの場合は「新しいタブ」で開くカスタマイズ方法
ボックスメニューのリンクの開き方を変更するカスタマイズ方法。

説明については、入れた場合の画像を載せておきます。
きっとこれでわかるでしょう。

全項目入力が終わったら「メニューを保存」を押します。

スポンサーリンク

このはモードボックスメニュー作成手順3 ウィジェットを設置する

次はウィジェットの設置です。
左サイドバーの「外観」→「ウィジェット」を開きます。
「[C]ボックスメニュー」ウィジェットを設置したい場所へ入れます。

先程作ったメニューを選択します。

あとの設定はお好みで。
私はWordPressカテゴリ以外の記事ではボックスメニューを消しているので、そのように条件分岐しています。
(WordPressカテゴリ以外の訪問者は、まずWordPressカテゴリに用がないため)

スポンサーリンク

このはモードボックスメニュー作成手順4 CSSを修正する

終わったらサイト画面で表示されているか確認します。

しかし実はこのままだと

質問者の写真

PageSpeed Insightsで「画像要素でwidthとheightが明示的に指定されていない」と怒られちゃう!

対処法は以下の記事をお読みください。

Cocoonで「画像要素で width と height が明示的に指定されていない」とPageSpeed Insightsから怒られたときの対処法
Cocoonを使っているとPageSpeed Insightsで「画像要素で width と height が明示的に指定されていない」の指摘を受けることがあり...
スポンサーリンク

このはモードボックスメニュー作成手順5 著作権表示を設置する

最後に著作権表示をします。
特にこだわりなければ「美雲このはオフィシャルサイト」へのリンクボタンも入れましょう。

ボックスメニューの下に「テキスト」ウィジェットを入れて、「テキスト」タブに次の記載をします。

<div align="center">(C)GMO Internet, Inc. 再使用禁止
<a class="btn-gradation" href="https://conoha.mikumo.com/" target="blank">美雲このはオフィシャルサイト</a></div>

子テーマのstyle.cssに以下の記述をします。

.btn-gradation {
display: inline-block;
text-align: left;
background-image: linear-gradient(#eaeaea 0%, #c6c6c6 100%);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
color: #a5a5a5;
font-size: 16px;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
padding: 12px 24px;
border-radius: 4px;
font-size: 16px;
}

.btn-gradation:hover {
opacity: 0.8;
}

ボタンはこちらのサイトのを使わせていただきました。

コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選 | 名古屋・東京のWeb制作ならGrowGroup株式会社
このブログページでは、コピペするだけで実装できる「癖がなくて使いやすい」「お洒落」なボタンのサンプルコードを掲載しています♪シンプルなものからホバーアクションに少しこだわったものまで紹介しています!

質問者の写真

終わったぁ!
解答者の写真
お疲れ様でした
スポンサーリンク

参考1:Cocoon以外でもボックスメニューは使えます

本記事では「Cocoon」と限定していますが、これはテーマが標準機能として備えているから。
やろうと思えば他のテーマでも導入できます。
導入したい方はボックスメニュー原作者様の記事を御参照ください。

ボックス分けされたナビを作る!回遊率をアップしよう!
区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースになっています。HTMLとCSSがわからない初心者向けでコピペで簡単に作れるようにしました!

あるいは、こちらのプラグインでも同じことができます。

多機能プラグイン ExUnit
ExUnitの便利な機能企業サイト向けトップページに最適化見て欲しいページをトップページでアピール来訪者へ見て欲しいページをアピールするセクションを、PR Blocksウィジェットでカンタンに設置。ページの巡回率アップにもつながります。この機能を詳しくみる見せたい情報を柔軟なレイアウトと配置で表示プロフィールウィジェッ...

「Lightning」の拡張プラグインですが、どのテーマでも使えます。
私も大昔「Simplicity」を使っていた頃はEX UNITプラグインで実装していました。

スポンサーリンク

参考2:PageSpeed Insightsで怒られた場合

もしかするとPSIから「オフスクリーン画像の遅延読み込み」の項目で怒られるかもしれません。
その場合は対処法が2つあります。
どちらかを試してみてください。

  1. Cocoon「高速化」タブのLazyLoadをオンにする
  2. 追加で下記のカスタマイズを行う
Cocoonのボックスメニューのサムネイルに「高速化」タブのlozad.js無しでLazy Loadを適用させて更なる高速化を図る
WordPress5.5以降、Native Lazy Loadが実装されました。 これにより投稿内の画像はデフォルトで遅延読み込みされます。 しかし一部...
スポンサーリンク

まとめ

解答者の写真
ボックスメニューは本当に便利です
ぜひ使ってみてください

質問者の写真

もしあなたがConoHaユーザーなら、清楚かわいく作ってね!
author

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
KUSANAGI for ConoHa
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました