またまたStinger3とWordPressのカスタマイズあれこで、だいぶしまったデザインへ

2019/12/29

また、色々いじくってみた

★全体カラムの左右を入れ替え
STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり幅を調整したりする際のCSS設定 :

★画像に影と縁線つけ
画像に影をつけるワードプレスプラグインShadowsの使い方 | ネットビジネスで20代にて転職して独立したなるひこのブログ :

最初、これを読んでプラグインでがんばったんだけど、なんか変な線がとれなくてあきらめ。

結局CSS3でやったら、できたので、子テーマのCSSに下記のように書いて、img属性に全部縁と影をつけてみたら一番手軽だった。

[CSS]ボックスに影を付ける(ドロップシャドウ)CSS のプロパティ「box-shadow」 :

/* 画像に薄いグレーの縁と影をつける */
.post img {
border:solid 4px #eee;

box-shadow: 4px 4px 8px #666;
-webkit-box-shadow: 4px 4px 8px #666;
-moz-box-shadow: 4px 4px 8px #666;
}

AddQuicktagの設定方法と使い方動画。表示されない? | ネットビジネスで20代にて転職して独立したなるひこのブログ :

このプラグインで画像1つ1つにShadowsをつけるってのもあったんだけど、それはそれで面倒だよね。

でも、AddQuicktagは、いいプラグインなので

AddQuicktagプラグインでタグ挿入ボタンをPrinciple仕様に | 初心者にもおすすめ!無料 WordPress テーマ『Principle』 :

このjsonをインポートしたらかなり決まったタグをいれるときはいい感じです!

STINGER3デフォルトのデザインっぽさをなくすなら、まずカスタマイズしたいCSSセレクタ :

最後にこれで「続きを見る」ボタンをとってみた。

<結果>こんな風に画像がしまっていい感じです!

PS3購入&GT5開始記念サンプルランボルギーニ
countach

<TOPページデザイン変遷>
stinger3_1

stinger3_2

stinger3_3