redoブログ

redoブログ

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

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

f:id:redo5151:20191012195410j:plain

こんにちは管理人のredoです。今日は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-1.9.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>

こちらはYukihy Lifeさんのコードを参考にさせて頂いております。

感謝しております。

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

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

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

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;
}
}

こちらも先ほど同様Yukihy Lifeさんのコードを参考にさせて頂いております。感謝しております。

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

f:id:redo5151:20191008223021p:plain

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

f:id:redo5151:20191012203252p:plain

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

f:id:redo5151:20191012203608p:plain

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

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

 

はてなブログで収益化を目指して、本格的に始めるのにおすすめの本

 

 

本格的にブログを始める方にブロガー支持率No1ブログサービス「はてなブログ」の詳しい解説書がおすすめです。

記事の投稿、ブログの細やかな設定などの基本はもちろん、ソーシャルサービス連携、ブログカスタマイズなど丁寧な文章と図版でわかりやすく解説しています。

カスタマイズの解説は、基本機能を使ったものからHTML/CSSを使ったものまで、広く解説しています。

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

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

 

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です。

 

 

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

A8.net

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

 

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

 

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

 

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


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

 

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

 

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

 

おすすめしたい対象の方

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

 

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


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

 

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

 

 

 

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

redo5151.hatenablog.com

redo5151.hatenablog.com

まとめ

 

redo5151.hatenablog.com

redo5151.hatenablog.com

redo5151.hatenablog.com

redo5151.hatenablog.com