うえのブログ

思いつくままに、書くのみです(^o^)

テーマ変更まとめ【ZENO-TEAL】から【マテリアルぽっぷ】へ

f:id:uenoyou111:20180620224934j:plain

テーマ変更に終わりはなし…!うえの(@uenoyou111)です( ˘ω˘)

 

今まで使ってたテーマはZENO-TEALで結構お気に入りだったのですが、なんとなく不便なところも感じていていいテーマが無いかなぁ~とずっと思っていました。

 

そんな時に、ふと豆ゴロさん(@asgard_yumu)がこんなツイートをしておりました。

 

 

え、豆ゴロさん作ったの?!と思い、早速見てみると…

 

マテリアルぽっぷ - Theme store

 

おお…めちゃいくない…?すぐテストブログにインスト。

 

 

お優しい…!

 

ということで、変更のまとめです。

 

 

 

 

変更前との比較

 

実は変更前のスクショを撮り忘れていて、前回のものから引用です。

 

ちなみに前回の記事はこちら。

 

www.uenoyou.net

 

そして変更前のスクショはこちら。パソコン版のみです。

 

f:id:uenoyou111:20180620212919p:plain

 

ホントはブログロゴにグラデがかかってたり色々変更ありましたが、まぁご愛嬌ということで。

 

そしてマテリアルぽっぷ導入後はこちら。

 

f:id:uenoyou111:20180620213755p:plain

 

スマホ版、タブレット版でも変わります。

 

ちょっと様子を見ながら細かい箇所は変えていこうと思いますが、既に大満足でございます…!

 

変更した箇所

 

主に変更したのは全体のカラーコードとマテリアルぽっぷ公式カスタマイズです。

 

material-pop.mamegoro.com

 

こちらデモサイトにカスタマイズ方法、細かい配色の変更方法、必須設定などが載っています。

 

こちらで配色の設定を変更し、前ブログテーマからグラデーションカラーをそのまま引っ張ってます。

 

あとアニメーションもそのまま持ってきております。

 

www.uenoyou.net

 

基本的にはマテリアルぽっぷのデモサイトに載ってるカスタマイズ方法を元に、自分のカラーコードを載せたくらいになっています。

 

あ、シェアボタンに関してはテーマ独自のものとかは無いので公式か公開されてるものを使うことになります。

 

私は今回新たにAdd thisというものを使いました。

 

www.uenoyou.net

 

これのInlineという項目になります。また後日まとめようかなぁ。

 

ブログタイトルも変更

 

これも細かい部分ですが、今まではロゴサイトで変更すると英字しか扱いがなかったので仕方なくuenoblogになっていました。

 

f:id:uenoyou111:20180619145657j:plain

 

実は前々から、ブログタイトルのロゴは小さくしたいなぁと思っていたのですが、どうもテーマと合わずに断念し続けていました。

 

しかし今回のマテリアルぽっぷはまさに小さいロゴデザインがぴったし…!

 

あと画像加工の術を覚えたので、ついでに日本語にしてみました。

 

f:id:uenoyou111:20180619212022j:plain

 

ちなみに後述するのですが、本当は左端に寄せたくてロゴ+うえのブログっていう表記でした。

 

しかし設定しても何故か真ん中にしかならず。あれ?

 

要素ごと左に指定したら案の定スマホ表示でも左端。それならいっそのこと真ん中表示できるようにしようと思い、うえの+ロゴ+ブログという表記にしたのでした。

 

あとプロフィールの後ろはみかんです。

 

f:id:uenoyou111:20180619205708j:plain

 

自動的にぼかしが入るので、それっぽい感じに仕上がっています。細かいところで気が利く素敵なテーマですわ…!

 

あとはサムネイル画像でオススメ記事とかサイドバーに貼ろうと画策中です。

 

気になる点

 

こちらは今のところ気になる点。やり方が悪いだけかもしれませんが…まとめがてら挙げてみます。

 

1.ロゴを画像にすると真ん中にしか表示できない

 

これは上でも書きましたが、何故か左になりません。

 

