Check!主婦の在宅ワーク求人多数!募集中の在宅・時短のお仕事情報を今すぐチェック!

【XWRITEの使い方】ボックスメニューのアイコンはオリジナル画像にできる!Canvaを使ってデザインの作成手順を教えるよ。

このページのリンクには広告が含まれています。

「XWRITEのボックスメニューのアイコンって自作できるの?」

という質問に、XWRITEユーザーのわたしがお答えします。

ボックスメニューブロックは、2023年10月にXWRITE v2.1.0のアップデートで新登場!

記事中やサイドバーなどのウィジェットに、ボックスナビを作成することができます。

Rumi

作成方法は、めっちゃカンタンです!

ボックスメニューの画像は用意されているアイコン、自分で作成したアイコン、どちらも使用可能です。

自分で作成したアイコンをボックスメニューに取り入れると、オリジナリティあふれるブログになりますよ。

HTMLのタグやphpのコードなどを一切不要!

テキスト入力マウス操作だけで、あなただけのボックスナビを作ることができます。

\当サイトで使用しているWordPressテーマ/

XWRITE(エックスライト)は、国内シェアNo.1エックスサーバーが開発したWordPressテーマです

XWRITEのボックスメニューブロックができること

当サイトで使用されるボックスブロック(2024年4月撮影)

ボックスメニューブロックは、アイコンを含むボックス型メニューを作成するためのブロックです。

サイドバーやフッターなどのウィジェットに挿入することで、手軽にメニューを表示できます。

Rumi

上のデザインが当サイトで使用されています。

※ボックスブロックを使用したボックスナビのデザイン例

背景を塗りつぶしにするメニューを作成したり、メニューの列数アイコンやテキストの位置を変更することも可能です。

Rumi

メニュー間の余白(白い部分)のサイズも、細やかに設定できます。

※WordPress管理画面(2024年4月の情報)

ボックスナビのアイコンは、アイコン設定から自由に選ぶことができます。

Rumi

Instagramのアイコンは、アイコン設定から選べます。

お問い合わせのアイコンは、Font Awesome アイコン一覧から選べます。

※引用元:Font Awesome (2024年4月の情報)

管理画面にないアイコンを使用するときは、Font Awesome アイコン一覧を利用しましょう。

アイコンのクラス名コピー&ペーストすると、選択することができます。

詳細はこちらの記事をご覧ください。

ボックスナビの画像は自分で作成したアイコンを使用できる

こちらは、実際にわたしが作ったボックスメニューです。

アイコンで使用している画像は、Canva(キャンバ)で編集しました。

※WordPress管理画面(2024年4月の情報)

例えば「お魚」のアイコンを見てみましょう。

Font Awesomeから用意されているアイコンは、こちらです。

Rumi

アイコンの色を自由に変更したり、余白の設定をすることができます。

※WordPress管理画面(2024年4月の情報)

自分で用意した画像でアイコンにすると、こんな感じです。

アイコン設定のアイコンタイプを「画像」に切り替えると、オリジナル画像を選択することが可能です。

Rumi

Canvaを使うとカンタンにアイコンが作れますよ。

次に紹介していきますね。

ボックスメニューブロックにオリジナル画像を載せる方法

こちらのボックスナビを例にして、アイコンをすべてオリジナル画像で作ってみましょう。

Rumi

アイコンはすべて管理画面のアイコン設定から選んだものです。

STEP1
ボックスメニューを作成
※WordPress管理画面(2024年4月の情報)

WordPress管理画面「共通パーツ」から新規投稿を選び、ボックスメニューを作成します。

投稿画面のブロック挿入ツールから「ボックスメニュー」のアイコンをクリック。

初期状態の各メニューをクリックし、スタイルやテキスト、アイコンなどを設定します。

Rumi

イメージ程度で、ざっくりでOKです。

アイコンは、とりあえずのデザインでアイコン設定から選んでおきましょう。

設定の詳細は、XWRITE公式サイトのマニュアルをご覧ください。

