うえのブログスマートフォン用の表示で見るうえのブログ気になったこと、思い立ったこと、調べてみたことなどを書き留める場として使っています。̆)今まで使ってたテーマはZENO-TEALで結構お気に入りだったのですが、なんとなく不便なところも感じていていいテーマが無いかなぁ~とずっと思っていました。そんな時に、ふと豆ゴロさん(@asgard_yumu)がこんなツイートをしておりました。はてなのテーマ作ってわかったけど、意外にみんな必須って書いてあってもカスタマイズ記事読まない=アクセス増えるかと思ってたら全然増えない。インストールされていないだけ...?wあとは新着にいる時にたくさんダウンロードしてもらってランキング入っておかないと確実に埋もれるなぁ。storeおお...めちゃいくない...?すぐテストブログにインスト。2018年6月19日お優しい...!ということで、変更のまとめです。実は変更前のスクショを撮り忘れていて、前回のものから引用です。ちなみに前回の記事はこちら。www.uenoyou.netそして変更前のスクショはこちら。ホントはブログロゴにグラデがかかってたり色々変更ありましたが、まぁご愛嬌ということで。マテリアルぽっぷ導入後はこちら。スマホ版、タブレット版でも変わります。変更したのは全体のカラーコードとマテリアルぽっぷ公式カスタマイズです。こちらで配色の設定を変更し、前ブログテーマからグラデーションカラーをそのまま引っ張ってます。あとアニメーションもそのまま持ってきております。www.uenoyou.net基本的にはマテリアルぽっぷのデモサイトに載ってるカスタマイズ方法を元に、自分のカラーコードを載せたくらいになっています。あ、シェアボタンに関してはテーマ独自のものとかは無いので公式か公開されてるものを使うことになります。thisというものを使いました。www.uenoyou.netこれのInlineという項目になります。後日まとめようかなぁ。ブログタイトルも変更これも細かい部分ですが、今まではロゴサイトで変更すると英字しか扱いがなかったので仕方なくuenoblogになっていました。実は前々から、ブログタイトルのロゴは小さくしたいなぁと思っていたのですが、どうもテーマと合わずに断念し続けていました。今回のマテリアルぽっぷはまさに小さいロゴデザインがぴったし...!あと画像加工の術を覚えたので、ついでに日本語にしてみました。ちなみに後述するのですが、本当は左端に寄せたくてロゴ+うえのブログっていう表記でした。設定しても何故か真ん中にしかならず。あれ?要素ごと左に指定したら案の定スマホ表示でも左端。それならいっそのこと真ん中表示できるようにしようと思い、うえの+ロゴ+ブログという表記にしたのでした。あとプロフィールの後ろはみかんです。自動的にぼかしが入るので、それっぽい感じに仕上がっています。細かいところで気が利く素敵なテーマですわ...!あとはサムネイル画像でオススメ記事とかサイドバーに貼ろうと画策中です。気になる点こちらは今のところ気になる点。やり方が悪いだけかもしれませんが...まとめがてら挙げてみます。1.ロゴを画像にすると真ん中にしか表示できないこれは上でも書きましたが、何故か左になりません。CSSを見てみるとパソコンサイズだと左、それ以下は中央表示なるようになってるみたいですが...解決法はわからず。真ん中表示になるように自己解決してしまいました。一応インストし直してその直後に設定、デモサイトと同じ画像サイズで設定してみましたがやはり真ん中になってしまいました。※すぐ改善して下さいました。結局PC版は左の表示にしてます。当ブログコメント欄にてお返事いただいてます。2.会話形式を使うと画面上の左表示が消える幸い私はそこまで多用しておりませんでしたが、現在使っている会話形式は左の表示が出ません。扱ってる画像のせいかな?と思いましたが、同じ画像のueno指定で左右出してみると右の表示のみしか出ません。当ブログで使ってるCSSはこんな感じです。www.uenoyou.netちなみに過去記事、全部右の表示に修正しちゃったので今のところ当ブログでは問題ありません。testtestこちらもすぐ改善していただきました、対応早すぎぃ!3.スマホ版表示でサムネイルが右に寄ってる読み込みはじめは良いのですが、数秒後には右に寄っちゃいます。こちらもすぐさま対応して頂きました。わかりやすくちょっと大きめに。thisのシェアボタンを使うと、はてなブックマークをつける時にスマホからだと入力画面が小さくなる問題がありました。いうお声をあきなすさん(id:kamenutsu)から頂いたので、早速シェアボタンを変更。webgaku.hateblo.jpこちらのシェアボタンに変えた所、Twitterのアイコンが全般的に変な挙動を示しました。シェアボタンも、他のボタンは出ないのにTwitterだけ枠が表示される...。後から追加したので、多分何かが干渉してるんだろうなぁ~と思いつつコードを見てもさっぱり分からず...。豆ゴロさんに助けを求めると、数分で返信。?↑のsns-twitterというクラス名が被っているので、sns-twitter1にする。#55acee;}CSSも同様にsns-twitterをsns-twitter1にする。いうように、シェアボタン側のクラス名をsns-twitter1に変更することで違うものという認識をさせました。今後の注意点まで教えて下さいました。何かあればお気軽にご連絡くださいという神対応...。いやもうテーマ云々の前に豆ゴロさんついていきます!というぐらいの勢いです。まとめ自分がこうしたいなぁ~と思っていたところを踏まえつつ、自分好みにデザインされたテーマがヒットしてすぐ使わせていただきました...豆ゴロさんありがとうございます!にしても...前は仕事の合間にこっそりやったり色々調整して一週間ぐらいかけてやってた気がします。今回は2日くらいで実装できたので、手慣れたものだなぁ~と思いました。いうことで、豆ゴロさんが公開されているテーマはこちら。www.mamegoro.com気になる方は是非!(変更前はバックアップ忘れずに!)豆ゴロさん超対応が早いので、使わせていただく側としてもとても安心できます。辛辣に評価されてみよう。はてなブログPro身の回りの気になったこと、どっか行った時のレポとか気ままに書いてます。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。