あわせて読みたいGをCSSでいじってみた

まず最初にdreamark様スター付けてくださってありがとうございます。
はい、というわけで今回はテーマを変更したことによって今まで使っていた池田仮名様提供のあわせて読みたいGの色が変になっていたのでCSSを使って変更したお話です。

以前もCSSいじってたら配色が崩れてしまったことがあったので要素を指定する大切さを実感したことがあります。
でもなんとなく以前は簡単に直せたような記憶があるんですが今回は苦戦しましたね。
ソース見てもダメだこりゃってなってました。
そもそもあわせて読みたいGとはなんなのって方ようにさっとご説明します。

あわせて読みたいGとは

あわせて読みたいとは記事の一番下に、同じカテゴリの記事を紹介するブログツールです。
以前はZenbackというツールを使っていましたがごちゃごちゃしていたので辞めました。
まとめサイトなどで使われている印象があります。
zenback.jp

いろいろ調べていてたどり着いたのが池田仮名様提供のあわせて読みたいGです。
設置もコピペで楽々ですし、シンプルで見た目も良きデザインです。
細かい設定もできるようなので設置したい方は池田仮名様のブログをご覧くだされ。
bulldra.hatenablog.com

あ、何に苦戦したかというと、このあわせて読みたいGというツールはjQueryで作られています。
なのでソースを見てもわからないというところですね。
例えば見出しの色を変えたいときはソースを見ると.entry-titleというクラスが付けれらていることを確認できるので、.entry-title h4　{ って感じでその場所だけの色を指定できます。
ただ今回は一切わからなかったので自分で勝手にクラスをつけてみました。
やり方は合ってるのかわからないけど、できてるからいいよね（ﾃﾍ

あわせて読みたいGにクラスをつける

<div class="awasete">
<script src=  /*ここにコードを張る*/
/*---省略---*/
</div>

とりあえずawaseteというクラス名をつけました。

見出しの色を変更する

次に見出しの色の変更です。
見出しはH3に設定されているようなので

.awasete h3 {
        background-color:#625772;
        color:#FFFfff;
         }

という風に変更しました。
背景色はブログテーマと同じ色に変更し、文字色は見やすいように白です。

ドロップダウンの変更

ドロップダウンの文字色が白になっていて見えなくなっていたのでこの文字色も変更しました。
ドロップダウンはselectを使うはずなのでselectを指定してみました。

.awasete select {
                color:#625772;
                font-size:15px;
                font-weight:normal; /*文字の太さをノーマルに*/
                }

うまくいきました。
最初は太文字だったのノーマルに変更しました。

ボタンを変更

最後に更新、一覧、購読のボタンをいじっていきます。
ここも文字色が白に変更されていて見えづらくなっていたので変更しました。

.awasete input {
              font-weight:normal; /*文字の太さをノーマルに*/
              font-size:15px;     
              color:#625772;
              float:right;        /*右揃え*/
              margin:2px 5px;     
         }

これは正直なんなのかわからなかったのですが、HTML ボタン　でググったらinputかbuttonの2種類でてきたのでとりあえずinputで指定したらうまくいったって感じです。
ただボタンの位置がずれていて微妙に真ん中より下に位置していたんです。
text-align:centerで指定しても変わらず、marginを使ってもなかなかうまくいかず。
positionは試さなかったんですが、floatで右揃えにしたらY軸はちょうどいい位置に来たのであとはmarginで調整しました。
あとでpositionとかも試してみようかと思います。

まだいろいろいじれるようなので池田仮名様のブログをじっくり読んでみようかと思います。
では今回はこの辺で。
カスタマイズってほどのレベルでなく申し訳ない。