【実録】初心者でもはてなスマホデザインを見れるレベルにカスタマイズできた2017-05-23【実録】初心者でもはてなスマホデザインを見れるレベルにカスタマイズできたブログ作りについてTwitterPocketはてなブログの”スマホデザイン”のカスタマイズにようやく着手しました。これまで「Broollyn」というテーマをレスポンシブデザインにしていたので、スマホ用の設定には触れていませんでした。いうかスマホ用とPC用にそれぞれ設定することはハードルが高すぎて手が付けられなかった。過去の記事を見るとスマホ対応に関して4か月前から気にはしていましたが、ずっとスルーしていた様子。中国出張が好き〜アナザースカイ〜CSSやらコードが苦手な自分にとって、スマホデザイン設定は想像以上に難しく時間がかかってしまいました。例の如く偉大な先人方のサイトを徘徊して、コードをコピペして作りました。初心者ながらも最低限に見れるレベルには昇華できたと思います。このまま記録も残さずにいると設定方法を忘却するのは確実なので記録用にメモにて。初心者の方にも少しは参考になると思います。カスタマイズ時に参考にしたサイト様を後述しています。記事先には方法が一発で書いてあるエントリーを選びましたのでワンクリックで設定方法にたどり着けます。見ると至って普通ですが情弱の自分がここまでたどり着くのは大変だった、、、以下に自分が希望した設定をまとめました;全体的にシュッと締まったデザインにする記事下(上)にオシャレでカラフルなシェアボタンを設置する記事下(上)におシャレなフォローボタンと”読者になる”を設置するブログタイトル下にカテゴリ選択リストボタンを設置したスマホ画面の下にホーム・人気記事・ブクマ順・カテゴリ・上への複合固定バーを設置したカエレバのデザインをシンプルに見やすくする上記について設定背景と設定方法の記事をご紹介にて。全体的にシュッと締まったデザインにする正直カスタマイズの大半はshunさまの記事を参考にしました。記事がめちゃくちゃ丁寧でとても分かりやすくガイドしてくれます。この記事通りにやると何となくオシャレになります!コピペするだけなので本当に簡単!www.ituore.com個人的にデフォルトのグローバルヘッダーは絶対外したかったのですが、上記記事にも方法は書いてあります。※出典はshunさんの記事にてこのヘッダーバーがあることによって記事の読み込みが遅くなる気がします。重要じゃないのに時間がかかるのはストレスなので外しました。記事下(上)にオシャレでカラフルなシェアボタンを設置するこちらもshunさまが作成した別記事で紹介されていました。コピペ一発で終わりました。www.ituore.comちなみにシェアボタンはこんなやつです。個人的に記事上に不要派なので記事下のみ設置しました。”Feedly”の3つを設置しました。この方法もなんとshunさまの記事を見れば一発で終わります。デザインの11種類から選べるという狂気のオプションです笑www.ituore.comこのフォローボタンはすごくカッコいいすね。自分も他のブロガーさんとか見て、ああいうの設置したいなーと思っていましたが簡単に出来ちゃいました。ブログタイトル下にカテゴリ選択リストボタンを設置したはてなのスマホデザインには困ったことにカテゴリを選択するデザインがデフォルトにありません。ブログ滞在時間を長くするためにもカテゴリボタンを何とかして設置したいと思って、方法を模索していました。なんと、これもshunさまの記事で紹介していました。カテゴリ先のURLをいちいち貼らずに、自動生成できるという優れもの!!www.ituore.comこのカスタマイズによってこんなボタンがブログタイトル下に設置されます。このボタンをポチることで全カテゴリが選択できるようになります。どれだけPV数に影響を与えるかはまだ分かりませんが、絶対いいでしょコレ!!スマホ画面の下にホーム・人気記事・ブクマ順・カテゴリ・上への複合固定バーを設置した下写真のバーのことです。画面が動くと一緒に動きます。カッコいいし、メチャ便利だしこの設定はどうしてもやりたかった。ハードルの高さを感じてみたけど、調べたらとても簡単でした(コピペしただけど)。参考にした記事はゆきひーさまの記事ですwww.yukihy.comこの方も大量にカスタマイズ記事を作成していて、お世話になっているはてな利用者は多いような気がします。陳腐な言葉ですが、こんなバーを簡単に設定させてしまうなんて本当にすごいなーと思います。このバーのおかげで他の記事にもアクセスしやすいですし、”上へ戻る”ボタンが常に画面下にあるのはとても便利だと感じました。カテゴリボタンは任意にカテゴリを選ぶことができるので注力しているカテゴリを厳選すればいいと思います。カエレバのデザインをシンプルに見やすくするカエレバはデフォルトのままだと味気ないので、何とか見やすくする必要があると思います。そこで以下の記事を参考にしました。検索で探したんだけど、これもゆきひーさまの記事でした笑www.yukihy.comこのカスタマイズによって、スマホのカエレバもシンプルなデザインになり見やすくなりました!!ちなみにカエレバは楽天やAmazon、ヤフーなどのショッピングボタンを同時に設置できる便利なブログパーツです。調べたら山のように情報が出てくるのでぜひ調べてみて下さい!まとめ振り返るとshunさまとゆきひーさまの記事内容をそのまま実装した感じでした(笑い)。ここにたどり着くのにも意外と時間がかかりましたし、初心者である自分なりに数あるカスタマイズ記事の中でも上記の記事たちはとてもユーザーフレンドリーでカスタマイズがしやすいように書かれていると思いました。実際に自分は、迷うことなくかつ簡単にカスタマイズできました。本当に先人方には感謝するばかりですね。カスタマイズしてて思ったけど、、、、”はてな”っていいよねやっぱ、カスタマイズ記事や先人方の記事が充実していますね。ユーザー数が多いためか、ブロガーに凝り症の人が多いのかは分かりませんが。参考になる記事がネットに多く転がっているので、初心者にとって非常に助かります。諸々設定するときに”はてなで良かった”とよく思います。これからもボチボチがんばります。はてなブログPro2016年4月に突如中国出張が決まった20代理系サラリーマン。最初は中国が大嫌いでしたが、徐々に中国が好きになり、北京留学までしてしまう。1年で中国20都市以上を訪問。自分が中国出張を好きになるために始めたブログですが、今は中国出張に不安を感じる方たちをサポートしたいです。(2)月別アーカイブスポンサーリンクはてなブログをはじめよう!OKUSURIさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。