こんばんは、レポート部長です。
今回は、ホームページの一番下にあたる部分(フッター)を少しカスタマイズしてみました。
動くかどうかは不明!(このサイトではビシッと動きました)
参考程度にご覧ください。
どのような表示にしたいか
プロフィール(テキスト)、カテゴリー、フォーラム(固定ページ)の3つを等間隔に置き、適度にスペースを空けて、フッター部分を綺麗に表示してみます。
デフォルトでは何も表示されていなく、寂しかったフッター部分が、少しだけ賑やかになりました。
プロフィール(テキスト)部分は、好きなプロフィールをウィジェットのテキストから記入してください。
記入方法についても、後から解説しています。
カテゴリーの編集
カテゴリーをフッターに取り入れる前に、スタイシートを編集して形を整えます。
以下のスタイルシートを”style.css”に貼り付けて使用してください。
#footer .widget_categories li{ margin-bottom:20px; font-size:85%; } #footer .widget_categories .cat-item a{ text-decoration:none; } #footer .widget_categories h4:before{ margin-right:7px; font-family:"FontAwesome"; content:"\f115"; }
フォーラム(固定ページ)の編集
タイトルにはフォーラムと書かれていますが、固定ページを表示させているだけです。
以下のスタイルシートを”style.css”に貼り付けて使用してください。
#footer .widget_pages li{ margin-bottom:20px; font-size:85%; } #footer .widget_pages .page_item a{ text-decoration:none; } #footer .widget_pages h4:before{ margin-right:7px; font-family:"FontAwesome"; content:"\f085"; }
プロフィール(テキスト)の編集
プロフィールは空っぽの状態から、好きな説明文を表記しても良いと思います。
サイドバーにプロフィールを持って行くと、大切なサイドバーの1部分がプロフィールで埋まってしまうことになるので、今回は、目立ちにくいフッター部分に画像とサイトの説明文を追加していくことにしました。
画像(正方形)を用意し、その画像の右側にプロフィールとして、文字列を追加します(後述:上記の3つをウィジェットに追加する)。
画像に関しては無料のキャラクター作成サイトを利用しています。
▶ フェイスアイコンメーカー(無料)
画像とテキストの配置のスタイルシートも書いているので長々となってしまいます。
以下のスタイルシートを”style.css”に貼り付けて使用してください。
/*フッターのタイトル(プロフィール)の設定*/ #footer .widget_text .textwidget{ font-size:85%; } #footer .widget_text h4:before{ margin-right:7px; font-family:"FontAwesome"; content:"\f007"; } /*フッターの内容の設定(画像とテキストの配置など)*/ #footer .widget_text .textwidget img{ width:100px; float:left; } #footer .widget_text .textwidget .footer_plf{ overflow:auto; zoom:1; } #footer .widget_text .textwidget .footer_plf .footer_plf_01{ margin-left:10px; } #footer .widget_text .textwidget .footer_plf .footer_plf_02{ margin-left:10px; margin-top:7px; } #footer .widget_text .textwidget .footer_plf .footer_plf_clear{ clear:both; }
上記の3つをウィジェットに追加する
Word Press左メニューの「外観」から「ウィジェット」へと移行します。
ウィジェット欄の「フッター左」「フッター中」「フッター右」に上記で設定した3つの項目をドラック&ドロップで入力してください。
私は以下のような設定としています。
- フッター左 → プロフィール(テキスト)
- フッター中 → カテゴリー
- フッター右 → フォーラム(固定ページ)
さて、ここで、プロフィール(テキスト)の内容にソースコードを追加し、先ほどの画像とテキストのスタイルシートが反映されるように設定していきます。
フッター左の中に入れたプロフィール(テキスト)を選択し、以下のソースコードを入力してください。
<img src="画像のURL" alt="タイトル" /> <div class="footer_plf"> <div class="footer_plf_01">Name:運営者名</div> <div class="footer_plf_02">SiteName:サイト名</div> <div class="footer_plf_02">Hobby:ジャンル</div> <div class="footer_plf_02">Catchphrase is ・・・</div> <div class="footer_plf_02">Welcome to the ○○○.com</div> </div> <div class="footer_plf_clear"></div>
上記のソースコードをフッター左(プロフィール)に貼り付けて「保存」すると完成です。
もちろん、ソースコード内の情報は、自分の合った情報に置き換えることを忘れずに。
少し長々となってしまいました、お疲れ様でした。
まとめ
いかがでしょうか。
今回、紹介したのは、フッター部分のカスタマイズ方法です。
少し変更するだけでインパクトある外観に仕上がったと思います。
是非、参考にしてください。