【SANGOを自分でカスタマイズ】画像をSANGOになじむ感じにする

画像をふわっと表示させる

こんな感じです

Before

After


画像にリンクを付けてみた

ふわっと浮き上がる画像
マウスをのせると、ふわっと浮き上がる感じです。SANGOにとってもなじみますね!
MENくん

背景が白色の画像だと使いやすいかもです!

カスタマイズする準備

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

コードを追記するための方法は3つ

カスタマイズ方法

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

追加CSSの使い方はこちら

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

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

まずはリンクなしのフワッと画像のコード

.img-huwattoの部分はクラス名なので自分のわかりやすいものに変えていただいてOKです。

カスタマイズがうまくいったか確認

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

画像にクラス名を追加します。

画像にクラス名追加の手順
ビジュアルエディタ
画像をクリック
編集画面

ビジュアルエディタからフワッとさせたい画像にクラス(今回は.img-huwatto)をつけます。

あとは更新(もしくは下書きとして保存)してちゃんと画像に反映されているか確認しておしまいです。

MENくん

これでふわっと画像のでき上がりです!

リンク付きの画像をフワッとさせる場合

リンク付きの画像なので、わかりやすくクラス名に-linkを追加しました。

あとは前に説明した手順で行っていきます。

画像をフワッとさせる手順まとめ

まとめ

手順をザクっと説明
画像をフワッとさせる
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • ビジュアルエディタで画像にクラス名を追加。
  • 更新して確認。
MENくん

これで画像もSANGOっぽくなりますね!