＃025　WordPressのフッターのカスタマイズ

イントロダクション

今日は『フッター』とかいうものに手を入れようと思います。

ちなみにフッターとはブログの最下部にあるヘッダーみたいなものらしいです。

今現在の当ブログで使用されているのは、↑上記画像のような文字だけで構成されたシンプルというよりは虚無という感じのフッターなんですよね。

これを、もうちょっと見栄えがするように設定しようと思います。

まあ、フッターをそんなに気を付けて見る人もいないと思いますが、作業自体はすぐ終わるそうなので休養期間中にやっておく事にしましょう。

WordPressのフッターのカスタマイズ

と、いう事でカスタマイズですが……CSSを追記しないといけないようです。

またしても呪文の羅列ですか。

微妙にやる気を削がれましたが、そんなに難しくはないという事でやってみる事にします。

尚、今回のカスタマイズは下記3つのサイト様を参考にさせて頂きました。

↑フッターのレイアウト等の参考にさせて頂きました。

↑フッター背景追加の参考にさせて頂きました。

↑文字の縁取りの参考にさせて頂きました。

と、いう事で小一時間くらい何やかんやCSSをいじって完成したのが↑上記のフッターです。

割と微妙ですが、あんまり作り込むと休養にならないので今日はここまでにしましょう。

多分、その内に修正すると思います。

今回追記したCSSはこちら

/* フッターカスタマイズ */
.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
  border-top: 4px solid #72c7e6; /*上部にボーダー追加*/
}
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}
.footer-bottom-logo .logo-image {
  padding: 0;
  max-width: 160px; /*ロゴ画像を少し大きく*/
  margin: 0 auto;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
  justify-content: center;
  margin-bottom: 1em;
}
.navi-footer-in a {
  color: #FFFFFF; /*メニューの文字色*/
text-shadow: 
    black 2px 0px,  black -2px 0px,
    black 0px -2px, black 0px 2px,
    black 2px 2px , black -2px 2px,
    black 2px -2px, black -2px -2px,
    black 1px 2px,  black -1px 2px,
    black 1px -2px, black -1px -2px,
    black 2px 1px,  black -2px 1px,
    black 2px -1px, black -2px -1px;
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #FF66FF; /*文字色を通常時と同じに*/
  background: none; /*背景色をなしに*/
  text-decoration: underline; /*アンダーラインを追加*/
}
.footer-bottom.fnm-text-width .menu-footer li {
  line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
.copyright {
  color: #FFFFFF; /*クレジットの文字色*/
text-shadow: 
    black 2px 0px,  black -2px 0px,
    black 0px -2px, black 0px 2px,
    black 2px 2px , black -2px 2px,
    black 2px -2px, black -2px -2px,
    black 1px 2px,  black -1px 2px,
    black 1px -2px, black -1px -2px,
    black 2px 1px,  black -2px 1px,
    black 2px -1px, black -2px -1px;
}
@media screen and (max-width: 834px) {
  .navi-footer-in > .menu-footer li.menu-item {
    border: none; /*モバイルでメニューのボーダーを消す*/
  }
}
@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    width: 100%;
    display: block;
    flex: auto;
    padding: 0.3em 0;
  }
}
/* フッター背景追加 */
#footer {
	background-image: url( 入れたい画像URL );
	background-size: cover;
}

今回の経費＆記事作成時間

なんと、今日の記事で総制作時間が100時間を迎えました。

……体感的には、その3倍くらいやっている気がしますが。

まあ、色々な方向性に時間を割り振ってますので、純粋にブログ特化で100時間やってきている人には遠く及ばないレベルなのは間違いないと思います。

別に急ぐ理由もないので、焦らないでゆっくりやっていきましょう。

では、恒例の累計出費＆記事作成時間を発表して今回は終わりにしましょう。

最後まで読んでくださった方はありがとうございました。

この投稿をInstagramで見る

神音の社(@shionnoyashiro)がシェアした投稿

※リライト作業済みの記事です。