redoブログ

redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

【ブログカスタマイズ】「はてなブログ」でグローバルメニューを追加する方法を紹介|初心者でもカンタン 

f:id:redo5151:20191012195410j:plain

SEO対策の一環として、無料はてなブログで「グローバルメニュー(グローバルナビゲーション)」を表示&設定する方法をご紹介したいと思います。

 

最近はてなブログでの「カスタマイズ」を色々弄っていますが、「デザインCSS」と「HTML」を制する者がレイアウトを制するとつくづく感じております。色や配置、形、文字など工夫次第で多種多様な設定が可能です。

 

みなさん色々と工夫されてて素敵なデザインを見かけると凄いなと感心します。今回は少し各自で書き換えないといけない部分もありますが、出来る限りシンプルにお伝えしたいと思います。

グローバルメニューとは?

f:id:redo5151:20191012195645p:plain

私も呼び名を知らなかったのですが、上の青字で囲ったメニュー画面のことをグローバルメニューと呼びます。これがあると見る側が見たい記事に直ぐに飛べるので便利です。

HTMLコード(ヘッダー→タイトル下)

下記にHTMLコードを示します。私のTOPページのレイアウトの設定方法になります。背景が”黒い帯ライン”になり、文字色が”白”になります。 

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='url'>TOP</a></li>
<li><a href='url'>カテゴリ1</a></li>
<li><a href='url'>カテゴリ2</a></li>
<li><a href='url'>カテゴリ3</a></li>
<li><a href='url'>カテゴリ4</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>

 

 

<li><a href='url'>カテゴリ1</a></li>の「URL」と「カテゴリ1,2,3,4」は各自の項目で設定してください。コード内の”青字”箇所です。

イメージとしては、私はカテゴリ1,2,3,4に「TOP」「山登り」「節約術」..etc

と設定し、URLにそれぞれのアクセスURLを貼り付けてます。

 

 

スマホのトグルメニューが開かなかった場合の対処方法

トグルメニューが開かない場合は、「Jquery」の参照コードが最新になってないことが原因です。

 

ダッシュボード」→「設定」→「詳細設定」→「検索エンジン最適化」の欄にある「headに要素の追加」に以下のコードを追記して下さい。

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

追記した後、一番下の「変更する」ボタンを押して保存する事を忘れないように。

 

もし今後、スマホでトグルメニューが開かない場合は以下のURLから最新のコードを取得してください。

developers.google.com

 

「HTMLコード」貼り付け箇所

次に先ほどコピーしたHTMLコードをはてなブログ上に貼り付けます。

f:id:redo5151:20191012200644p:plain

デザイン→カスタマイズ(レンチアイコン)→ヘッダの順で選択して下さい。

f:id:redo5151:20191012201804p:plain

「タイトル下」のHTML記述個所に先ほどのコードをコピーします。

※この時に万が一に備えてバックアップは取っておいてくださいね。

デザインCSSコード

次にグローバルメニューのような「レイアウト」になるようにCSSコードを作成します。

