2018年3月20日スポンサーリンクやっさんです。嬉しくなってお一人お一人に返事したかったのですが我慢しました。コメント返事くれてもいいよって方は記事下のコメント欄もぜひご活用ください!(返事いらないかもしれませんがw)前置きが長くなってしまいましたがお次はスマホカスタマイズの記事をまとめていきます!!!また例によって長くなってしまいそうですが頑張ってまとめていきますのでお付き合いください。初心者のカスタマイズですのでコード間違いなどあるかもしれませんがもしよろしければ発見の際教えて頂けると非常に助かります;また一部PC版と内容が重複する部分が出てきますがご了承ください。記事下シェアボタン、フォローボタンフッタの不要な所を非表示にする。複合メニューの人気記事が表示されない。アドセンス関連記事まとめカスタマイズの前にこれはPCと同様スマホ版でも必須です。Green」を使用しています。このデザインはレスポンシブデザイン対応なので設定すればPCと同じデザイン設定でスマホにも表示させることが可能です。最初やっさんもレスポンシブデザインにしようと思っていたのですが、ある問題がありまして;スマホをレスポンシブデザインにすると、トップのヘッダー画像がやたら拡大されてしまうんです(-.-)ご覧のような感じになります。実は以前のデザインの時にもこの問題で困っていたのでおそらくやっさんのやり方が悪いんだと思います。;∀;)!ということでスマホの方は1からデザインを作り直すことにしました。スポンサードリンクフォントサイズを決めるこちらもPCと重複しますが書いておきます。こちらの記事で詳しく書かれていました。ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしようPC、スマホのフォントサイズの変え方はこちらを参考にしました。AppismやっさんはPC、スマホどちらも16pxにしています。テーマカラーを決めるテーマカラーもPCと同じにしています。メインカラーメインカラーはこの色です。#82c0cd次にベースカラー。ベースカラーには白を選びました。#ffffffアクセントカラー。アクセントカラーはこちらの色にしました。日付、サイドバータイトルの文字の色はこちらの色にしました。#F5F4EAリンク文字のカーソルを合わせた時の色リンクカーソルを合わせた時の色はこちらの色にしました。#9BE3F2リンク訪問済みの色リンク訪問済みの色はこちらの色にしました。#647f84全体のデザインスマホ版はまずshun(id:shun_prog0929)さんのブログ「いつ俺」の下記記事のデザインコードを使わせていただきました。いつ俺〜いつから俺ができないと錯覚していた?〜タイトルの通りこちらのコードを使わせて頂くと一気にデザインがおしゃれになります!!ありがたい!!やっさんはこちらのデザインを元に変更を加えていきました。トップ画像トップのヘッダー画像はPC版の方の画像を少し変えて作りました。大きさは350×100pxで作っています。記事中見出し、リスト、強調文字これらはすべてPCと同様のデザインにしています。参考記事などはPC版のカスタマイズ記事をご覧ください。やっさんたっさんの子育て隊スマホのカスタマイズはhtml、CSSなど全て同じところに記述していきます。デザインのスマホマークをクリックするとスマホカスタマイズができるようになります。1レスポンシブデザインにチェックが入っているといくらやってもデザインが変わらないのでチェックを外す。タイトル下の「スマートフォン用にHTMLを設定する」にチェックを入れてその下にコードを入れていきました。やっさんが行ったデザイン変更を下記に記載しておきます。記事中見出しh3見出しデザインh4見出しデザイン記事中リストlistlistlist記事中強調太字こんな感じになります。記事下シェアボタン、フォローボタンこちらもPC版と同じデザイン。記事下に入れたいものは下の写真のように「記事上下のカスタマイズ」の「スマートフォン用にHTMLを設定する」にチェックを入れ、記事下にコードを入れました。記事下シェアボタン記事下フォローボタンフッタの不要な所を非表示にする。記事一覧などの下に出てくるフッタ部分。レスポンシブデザインではサイドバーがそのままフッタに出てきます。やっさんもPCのサイドバーの項目の一部をフッタに出したいと思っていました。PCではサイドバーの項目を英語表記にしているのに、なぜかスマホのフッタに出てくる項目が日本語表記になっている!この写真のような感じになってました。直し方がわからないし、悩みに悩んで結局これまた1から自分で作ることに;元の項目を全て非表示にまずはこちらの記事を参考にして元の項目を全て非表示にしました。またろぐちなみに元のデザインコードでヘッダーのグローバルメニューやフッターのリストなどは消してくださっていました。ヘッダーのグローバルメニューとはここのことです。フッターのリストは一番下のこれ。その他に消したものはプロフィールなどの各項目、上へボタン、一番下のダッシュボードやPC版表示、ブログを報告するのボタン。全て消したら以下の画像のようになります。)コードはヘッダのタイトル下に入れました。項目が分かれていて取捨選択がめんどくさいという方、やっさんと全く同じようにしたいという方のためにやっさんが使ったコードを記載しておきますね。ややこしくなるので「いつ俺」のデザインコードを使用していることを前提とし、このコードで記載済みの非表示用コードは載せませんのでご注意ください。none;}/*上へ*/</style>項目を作り直すまっさらな状態にしてから新たに追加したい項目のコードを入れて行きます。やっさんが追加した項目はArchive(月別表示)、About(プロフィール)、Follow(読者登録、フォローなど)です。下部分にゆきひーさんの紹介してくださっている人気記事、カテゴリなどの入った複合メニューを導入しました。(後に詳述します)Archive(月別表示)こちらの記事を参考にしました。名誉社畜ブログAbout(プロフィール)タイトルは以下のコードを記述。class="sidebar-title">ABOUT</p>肝心のプロフィールの中身のコードの記述方法に関してはPC版でも参考にさせて頂いたこちらの記事がスマホでも非常に参考になりました!!ブログの下書き画面で書きたいことや載せたい内容を書きなぐりましょう。リンクも貼りましょう。次にHTML編集に切り替えましょう。これをただたださっきのサードバーの欄にコピペするだけ。time画像も引用出来たらいいんですがーーー!やっさんも同じようにやってみたのでその画像を載せておきますね。ブログの記事作成画面で「見たままモード」でプロフィールを作る。「HTMLモード」に切り替えて下に出てきたコードをコピーでできあがり!Follow(読者登録、フォロー)タイトルとその下に「定期購読はこちらからお願いします。」という文言をいれました。class="sidebar-body">定期購読はこちらからお願いします。</p>フォローボタンはPC版と同じものを使用しています。こちらの記事をご覧ください。明日こそ、定時ちなみにPCの方でも書きましたが、記事下など別の場所に違うデザインのフォローボタンをつけている場合、お互いのデザインが干渉しあってうまくいかないことがあります。class=の後のクラス名(この場合では”follow-btn”)が一緒になってしまっていないかをチェックしてみてください。一緒になっている場合は片方を違う名前に置き換えます。(”follow-button”など)項目のデザイン用CSS上記項目(ARCHIVE,ABOUT,FOLLOW)のデザインはPCのサイドバーと同じデザインにしたかったので、下記コードを入れました。}</style>こんな感じになりました。人気記事、カテゴリなどの入った複合メニュースマホ画面の一番下にホーム・人気記事・カテゴリ・トップへ戻るボタンのついた複合メニューを入れました。こちらの記事を参考にしました。Lifeこんなかんじになります。こちらをつけることでフッタ部分はよりシンプルにできるかなと思いますし、この4つのボタンは記事途中でも使いたくなることが多いかなと思いこのメニューを導入してみました。検索ボックス検索ボックスを使うかどうかは人によるかなと思うのですが、使いたいときにぱっと使えた方が良い機能かなと思うのでヘッダー画像の下に設置してみました。こちらの記事を参考にしました。チップの日常パンくずリストPC版と同様にパンくずリストを入れました。太陽がまぶしかったからコードは上記ブログをご覧ください。やっさんはページャ下に入るようにしました。こんな感じで入ります。他にやりたいこと、課題いくつかまだ取り組めていないもの、そして問題も発生中なので原因を探っているのですが、、、直らない!複合メニューの人気記事が表示されない。これが問題発生中のもの。ホームボタン、カテゴリ、トップへ戻るボタンは問題なく動くのに、人気記事のボタンだけ押してもウンともスンともいいません。悩んでいてそのまま設置したままにしているのですが。直らないから撤去した方がいいのかなぁ。;∀;)アドセンスグーグルアドセンスをスマホ用にまだ貼ってないwいいんです。広告なんて二の次だし、、と思っていましたがいい加減貼らないとな。複合メニューの人気記事とは別に記事下に関連記事を出したいなぁと思っています。(PCの方でも書きましたがまだやってません;)関連記事系はやり方がいろいろあってどれにしようかな状態です。まとめ以上スマホカスタマイズまとめでした。2014-10-28Amazon楽天ブックスいやこの本は恐ろしい。初心者のやっさんでもこの本の見よう見まねでやってみたらできましたよ!わかりやすいし、コードを作って公開してくださってる皆さんこの本見ながら作ってるの?ってぐらい見たことあるようなボタンとかがいっぱい出てきてました。当ブログは以下アカウントより読者登録して頂けます。Twitterでは更新情報の他、ブログ運営に関する試行錯誤や毎日家事・育児をこなす中で心に留めたいことをつぶやいています。気軽に声を掛けて頂けると飛び上がって喜びます。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。人気記事1トコちゃんベルト2カ月使っての感想。view3パナソニック純正クリーナー【N-W1】で洗濯槽を掃除してみました。view4シンプルで使いやすい育児日記7選~育児日記用ノート検討中その2。(14)初心者におすすめ!私はこのライティングマニュアルで収益3倍アップしました。今だけ!30日間無料相談OKHOMEブログカスタマイズはてな1年目の初心者が10日かけて行ったカスタマイズまとめ(スマホ版)子育てブロガーやっさん商社で働く30代子育てブロガーです。2016年5月に娘タツ子を出産。面倒くさいことがキライ。子育てパートナーである旦那たっさんと協力して初めての子育てに奮闘しています。頑張らない育児が目標。やっさんたっさんの子育て。