【ホームページ制作後】SWELLのコンテンツ入れ替え方法。

この記事ではホームページ制作後(以下HP制作)にお客様からいただいたご質問を中心に、ご自身でメンテナンスできる方法をお伝えしていきます。

まめもち

ぜひご自身で入れ替えして、使いやすいHPにしていただきたいです!

そのため使い方で迷ったりお困りの時は、お気軽にご連絡・ご相談をお待ちしています。随時追記も検討します。

変更した後は、必ず記事を【更新】ボタンを、忘れずにクリックしてください。

目次

【リッチカラム】内の画像を入れ替える方法

SWELLには【リッチカラム】(もしくは【カラム】)というブロックがあり、「リッチカラム内の画像を入れ替えをしたい」とご相談をいただくことが多いです。

リッチカラムとは
複数列で横並びにコンテンツを配置できるブロックです。

変更したい場所をクリックした時に、左下のブロック組み合わせを見ることで、【リッチカラム】が使われているかどうか分かります。

その後左下の【リッチカラム】を選択すると、下図のようにリッチカラムが使われている場所が青枠で選択されます。

リッチカラムを選択

これを丸ごと変更してしまうとレイアウト崩れが発生するので、まずは下準備から。

リッチカラムを丸ごとコピーして、他の記事にコピー&ペーストしておきます。

そうすることで万が一表記崩れが発生して元に戻したい時も慌てずに済みます!

他の記事へコピー&ペーストする方法
STEP
新規固定ページを作成する

左の【固定ページ】を選択して、【新規固定ページ】を作成する。

新規固定ページ追加
STEP
リッチカラムをコピーして、新規固定ページに貼り付ける
リッチカラムをコピー

コピー後は【マウスを右クリック→貼り付け】で新規固定ページに貼り付けできます。

その後はいよいよ画像を変更していきます!

画像変更方法
STEP
変更したい画像を選択する

まずは変更したい画像をクリックします。

するとメニューが現れるので【置換】を選択します。

置換前の画像
STEP
変更したい画像サイズを確認

変更したい画像と変更後の画像サイズを合わせないと、表記崩れが発生します。

そのためまずは元の画像の大きさを確認します。

元の画像サイズを確認
STEP
画像サイズを合わせる

新たに挿入したい画像を、元の画像と同じサイズに加工します。

i love imgというサイトの切り抜き機能を使うと、簡単に切り抜きできます。

トリミングでリサイズ

SEO(Googleからの集客)を行なっている方は、サイトのスピードを落とさない方が良いので、同じくi love imgから圧縮も行ってください。

STEP
置換後の画像をアップロード

先ほどサイズ調整をした、入れ替えたい画像を【アップロード】します。

【メディア→新しいファイルを追加→ファイルの選択】この順で画像をアップロード(HP上に入れる)ことができます。

アップロード方法
STEP
置換後の画像を選択

先ほどの【置換】画面に戻り、サイズを調整した入れ替え後の画像を選択します。

置換後の画像を選択
STEP
置換完了を確認

画像が入れ替わっていたら成功です。

置換完了

文字加工がされている箇所の変更

色やサイズが通常の黒文字と異なる見出しなどの文字を変更する方法とお伝えします。

STEP
装飾が付いている文字の真ん中にカーソルを合わせる

装飾を1から付け直すの大変なので、まずは装飾(色・サイズの大小)が付いている文字の間にカーソルを当てて、そのまま装飾が引き継げるか検討します。

文字変更

ちなみに【B、↓、T】と書いている部分をクリックすれば、どのような装飾が施されているか分かります。

STEP
上手く引き継げない場合は、手動で再度装飾をつける。

リンク先の変更方法

「繋いでいたリンク先のページが変わった」
「他のページに差し替えたい」

こんなこともよくありますよね。

リンク先を変えたい時は、次の要領で対応が可能です。

STEP
リンク先を変えたい部分をクリック

リンク先を変えたい部分をクリックすると鉛筆マークが現れるので選択します。

リンク先変更
STEP
リンク先を変更

変更したいリンク先へと変更し、保存を押せば完成です。

リンク先変更2

上手くいかない場合は、いつでもご相談ください

まめもち

ここまでご調整、お疲れ様でした!

本記事をもとに試してみて上手くいかない場合は、私でスポット対応も可能なのでお気軽にご連絡・ご相談をお待ちしています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次