読者です 読者をやめる 読者になる 読者になる

やっさんたっさんの子育て隊

2016年5月出産予定。30代夫婦の第一子出産準備の模様と日々の記録をまったり書いていきます。

はてな1年目の初心者が10日かけて行ったカスタマイズまとめ(スマホ版)

f:id:yacco_alfalfa:20170421200730j:plain

やっさんです。


前回のカスタマイズまとめ記事(PC版)にはたくさんのスターとブックマークありがとうございました(*´∇`*)
はてなブログ1年目の初心者が10日かけて行ったカスタマイズまとめ - やっさんたっさんの子育て隊


ブックマークも3つつけばかなりいい方、バズとかは無縁の細々とやっているブログ主としましてはすごーく頑張って書いた記事にたくさんブクマがつくとめちゃめちゃ嬉しいです!!
カラースターも頂いちゃったりして小躍りしております(/・ω・)/


ブクマのコメントって返事したいときに困りますね;
たまに自分でブックマークしてコメントするのですが何回もできないしそれでは1人1人にコメント返せないですからね、、、
嬉しくなってお一人お一人に返事したかったのですが我慢しました。
コメント返事くれてもいいよって方は記事下のコメント欄もぜひご活用ください!(返事いらないかもしれませんがw)


前置きが長くなってしまいましたがお次はスマホカスタマイズの記事をまとめていきます!!!
また例によって長くなってしまいそうですが頑張ってまとめていきますのでお付き合いください。


初心者のカスタマイズですのでコード間違いなどあるかもしれませんがもしよろしければ発見の際教えて頂けると非常に助かります;


また一部PC版と内容が重複する部分が出てきますがご了承ください。

カスタマイズの前に

これはPCと同様スマホ版でも必須です。
テストブログで先にカスタマイズを試すという方法をやりだしたら前のコピペでメモ帳に残して、という方法には戻れません!
www.naenote.net

レスポンシブデザインについて

やっさんはPCの方ではデザインテーマ「Minimal Green」を使用しています。
このデザインはレスポンシブデザイン対応なので設定すればPCと同じデザイン設定でスマホにも表示させることが可能です。
f:id:yacco_alfalfa:20170421202602p:plain


最初やっさんもレスポンシブデザインにしようと思っていたのですが、ある問題がありまして;
スマホをレスポンシブデザインにすると、トップのヘッダー画像がやたら拡大されてしまうんです(-.-)
ご覧のような感じになります。
f:id:yacco_alfalfa:20170421202801j:plain


実は以前のデザインの時にもこの問題で困っていたのでおそらくやっさんのやり方が悪いんだと思います。
でも何が悪いのかわからないし全然直し方がわからない( ;∀;)!
ということでスマホの方は1からデザインを作り直すことにしました。

フォントサイズを決める

こちらもPCと重複しますが書いておきます。


こちらの記事で詳しく書かれていました。
ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう


PC、スマホのフォントサイズの変え方はこちらを参考にしました。
意外と知らない?はてなブログで絶対やるべき4つのカスタマイズ - Appism


やっさんはPC、スマホどちらも16pxにしています。

テーマカラーを決める

テーマカラーもPCと同じにしています。

  • メインカラー

メインカラーはこの色です。#82c0cd


  • 次にベースカラー。

ベースカラーには白を選びました。#ffffff


  • アクセントカラー。

アクセントカラーはこちらの色にしました。#FDFF5E


  • 日付、サイドバータイトル文字

日付、サイドバータイトルの文字の色はこちらの色にしました。#FDFF5E


  • リンク文字のカーソルを合わせた時の色

リンクカーソルを合わせた時の色はこちらの色にしました。#9BE3F2


  • リンク訪問済みの色

リンク訪問済みの色はこちらの色にしました。 #647f84


全体のデザイン

スマホ版はまずshun(id:shun_prog0929)さんのブログ「いつ俺」の下記記事のデザインコードを使わせていただきました。
はてなブログのスマホデザインを一瞬でおしゃれにカスタマイズする方法 - いつ俺〜いつから俺ができないと錯覚していた?〜
タイトルの通りこちらのコードを使わせて頂くと一気にデザインがおしゃれになります!!ありがたい!!


やっさんはこちらのデザインを元に変更を加えていきました。

トップ画像

トップのヘッダー画像はPC版の方の画像を少し変えて作りました。
大きさは350×100pxで作っています。

f:id:yacco_alfalfa:20170409204710p:plain

記事中見出し、リスト、強調文字

これらはすべてPCと同様のデザインにしています。

参考記事などはPC版のカスタマイズ記事をご覧ください。
はてなブログ1年目の初心者が10日かけて行ったカスタマイズまとめ - やっさんたっさんの子育て隊


スマホのカスタマイズはhtml、CSSなど全て同じところに記述していきます。
f:id:yacco_alfalfa:20170421221021p:plain
デザインのスマホマークをクリックするとスマホカスタマイズができるようになります。
①レスポンシブデザインにチェックが入っているといくらやってもデザインが変わらないのでチェックを外す。
②ヘッダをクリック。


f:id:yacco_alfalfa:20170421221246p:plain
タイトル下の「スマートフォン用にHTMLを設定する」にチェックを入れてその下にコードを入れていきました。


やっさんが行ったデザイン変更を下記に記載しておきます。

  • 記事中見出し

h3見出しデザイン

h4見出しデザイン

  • 記事中リスト

  • list
  • list
  • list

  • 記事中強調太字

こんな感じになります。


記事下シェアボタン、フォローボタン

こちらもPC版と同じデザイン。
記事下に入れたいものは下の写真のように「記事上下のカスタマイズ」の「スマートフォン用にHTMLを設定する」にチェックを入れ、記事下にコードを入れました。

f:id:yacco_alfalfa:20170425193313p:plain

  • 記事下シェアボタン

f:id:yacco_alfalfa:20170419213632p:plain


  • 記事下フォローボタン

f:id:yacco_alfalfa:20170419214222p:plain


フッタの不要な所を非表示にする。

記事一覧などの下に出てくるフッタ部分。
レスポンシブデザインではサイドバーがそのままフッタに出てきます。
やっさんもPCのサイドバーの項目の一部をフッタに出したいと思っていました。
しかしPCではサイドバーの項目を英語表記にしているのに、なぜかスマホのフッタに出てくる項目が日本語表記になっている!
この写真のような感じになってました。
f:id:yacco_alfalfa:20170426193903p:plain

直し方がわからないし、悩みに悩んで結局これまた1から自分で作ることに;

元の項目を全て非表示に

まずはこちらの記事を参考にして元の項目を全て非表示にしました。
はてなブログのスマートフォン表示から不要な要素を削除する方法 - またろぐ


ちなみに元のデザインコードでヘッダーのグローバルメニューやフッターのリストなどは消してくださっていました。
ヘッダーのグローバルメニューとはここのことです。
f:id:yacco_alfalfa:20170426200547p:plain

フッターのリストは一番下のこれ。
f:id:yacco_alfalfa:20170426200616p:plain


そしてその他に消したものはプロフィールなどの各項目、上へボタン、一番下のダッシュボードやPC版表示、ブログを報告するのボタン。
f:id:yacco_alfalfa:20170426201222p:plain


全て消したら以下の画像のようになります。(テストブログです。)
f:id:yacco_alfalfa:20170426203033p:plain


コードはヘッダのタイトル下に入れました。
f:id:yacco_alfalfa:20170421221021p:plain
f:id:yacco_alfalfa:20170421221246p:plain

プロフィール、検索ボックス、注目記事、ダッシュボード・PCの非表示用コード

肝心のコードは上記ブログを見て頂ければ、、と思うのですが、
項目が分かれていて取捨選択がめんどくさいという方、やっさんと全く同じようにしたいという方のためにやっさんが使ったコードを記載しておきますね。
ただし、ややこしくなるので「いつ俺」のデザインコードを使用していることを前提とし、このコードで記載済みの非表示用コードは載せませんのでご注意ください。
下記コードに記載しているのはこちらの画像の部分のみです!!
f:id:yacco_alfalfa:20170426201222p:plain

<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編集に切り替えましょう。これをただたださっきのサードバーの欄にコピペするだけ。

はてなブログカスタマイズ!プロフィールを目立たせてアピール! - One step at a time

画像も引用出来たらいいんですがーーー!


やっさんも同じようにやってみたのでその画像を載せておきますね。
まずはブログの記事作成画面で「見たままモード」でプロフィールを作る。
f:id:yacco_alfalfa:20170426211857p:plain


「HTMLモード」に切り替えて下に出てきたコードをコピーでできあがり!
f:id:yacco_alfalfa:20170426212200p:plain

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>

こんな感じになりました。
f:id:yacco_alfalfa:20170427211225p:plain

人気記事、カテゴリなどの入った複合メニュー

スマホ画面の一番下にホーム・人気記事・カテゴリ・トップへ戻るボタンのついた複合メニューを入れました。
こちらの記事を参考にしました。
はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム - Yukihy Life


こんなかんじになります。
f:id:yacco_alfalfa:20170427195537p:plain
こちらをつけることでフッタ部分はよりシンプルにできるかなと思いますし、この4つのボタンは記事途中でも使いたくなることが多いかなと思いこのメニューを導入してみました。

検索ボックス

検索ボックスを使うかどうかは人によるかなと思うのですが、使いたいときにぱっと使えた方が良い機能かなと思うのでヘッダー画像の下に設置してみました。
f:id:yacco_alfalfa:20170427200836p:plain
こちらの記事を参考にしました。
【はてなブログ】ブログ内検索ボックスをスマホ用ページの上部に表示させる方法 - チップの日常


パンくずリスト

PC版と同様にパンくずリストを入れました。
はてなブログでGoogleにパンくずリストを認識させるカスタマイズ - 太陽がまぶしかったから
コードは上記ブログをご覧ください。
やっさんはページャ下に入るようにしました。
f:id:yacco_alfalfa:20170427200556p:plain
こんな感じで入ります。
f:id:yacco_alfalfa:20170427211524p:plain

他にやりたいこと、課題

いくつかまだ取り組めていないもの、そして問題も発生中なので原因を探っているのですが、、、直らない!

複合メニューの人気記事が表示されない。

これが問題発生中のもの。
ホームボタン、カテゴリ、トップへ戻るボタンは問題なく動くのに、人気記事のボタンだけ押してもウンともスンともいいません。
ずっと悩んでいてそのまま設置したままにしているのですが。。。
全然直らないから撤去した方がいいのかなぁ。。。
誰か教えてください( ;∀;)

アドセンス

グーグルアドセンスをスマホ用にまだ貼ってないw
いいんです。広告なんて二の次だし、、と思っていましたがいい加減貼らないとな。
ぼちぼち取り組みます。

関連記事

複合メニューの人気記事とは別に記事下に関連記事を出したいなぁと思っています。
(PCの方でも書きましたがまだやってません;)
関連記事系はやり方がいろいろあってどれにしようかな状態です。


まとめ

以上スマホカスタマイズまとめでした。
これをやるために皆さんが揃っておすすめされているこの本を購入してしまいましたよ!!!!


いやこの本は恐ろしい。
全く初心者のやっさんでもこの本の見よう見まねでやってみたらできましたよ!
わかりやすいし、コードを作って公開してくださってる皆さんこの本見ながら作ってるの?ってぐらい見たことあるようなボタンとかがいっぱい出てきてました。
これはおすすめです!!!!



ここまでお付き合いくださってありがとうございました!!
この記事が気に入りましたらシェア&フォローしてくださるとうれしいです!