「はてな最強カスタマイズ」下から出てくるOSチックなスクロールメニューを実装しよう

ご無沙汰しております。

実は先日、有難いことにメニューのカスタマイズに関してこんなご質問をいただきまして、、、。

投稿してくださったのはturutate様。(←ちゃんと許可とってます汗)

以下内容抜粋。

oyomiyo 様

はじめまして、tsurutateと申します。突然のメールで失礼します。

ブログでPLANEのテンプレートを使わせて頂いています。そしてカスタマイズの記事は笑いながらいつも参考にさせて頂いています。

今回メールしましたのはPLANEでカテゴリのカスタマイズを下記のサイトのようにしたいのですが可能でしょうか?

[リンク]

(縦にスクロールしてスマホ画面の下に選択画面が出てくるやつです。)

HTMLやCSSへの理解がまだまだ低く、色々自分で調べたのですがうまくいかなかったのでご教授お願いします。

シンプルにサイドスクロールのカテゴリを紹介されていたので恐縮ですがよろしくお願いします。

要はこんなヤツが作りたいということですね。

f:id:oyomiyo:20181029142322j:plain

なるほどなるほど。

それにしても、turutate様に限らず、カスタマイズ記事を見てくださる方が増えるにつれて、メールでのカスタマイズ相談も増えてきています。そのような一言が自分のスキルアップにもつながっているような気がします。

本当にうれしい限りです。

こんなくだらないブログ「オヨミヨ」をこんなにも評価してくださるturutate様に一言いわせていただきたい。

 

私の名前はオヨミヨではなくタクだと。(そっち!?)

し、し、、、失礼。汗

 

つい口を滑らせてしまった、、、。

 

是非今のはなかったことにして頂きたい。

それにしても、お褒めの言葉まで頂きありがたい話です。

ワタクシが作ったテーマ「PLANE」を使ってくださっているうえに、カスタマイズに記事も目を通していただいているようです。

しかも「笑いながら参考にしてます」なんて言ってくださり本当にうれしいです。この一言がめちゃくちゃ励みになります。

このお褒めをオカズに白飯5杯は余裕です。

だって皆さんからのフィードバックがないと、カスタマイズ記事ごときでアホみたいにボケる変人としか思われてないのではないかと夜な夜な不安に駆られることがありますから、、、。

 

また、私のスライドメニューの記事を「シンプル」と評価して頂けたことは本当に驚きです。

誰でもカスタマイズしやすく使いやすいシンプルなものを紹介するというのは、公言していないにしろ常に意識してやっていることだからです。

このお褒めをオカズに、、、はもういいか。

もちろん、スライドメニューを推しまくっているワタクシにスクロールメニューを強要する勇気にも驚きです。(早くも失礼×2)

 

turutate様怒ってないかな、、、、。

 

「不安になるなら言うな」という正論はさておき、感謝を述べたいのはワタクシの方なのであります。

こんなカスタマイズがしたいとわざわざ意見を述べてくださったにも関わらず、「恐縮です」なんてそんなそんな、、、。

せっかく投稿してくださった方をいイジりまくる私の方が大変恐縮です。

それではさっそくturutate様、、、ではなくメニューの方をしっかりイジっていきましょう。(後で猛省しとく)

以下注意点です。

念のためにバックアップはとっておいてください。

またこの記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご理解ください。

PLAIN - テーマ ストア

スクロールメニューの外観

タイトルでは一応下から出てくるスクロールメニューと書いてますが、見た目としてはこんな感じになります。

f:id:oyomiyo:20181027131404g:plain

なんていうんでしょうこれ(笑)

よく連絡フォームとかで、性別を選択してくださいとかの時に出てくるやつです。

ちなみにこれはOSでの表示例ですから、Apple製品を普段使わない人からすると馴染みがないのかもしれませんね。ここら辺良く分かってないので心配ではありますが、とりあえずこんなメニューを作りましょうということです。

カスタマイズ方法

カスタマイズは、デザイン設定のタイトル下部分で行います。

f:id:oyomiyo:20180909220240p:plain

赤枠の部分に以下のコードをコピペしてください。

CSS

<div id="drop_down">
<form name="drop_down_menu">
    <select name="menu_inner" onchange="dd()">
        <option value="">メニュー</option>
        <option value="">メニュー1</option>
        <option value="">メニュー2</option>
        <option value="">メニュー3</option>
        <option value="">メニュー4</option>
        <option value="">メニュー5</option>
    </select>
</form>
</div>

