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