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

SWELLのコンテンツ 入れ替え方法

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

まめもち

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

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

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

目次

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

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

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

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

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

リッチカラムを選択

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

トリミングでリサイズ

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

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

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

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

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

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

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

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

置換完了

【リッチカラム】を複製する方法

作品やご紹介する方が増えたりなど、さまざまな場面で「リッチカラムの行数を増やしたい!」「リッチカラムをコピー&ペーストして使いたい!」と思われる場面もあると思います。

そのためここでは【リッチカラムを増やす方法】について説明していきます。

STEP
増やしたい行(コピー&ペースト元)のどこかをクリックする
リッチカラムを選択
STEP
「…」をクリックして、複製を選択
リッチカラムを複製
STEP
同じリッチカラムが2行複製されているか確認する

同じリッチカラムが複製されたら完成です!

リッチカラムの複製完了

あとは前述した『画像を入れ替える方法』『文字装飾が含まれている部分の文字変更』などを参照しながら、ご自身の好きなコンテンツへと変更してみてください!

ページを丸ごと複製したい場合

HPを運営していると

  • 前回作成した記事をもとにブログを書きたい
  • HP制作時に作ったページを複製したい

こんなご要望が出てくることもあると思います…!

その時に『どうしたらページを複製できるのか』、その手順についてご説明していきます。

STEP
投稿一覧を表示

左のサイドバーから【投稿→投稿一覧】(固定ページを複製したい場合は、【固定ページ】をクリック)へと進み、コピー元の記事を探します。

新規投稿を追加
STEP
コピー元の記事をクリック
コピー元の記事を選択
STEP
全てのブロックをコピーする

右上の「…」をクリックして、【全てのブロックをコピー】を選択します。

全てのブロックをコピー
STEP
新規投稿ページを作成する。

また投稿画面に戻り、画面上部の【新規投稿を追加】ボタンから、新たに作成するページを作ります。

新たなポストを追加
STEP
先ほどコピーしたブロックを貼り付ける

マウスを右クリックして【貼り付け】を選択すると、先ほどコピーしたページが全て貼りつきます。

全てのブロックを貼り付け
STEP
タイトルを追加する。

タイトルはペーストされないので手入力で新たに追加して、右上の【公開】ボタンを押したら新たなページが公開されます。

タイトルを追加

ご留意点:
SEO対策(Googleからの検索流入を増やす)ためには、新たに作ったページの名前設定をしっかりと行うことが大事です。

右のツールバーにあるタブ【投稿】を選択すると、【リンク】(新しく作ったページのURL)が表示されます。

この【リンク】をクリックすると名前が変えられるので、このページを表す英語に変えてください。

パーマリンクの変更

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

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

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

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

文字変更

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

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

リンク先の変更方法

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

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

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

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

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

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

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

リンク先変更2

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

まめもち

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

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

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