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

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

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
画像に背景をプラスするカスタマイズ方法を説明。
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
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

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

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

CSSコード

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

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

 

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

 

 

まとめ

追加CSSのまとめ

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

 

コメント( ˶ˆ꒳ˆ˵ )

avatar