コピペOK！！はてなブログのURLを貼り付けるだけの画面下固定メニュー(スマホ)

参考にしたサイト
設置方法
- 手順１
- 手順２
補足
- 補足１
補足２
終わりに

どうも。

MATCHゃです。

今回は、はてなブログでヘッダーにメニューをスマホの画面下に固定する方法をご紹介します。

f:id:tansanblog:20180906003803j:plain

このような感じですね。

ブックマークを押すと、そのページのブックマーク追加ページへ。

読者登録で登録画面へ。という感じです。

参考にしたサイト

english-apple-diy.hatenablog.com

id:awa様の固定メニューと僕のブログの相性が悪く・・・

おそらく、Minimalismのデザインテーマと相性が悪いのかな？

カテゴリ―のトグルメニューが開かなかったり、トップページに飛ばなかったりとしたので、思い切って全てのメニューを別ページにジャンプさせることにしました。

ブックマークもjavascriptを使っての変更とさせて頂きました。

設置方法

手順１

この下のコードを

デザイン→スマートフォン→ヘッダ→タイトル下

タイトル下の中に貼り付けます。

ーーーーここから↓ーーーー

<div id="menu">
<div class="btn-area">

<a href="javascript:void window.open('http://b.hatena.ne.jp/entry/'+location.href);" class="share-icon-hatena" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br>ブックマーク</a>
<a href="http://blog.hatena.ne.jp/hatenasupport/※１※/subscribe" onclick="window.open('http://blog.hatena.ne.jp/hatenasupport/※１※/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i><br>読者登録</a>
<a href="※２※" onclick="window.open('※２※', '', 'width=500,height=400'); return false;"><i class="blogicon-twitter lg"></i><br>Twitter</a>
<a href="※３※" onclick="window.open('※３※', '', 'width=500,height=400'); return false;"><i class="blogicon-group lg"></i><br>プライバシ</a>
<a href="※４※" onclick="window.open('※４※', '', 'width=500,height=400'); return false;"><i class="blogicon-home lg"></i><br>ホーム</a>

</div>
<style type="text/css">
#top-editarea .section {
width:100%;
}
#menu{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 10;
}
.toggle-content{
display: none;
position: fixed;
bottom: 50px;
background: white;
width: 100%;
}
.toggle-content{
padding: 15px 10px 10px 10px;
}
.toggle-content{
font-size: 80%;
}
.toggle-content a{
color: #444;
font-weight: bold;
}
.toggle-content .urllist-image{
width: 50px;
height: 50px;
}
.toggle-content .urllist-item{
padding: 0;
margin: 0;
min-height: 29px;
}
.toggle-content .urllist-item::before{
display: none;
}
.osusume{
list-style-type: none;
margin: 0;
width: 100%;
padding-left: 0;
}
.osusume li{
border-top: 1px solid #333;/*カテゴリのリスト間の線の色*/
}
.osusume a{
display: block;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background: #444;/*カテゴリの背景色*/
color: #fff;/*カテゴリの文字色*/
font-size: 76%;
}
.category-list{
list-style-type: none;
margin: 0;
width: 100%;
padding-left: 0;
}
.category-list li{

}
.category-list a{
display: block;
float: left;
width: calc(50% - 2px);
height: 40px;
line-height: 40px;
text-align: center;
background: #444;/*カテゴリの背景色*/
color: #fff;/*カテゴリの文字色*/
font-size: 80%;
border: 1px solid #333;/*カテゴリリスト間の線の色*/
}
.btn-area a,
.btn-area span{
display: block;
float: left;
width: 20%;
height: 50px;
line-height: 25px;
text-align: center;
font-size: 70%;
background: #f0f0f0;/*メニュー部分の背景色*/
color: #444;/*メニュー部分の文字色*/
border-top: 2px solid #ccc;/* ボーダー上部 */
border-bottom: 2px solid #ccc;/* ボーダー下部 */
box-sizing: border-box;
opacity: 0.8;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var contentArea = $(".toggle-content");
$(".toggle-btn").click(function(){
var index = $(this).index()-2;
var clickedArea = $(contentArea).eq(index);
if($(clickedArea).css('display') !='none'){
$(contentArea).slideUp();
}else{
$(contentArea).slideUp();
$(clickedArea).slideDown();
};
});
$(".back-btn").click(function(){
$("html,body").animate({scrollTop:0},"fast");
});
});
</script>

ーーーーここまで↑ーーーー

手順２

※〇※内を消去してURLを張り替えます。

※１※

https://以下のサイトのURLを貼り付けます。

　例）「https://www.tasan.tokyo」だったら「www.tasan.tokyo」のみ。

※２※

TwitterのURLを貼り付ける。（https://含める）

※３※

プライバシーポリシーの固定ページを貼り付ける（https://含める）

※４※

サイトのホームのURLを貼り付ける（https://含める）

完成！！

補足

補足１

上から４行目の↓のコードは、上から順に左詰めに表示されます。好きな順番で入れ替えて使ってください（<a hrefというのがリストの頭です）。

補足２

<a href="※２※" onclick="window.open('※２※', '', 'width=500,height=400'); return false;"><i class="blogicon-twitter lg"></i><br>Twitter</a>

このコードについて説明しますと、※２※のURLに飛ぶのは分かりましたよね。

<a href="※２※" onclick="window.open('※２※', '', 'width=500,height=400'); return false;"><i class="blogicon-twitter lg"></i><br>Twitter</a>

↑のアンダーラインが引っ張ってあるところはアイコンを示しています。

このコードを変える事でアイコンも変えられます。

orefolder-sample.hatenablog.com

orefolder 様の記事を参考に変えられるとなお良いかもしれないですね。

<a href="※２※" onclick="window.open('※２※', '', 'width=500,height=400'); return false;"><i class="blogicon-twitter lg"></i><br>Twitter</a>

↑のアンダーラインは実際にメニューに表示される文字です。アイコンやURLにあわせてかえましょう。

終わりに

こちらの記事をかなり参考にさせて頂きました。

english-apple-diy.hatenablog.com

さらなるカスタマイズは是非、id:awa様のサイトで・・・・

それでは。

さいなら―。

はてブやtwitterでの拡散や読者登録

よろしくおねがいしますm(__)m

MATCHゃ雑記通信部

主に炭酸ジュースについてのレビューをするブログ。でもその他なんでも記事にします。そう。雑記ブログだからさ。

コピペOK！！はてなブログのURLを貼り付けるだけの画面下固定メニュー(スマホ)

参考にしたサイト

設置方法

手順１

手順２

補足

補足１

補足２

終わりに

MATCHゃ

>Twitter

>お問い合わせ

>プライバシーポリシー