【WordPress】【SWELL】フッターに好きな画像を貼りたい

このブログは、はてなブログを利用していますが、これとは別のサイトをWordPressで運営しています。現在は、SWELLという有料テーマを利用しています。

 

 

さて、このテーマを利用して、サイトの外観を整えているところなのですが、フッターに好きな画像を貼りたいのだけれど、やり方が分からない…。今回は調べてやってみた結果をメモしておきます。

 

今回私がやりたいのは、これ。

使用画像: FLAT ICON DESIGN

フッターのところに画像を貼りたい。です。

ここではデモとしてフッター上にビールのイラストを貼っていますが、実際はサイトをイメージした画像を貼りたいと思っています。ビールのイラストもかわいいけど🍺

 

 

WordPress/SWELLでフッターに好きな画像を貼りたい

今回参考にさせて頂いたサイトはこちら。

大変参考になりました。ありがとうございます。

d-amus.com

こちらを読んでいただいたら、以下は読まなくてもいいです。笑

 

今回の方法は、

画像などを貼り付けたブログパーツを作成して、ウィジェット機能を使って貼り付けるです。

 

私が実際にやったことはこちらです。

ブログパーツで新規投稿を選択

まずはブログパーツを作ります。

 

フッターに貼りたい画像を作る

分かるようにタイトルをつけて、編集します。

 

そのまま画像を貼ってもいいのですが、今回は、SWELLのフルブロックを利用して背景の色を付けます。

どこかに「フルワイド」があるので、探してこれを選択します。

【SWELL専用ブロック】フルワイドブロックの使い方 

 

サイズや上下の幅、背景色などを設定します。

 

ここに好きな画像を取り込み、位置や大きさを調整します。

今回はデフォルトで設定されている「見出し」は不要なので、削除しておきます。

 

呼び出しコードの確認

ブログパーツを保存して、呼び出しコードをコピーします。

 

ウィジェットの設定・カスタムHTMLを利用する

ウィジェットの画面を選択します。

 

カスタムHTMLを選択します。

 

フッター直前を選択して…

 

内容のところに、先ほどコピーしたブログパーツの「呼び出しコード」を貼り付けます。

 

完成

できました。

こちらはイメージで作成しただけなので、画像を貼り付けただけですが、ここにロゴを入れたりすることで、簡単にフッター近辺に画像を貼ることができます。

なお、SWELLの場合は、厳密には、フッター直前のウィジェット、フッターのウィジェット、フッターが並ぶので、それを考慮して、方法を考える必要があります。

 

  • フッターウィジェットの利用なし→フッター直前ウィジェットもしくは、フッターウィジェットを使用。(今回の方法でOK)
  • フッターウィジェットの利用あり→フッターの上にフッターウィジェットが入り込むため、上の画像のような見え方にできない。この場合にフッター直上に画像がくるようにしたい場合は、CSSを使う必要がある。(今回の方法は不可)

 

CSSを使ってフッター上に画像等をいれたい場合は、以下のサイトが参考になりそうです。

motoki-design.co.jp

 

今回は自分の備忘録的なところが大きいので、ケースごとの検討は行っておりませんが、どなたかの参考になることがあれば幸いです。

それではこのへんで。(*'▽')/