テーマ変更に終わりはなし…！うえの(@uenoyou111)です( ˘ω˘)
今まで使ってたテーマはZENO-TEALで結構お気に入りだったのですが、なんとなく不便なところも感じていていいテーマが無いかなぁ～とずっと思っていました。
そんな時に、ふと豆ゴロさん(@asgard_yumu)がこんなツイートをしておりました。
はてなのテーマ作ってわかったけど、意外にみんな必須って書いてあってもカスタマイズ記事読まない＝アクセス増えるかと思ってたら全然増えない。
— 豆ゴロ@副業ブロガー (@asgard_yumu) 2018年6月19日
ただインストールされていないだけ…？ｗ
あとは新着にいる時にたくさんダウンロードしてもらってランキング入っておかないと確実に埋もれるなぁ。
え、豆ゴロさん作ったの？！と思い、早速見てみると…
おお…めちゃいくない…？すぐテストブログにインスト。
今気づきましたが、相当よかですね…！
— うえのみかん@寝てるから静かにね (@uenoyou111) 2018年6月19日
かなり本気に検討します…！！
バグも多いのですがよろしければぜひ～！
— 豆ゴロ@副業ブロガー (@asgard_yumu) 2018年6月19日
おかしな点があればサポートいたしますので～！
お優しい…！
ということで、変更のまとめです。
変更前との比較
実は変更前のスクショを撮り忘れていて、前回のものから引用です。
ちなみに前回の記事はこちら。
そして変更前のスクショはこちら。パソコン版のみです。
ホントはブログロゴにグラデがかかってたり色々変更ありましたが、まぁご愛嬌ということで。
そしてマテリアルぽっぷ導入後はこちら。
スマホ版、タブレット版でも変わります。
ちょっと様子を見ながら細かい箇所は変えていこうと思いますが、既に大満足でございます…！
変更した箇所
主に変更したのは全体のカラーコードとマテリアルぽっぷ公式カスタマイズです。
こちらデモサイトにカスタマイズ方法、細かい配色の変更方法、必須設定などが載っています。
こちらで配色の設定を変更し、前ブログテーマからグラデーションカラーをそのまま引っ張ってます。
あとアニメーションもそのまま持ってきております。
基本的にはマテリアルぽっぷのデモサイトに載ってるカスタマイズ方法を元に、自分のカラーコードを載せたくらいになっています。
あ、シェアボタンに関してはテーマ独自のものとかは無いので公式か公開されてるものを使うことになります。
私は今回新たにAdd thisというものを使いました。
これのInlineという項目になります。また後日まとめようかなぁ。
ブログタイトルも変更
これも細かい部分ですが、今まではロゴサイトで変更すると英字しか扱いがなかったので仕方なくuenoblogになっていました。
実は前々から、ブログタイトルのロゴは小さくしたいなぁと思っていたのですが、どうもテーマと合わずに断念し続けていました。
しかし今回のマテリアルぽっぷはまさに小さいロゴデザインがぴったし…！
あと画像加工の術を覚えたので、ついでに日本語にしてみました。
ちなみに後述するのですが、本当は左端に寄せたくてロゴ+うえのブログっていう表記でした。
しかし設定しても何故か真ん中にしかならず。あれ？
要素ごと左に指定したら案の定スマホ表示でも左端。それならいっそのこと真ん中表示できるようにしようと思い、うえの+ロゴ+ブログという表記にしたのでした。
あとプロフィールの後ろはみかんです。
自動的にぼかしが入るので、それっぽい感じに仕上がっています。細かいところで気が利く素敵なテーマですわ…！
あとはサムネイル画像でオススメ記事とかサイドバーに貼ろうと画策中です。
気になる点
こちらは今のところ気になる点。やり方が悪いだけかもしれませんが…まとめがてら挙げてみます。
１．ロゴを画像にすると真ん中にしか表示できない
これは上でも書きましたが、何故か左になりません。
CSSを見てみるとパソコンサイズだと左、それ以下は中央表示なるようになってるみたいですが…解決法はわからず。
ただ真ん中表示になるように自己解決してしまいました。
一応インストし直してその直後に設定、デモサイトと同じ画像サイズで設定してみましたがやはり真ん中になってしまいました。
※すぐ改善して下さいました。結局PC版は左の表示にしてます。当ブログコメント欄にてお返事いただいてます。
２．会話形式を使うと画面上の左表示が消える
幸い私はそこまで多用しておりませんでしたが、現在使っている会話形式は左の表示が出ません。
扱ってる画像のせいかな？と思いましたが、同じ画像のueno指定で左右出してみると右の表示のみしか出ません。
当ブログで使ってるCSSはこんな感じです。
ちなみに過去記事、全部右の表示に修正しちゃったので今のところ当ブログでは問題ありません。
test
test
こちらもすぐ改善していただきました、対応早すぎぃ！
３．スマホ版表示でサムネイルが右に寄ってる
読み込みはじめは良いのですが、数秒後には右に寄っちゃいます。
こちらもすぐさま対応して頂きました。
わかりやすくちょっと大きめに。ってか対応早すぎて神。
※追記、シェアボタンについて
Add thisのシェアボタンを使うと、はてなブックマークをつける時にスマホからだと入力画面が小さくなる問題がありました。
というお声をあきなすさん(id:kamenutsu)から頂いたので、早速シェアボタンを変更。
こちらのシェアボタンに変えた所、Twitterのアイコンが全般的に変な挙動を示しました。
シェアボタンも、他のボタンは出ないのにTwitterだけ枠が表示される…。
後から追加したので、多分何かが干渉してるんだろうなぁ～と思いつつコードを見てもさっぱり分からず…。
豆ゴロさんに助けを求めると、数分で返信。
どうやら元々入ってるコードと、追加したコードのクラス名が被ってしまっているよう(；´∀｀)
■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に変更することで違うものという認識をさせました。
バッチリ改善です。しかも今後の注意点まで教えて下さいました。
そしてまた何かあればお気軽にご連絡くださいという神対応…。いやもうテーマ云々の前に豆ゴロさんついていきます！というぐらいの勢いです。
まとめ
自分がこうしたいなぁ～と思っていたところを踏まえつつ、自分好みにデザインされたテーマがヒットしてすぐ使わせていただきました…豆ゴロさんありがとうございます！
にしても…前は仕事の合間にこっそりやったり色々調整して一週間ぐらいかけてやってた気がします。
今回は２日くらいで実装できたので、手慣れたものだなぁ～と思いました。
ということで、豆ゴロさんが公開されているテーマはこちら。
気になる方は是非！
(変更前はバックアップ忘れずに！)
豆ゴロさん超対応が早いので、使わせていただく側としてもとても安心できます。素敵すぎ。
ではでは(｀･ω･´)ゞ
