【FREEDOM】メニューの設定【テーマカスタマイザー】

freedom

freedom Web Developer

ワードプレス用テンプレート「FREEDOM」の開発者。


無料のワードプレステーマ「FREEDOM」

メニューを変更したい

以下のページより、「FREEDOM」無料テーマをご自身のワードプレス内にインストールし適用していることが前提ですので、予めご了承ください。

①サイドメニューの「外観」を選び、「メニュー」をクリック

外観 からの カスタマイズ

「カスタマイズ」をクリックすると色々な項目が表示されますが、今回は「メニュー」という項目を選択しクリックしてください。

まずは、「新規メニューを作成してください。それを「グローバルメニュー」に適用してください。

ドラッグアンドドロップでメニューの中身を追加することができるので、追加してください。

その際に、上記画像のように段ちがいで挿入することが可能です。

そうすると、グローバルメニューがドロップメニュー形式になり、マウスを乗せるとその下にリンクが表示されるようになります。

ドロップメニューで子リンクを表示させる場合、親メニューはクリックできないようになります。クリックしても何も起きません。

上記のやり方で、ひとまずグローバルメニューの設定は完了となります。

ここからは、「FREEDOM」の独自の機能による設定です。

メニューのタイトルの下に、小さいテキストを表示させる

外観 からの カスタマイズ メニュー 説明

②先ほどの画面右上の「表示オプション」をクリックし、「説明」にチェックをつける

外観 からの カスタマイズ

「説明」はデフォルトではチェックが付いていないはずですが、ここでチェックをつけてください。

③メニューの中で、「説明」という項目が追加させるので、そのテキストエリア内に、小さく表示させたいテキストを入力します。

外観 からの カスタマイズ

そうすることにより、グローバルメニューのタイトルの下に、小さいテキストが表示されるようになります。

メニューのタイトルの横にアイコンを表示させる

外観 からの カスタマイズ メニュー タイトルの属性

④先ほどの画面右上の「表示オプション」をクリックし、「タイトルの属性」にチェックをつける

外観 からの カスタマイズ タイトルの属性

⑤メニューの中で、「タイトルの属性」という項目が追加させるので、そのテキストエリア内に、glyphiconのcssクラスを入力します。

外観 からの カスタマイズ

glyphiconのcssクラスは以下のサイトから探してコピペしてください。

外観 からの カスタマイズ

上記の「glyphicon-****」で書かれた部分を、「タイトルの属性」にコピペしてください。

注意点としましては、

上記の「説明」と「タイトルの属性」の両方に値を入れた場合、「タイトルの属性」のみが適用されるようになっています。

デザインの関係上、アイコンと小さい文字の両方を表示させないほうが良いという判断でこのような設定になっています。

以上で、メニューの設定は完了です。

【FREEDOM】テーマカスタマイザー【マニュアル】

【FREEDOM】メインビジュアルの設定【テーマカスタマイザー】

2016.04.28

【FREEDOM】ロゴ画像の設定【テーマカスタマイザー】

2016.04.29

【FREEDOM】TOPページのレイアウト設定【テーマカスタマイザー】

2016.05.05

この記事の著者

freedom

ワードプレス用テンプレート「FREEDOM」の開発者。

facebook web

関連する記事