おやこです。
はてなブログproにしてみました
もともとは「ブログでお小遣い稼ぎなんてホントにできるの？」を検証するために日々アップしていたこのブログ。
ただ、人目につくような記事を書くワケでもなく、アクセスなんて１日いいとこ４０とか晒すのも恥ずかしいデキですが（来てくれている方超感謝！）
なんだかたくさん書いているうちに「もう収支とかどうでもいいからもっといろんな人にいろんな記事を読んでほしい」という思いが強くなり、、、
「スマホ表示のカスタマイズができるようにproにしちゃえ！」という半ば勢いの決断に至ったワケです。
背中を押してくれたのはしゅうさんの記事。いつもありがとうございます。
超初心者がスマホ向けにカテゴリーを表示する方法
グローバルメニューというそうですね。
勢いでproにしたはいいけど、htmlもcssもわかりませーん。というワケでいろんな記事を渡り歩いてコピペさせていただき、やっと、やっとこさ、それっぽいのができました。これ↓
まぁ、出来栄えは一旦置いといて、超初心者でも一応形になりました。
ってことで、誰かのお役に立てばと思いおさらいしておきます。
スマホ向けデザインの変更場所にたどり着く
ダッシュボードの「デザイン」をクリック
１）上の方にひっそりといるスマホマークをクリック。
２）「ベッダ」をクリック。（ヘッド＝頭 だね。ブログの上の部分の設定）
３）「スマートフォン用にHTMLを設定する」をクリック。
（でた！HTML。この言葉の意味はわからないまま突入だ！）
４）入力フォームみたいな部分をクリック。
すると、ビョーンとコードを入力する画面が飛び出してくるから、ここにスマホ向けカテゴリー表示のためのコードを入力するワケだけど、、、
もちろんそんなの書けるワケもなく、、、そう、コピペです！
なので、前もってメモ帳かなんかに（もちろんパソコンのですよ！）いろんな人の記事を参考に自分用に書き直したりしておくといいでしょう。
僕のまんまでよければ以下のコードをコピペして下さい。(１行バージョンです)
ただ、前半のリンク先アドレス（<li><a href= のあと）だけは自分のブログに変えてね！
※次の項目でアドレスの調べ方も書きます
<!-----HTML-----><nav class="g_nav"><ul><li><a href="http://oyaco-blog.hatenablog.com/archive/category/ランチ">lunch</a></li><li><a href="http://oyaco-blog.hatenablog.com/archive/category/カフェ">cafe</a></li><li><a href="http://oyaco-blog.hatenablog.com/archive/category/ハワイ">HAWAII</a></li><li><a href="http://oyaco-blog.hatenablog.com/archive/category/家族旅行">旅行</a></li><li><a href="http://oyaco-blog.hatenablog.com/archive/category/投資">投資</a></li></ul></nav><!-----CSS-----><style>.g_nav ul{padding:0;display:table;table-layout: fixed;width:100%;}.g_nav li{display:table-cell;text-align:center;color:#528e8f;background: #d6edee;background: -moz-linear-gradient(top, #d6edee 0%, #b4d3d4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6edee), color-stop(100%,#b4d3d4));background: -webkit-linear-gradient(top, #d6edee 0%,#b4d3d4 100%);background: -o-linear-gradient(top, #d6edee 0%,#b4d3d4 100%);background: -ms-linear-gradient(top, #d6edee 0%,#b4d3d4 100%);background: linear-gradient(to bottom, #d6edee 0%,#b4d3d4 100%);}.g_nav li:not(:last-child){border-right:1px solid #b4d3d4;}.g_nav li a{padding:5px 0;display:block;color:#528e8f;text-decoration:none;}.g_nav li:active{background: #b4d3d4;background: -moz-linear-gradient(top, #b4d3d4 0%, #d6edee 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6edee), color-stop(100%,#b4d3d4))background: -webkit-linear-gradient(top, #b4d3d4 0%,#d6edee 100%);background: -o-linear-gradient(top, #b4d3d4 0%,#d6edee 100%);background: -ms-linear-gradient(top, #b4d3d4 0%,#d6edee 100%);background: linear-gradient(to bottom, #b4d3d4 0%,#d6edee 100%);}</style>
カテゴリのアドレスの調べ方
そんなことも知らんのか！ええ、知りません。でも安心して下さい。
こんなアナログな方法でわかりますよ。
まず、自分のブログにアクセスします。
１）カテゴリをクリックします。
カテゴリの記事だけが表示される画面になります。
２）アドレスバーをクリックします、これがそのアドレスです！
んで、さっきのコードのどこをどうするのかというと、こんな感じ↓
なんとかなりそうですか？笑
僕と同じ超初心者のみなさん（読んでくれるかわからんけど）頑張ってください。
スペシャルサンクス
このスマホ向けカテゴリ表示をするにあたって、助けてくれた素晴らしい記事はこちらの方々。本当にありがとうございました、今後ともよろしくおねがいします。
あと、どの記事か忘れてしまったけど、幅100%にしているはずなのになぜか左側にスペースができてしまった時に「padding:0; を追記するといいよ」と教えてくださった記事主の方もありがとうございました！！！
