WP Rocket - WordPress Caching Plugin

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

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

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

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

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

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

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

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

メニュー設定

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

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

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

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

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

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

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

svgアイコン設定

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

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

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

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

HanamiWEB

この記事を書いた人

松浦 みさ

株式会社HanamiWEB / Web制作・SEO・AI検索対策サポート

東京都練馬区を中心に、中小企業向けのホームページ制作、SEO対策、AI検索時代を見据えたサイト設計をサポートしています。
WordPressを活用した実務ベースの改善提案や、集客導線を意識したコンテンツ設計が得意です。
サイト保守運用も代行しております。

土日祝も対応します!

ホームページのトラブルご相談ください!

・WordPresにログインが出来ない

・マルウェア感染?

・ホームページが突然表示されない!

・PHPのエラーが出ている

お困りの方向けに、土日祝も対応しています。

お急ぎの方は「03-6694-7024」まで、今すぐお電話ください。

新着記事

WordPressサイトにPHPエラーが表示され、サイトが表示されない(wp-includes/block-patterns.php on line 38)
練馬区 ホームページ制作で2位|AIに引用されるサイトの作り方を解説
ホームページ更新代行とは?費用・相場・依頼方法をわかりやすく解説
RankMathの「ウェブマスターツール」設定ガイド|Google Search Console・Bing
ja日本語