[e]STINGER7のカスタマイズ第2弾

STINGER7カスタマイズ第2弾のアイキャッチ

Appleを愛する鍼灸あん摩マッサージ指圧師、ナシタカ(@ehicalog)です。

最近テーマ変更をしてから色々といじっているSTINGER7。

これまでにこのような記事を書いています。

今回はカスタマイズ第2弾として変更したデザインを備忘録としてまとめていきます。

参考にさせて頂いたブログ記事もご紹介していますので、これからカスタマイズをお考えの方に役立つと思います。

スポンサーリンク

プロフィール下にSNSフォローボタン

プロフィールのSNSボタン

新たに作成したサイドバーのプロフィール欄の下にSNSのフォローボタンを置きました。

参考にさせて頂いたのがこちらの記事です。

私の場合はプロフィールの下に設置したのと、Googleプラスのアイコンはいらなかったので削除してあります。

ここではデザインが上手く反映されないトラブルがあったで、後で紹介するGoogleChromeを利用しました。

サイドバーの見出しデザイン

サイドバーの見出しにアイコン

サイドバーの見出し部分にアイコンを置いてオシャレにしました。

このカスタマイズの参考はこちらの記事です。

見出しのアイコンは別なものを選んで反映しています。

ここでも私の環境ではCSSが上手く反映されなかったので、GoogleChromeを利用して調整しました。

記事下にあるSNSシェアボタンのデザイン

記事下のSNSシェアボタン

デフォルトである記事下のシェアボタンを少し大きくしてみました。

参考記事はこちら。

やっぱりボタンが目立った方がシェアしたくなりますよね。

タグクラウドのデザイン

タグクラウドのデザイン

これは前に利用していたテーマのデザインが気に入っていたので、そこに近付けようと思ってのカスタマイズです。

参考記事はこちら。

黄色にして目立たせていますので、気になるタグがあればポチッとしてください。

検索窓の設置

検索窓をサイドバーに設置

前のテーマではロゴの下に置いていたGoogleカスタム検索が今回は置けずに困っていて、なかなかどうして良いかわかりません。

とりあえずウィジェットでサイドバーに検索窓を設置してみましたが、今後はまた利用しやすい位置に置けるように試行錯誤したいです。

まとめ

今回もまた前回のカスタマイズ記事の時にお世話になったブログ記事を参考にさせて頂きました。

コードをコピペ出来るのはとてもありがたいですし、こういうコードを使うのかと勉強になります。

加えてそれだけではデザインが反映されないときもあり、その際は対処を色々と考えることで自分の勉強にも繋がっています。

ゼロからコードを考えることは出来なくても、元となるコードを弄ることはできるので、そこから自分なりのデザインに変えていくのは大変でもあり最高に楽しい瞬間でもあります。

便利なGoogleChrome

今回はコードをそのまま使わせて頂いたのですが、私の場合はデザインが上手く反映されずに表示がおかしくなってしまう時が結構ありました。

そこで試したのがGoogle Chromeの検証機能です。

気になる箇所を選択すると、そこに適用されているCSSが分かります。

後はそこからいろいろとプロパティを弄ることができて、数値を変えると実際のデザインにどう反映されるかが確認できるのです。

これなら私でも試行錯誤しながらカスタマイズができるので、デザイン変更の際にはかなり役立ちます。

皆さんもぜひ使ってみてください。

終わりに…

新しいテーマに変えて、それを自分色に染めるって最高に楽しいですよね。

それではまた次回お会いしましょう!

Posted from するぷろ for iOS.

ABOUTこの記事をかいた人

GoProが大好きでHEOR5 Blackから子どもの撮影に活用しています。撮影した動画の編集も大好きで家族の思い出ムービーをたくさん作っているので動画編集についても紹介していきます。