Xmasギフトはこちらからどうぞ

【WordPress】テーマ「スワロー」をカスタマイズしてみた【画像編】

注意
コードが表示されない時はブラウザをリロード(更新)して下さい

「OPEN CAGE」SWALLOW

早い物でブログ始めて丸2ヶ月が過ぎました。
何せ右も左も分からない状態で始めたので(最初はみんなそうでしょうが)
【WordPress】の存在すら知らなっかたぐらいですから笑
現在使用しているテーマーは「OPENCAGE」のSWALLOW(スワロー)です。

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。プロブロガー八木仁平監修のもと、OPENCAGEが開発したWordPressテーマ。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。

※OPENCAGEホームページより抜粋 5月の初めにネットで調べて良さそうだったので購入しました。

サポートもキッチリ対応してくれますし、今の所殆ど不満は無いです。
初心者の私でも使いこなせますから。
しかし…この無駄な機能やデザインを削ぎ落としたのが【SWALLOW】の売りであるのは百も承知なんですが、少し慣れてくるとあちこちもう少し変えてみたいと言う欲求にかられました。


最近この本も購入して現在勉強中です。 (亀のようなスピードですが笑)

諸先輩の方々曰く「プラグインを使用しなくても『CSS』で編集出来るならそれに越した事はない」と言う意見をいくつか見受けたからでもあります。
となるとやっぱり「CSS・HTML」の勉強は避けて通る事は出来ないのだろうなーと考える様になりました。
尚レンタルサーバーは「ロリポップ・ライトプラン」で運用しています。
同じ様な環境の方の参考に少しでもなればと思います。 WAF設定 
注意

「CSS編集」の際はログイン→セキュリティ→WAF設定→ドメインを「無効にする」をタップして下さい。 終了したら元の「有効」に戻しましょう。

「OPEN CAGE」のCSSコードを基に試行錯誤

「OPENCAGE」のホームページから抽出しました。
このコードを基に本と睨めっこしながら試行錯誤の連続笑 おかげでだんだんとポイントが分かって来ました。
色の設定についてはこちらを参考にして色々変えて見ました。
影の設定については今回一番重要視したので、忘備録も兼ねて記述しておきます。 CSSコード2

CSSコード6選

①画像に影を付ける

「CSS編集」を開き下の様にコードを追加します。 コードを追加
貼り付ける場所です。

追加CSSに貼り付け

出力は以下の様になります。

<img src=xxxxx>””の中に画像のアドレスを挿入します。
だいごろうとなな
写真に影が無事付きました。

②写真が重なった風のスタイル

出力は以下の様になります。

 

注意
2018年11月3日現在表示がおかしいです。
只今原因究明中です。申し訳ありませんm(_ _)m

写真が無事重ね合わさりました。
こちらの記事も合わせてどうぞ
アイキャッチ画像【WordPress】テーマ「スワロー」をカスタマイズしてみた【ラインマーカー他】 以上、お読みいただきありがとうございました。