ブログの作り方

SANGOメニューボックス

「SANGO」のテーマでメニューボックスを設置してみよう

SANGOテーマを使っているブログは多いのですが、「メニューボックス」を使っているブログはなかなか見当たりません。

ウィジェットにアイコンを使ったメニューを設置することができるので、ちょうど良いアクセントになりますよ。

こちらは実際に設置してみたメニューボックスです↓
SANGOメニューボックス1

アイコンの数が多いので、自分のブログに合うアイコンを使うことができました^^

文字だけのメニューよりも、ポップな感じが出ていて良いですね!

公式サイトに設置の仕方が書いてあるのですが、一部困ったところもあったので、詳しく書いてみようと思います。

私は「エックスサーバー」を使っています。他のサーバーでも手順は同じです。

★おすすめサーバーについて書いてみました↓
WordPessで使うお勧めのレンタルサーバー。実際に使ってみた感想>>

★SANGOを使っている私のブログはこちら↓
にわかイズム>>

ウェブフォントの設定

実際にメニューを作るときに困るのが、アイコン部分のフォントの設定です。

このアイコンには、FontAwesomeというWebフォントを使っているのですが…

これを使うには、初心者には分かりにくい設定が必要なんですよね。

具体的な手順としては、以下のようになります。

1. SANGOテーマのインストールフォルダから「header.php」をダウンロードする
2. 「header.php」内の</head>タグ直前にWebフォントのコードを貼り付け保存する
3. 子テーマを公式サイトからダウンロードする
4. 子テーマをインストールする
5. 子テーマのインストールフォルダに「header.php」を入れる

といった具合。では、順に説明していきたいと思います。

1 header.phpの準備

まず、上記の1と2ですが、header.phpが文字化けして見えなかったりする人がいるかもしれないので…

設定済みのheader.phpファイルを置いておきます。zipファイルになっているので、ダブルクリックで解凍してください。

解凍すると、header.phpファイルが出てきます。

★Webフォントの設定入りの「header.php」はこちら↓
header.php

ちなみに、このheader.phpのこの部分にコードを貼り付けてあります↓
SANGOコード貼り付け場所

2 子テーマをインストール

次に、子テーマを公式サイトからダウンロードします。

下の公式サイトからダウンロードして、子テーマをインストールしてください。

インストール方法は、公式サイトが詳しく説明してくれています。

★公式サイトのダウンロードと説明はこちら↓
WordPressで子テーマを活用して安全にカスタマイズを行う方法

3 サーバーにアップロード

子テーマがインストールできたら、先ほど解凍してできたheader.phpをサーバーにアップロードします。

エックスサーバーのファイルマネージャーを開きます。

/○○○○○○.com/public_html/wp-content/themes/sango-theme-child/

に移動します。(自分のサーバーに置き換えてください。)

このsango-theme-childのフォルダーにheader.phpをアップロードします。
(責任はとれないので、自己責任でお願いします(_ _))

ファイルマネージャー

上の画像で説明すると、

①でheader.phpを選ぶ
②でファイルをアップロード
③にファイルがアップロードされる

といった手順ですね。これでFontAwesomeを使えるようになりました^^

ウィジェットの設定

FontAwesomeでアイコンが使えるようになったので、続いてウィジェットの設定をしていきます。

ウィジェットは、「カスタムHTML」を使います。

カスタムHTMLウィジェット

ウィジェットの中の「カスタムHTML」を、サイドバーにドラッグします。

カスタムHTMLウィジェットに、コードを貼り付けます。

ウィジェット2

コードは、私のブログの場合は以下のように設定しました。

<div class="widget-menu__title main-bc ct strong">
<i class="fa fa-map-marker"></i> メニュー
</div>

<ul class="widget-menu dfont cf">

<li>
    <a href="https://niwaka-ism.com/category/doukouhou"><i class="fa fa-id-card-o" style="color: #ff9191"></i>免許全般</a>
</li>
<li>
    <a href="https://niwaka-ism.com/category/jidousya-gakkou"><i class="fa fa-car" style="color: #ffb776"></i>普通免許</a>
</li>
<li>
    <a href="https://niwaka-ism.com/category/jidou-nirin"><i class="fa fa-motorcycle" style="color: #92ceff"></i>二輪免許</a>
</li>
<li>
    <a href="https://niwaka-ism.com/category/koureisya-kousyuu"><i class="fa fa-male" style="color: #77d477"></i>高齢者講習</a>