<style type="text/css">
#drop_down:after { /*アイコン*/
    position: absolute;
    content: '\f003';
    font-family: blogicon;
    padding-right: 15px;
    font-size: 20px;
    color:;
    right: 0;
    top: 0;
}

#drop_down form {
    position:relative;
    margin:3px;
    overflow: hidden;
    border:1px solid #333;
}

#drop_down select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:none;
    border-radius:0;
    display:block;
    width:100%;
    padding: 0.5em 1em;
    margin:0;
    border:0;
    outline:none;
    font-size:15px;
    line-height:1.5;
}
</style>

<script type="text/javascript">
function dd() {
    var browser = document.drop_down_menu.menu_inner.value;
    location.href = browser
}
</script>

長ったらしいコード失礼します。

htmlとcss、javascriptを全部まとめて書いてあるので長くなってます。実際いじるのは少しの部分ですので簡単です。

スマホ表示の時だけメニューを表示する方法もあとで紹介するのでご安心を。

まずは飛び先のURLを入れる方法から説明していきますね。

飛び先のURLを設定する

先程のコードの中の以下の部分がスクロールメニューのコードです。 

<div id="drop_down">
<form name="drop_down_menu">
    <select name="menu_inner" onchange="dd()">
        <option value="">メニュー</option>
        <option value="">メニュー1</option>
        <option value="">メニュー2</option>
        <option value="">メニュー3</option>
        <option value="">メニュー4</option>
        <option value="">メニュー5</option>
    </select>
</form>
</div>

この中のvalue=""の中にURLを入れてあげれば大丈夫です。

飛び先のURLに関してはスライドメニュー紹介の時も説明したと思いますが、カテゴリー別ページのトップページを設定しておけば後々楽だと思います。

<div id="drop_down">
<form name="drop_down_menu">
    <select name="menu_inner" onchange="dd()">
        <option value="">メニュー</option>
        <option value="http://oyomiyo.hatenablog.com/archive/category/%E3%82%BF%E3%82%B0%EF%BC%91">メニュー1</option>
        <option value="">メニュー2</option>
        <option value="">メニュー3</option>
        <option value="">メニュー4</option>
        <option value="">メニュー5</option>
    </select>
</form>
</div>

言い忘れてましたが、一番上のメニュー(番号振ってないやつ)には飛び先のURLを入れる必要はありませんからね。

この要領で全部設定しちゃってください。

アイコンを変更する

メニューのアイコンも変更することができます。

実はこのアイコン、はてなの純正アイコンとして知られているアイコンを使用しています。

知ってる人は知ってると思いますが、知らない人は知らないと思います。(超当たり前)

そもそもはてな側がこんなアイコンがあるよと公言してくれてさえいないですので、知名度もかなり低めです。

でもこれを活用してあげれば、新たにアイコンフォント(Font Awesomeとか)を読み込んであげる必要はないのでヒジョーに楽なのです。使えるものは使いましょう。

冒頭のコードのうちアイコンのコードはこの部分です。

#drop_down:after { /*アイコン*/
    position: absolute;
    content: '\f003';
    font-family: blogicon;
    padding-right: 15px;
    font-size: 20px;
    color:;
    right: 0;
    top: 0;
}

赤色の部分を書き換えてコードを変更します。

ただ、はてなの純正アイコンは種類か少ないので、これ以外にメニューのアイコンとして使えるのは以下くらいだと思います。

f:id:oyomiyo:20181029142414j:plain
#drop_down:after { /*アイコン*/
    position: absolute;
    content: '\f008';
    font-family: blogicon;
    padding-right: 17px;
    font-size: 23px;
    opacity: 0.9;
    right: 0;
    top: 0;
}

余白調節なども一応しておきましたのでこのコードを使ってください。

全種類見たい方はこちらから。

はてなブログで使えるアイコンフォント一覧 2015/12/06 版 - MoonNote

デザインを変更する

はてな標準機能のカスタマイズであれば詳しくやりたいところですが、今回は皆さまにお任せします。

コード自体はこの部分になります。

#drop_down form {
    position:relative;
    margin:3px;
    overflow: hidden;
    border:1px solid #333;
}

#drop_down select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:none;
    border-radius:0;
    display:block;
    width:100%;
    padding: 0.5em 1em;
    margin:0;
    border:0;
    outline:none;
    font-size:15px;
    line-height:1.5;
}

皆様のような天才であれば、天才的なデザインのメニューが出来上がること間違いなしです。(超都合いい奴あるある)

頑張れみんな。頑張れじぶん。

次はスマホ表示の時のみこのスクロールメニューを表示する方法です。

スマホ表示の場合にのみ表示したい場合