STEP2
Canvaでアイコンを作成
※引用元:Canva(2024年4月の情報)

Canvaの検索画面から、ロゴ(500×500px)を検索し、空のデザインを作成します。

※Canva 編集画面(2024年4月の情報)

検索から、希望するデザインを検索します。

例えば、「料理」と検索してみましょう。

※Canva 編集画面(2024年4月の情報)

すると、料理に関するイラストがたくさん出てきます。

好きなイラストを選び、サイズを調整します。

※Canva 編集画面(2024年4月の情報)

選んだイラストによって、アイコンの色を変えることも可能です。

デフォルトカラーだけでなく、カラーコードを手入力して色を決めることもできます。

STEP3
Canvaで編集した画像をアップロード
※Canva 編集画面(2024年4月の情報)

「共有」ボタンを押し、ダウンロードを選びます。

Canva Pro(有料)の機能で背景を透過しておきましょう。

Canvaの無料プランのみを使っているときは、背景透過機能のある画像編集アプリを利用して背景を透過しておきます。

STEP4
WordPressにCanvaの画像をアップロード
※WordPress管理画面(2024年4月の情報)

WordPress管理画面から「メディア」を開き、「ファイルをアップロード」を選びます。

Canvaで編集したダウンロード画像を選び、WordPressへアップロードします。

画像が複数あるときは、フォルダの状態になっています。

フォルダの状態で、そのままアップロードすることができません。

フォルダを開き、ファイルをひとつずつアップロードしてください。

STEP5
ボックスメニューのアイコンを画像に変える
※WordPress管理画面(2024年4月の情報)

再びボックスブロックを編集します。

アイコン設定のアイコンタイプを「画像」にクリックすると、「画像を選択」が表示されます。

※WordPress管理画面(2024年4月の情報)

Canvaでアップロードした画像を選択します。他のメニューも同様です。

各メニューを編集したボックスナビがこちら。あなたも作ってみましょう。

Rumi

オリジナリティあるでしょ?

まとめ

ボックスブロックのアイコンをオリジナル画像にする方法を紹介しました。

ボックスブロックは、サイドバーやフッターに表示するブログパーツとして大活躍!

作成したブログパーツをカンタンに表示させることができます。

Rumi

共通パーツで作成し保存しておくと、カンタンにブロックを呼び出すことが可能です。

ボックスブロックを使用すれば、CSSやHTMLの知識がなくても、まるでプロみたいなナビのデザインができますよ。

XWRITEのボックスブロックオリジナル画像を使って、あなたらしいデザインを作ってみてくださいね。

こちらの記事もあわせて

「シャトルシェフ」の低温調理で作る!丸ごと玉ねぎのオニオンスープのレシピ。ほったらかしにするだけでお箸で切れるトロトロ食感を楽しめる。
シャトルシェフとアイラップで茶碗蒸し風だし巻き卵のレシピ。焦げと生焼けの失敗なし!焼かない・巻かない調理法で卵の大量消費にも。
【Oisix】オイシックスの定期ボックスをやめたい?キャンセル・休止・解約・退会の選択肢と注意点を解説!
シャトルシェフでご飯を炊く方法。カセットコンロで10分の炊飯で省エネなので、防災対策に備えておきたい。
【Oisix】キットオイシックス「国産小麦の刀削麺風台湾まぜそば」麺のミールキットを実食!テレワークや子供の午前中帰宅のランチに食べたい
【Oisix】オイシックスの定期ボックスの注文の流れ!お届け曜日、注文期間、締め切り日をチェック!

■ はじめてのブログに最適なWordPressテーマ『XWRITE(エックスライト)』がおすすめ! ■

『XWRITE(エックスライト)』は、
ブログ運営に役立つ機能を多数搭載し、誰でも簡単に使えるシンプルな操作性を実現。
軽量設計で高速表示。読み込みのストレスなくお使いいただけます。

\当サイトで使用しているテーマ/XWRITEのレビュー

当サイトは、エックスサーバーで運営されています
WordPressテーマ「XWRITE」を使用しています

URLをコピーしました!