</li>
<li>
    <a href="https://niwaka-ism.com/category/wadai"><i class="fa fa-home" style="color: #FFBEDA"></i>生活</a>
</li>
<li>
    <a href="https://niwaka-ism.com/category/tv-eiga"><i class="fa fa-tv" style="color: #CCCCFF"></i>TV・映画</a>
</li>
    
</ul>

自分で全部書くのはたいへんなので、このコードをウィジェットに貼り付けて、必要な部分を書き換えていく方がお勧めです。

貼り付けると左側に!マークが付きますが、気にしなくて大丈夫です。

コードの書き換え

では、コードの書き換え方です。以下の部分を例にして説明していきます。

<a href="https://niwaka-ism.com/category/doukouhou"><i class="fa fa-id-card-o" style="color: #ff9191"></i>免許全般</a>

まず、「https://niwaka-ism.com/category/doukouhou」の部分は、クリックしたときに表示される画面です。

私はカテゴリーを表示したかったので、カテゴリーのURLにしてみました。

次に、「fa fa-id-card-o」の部分は、表示されるアイコンです。

アイコンは、FontAwesomeのサイトから選びます。
FontAwesomeのアイコンはこちら

検索には日本語が使えないので、画面をスクロールして、見た目で探しましょう。

fontawesome1

好みのアイコンが見つかったら、そのアイコンをクリックします。

fontawesome2

クリックすると、アイコンの正式な名前が分かるので、その名前をコピーしておいてコードを書き換えます。

続いて、「#ff9191」の部分は、アイコンの色です。

アイコンの色は、色見本のサイトから好きな色を選びます。
色見本と配色のサイトはこちら

最後に、「免許全般」の部分は、アイコンの下に表示される文字です。

自分のメニューに合わせて書き換えます。短い言葉の方が目にとまります。

メニューボックス作成のまとめ

SANGOのメニューボックスは、「FontAwesome」と「カスタムHTMLウィジェット」の2つの設定が必要です。

特にFontAwesomeの設定は、サーバーへのアップロードが必要なため敬遠してしまっている方も多いのではないでしょうか。

メニューボックスはインパクトがありますから、ブログのイメージに合うと思った方は挑戦してみましょう。

★SANGOの使用例はこちら↓
「SANGO」を使ったWordPressサイト例。テーマ選びの参考に>>

★個人ブログならWINGもいいですよ↓
WING(AFFINGER5)は、サイト作成が楽しくなる機能満載のテーマ>>

★アフィリエイトならこちらもおすすめ↓
検索上位表示と収益化「Diver」のテーマを5段階評価してみた>>

 

関連記事

  1. 画像編集サイトfotojet

    オンラインで画像編集できる無料サイト。指定サイズで切り抜き最適化する方…

  2. プロフィールトップ

    スワローでブログを作る手順2。カスタムHTMLでプロフィールを作成

  3. ONEのCTAを設置

    「ONE」で記事下CTAを設置しよう。表示回数やクリック数等が測定でき…

  4. ONEでブログを作る

    TCDの「ONE」でブログを作る手順。トップ画面と記事の設定をします

  5. スワローでブログ作成

    スワローでブログを作る手順3。スライダーを設置してみよう

  6. Switchで企業サイト作成

    「Switch」で企業サイトを作る手順2。初心者でもこの完成度

コメント

    • tao
    • 2018年 3月 30日

    sangoを今日買ったばかりですが、アイコン設定の仕方がわからずちぐはぐしていました。おかげさまですごく順調に設定ができています。本当に助かりました。ありがとうございます。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

ブログの作り方

TCDの「Switch」で企業サイトを作る手順1。設定の仕方を説明

TCDのSwitchでサイト作成

ブログの作り方

Diverでブログを作る手順1。プロフィールや記事スライダーを設定しよう

Diverでブログを作る

ブログの作り方

Bloomでブログを作る手順1。記事スライダーとウィジェットを設置

Bloomでブログを作る

ブログの作り方

スワローでブログを作る手順1。基本設定と人気記事を作成

スワローでブログ作成1

ブログの作り方

「SANGO」のテーマでメニューボックスを設置してみよう

SANGOメニューボックス

ブログの作り方

TCDの「ONE」でブログを作る手順。トップ画面と記事の設定をします

ONEでブログを作る