PC表示の時にこれを使うと、異様に間延びしたメニューになってしまうため避けたほうがいいでしょう。

このメニューで沢山のスペースを使うくらいなら、クリック一つで目的のページに飛べるメニュー(スライドメニューとかスライドメニューとか、それからスライドメニューとか)を使った方がユーザビリティ的にもいいでしょう。

ちなみに私のサイトはユーザビリティよりもウーザビリティ重視です。(いつもウザくてごめんね)

なんで使いどころとしては、スマホ表示の時にスライドメニューの代わりにしたり、トップページの上の方にボタンで表示したりするとなかなかいいんじゃないかと思います。

スマホ表示の時のみこのメニューにしたい人は以下のコードが必要です。

CSS

<style type="text/css">

@media only screen and (max-width: 599px) {
    /*既存のメニューをここで非表示に*/ {
    display: none;
}}

@media only screen and (min-width: 600px) {
    #drop_down {
    display: none;
}}

</style>

例えばこんな感じとか。

ちなみに「PLAIN」ユーザーで私のスライドメニューを使ってくださっている人は以下のコードを入れておけば完璧です。

CSS

<style type="text/css">

@media only screen and (max-width: 599px) {
    #slide-nav {
    display: none;
}}

@media only screen and (min-width: 600px) {
    #drop_down {
    display: none;
}}

</style>

ただこれらのコードを冒頭に載せたのコードの最後に持ってきてしまうと、メニューのスタイルをすべて読み込んでから表示非表示を切り替えることになります。

そのため一瞬ではあっても2つのメニューが同時に表示されてしまう可能性があります。そのため冒頭のコードの中に入れ込むとすれば、以下の位置に入れるのが最善でしょう。

CSS

<div id="drop_down">
<form name="drop_down_menu">
    <select name="menu_inner" onchange="dd()">
        <option value="">メニュー</option>
        <option value="">メニュー1</option>
        <option value="">メニュー2</option>
        <option value="">メニュー3</option>
        <option value="">メニュー4</option>
        <option value="">メニュー5</option>
    </select>
</form>
</div>

<style type="text/css">

@media only screen and (max-width: 599px) {
    /*既存のメニューをここで非表示に*/ {
    display: none;
}}

@media only screen and (min-width: 600px) {
    #drop_down {
    display: none;
}}

#drop_down:after { /*アイコン*/
    position: absolute;
    content: '\f003';
    font-family: blogicon;
    padding-right: 15px;
    font-size: 20px;
    color:;
    right: 0;
    top: 0;
}

#drop_down form {
    position:relative;
    margin:3px;
    overflow: hidden;
    border:1px solid #333;
}

#drop_down select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:none;
    border-radius:0;
    display:block;
    width:100%;
    padding: 0.5em 1em;
    margin:0;
    border:0;
    outline:none;
    font-size:15px;
    line-height:1.5;
}
</style>

<script type="text/javascript">
function dd() {
    var browser = document.drop_down_menu.menu_inner.value;
    location.href = browser
}
</script>

オーゲイ?

メディアクエリの使い方が分かる人は参考にされたし。

最後に

このメニュー、流行ればなかなか面白いと思いますけどね~。どうなんでしょう。カスタマイズ自体も簡単に出来ますし、OS毎にそれぞれの味が出ていいのではないでしょうか?

自分はiOS機器ばっかりなのでその他の表示の場合どうなるのかが気になるところではあります、もし何か不具合があれば教えてください。

まあ、冒頭でイジリまくったturutate様が怒ってないかどうかの方が気になるというのは言うまでもないのですが。

でもでもでも。一応許可はとっておりますのですよ。

以下私の文面。

tsurutate様

早速作成しております。

ひとつ確認させて頂きたいですが、記事の中でtsurutate様の名前を出して、少しだけ(たぶん)イジってもよろしいでしょうか?

もし嫌でしたら違う名前を使うか、やめるかします。

毎回ぶっ飛んだ記事を書きたいもので、、、宜しければで大丈夫です。

いや全然少しだけやないやんけ。

はい。反省しております。

以後(たぶん)気を付けます。

アホみたいな理由にもかかわらず、全然オッケーですと返信してくださったturutate様は人格者のようです。

今日もワタクシは皆さんのおかげで生きてます、、、、。

 

てなわけで今回はリクエストにお答えした記事でした、残念ながらリクエストにお答えできていない方も中にはおられます。まあ時間さえあればいつでも、、

すみませんでした。

なるべく期待に副えるように頑張ります。

ではまた。

 

あ、turutate様は強制ポチですからね。笑笑笑