WP Rocket - WordPress Caching Plugin

WordPress無料テーマOcean WPでメニューの上にアイコン追加

HanamiWEBオンラインスクールでは

●バーチャル自習室でのリアルタイム質問!

●チャットで質問し放題!

●24時間学び放題のEラーニング教材!

全部ついて 2,500円/月!

海外製のOceanWPというテーマなのですが、設定画面が日本語化されていて、出来る事が多くとても使いやすいと思っています。

今回は、OceanWPテーマを使って、メニュー上にアイコンを表示させる方法を解説していきます。

メニュー設定

【外観】>【メニュー】>【メニューアイコン設定】

こちらにデフォルトで使えるアイコンの種類と、オリジナルファイルを追加できるsvg / 画像という項目があります。使いたいものにチェックを入れます。

アイコンを設定したいメニュー項目の詳細を開き、アイコン右隣の選択テキストリンクをクリックします。

アイコンを選択し、右の設定項目でどのようにアイコンを表示させたいか選択していきます。最後に選択ボタンをクリックして完了です。

オリジナル画像を使いたい場合

私の環境下では画像は動かなかったので、svgファイル方法を解説します。まずはsvgを使えるように設定をしていきます。

【Oceanwp】>【Integration】でsvgの使用をONにします。

svgアイコン設定

【外観】>【メニュー】>【メニューアイコン設定】で【svgにチェックを入れます。】

メニューにオリジナルアイコン画像を設定

おい理事なる画像を設定したいメニュー項目を開き、アイコン右隣の【選択】テキストリンクをクリックします。

メディアを追加して設定します。

ホームページのリスキリングはお任せください!

2019年よりWordPressやホームページに関するスキルシェアを行ってきました。事例やノウハウが蓄積され、スピーディーかつ的確にお悩みを解決へと導く事を得意としています。ホームページに関するお悩みがございましたら、LINE公式アカウントよりお気軽にご相談ください!

↑クリックするとLINE公式が開きます

新着記事

WordPressを使ったマッチングホームページの作り方【HivePress】ユーザープロフィール画像を必須に変更
Google Workspaceでサブドメインメールを作成
WordPress無料テーマOcean WPでメガメニュー作成
WordPress無料テーマOcean WPでメニューの上にアイコン追加
お悩み解決!
WordPressのお悩みにマンツーマンレッスンで解決

スポットレッスン

自力で解決出来ない時はオンラインレッスンでサクッと解決!

Click→

WordPressのお悩みにオンラインスクールで解決

オンラインスクール

安心してWordPressサイトを運用したい方は着実に疑問を解決!

Click→

WordPressのお悩みに代行で解決

代行依頼

ギブアップ!作業をお願いしたい時は代行依頼ですっきり解決!

Click→

ホームページ制作依頼

3年以上前の状態からホームページをメンテナンスしていない方!まずは一度無料相談をご利用ください。メンテナンスできるホームページを制作します。

Click→

講師依頼

年間約300件の相談実積で得た最新情報とノウハウで、講師としてセミナー開催も可能。WordPressスキルをシェアしています。

Click→

目次

Amelia

Brizy

HivePress

Paid Membership Pro

Simple Membeships

LearnDash

LifterLMS

Hbook