やっさんです。
前回のカスタマイズまとめ記事(PC版)にはたくさんのスターとブックマークありがとうございました(*´∇｀*)
はてなブログ1年目の初心者が１０日かけて行ったカスタマイズまとめ – やっさんたっさんの子育て隊
ブックマークも3つつけばかなりいい方、バズとかは無縁の細々とやっているブログ主としましてはすごーく頑張って書いた記事にたくさんブクマがつくとめちゃめちゃ嬉しいです！！
カラースターも頂いちゃったりして小躍りしております(/・ω・)/
ブクマのコメントって返事したいときに困りますね；
たまに自分でブックマークしてコメントするのですが何回もできないしそれでは１人１人にコメント返せないですからね、、、
嬉しくなってお一人お一人に返事したかったのですが我慢しました。
コメント返事くれてもいいよって方は記事下のコメント欄もぜひご活用ください！（返事いらないかもしれませんがｗ）
前置きが長くなってしまいましたがお次はスマホカスタマイズの記事をまとめていきます！！！
また例によって長くなってしまいそうですが頑張ってまとめていきますのでお付き合いください。
初心者のカスタマイズですのでコード間違いなどあるかもしれませんがもしよろしければ発見の際教えて頂けると非常に助かります；
また一部PC版と内容が重複する部分が出てきますがご了承ください。
Contents
カスタマイズの前に
これはPCと同様スマホ版でも必須です。
テストブログで先にカスタマイズを試すという方法をやりだしたら前のコピペでメモ帳に残して、という方法には戻れません！
www.naenote.net
レスポンシブデザインについて
やっさんはPCの方ではデザインテーマ「Minimal Green」を使用しています。
このデザインはレスポンシブデザイン対応なので設定すればPCと同じデザイン設定でスマホにも表示させることが可能です。
最初やっさんもレスポンシブデザインにしようと思っていたのですが、ある問題がありまして；
スマホをレスポンシブデザインにすると、トップのヘッダー画像がやたら拡大されてしまうんです(-.-)
ご覧のような感じになります。
実は以前のデザインの時にもこの問題で困っていたのでおそらくやっさんのやり方が悪いんだと思います。
でも何が悪いのかわからないし全然直し方がわからない( ;∀;)！
ということでスマホの方は１からデザインを作り直すことにしました。
フォントサイズを決める
こちらもPCと重複しますが書いておきます。
こちらの記事で詳しく書かれていました。
ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう
PC、スマホのフォントサイズの変え方はこちらを参考にしました。
意外と知らない？はてなブログで絶対やるべき4つのカスタマイズ – Appism
やっさんはPC、スマホどちらも16pxにしています。
テーマカラーを決める
テーマカラーもPCと同じにしています。
- メインカラー
- 次にベースカラー。
- アクセントカラー。
- 日付、サイドバータイトル文字
- リンク文字のカーソルを合わせた時の色
- リンク訪問済みの色
全体のデザイン
スマホ版はまずshun(id:shun_prog0929)さんのブログ「いつ俺」の下記記事のデザインコードを使わせていただきました。
はてなブログのスマホデザインを一瞬でおしゃれにカスタマイズする方法 – いつ俺〜いつから俺ができないと錯覚していた？〜
タイトルの通りこちらのコードを使わせて頂くと一気にデザインがおしゃれになります！！ありがたい！！
やっさんはこちらのデザインを元に変更を加えていきました。
トップ画像
トップのヘッダー画像はPC版の方の画像を少し変えて作りました。
大きさは350×100pxで作っています。
記事中見出し、リスト、強調文字
これらはすべてPCと同様のデザインにしています。
参考記事などはPC版のカスタマイズ記事をご覧ください。
はてなブログ1年目の初心者が１０日かけて行ったカスタマイズまとめ – やっさんたっさんの子育て隊
スマホのカスタマイズはhtml、CSSなど全て同じところに記述していきます。
デザインのスマホマークをクリックするとスマホカスタマイズができるようになります。
①レスポンシブデザインにチェックが入っているといくらやってもデザインが変わらないのでチェックを外す。
②ヘッダをクリック。
タイトル下の「スマートフォン用にHTMLを設定する」にチェックを入れてその下にコードを入れていきました。
やっさんが行ったデザイン変更を下記に記載しておきます。
- 記事中見出し
- 記事中リスト
- list
- list
- list
- 記事中強調太字
記事下シェアボタン、フォローボタン
こちらもPC版と同じデザイン。
記事下に入れたいものは下の写真のように「記事上下のカスタマイズ」の「スマートフォン用にHTMLを設定する」にチェックを入れ、記事下にコードを入れました。
- 記事下シェアボタン
- 記事下フォローボタン
フッタの不要な所を非表示にする。
記事一覧などの下に出てくるフッタ部分。
レスポンシブデザインではサイドバーがそのままフッタに出てきます。
やっさんもPCのサイドバーの項目の一部をフッタに出したいと思っていました。
しかしPCではサイドバーの項目を英語表記にしているのに、なぜかスマホのフッタに出てくる項目が日本語表記になっている！
この写真のような感じになってました。
直し方がわからないし、悩みに悩んで結局これまた１から自分で作ることに；
元の項目を全て非表示に
まずはこちらの記事を参考にして元の項目を全て非表示にしました。
はてなブログのスマートフォン表示から不要な要素を削除する方法 – またろぐ
ちなみに元のデザインコードでヘッダーのグローバルメニューやフッターのリストなどは消してくださっていました。
ヘッダーのグローバルメニューとはここのことです。
フッターのリストは一番下のこれ。
そしてその他に消したものはプロフィールなどの各項目、上へボタン、一番下のダッシュボードやPC版表示、ブログを報告するのボタン。
全て消したら以下の画像のようになります。（テストブログです。）
コードはヘッダのタイトル下に入れました。
プロフィール、検索ボックス、注目記事、ダッシュボード・PCの非表示用コード
肝心のコードは上記ブログを見て頂ければ、、と思うのですが、
項目が分かれていて取捨選択がめんどくさいという方、やっさんと全く同じようにしたいという方のためにやっさんが使ったコードを記載しておきますね。
ただし、ややこしくなるので「いつ俺」のデザインコードを使用していることを前提とし、このコードで記載済みの非表示用コードは載せませんのでご注意ください。
下記コードに記載しているのはこちらの画像の部分のみです！！
<style type="text/css">
/*非表示*/
.hatena-module-title{display:none;}
.profile-wrapper{display:none;}
/*プロフィール*/
.search-box {display: none;}
/*検索ボックス*/
.hatena-module-entries-access-ranking {display:none; }
/*注目記事*/
#footer-menu {display: none;}
/*ダッシュボード・PC*/
.pagetop {
display: none;
}
/*上へ*/
</style>項目を作り直す
まっさらな状態にしてから新たに追加したい項目のコードを入れて行きます。
やっさんが追加した項目はArchive（月別表示）、About（プロフィール）、Follow（読者登録、フォローなど）です。
更に一番下部分にゆきひーさんの紹介してくださっている人気記事、カテゴリなどの入った複合メニューを導入しました。（後に詳述します）
Archive（月別表示）
こちらの記事を参考にしました。
【HTML・CSS】 スマホ版はてなブログで月別アーカイブを表示する – 名誉社畜ブログ
About（プロフィール）
タイトルは以下のコードを記述。
<p class="sidebar-title">ABOUT</p>
肝心のプロフィールの中身のコードの記述方法に関してはPC版でも参考にさせて頂いたこちらの記事がスマホでも非常に参考になりました！！
ブログの下書き画面で書きたいことや載せたい内容を書きなぐりましょう。リンクも貼りましょう。 △こんな感じ 次にHTML編集に切り替えましょう。これをただたださっきのサードバーの欄にコピペするだけ。
画像も引用出来たらいいんですがーーー！
やっさんも同じようにやってみたのでその画像を載せておきますね。
まずはブログの記事作成画面で「見たままモード」でプロフィールを作る。
「HTMLモード」に切り替えて下に出てきたコードをコピーでできあがり！
Follow（読者登録、フォロー）
タイトルとその下に「定期購読はこちらからお願いします。」という文言をいれました。
以下のコードを記述。
<p class="sidebar-title">FOLLOW</p> <p class="sidebar-body">定期購読はこちらからお願いします。</p>
フォローボタンはPC版と同じものを使用しています。
こちらの記事をご覧ください。
【はてブロカスタマイズ】プロフィールを見やすくカスタマイズしてみた – 明日こそ、定時
ちなみにPCの方でも書きましたが、記事下など別の場所に違うデザインのフォローボタンをつけている場合、お互いのデザインが干渉しあってうまくいかないことがあります。
その場合は
<div class="follow-btn" >
のdiv class=の後のクラス名（この場合では”follow-btn”）が一緒になってしまっていないかをチェックしてみてください。
もし一緒になっている場合は片方を違う名前に置き換えます。（”follow-button”など）
項目のデザイン用CSS
上記項目（ARCHIVE,ABOUT,FOLLOW）のデザインはPCのサイドバーと同じデザインにしたかったので、下記コードを入れました。
<style type="text/css">
.sidebar-title {font-family: 'Concert One', cursive; font-size: 16pt; text-align: center; color: #F5F4EA; position: relative; padding: 0.2em 0.5em; background-color: #82c0cd; box-shadow: 0px 0px 0px 5px #82c0cd; border-top: 2px dashed #F5F4EA; border-bottom: 2px dashed #F5F4EA; }
.sidebar-title a { color: #F5F4EA; text-decoration: none; }
</style>こんな感じになりました。
人気記事、カテゴリなどの入った複合メニュー
スマホ画面の一番下にホーム・人気記事・カテゴリ・トップへ戻るボタンのついた複合メニューを入れました。
こちらの記事を参考にしました。
はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム – Yukihy Life
こんなかんじになります。
こちらをつけることでフッタ部分はよりシンプルにできるかなと思いますし、この４つのボタンは記事途中でも使いたくなることが多いかなと思いこのメニューを導入してみました。
検索ボックス
検索ボックスを使うかどうかは人によるかなと思うのですが、使いたいときにぱっと使えた方が良い機能かなと思うのでヘッダー画像の下に設置してみました。
こちらの記事を参考にしました。
【はてなブログ】ブログ内検索ボックスをスマホ用ページの上部に表示させる方法 – チップの日常
パンくずリスト
PC版と同様にパンくずリストを入れました。
はてなブログでGoogleにパンくずリストを認識させるカスタマイズ – 太陽がまぶしかったから
コードは上記ブログをご覧ください。
やっさんはページャ下に入るようにしました。
こんな感じで入ります。
他にやりたいこと、課題
いくつかまだ取り組めていないもの、そして問題も発生中なので原因を探っているのですが、、、直らない！
複合メニューの人気記事が表示されない。
これが問題発生中のもの。
ホームボタン、カテゴリ、トップへ戻るボタンは問題なく動くのに、人気記事のボタンだけ押してもウンともスンともいいません。
ずっと悩んでいてそのまま設置したままにしているのですが。。。
全然直らないから撤去した方がいいのかなぁ。。。
誰か教えてください( ;∀;)
アドセンス
グーグルアドセンスをスマホ用にまだ貼ってないｗ
いいんです。広告なんて二の次だし、、と思っていましたがいい加減貼らないとな。
ぼちぼち取り組みます。
関連記事
複合メニューの人気記事とは別に記事下に関連記事を出したいなぁと思っています。
（PCの方でも書きましたがまだやってません；）
関連記事系はやり方がいろいろあってどれにしようかな状態です。
まとめ
以上スマホカスタマイズまとめでした。
これをやるために皆さんが揃っておすすめされているこの本を購入してしまいましたよ！！！！
いやこの本は恐ろしい。
全く初心者のやっさんでもこの本の見よう見まねでやってみたらできましたよ！
わかりやすいし、コードを作って公開してくださってる皆さんこの本見ながら作ってるの？ってぐらい見たことあるようなボタンとかがいっぱい出てきてました。
これはおすすめです！！！！
ここまでお付き合いくださってありがとうございました！！
この記事が気に入りましたらシェア＆フォローしてくださるとうれしいです！
当ブログは以下アカウントより読者登録して頂けます。
Twitterでは更新情報の他、ブログ運営に関する試行錯誤や
毎日家事・育児をこなす中で心に留めたいことをつぶやいています。
気軽に声を掛けて頂けると飛び上がって喜びます。