#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #343838;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;

}
/*パソコン1カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #343838;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #00DFFC;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #343838;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}

 

デザインCSSにコードを貼り付ける

f:id:redo5151:20191008223021p:plain

 さきほどと同様に管理画面から、プルダウンメニューの「デザイン」を選択。

f:id:redo5151:20191012203252p:plain

カスタマイズ(レンチアイコン)→「{}デザインCSS」を選択し、
先ほどのCSS用コードを貼り付けます。

f:id:redo5151:20191012203608p:plain

 このようにグローバルメニューができます!以上で完了です。

 

ここから更に「色の変更」や「配置の調整」等できますが、またややこしくなるので、次回紹介したいと思います。"グローバルメニュー"があるだけで、レイアウトがスッキリしてなんか嬉しくなりますよね。

 

アフィリエイト初心者には「 A8.netがおすすめ

A8.net

「ブログカスタマイズ」を行い、サイトのデザインを整えたら、アフィリエイトと連動して収益を得てみましょう。

 

アフィリエイトはインターネットによる広告宣伝で、成果型の広告のことです。

 

ブログなどのウェブサイトに訪れた方がそのサイトに紹介されている商品を購入し、生じた利益に対して、広告主が報酬を支払う広告手法のことです。

 

A8.netは会員数、広告主数ともに最大規模を誇るアフィリエイトサービスです。


有名ショップから、まだあまり知られていない注目商品を扱うショップまで様々なジャンルの広告を扱っています。

 

登録の審査も無く、登録料も無料なので、これからアフィリエイトを始めようと思っている方にはぜひおすすめしたいです。

 

自分のサイトやブログを持っていない方でも登録OKというお手軽さが魅力です!誰でも簡単にアフィリエイトを始めることができますよ。

 

特におすすめしたい方

・副業・在宅ワークを検討されている方
アフィリエイトを始めたいと思っている方
・お小遣い稼ぎをしたいと思っている方

 

A8.netアプリでさらに使いやすく!】

A8.net アプリ
A8.netではスマホで未確定速報のプッシュ通知を受け取ったり、プログラム検索などができるスマートフォン用アプリを提供しています。

 

アプリをインストールして通知設定をしておけばスマホで成果発生を知ることができますので便利ですよ。ぜひ検討してみてはいかがでしょうか。

 

 

afb(アフィb)

afb(アフィb)

出典:afb(アフィb)

 

afb(アフィb)も独自案件が多く、中でもファッション・美容・婚活などの女性向け広告に強い特徴があります。もちろん、美容関連だけでなく、コロナ禍で需要の高まっているマスク関連、宅配関連、クレジット、VODなど多数取り揃えています。

サポートもしっかりしており、誰でも簡単にアフィリエイトブログを作ることが出来るように紹介マニュアルも付きます。さらに、アフィbの最低振込額は業界でも1番安い「777円」になっています。

結果として、”6年連続で利用者満足度率No.1”に選ばれている大手ASPの一つです。

A8.netとは別のアフィリエイト・プログラムに関する意識調査(「ASP意識調査」)2020」における利用者満足度において、最高評価となる「とても満足」とする獲得比率が6年連続、No.1となっています。こちらもぜひ登録しておきたいASPです。

 

A8.netでは「広告出稿数の多さ」による満足度が高かった一方で、afb(アフィb)では主に以下によるユーザー満足度で高い評価を得ています。
ユーザ満足度が高い理由 
・専属担当の対応の速さ、丁寧さなどの対応面
・管理画面のレポートが見やすいといった機能面
・振り込み時に消費税分えを上乗せしてくれるサービス
・afb運営のアフィリエイト教育講座の充実
afbの管理画面は非常に見やすく、アフィリエイト案件の検索がしやすいです。そのため、人気のある案件もすぐに見つけることができます。
 
 
記事の売買ができるafbひろばもおすすめです。2018年7月10日より、累計販売文字数に応じて文字単価がアップするライターランク制度を導入しており、文字単価は「最大5円」までアップします!
 
例えば、1万文字書けば5万円になるということもありうるということです。
 
\ユーザー満足度が6年トップのASP/
 

※登録審査は3分でカンタンに完了できます。

 

物販アフィリエイトなら「もしもアフィリエイト 」がおすすめ

収益化を目的としてアフィリエイトを始めるならもしもアフィリエイト の”物販アフィリエイト”がおすすめです。

 

Amazonアソシエイトでは銀行振り込み時に5000円に到達するまで換金できず、振り込み時には手数料(300円)が差し引かれるというデメリットもありますが、もしもでは1000円以上から換金でき、支払手数料は無料です。

 

もしもアフィリエイトをおすすめする理由は下記3点あります。

 

 もしもアフィリエイトがおすすめな理由
Amazon楽天市場、Yahoo!ショッピングの審査が通りやすい
Amazonと同じ報酬額になっている
Amazonアソシエイトで必要な「3件ノルマ」が無い
・もしもかんたんリンク、カエレバ、リンカーが使用できる
・1つのASPでまとめることで、収益もまとめられる
・「はてなブログPro」のセルフバックも有り

 

2020年3月より、Amazonアソシエイト審査が「3件販売ノルマ」を達成しないと審査ができないように変更されています。

 

もしもアフィリエイトでは、Amazonアソシエイトと報酬額が同じなのにも関わらず、ノルマも一切なく、審査も通りやすいです。

 

もしもアフィリエイトでは「Amazon楽天市場、Yahoo!ショッピング」とメインの物販アフィリエイトと提携でき、一括でまとめられます。

 

Amazon楽天市場、Yahoo!ショッピング」は多くの人が利用しているので、売るためのハードルが低いので、初心者でも挑戦しやすいジャンルです。

 

このようなリンクを見かけたことがある方も多いのではないでしょうか。

 

 

商品名と一緒にAmazon楽天市場、Yahoo!ショッピングなどのショッピングサイトへのリンクがあります。

 

「サムネイル&商品名&通販サイト」のボタンがバランスよく配置されたリンクはもしも「プラングイン」で作成されています。こちらのリンクも「もしもアフィリエイト」では数秒で作成でできるのが魅力です。

 

Amazon楽天市場、Yahoo!はそれぞれターゲット層が異なりますので、上手く使い分けて、分散させることがポイントになります。

 

 各物販大手のターゲット層
Amazon→男性、直ぐに買いたい人が多い
楽天→女性・主婦層が多く、楽天ポイント、ショップを見て回る人
・Yahoo→Tポイント、掘り出し物が好きな人

登録はこちらから

 

 

もしもアフィリエイトは記事の投稿数も比較少なめでも審査は通りやすいので、これから本格的にブログでアフィリエイト を始める初心者の方はぜひ登録しておきたいASPです。

 

 

 

 

他にも「ブログカスタマイズ方法」をいくつか紹介しています。

redo5151.hatenablog.com

 

redo5151.hatenablog.com

 

まとめ

 

redo5151.hatenablog.com

redo5151.hatenablog.com

redo5151.hatenablog.com

redo5151.hatenablog.com