【SANGOカスタマイズしてみた】応用編:画像に背景をプラスする

画像に全面背景をプラスしてみた

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

この記事では
画像に背景をプラスするカスタマイズ方法を説明。
CUSTOM POINT
背景が全面を全面にプラスするので、記事内のアクセントに使用すると効果的だと思います。

サンプル用の画像

大きさ:361✕361px

休日が欲しい気持ちが強かったので、この画像を使用しました。
癒やしの本を見に行く


背景をプラスしてみた

サンプル用の画像

大きさ361✕361px

休日が欲しい気持ちが強かったので、この画像を使用しました。

癒やしの本を見に行く

MENくん

幅いっぱいに背景がつくように設定!


このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

テキストエディタにコードを追加

1列目はBefore(開始タグ)、3列目はAfter(終了タグ)になります。

プラグインでタグの登録をしておくと毎回記入する手間が減ります。

2列目はSANGOに標準で入っているショートコード(2列)に画像と文字(とボタン)を入れてください。この部分はお好みです。

MENくん

プラグインはAddQuicktagやVisual Editor Custom Buttonsがおすすめです!

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

CSSコード

カラーコード
カラーコードの部分はお好みで変更してください。ぼくは透明度を利用して背景を設定しています。

詳しくはこちら
文字の色に透明度を使ってみる文字の配色テクニック:透明度を使った配色とその応用

 

MENくん

記事エリアの横幅を変更している人は調整が必要です。(15pxと64pxの部分)

 

 

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • テキストエディタにコードを書き込む。
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
  • プラグインでコードを登録して終了。
MENくん

背景が全面にプラスされました!