最近よく読んでいただいてるページはこちら

ちっちゃなカスタマイズで!もっと自分のお気に入り

2016.10.22

当ブログは、STINGER PLUSを使わせていただいてます。カスタマイザーだけで楽に設定ができるようになっていて、HTMLはもちろんCSSもほっとんどわかってない私には、とてもありがたい!
自分のブログは自分が一番よく見るわけで、細かいところが気になったり、他のブログを拝見してて飾り方を真似したくなってきます。
もっともっと自分好みにしていきたい。細かいところをちょっと変えるだけでも、見やすさや使いやすさは変わってきます。気分もね。
今回は、一つひとつは記事にはならないぐらいの、小さなちいさな変更をまとめました。
カスタマイズを記事にしてくださってる方々の、コピペさせていただいたものについてはリンク先を明記してあります。詳しくは、見に行かれてください。
同じテーマを使ってる方の、お役に立てたら幸いです。

2017年1月現在は テーマをSTINGER8に変更しています。

トップページ

ヘッダーを入れ替え予定でいます。作ってもらえるの待ちなので、サイドバーとフッター、アドセンスの位置を変えました。
ここだけでなく、すべてのページのリンクがマウスオーバーでペコッと動くようにもしました。

記事一覧に広告を挿入

下線を、点線にして色を変えたほかは、そのままです。

WordPress:記事一覧ページにアドセンス広告を設置する方法

サイドバーの見出し

頭にダブルの四角をつけ、下線を2本線にしました。
STINGER7:サイドバーの見出しデザインをカスタマイズする方法

フッター

3カラムにしました。右側は、どうしよう?と考え中です。
STINGER PLUS に3カラムのフッターを追加する方法(背景色指定or背景画像使用)

左に blogram のブログパーツを設置。私個人は、フッターまで見ることは、ほぼありません。だからこそ動くものがあっても邪魔にならないし、逆に目を引きやすいかと思います。

タグを設置。これも動きのあるものをとも考えましたが、結局シンプル一番!と思い直しました。でも、見た目は大事だからデザインを変えました。
STINGER7:タグクラウドのデザインをカスタマイズする方法【サイドバーウィジェット】

リンク部分が動くように

マウスを合わせると、ペコッと沈むように見えます。リンクだ、と、わかりやすくなりました。

リンクにマウスを乗せるとピコッと動くようにする方法

エントリー内

文字の大きさと間隔の調整、見出しのデザインと最下部のページ送り、SNSボタン位置を変更。コメント欄にはプラグインを導入しました。本などの紹介用に、ヨメレバ・カエレバ・ポチレバの導入も。

文字の大きさと行間の変更

デフォルトだと、私には文字がちょっと小さく、間隔も狭く感じられます。
なぜか親テーマのstyle.cssを変えても反映されず、子テーマの方で文字サイズを16px、line-heightを30pxにしました。

見出し装飾

デザイン例を見てると「うわー、これかわいい」に、したくなる。

見出しカスタマイズ1

リボン状のはこちらから アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン
付箋はこちらから H1一つでここまで出来るCSS見出しデザインのアイデア9個

手書き風はこちらから シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

すごく気に入ったんですが、実際に適用してみたらちょっとうっとうしかった。ピンクの、リボン状のはエントリーエリアをくっきりとわけてしまうし。
見出しだということがわかるようにはしたいけれど、目立たせたいというわけではないんだと気づきました。
大見出し、h1も含め、h4までを以下のようにしました。シンプルすぎて物足りなさも感じるけど、このぐらいの方が飽きがこないかな、と。

見出しカスタマイズ2

ベージ送りをサムネイル付きに

Kanamiさんのところから、コピーしてきて、サムネイルを丸く、文字の囲みの角を丸くしました。
STINGER PLUS カスタマイズ-記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに配置する方法
おまけで書いてくれてます。
本文下のアドセンスを横並びにも、しました。その節は…Kanamiさん、いつもいつもありがとう!

SNSシェアボタン位置を移動

本文読んでもらって、そのままシェアしてもらえれば嬉しいの気持ち。
デフォルトは、たしかコメント欄の下でしたよね? 遠いなぁと感じてました。感動は、そのままにすぐシェアしちゃいたい。シェアボタン探してる間に、私のテンションは落ちちゃうんだよね。

コメント欄をプラグインで変更

DISQUSを導入しました。詳細は、以下の記事を見てください。
ブログのコメント欄をシェア?DSQUS

ヨメレバのデザイン変更

本の紹介はプラグイン『AmazonJS』を使っていたんですが、表示がちょっと気に入らなかったのもあり、やめる方向でいます。設定大変だったんだけどね。
設定という意味でも、ヨメレバ は楽です。作者、かん吉さんに感謝!
「ヨメレバ・カエレバ・ポチレバ」一覧
カスタマイズは、レスポンシブのCSSをコピペ。
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!

どーしてもできなかったこと

リストにした部分と、その上下の本文の間隔を詰めることは、HTMLの性質上(?)しょうがないんだとか。すごく気になるのに。
関連記事の見出し、h3のままでいいんだけど、デザインはちょっとぐらい変えたい。これも、できませんでした。

さいごに: Special Thanks!

最後になりましたが、カスタマイズにあたっては
いつもの Kanamiさん と、
DICEさん に、
大変お世話になりました。ありがとうございました。

その他、テーマの最初のカスタマイズは、こちらにまとめてます。
『STINGER PLUS+』カスタマイズでお世話になったサイトと私の設定