書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】フッターを3分割してウィジェットで管理する

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

本日はフッター部分を3分割にしてウィジェットで管理してしまおう!

という記事になります。

『AFFINGER』はあまり関係ありませんね…

2012年ごろからフッターエリアが注目され、フッターエリアを充実させるユーザが増えてきました。

なぜフッターエリアが注目されたかというと…

かきてぃー
フッターまでたどり着く閲覧者はこのブログに興味がある人だ!だからフッターを読んでくれる可能性が高い!

と考えたわけですね。

私も2015年5月ぐらいまではフッターはコピーライトぐらいしか書いておりませんでした。

2015年夏にフッターエリアをカスタマイズし、リンクを貼ってみたところ意外とクリックされるじゃありませんか!

ネットビジネスは出来る人の真似をしろって言いますけど、本当ですね…。

前置きはこれくらいにして早速カスタマイズしていきましょう!

分割するのは意外と簡単!手順はコレだ!

  1. 「functions.php」にウィジェットの追加
  2. 「footer.php」にウィジェットの呼び出し
  3. 「css」をカスタマイズ

これでフッター部が分割でき、ウィジェットで管理できます。

イメージ的にはフッターに追加したウィジェットを乗っけるって感じです。

当ブログは3つのウィジェットを追加しています。

左・中・右

の3つです。

完成系は上記のようになります。(各ブロックの幅やデザインはcssで変更することになります。)

「functions.php」にウィジェットを追加

では、1つ目の手順。ウィジェットを追加していきましょう。

これまでのカスタマイズブログで何度か解説しておりますが、ここでも念のためご説明しておきましょう。

カスタマイズするのは600行目~の

になります。

ここはウィジェットの設定ロジックになり、追加することで新しいウィジェットを作成することが可能です。

既存のウィジェットに追加する形になりますので、今までに何も追加していない方は774行目にある

が最後のウィジェットになりますね。

この下にフッター用のウィジェットを追加します。

既に追加したことのある方はidの設定に気を付けながら、追加して下さい。

上記のような形でフッターウィジェットを追加します。

div要素にoriginalを付けているのは既存のclassと重複しないようにする為です。

こんな形でウィジェットにフッターウィジェットが追加されていればOKです。

「footer.php」にウィジェット呼び出しを追加しよう

footerで先ほど追加したフッターウィジェットを呼び出すロジックを記述します。

『AFFINGER』のフッターには既に右・左のフッターエリアが追加してあります。

2分割でよければ、このまま使用するのもアリですが、今回は3分割にするのが目的ですので思い切って削除します。

3行目~22行目をごっそり削除しましょう。

削除した後↓

<footer>タグのエリアに新たなロジックを書いていきます。

Tabを使い、ブロック毎に分かりやすくしておくと、次に見た時に親切(自分に)ですよね!

dynamic_sidebar(20)の数値部分は『functions』で追加したidを設定して下さいね。

これで、フッターエリアに呼び出したウィジェットが表示されるようになりました!

試しにテキストを追加して保存しましょう。

こんな感じでフッターエリアに情報が反映されればOKです!

「CSS」を変更してデザインを整えよう

PC・タブレット・スマホに対応する為、レスポンシブなCSSにします。

文字色や見出しのデザイン色、下線の色のみを変更しております。

デフォルトは白ベースなので、背景色が白の場合、文字は全く見えなくなりますので、その場合は文字色を変更して下さい。

  • 130行目…見出し(タイトル)の左側色(デフォルトは水色)
  • 132行目…文字色(デフォルトは白)
  • 133行目…下線の色(デフォルトは白)

となっております。

スポンサーリンク

完成系

「functions.php」

「footer.php」

「css」

私の場合は、

  • 左エリアにSNS系・プロフィール
  • 中央エリアにアーカイブ・カテゴリー・タグ
  • 右エリアに人気記事

を設置しています。

色んなブログを見ていると、

  • 広告を貼ったり
  • 相互リンクを貼ったり
  • ナビメニューを貼ったり
  • 画像を貼ったり
  • コメントを書いたり

使い方は人それぞれですね。

かきてぃー
自分好みのフッターに仕上げればいいと思います!
それでは簡単ですが、本日はこれにて終了です!
かきてぃー
本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











Comment

  1. テンジク より:

    初めまして。[アフィンガー フッダー] で検索してたどり着きました。まさに3分割がしたかったんです。ありがとうございました!

コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.