ブログのカスタマイズしたい！
けど勉強したことないし、見ただけで眩暈がしそう！
筆者もそうでしたが、最近独自に解読してきたHTMLやCSSの読み方、編集で知識がなくてもできた方法。
今回は【メニューバー】を編集しながらご紹介しようと思います。
前書き
ブログを運営していく上でブログのカスタマイズは一度は憧れるもの。
しかし、HTMLやCSS、挙句にはJava Scriptなど、文系卒には乙と言わざるえない呪文のような言語を体得しないといけません。
ただブログを徘徊していると「神か！？」と思わざるをえない「コピペ」しても良いと言ってくださっているブロガーさんたちがいます。
筆者も最初はコピペに便乗しまくりでしたが、最近は自分でも色の変更やメニューバーの位置などはやってみたいと思いました。
そこでコードを眺めているうちに気づいた筆者の見解と試行錯誤の結果をシェアしたいと思います。
＊プログラミングの知識0がやっている編集なのでコピペは自己責任でお願いします。
現在のスマホ版ページ
メニューバーが上にあります。
メニューバーが下にある人はいくらか見てきたのですがどうにか上にしたかったのが筆者。
これを無知識が乗り越えてたどり着くまでの過程をつらつら語らせてもらいます。
参考記事：メニューバー
まずは
「画面下にメニューバー置くコードがあれば上に持ってこれるのでは？」
と思って調べたら一瞬。
Yukihyさんという方がのブログを参考にされてる方が多かったです。
＊以下の文書はYukihyさんのコードを見ている前提で話を進めていきます。
筆者もこれに思いっきり目を通しましたが最初の１０分くらいは目がお魚みたいにうろうろして終わり。
うっ、、ウゥゥ、、、
もう諦めかけました、無理ぽ。
しかし一つ見つけたのがこれ。
<style type="text/css">
#menu{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 10;
}
真ん中よりちょっと上の部分です。
「bottom 0」て書いてる。
ここで英語の問題です。
bottomの意味は？→「底」
「底が０で一番下にある」
これひっくり返すと
「頂点が０で一番上にある」
てことじゃないですか？
試行錯誤ターイム
ひとまずbottm 0をtop 0とかにしてみた。
つまり
<style type="text/css">
#menu{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 10;
}
すると、、、上に来たー！！
すげー！！
もっと難しいかなと思ってたらたった一つの作業で自分がやりたいことの70%くらいできちゃいました。
これハマるかも、、、笑
アイコンも変えられるの？
参考記事：アイコンWebフォント
ここではshun9167さんの記事を参考させていただいています。
まずはアイコンがコードとしてあるのかを検証したかったからです。
上記リンクの通りあるのです。
はてなブロガーさんはアイコンが使えるのです！！
（パチパチーー：拍手）
では肝心のコードはどーこだ？
ここでYukihyさんのコードに戻ると、、、
おっ！？
<div class="btn-area">
<a class="home-btn" href="homeボタンのURL"><i class="blogicon-home lg"></i><br>HOME</a>
<span class="toggle-btn"><i class="blogicon-good lg"></i><br>人気記事</span>
<span class="toggle-btn"><i class="blogicon-list lg"></i><br>カテゴリ</span>
<span class="back-btn"><i class="blogicon-chevron-up lg"></i><br>Top</span>
</div><!--btn-area-->
<div style="clear: both;"></div>
</div>
これ上から３つ目くらいの塊の中にあります。
しろかい！さんのブログを見た方ならわかりますが
「blogicon」てついてるのがおそらくアイコンのコードなんだろなと思って探したら出てきました。
ではではこれを変えていきましょ。
<div class="btn-area">
<a class="home-btn" href="homeボタンのURL"><i class="blogicon-home lg"></i><br>HOME</a>
<span class="toggle-btn"><i class="blogicon-user lg"></i><br>人気記事</span>
<span class="toggle-btn"><i class="blogicon-list lg"></i><br>カテゴリ</span>
<span class="back-btn"><i class="blogicon-mail lg"></i><br>Top</span>
</div><!--btn-area-->
<div style="clear: both;"></div>
</div>
これで筆者がやりたかった「Profile」と「お問い合わせ」のアイコン選択できました！
アイコン変えたけどリンクの貼り方は？
次に気になったのがアイコン変えたけど押しても、人気記事とかtopの文字残ってるし、リンクはれるの？
と気になりました。
すると同じコード内にあるもの発見。
「<a class="home-btn" href="homeボタンのURL"><i class="blogicon-home lg"></i><br>HOME</a>」
よくわかりませんが「a class」を使えばURLをはったらリンクになるのではと思いました。
なのでやってみた。
<div class="btn-area">
<a class="home-btn" href="http://www.mein-pompan.com/"><i class="blogicon-home lg"></i><br>Home</a>
<a class="toggle-btn" href="Profileのリンク"><i class="blogicon-user lg"></i><br>Profile</a>
<span class="toggle-btn"><i class="blogicon-list lg"></i><br>Category</span>
<a class="back-btn" href="お問い合わせフォームのURL"><i class="blogicon-mail lg"></i><br>Message</a>
これでいけるんかなー？
無理なんかなー、どうせ世界なんて文系ブロガーに不条理な世界なんや、、、
おっ！？
おおっ！！！？
いけとるやないか！！（関西弁）
こりゃ行けるとこまでやったろ！！
色を変えたい＋透明感出したい！
どうせなら自分のオリジナル感を出したいのでちょっと色とかかえてみよー。
あとは透明感とか出されへんのかな？
と思ってしまいました。
欲深いブロガーKitarouでございます（悪）
まずは色の変え方はYukihyさんが記載してくれてます。
コードの最後の方。
.btn-area span{
display: block;
float: left;
width: 25%;
height: 50px;
line-height: 25px;
text-align: center;
font-size: 70%;
background: #f0f0f0;/*メニュー部分の背景色*/
color: #444;/*メニュー部分の文字色*/
}
これを
次のリンクで簡単に編集できます！
参考記事：透明感出す
スーさんという方のブログで見つけたのでシェアさせていただきます。
「opacity: 0.8;/*透過処理*/」いう部分が透明感を出すコードのようです。
実際にやってみた。
.btn-area span{
display: block;
float: left;
width: 25%;
height: 50px;
top:3px;
bottom:0px;
line-height: 25px;
text-align: center;
font-size: 85%;
background: #000;/*メニュー部分の背景色*/
color: #fff;/*メニュー部分の文字色*/
opacity: 0.8 ;
}
これで最初に作った画面上のメニューバーが作れます！
最後に
今回、サイトをいくつか紹介させていただきましたが、不都合等ございましご連絡ください。
また今回わかったこととして全然コード知らなくてもなんとかなるんだなということがわかりました！
今後もHTMLとCSS、後々にはJava Scriptもやっていきたいと思います。
よろしくお願いします。
ではでは
Kitarou