このブログは、はてなブログを利用していますが、これとは別のサイトをWordPressで運営しています。現在は、SWELLという有料テーマを利用しています。
さて、このテーマを利用して、サイトの外観を整えているところなのですが、フッターに好きな画像を貼りたいのだけれど、やり方が分からない…。今回は調べてやってみた結果をメモしておきます。
今回私がやりたいのは、これ。
使用画像: FLAT ICON DESIGN
フッターのところに画像を貼りたい。です。
ここではデモとしてフッター上にビールのイラストを貼っていますが、実際はサイトをイメージした画像を貼りたいと思っています。ビールのイラストもかわいいけど🍺
WordPress/SWELLでフッターに好きな画像を貼りたい
今回参考にさせて頂いたサイトはこちら。
大変参考になりました。ありがとうございます。
こちらを読んでいただいたら、以下は読まなくてもいいです。笑
今回の方法は、
画像などを貼り付けたブログパーツを作成して、ウィジェット機能を使って貼り付けるです。
私が実際にやったことはこちらです。
ブログパーツで新規投稿を選択
まずはブログパーツを作ります。
フッターに貼りたい画像を作る
分かるようにタイトルをつけて、編集します。
そのまま画像を貼ってもいいのですが、今回は、SWELLのフルブロックを利用して背景の色を付けます。
どこかに「フルワイド」があるので、探してこれを選択します。
サイズや上下の幅、背景色などを設定します。
ここに好きな画像を取り込み、位置や大きさを調整します。
今回はデフォルトで設定されている「見出し」は不要なので、削除しておきます。
呼び出しコードの確認
ブログパーツを保存して、呼び出しコードをコピーします。
ウィジェットの設定・カスタムHTMLを利用する
ウィジェットの画面を選択します。
カスタムHTMLを選択します。
フッター直前を選択して…
内容のところに、先ほどコピーしたブログパーツの「呼び出しコード」を貼り付けます。
完成
できました。
こちらはイメージで作成しただけなので、画像を貼り付けただけですが、ここにロゴを入れたりすることで、簡単にフッター近辺に画像を貼ることができます。
なお、SWELLの場合は、厳密には、フッター直前のウィジェット、フッターのウィジェット、フッターが並ぶので、それを考慮して、方法を考える必要があります。
- フッターウィジェットの利用なし→フッター直前ウィジェットもしくは、フッターウィジェットを使用。（今回の方法でOK）
- フッターウィジェットの利用あり→フッターの上にフッターウィジェットが入り込むため、上の画像のような見え方にできない。この場合にフッター直上に画像がくるようにしたい場合は、CSSを使う必要がある。（今回の方法は不可）
CSSを使ってフッター上に画像等をいれたい場合は、以下のサイトが参考になりそうです。
今回は自分の備忘録的なところが大きいので、ケースごとの検討は行っておりませんが、どなたかの参考になることがあれば幸いです。
それではこのへんで。(*'▽')/