Simplicityでフッターのカスタマイズをする方法

2015/12/14      その他

193

こんばんは、レポート部長です。

今回は、ホームページの一番下にあたる部分(フッター)を少しカスタマイズしてみました。

動くかどうかは不明！（このサイトではビシッと動きました）

参考程度にご覧ください。

そこで、レポ部は・・・
Simplicityでフッターのカスタマイズをする方法
をレポートしたいと思います。

どのような表示にしたいか

187

プロフィール(テキスト)、カテゴリー、フォーラム(固定ページ)の3つを等間隔に置き、適度にスペースを空けて、フッター部分を綺麗に表示してみます。

デフォルトでは何も表示されていなく、寂しかったフッター部分が、少しだけ賑やかになりました。

プロフィール(テキスト)部分は、好きなプロフィールをウィジェットのテキストから記入してください。

記入方法についても、後から解説しています。

カテゴリーの編集

188

カテゴリーをフッターに取り入れる前に、スタイシートを編集して形を整えます。

以下のスタイルシートを”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";
}
クラス名が長いのはフッター部分だけにスタイルシートを適応している為です。通常のクラス名(.widget_categories)から書いてしまうとサイドバーの同じクラス名にもスタイルシートが適応されてしまい、サイト全体のスタイルが崩れてしまいます。ID名を#footerで指定することでフッター部分にだけスタイルシートを適応するようにしています。

フォーラム(固定ページ)の編集

189

タイトルにはフォーラムと書かれていますが、固定ページを表示させているだけです。

以下のスタイルシートを”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";
}
ワンポイントアドバイス
ソースコード内の<Content:”○○○”>はアイコンを示しています。この○○○の中身を決められたアイコンの数値に変更することで好きなアイコンへと変えることができます。詳しくは次のように検索してください。
フォントアイコン html
検索

プロフィール(テキスト)の編集

190

プロフィールは空っぽの状態から、好きな説明文を表記しても良いと思います。

サイドバーにプロフィールを持って行くと、大切なサイドバーの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;
}
プロフィール内に画像なんていらない、と思われる方は、フッターの内容の設定から1番下までを削除してください。後にウィジェット内にもソースコードを書くので、そのソースコードが書き終わり次第、正常にプロフィールが動作すると思います。

上記の3つをウィジェットに追加する

191

Word Press左メニューの「外観」から「ウィジェット」へと移行します。

ウィジェット欄の「フッター左」「フッター中」「フッター右」に上記で設定した3つの項目をドラック＆ドロップで入力してください。

私は以下のような設定としています。

  • フッター左 → プロフィール(テキスト)
  • フッター中 → カテゴリー
  • フッター右 → フォーラム(固定ページ)

さて、ここで、プロフィール(テキスト)の内容にソースコードを追加し、先ほどの画像とテキストのスタイルシートが反映されるように設定していきます。

フッター左の中に入れたプロフィール(テキスト)を選択し、以下のソースコードを入力してください。

193

<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>

上記のソースコードをフッター左(プロフィール)に貼り付けて「保存」すると完成です。

もちろん、ソースコード内の情報は、自分の合った情報に置き換えることを忘れずに。

少し長々となってしまいました、お疲れ様でした。

まとめ

いかがでしょうか。

今回、紹介したのは、フッター部分のカスタマイズ方法です。

少し変更するだけでインパクトある外観に仕上がったと思います。

是非、参考にしてください。

スポンサーリンク

      レポート部長