はてなブログで「グローバルメニュー(グローバルナビゲーション)」を表示＆設定する方法を紹介しています。
とくにこれからブログをはじめようと考えているブログ初心者へおすすめのブログカスタマイズ方法です。
最近またはてなブログでの「カスタマイズ」を色々弄っていますが、「デザインCSS」と「HTML」を制する者がレイアウトを制するとつくづく感じております。
色や配置、形、文字など工夫次第で多種多様な設定が可能です。
みなさん色々と工夫されてて素敵なデザインを見かけると凄いなと感心します。
今回は少し各自で書き換えないといけない部分もありますが、出来る限りシンプルにわかりやすくお伝えしたいと思います。
- グローバルメニューとは？
- HTMLコード(ヘッダー→タイトル下)
- 「HTMLコード」貼り付け箇所
- デザインCSSコード
- デザインCSSにコードを貼り付ける
- アフィリエイト初心者には「 A8.net」がおすすめ
- afb(アフィｂ)
- 物販アフィリエイトなら「もしもアフィリエイト 」がおすすめ
- ココナラならブログデザインの依頼もできる！
- まとめ
はてなブログで収益化を目指している方へ向けて「100記事」達成時のPV数など詳しく紹介しています。
グローバルメニューとは？
私も呼び名を知らなかったのですが、上の青字で囲ったメニュー画面のことをグローバルメニューと呼びます。
これがあると見る側が見たい記事に直ぐに飛べるので便利です。
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'>カテゴリ１</a></li> <li><a href='url'>カテゴリ２</a></li> <li><a href='url'>カテゴリ３</a></li> <li><a href='url'>カテゴリ４</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から最新のコードを取得してください。
「HTMLコード」貼り付け箇所
次に先ほどコピーしたHTMLコードをはてなブログ上に貼り付けます。
デザイン→カスタマイズ(レンチアイコン)→ヘッダの順で選択して下さい。
「タイトル下」の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; } /*パソコン１カラム*/ @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にコードを貼り付ける
さきほどと同様に管理画面から、プルダウンメニューの「デザイン」を選択。
カスタマイズ(レンチアイコン)→「｛｝デザインCSS」を選択し、
先ほどのCSS用コードを貼り付けます。
このようにグローバルメニューができます！以上で完了です。
ここから更に「色の変更」や「配置の調整」等できますが、またややこしくなるので、次回紹介したいと思います。
"グローバルメニュー"があるだけで、レイアウトがスッキリしてなんか嬉しくなりますよね。
スマホ表示にもこだわりたい方へ向けて「ハンバーガーメニュー」の実装方法も紹介しています。
アフィリエイト初心者には「 A8.net」がおすすめ
「ブログカスタマイズ」を行い、サイトのデザインを整えたら、アフィリエイトと連動して収益を得てみましょう。
アフィリエイトはインターネットによる広告宣伝で、成果型の広告のことです。
ブログなどのウェブサイトに訪れた方がそのサイトに紹介されている商品を購入し、生じた利益に対して、広告主が報酬を支払う広告手法のことです。
A8.netは会員数、広告主数ともに最大規模を誇るアフィリエイトサービスです。
有名ショップから、まだあまり知られていない注目商品を扱うショップまで様々なジャンルの広告を扱っています。
登録の審査も無く、登録料も無料なので、これからアフィリエイトを始めようと思っている方にはぜひおすすめしたいです。
自分のサイトやブログを持っていない方でも登録OKというお手軽さが魅力です！誰でも簡単にアフィリエイトを始めることができますよ。
特におすすめしたい方
・副業・在宅ワークを検討されている方
・アフィリエイトを始めたいと思っている方
・お小遣い稼ぎをしたいと思っている方
【A8.netアプリでさらに使いやすく！】
A8.netではスマホで未確定速報のプッシュ通知を受け取ったり、プログラム検索などができるスマートフォン用アプリを提供しています。
アプリをインストールして通知設定をしておけばスマホで成果発生を知ることができますので便利ですよ。ぜひ検討してみてはいかがでしょうか。
afb(アフィｂ)
出典：afb(アフィb)
afb(アフィb)も独自案件が多く、中でもファッション・美容・婚活などの女性向け広告に強い特徴があります。もちろん、美容関連だけでなく、コロナ禍で需要の高まっているマスク関連、宅配関連、クレジット、VODなど多数取り揃えています。
サポートもしっかりしており、誰でも簡単にアフィリエイトブログを作ることが出来るように紹介マニュアルも付きます。さらに、アフィｂの最低振込額は業界でも１番安い「777円」になっています。
結果として、”6年連続で利用者満足度率No.1”に選ばれている大手ASPの一つです。
A8.netとは別のアフィリエイト・プログラムに関する意識調査（「ASP意識調査」）2020」における利用者満足度において、最高評価となる「とても満足」とする獲得比率が6年連続、No.1となっています。こちらもぜひ登録しておきたいASPです。
・女性向け広告はもちろん、独自案件も多数あり
・afbは6年連続満足度1位の信頼のおけるASP
※登録審査は3分でカンタンに完了できます。
物販アフィリエイトなら「もしもアフィリエイト 」がおすすめ
収益化を目的としてアフィリエイトを始めるならもしもアフィリエイト の”物販アフィリエイト”がおすすめです。
Amazonアソシエイトでは銀行振り込み時に5000円に到達するまで換金できず、振り込み時には手数料(300円)が差し引かれるというデメリットもありますが、もしもでは1000円以上から換金でき、支払手数料は無料です。
もしもアフィリエイトをおすすめする理由は下記3点あります。
2020年3月より、Amazonアソシエイト審査が「3件販売ノルマ」を達成しないと審査ができないように変更されています。
もしもアフィリエイトでは、Amazonアソシエイトと報酬額が同じなのにも関わらず、ノルマも一切なく、審査も通りやすいです。
もしもアフィリエイトでは「Amazon、楽天市場、Yahoo！ショッピング」とメインの物販アフィリエイトと提携でき、一括でまとめられます。
「Amazon、楽天市場、Yahoo！ショッピング」は多くの人が利用しているので、売るためのハードルが低いので、初心者でも挑戦しやすいジャンルです。
このようなリンクを見かけたことがある方も多いのではないでしょうか。
↓
商品名と一緒にAmazon、楽天市場、Yahoo！ショッピングなどのショッピングサイトへのリンクがあります。
「サムネイル＆商品名＆通販サイト」のボタンがバランスよく配置されたリンクはもしも「プラングイン」で作成されています。こちらのリンクも「もしもアフィリエイト」では数秒で作成でできるのが魅力です。
Amazon、楽天市場、Yahoo！はそれぞれターゲット層が異なりますので、上手く使い分けて、分散させることがポイントになります。
登録はこちらから
・もしもなら「1000円から換金」が可能
・支払い手数料が無料
もしもアフィリエイトは記事の投稿数も比較少なめでも審査は通りやすいので、これから本格的にブログでアフィリエイト を始める初心者の方はぜひ登録しておきたいASPです。
他にも「ブログカスタマイズ方法」をたくさん紹介しています。
ココナラならブログデザインの依頼もできる！
WEBデザインに自信が無い方はココナラでWEBデザイン代行を依頼することもひとつの選択肢としてありです。
ココナラ（coconara・kokonara）とは、自分のスキルを販売できるサービスです。
人気女優の吉岡里帆さんがCMで起用され目を引いた方も多いのではないでしょうか。
知識・スキル・経験を売り買いできるフリーマーケットとしては最も人気で有名なサービスになります。
たとえはWEBデザインを依頼する場合には数千円程度で対応してくれる方も多くいます。
やり取りは匿名で可能で、決済もサイト上でできるので安全に利用することができます。
私も実はココナラで「はてなブログのWEBデザイン代行」「登山の提案」「Excel代行」の販売も行っており、それぞれの項目で販売実績もあります。
ココナラで「redo」で検索して頂ければ見つかるかと思います。
過去には、企業の方からの依頼もあり、はてなブログのWEBデザインの代行対応をしたこともあります。
実際に利用してみて、一度の依頼で数時間程度で完了した依頼も多く、数千円の利益になるので、とても気軽にできました。
一方で、依頼は様々で自分が対応できる枠を超えたような依頼もありました。でもこの場合は事前の見積もり段階でお断りすることも可能なので、本当に気軽にスキルを売買できるのでおすすめなスキルマーケットです。
例えばブログのデザインを整えるのに自分では自信が無い方はココナラで依頼してみるのもおすすめです。
もしくは自分の得意なスキルを販売することもできるので、気軽に副業の一環として初めてみましょう。
まとめ
・SEO対策として、グローバルメニューを追加してみましょう。
・レイアウトを制したければ「HTML」「デザインCSS」を覚えましょう。
・お手軽に「グローバルメニュー」を設置したい方は本記事を参考に。
・はてなブログProの方は携帯での設定も可能です。無料はPCのみ。