CSSを見てみるとパソコンサイズだと左、それ以下は中央表示なるようになってるみたいですが…解決法はわからず。

 

ただ真ん中表示になるように自己解決してしまいました。

 

一応インストし直してその直後に設定、デモサイトと同じ画像サイズで設定してみましたがやはり真ん中になってしまいました。

 

※すぐ改善して下さいました。結局PC版は左の表示にしてます。当ブログコメント欄にてお返事いただいてます。

 

2.会話形式を使うと画面上の左表示が消える

 

幸い私はそこまで多用しておりませんでしたが、現在使っている会話形式は左の表示が出ません。

 

f:id:uenoyou111:20180620220917j:plain

 

扱ってる画像のせいかな?と思いましたが、同じ画像のueno指定で左右出してみると右の表示のみしか出ません。

 

当ブログで使ってるCSSはこんな感じです。

 

www.uenoyou.net

 

ちなみに過去記事、全部右の表示に修正しちゃったので今のところ当ブログでは問題ありません。

 

test

test

 

こちらもすぐ改善していただきました、対応早すぎぃ!

 

3.スマホ版表示でサムネイルが右に寄ってる

 

読み込みはじめは良いのですが、数秒後には右に寄っちゃいます。

 

f:id:uenoyou111:20180620222108j:plain

 

こちらもすぐさま対応して頂きました。

 

f:id:uenoyou111:20180621083257j:plain

 

わかりやすくちょっと大きめに。ってか対応早すぎて神。

 

※追記、シェアボタンについて

 

Add thisのシェアボタンを使うと、はてなブックマークをつける時にスマホからだと入力画面が小さくなる問題がありました。

 

f:id:uenoyou111:20180622112859j:plain

 

というお声をあきなすさん(id:kamenutsu)から頂いたので、早速シェアボタンを変更。

 

webgaku.hateblo.jp

 

こちらのシェアボタンに変えた所、Twitterのアイコンが全般的に変な挙動を示しました。

 

f:id:uenoyou111:20180622113213j:plain

f:id:uenoyou111:20180622113226j:plain

 

シェアボタンも、他のボタンは出ないのにTwitterだけ枠が表示される…。

 

f:id:uenoyou111:20180622113300j:plain

 

後から追加したので、多分何かが干渉してるんだろうなぁ~と思いつつコードを見てもさっぱり分からず…。

 

豆ゴロさんに助けを求めると、数分で返信。

 

どうやら元々入ってるコードと、追加したコードのクラス名が被ってしまっているよう(;´∀`)

 

■HTML■
<a class="sns-twitter sns-link" href="https://twitter.com/intent/tweet ?

↑のsns-twitterというクラス名が被っているので、sns-twitter1にする。

■CSS■
.sns-twitter {
background: #55acee;
}

CSSも同様にsns-twitterをsns-twitter1にする。

 

というように、シェアボタン側のクラス名をsns-twitter1に変更することで違うものという認識をさせました。

 

バッチリ改善です。しかも今後の注意点まで教えて下さいました。

 

f:id:uenoyou111:20180622114135j:plain

 

そしてまた何かあればお気軽にご連絡くださいという神対応…。いやもうテーマ云々の前に豆ゴロさんついていきます!というぐらいの勢いです。

 

 

まとめ

 

自分がこうしたいなぁ~と思っていたところを踏まえつつ、自分好みにデザインされたテーマがヒットしてすぐ使わせていただきました…豆ゴロさんありがとうございます!

 

にしても…前は仕事の合間にこっそりやったり色々調整して一週間ぐらいかけてやってた気がします。

 

今回は2日くらいで実装できたので、手慣れたものだなぁ~と思いました。

 

ということで、豆ゴロさんが公開されているテーマはこちら。

 

www.mamegoro.com

 

気になる方は是非!

 

(変更前はバックアップ忘れずに!)

 

豆ゴロさん超対応が早いので、使わせていただく側としてもとても安心できます。素敵すぎ。

 

 

 

ではでは(`・ω・´)ゞ