Simplicity フッターメタタグ情報の位置と色(サンプル付)

tag

 WordPressのテーマSimplicityの基本ウィジェットにある
「投稿SNSボタン下」
とても便利なので色々詰め込んでたらメタ情報が投稿から離れすぎてしまったため元の位置へ固定する方法です。

ついでにこのメタ情報を装飾するサンプル付きコードも載せてます。

スポンサーリンク

「投稿SNSボタン下」ウィジェットに追加すると

Simplicityの"footer-post-meta"
タグ情報・投稿者情報・編集リンクの↓この部分。

footer-post-meta

「投稿SNSボタン下」ウィジェットを利用してない場合の表示は
SNSボタン直下に位置します。

footer-post-meta

私が理想とするのはまさにこの配置で
投稿記事⇒SNS⇒投稿者
ここまでが記事の紹介部分で、あとの詰め込んだコンテンツは記事に関係無いオマケ的なもので、記事目当てに来てくれた訪問者がページを閉じる関門でもあるため関連タグ情報が記事下か、更に下のオマケの下か。というのは直帰率にも大きく関わる気がします。

「投稿SNSボタン下」にコンテンツを詰め込んだ状態

投稿SNSボタン下

「おーい!どこまで下がるんだ~?」
ってくらいに遠くまで下がってしまい、これでは記事に興味を持ってくれた訪問者もタグ情報に気がつきません。

フッターのメタ情報の位置を移動する。

この下がってしまった"footer-post-meta"メタ情報を
「投稿SNSボタン下」ウィジェットにいくら追加しても、SNSボタン直下に固定されるようにテーマを編集します。

親テーマの編集になります。
必ずバックアップをとって、自己責任で!

外観テーマの編集から
Simplicity1.6.0: entry-body.phpを開きます。

Ctl+Fキーで検索窓を出し投稿SNSボタン下ウイジェットを検索。

メタ情報の位置を移動

↑画像のように、青い部分が「投稿SNSボタン下ウイジェット」

その下にある<p class="footer-post-meta"> ~ </p> までを切り取って
投稿SNSボタン下ウイジェット」の上、</div>と書かれた下へペースト。

これでメタ情報が投稿SNSボタン下ウイジェットの下から、SNSボタン直下に位置したと思います。

メタ情報を帯で装飾

ついでにメタ情報に背景色を付けて帯にしてみましょう。

Simplicity child: スタイルシート (style.css)へ追記します。

ピンク

footer-post-metaピンク

ブルー

footer-post-metaブルー

背景ブラック&文字色

footer-post-metaブラック

下線のみ

footer-post-meta下線

角丸とシャドウも入れて

footer-post-meta角丸シャドウ

以上!お疲れ様でした。(^^)/

おすすめ

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る