WordPressテーマ「STORK」のコピーライトをセンタリング表示させてみる(PC)

WordPressテーマ「STORK」のコピーライトをセンタリング表示させてみる(PC)

こんにちは。今日もSTORKテーマをカスタマイズしているとみっちです。

金曜日の午後から風邪をひいていて、体温が38度代から下がりません...!

ロキソニンを飲んで体温を無理やり下げて仕事してます。

夕方、また病院に行ってこようかな(金曜日から3回目)。。

妻の育児負荷がかなり増大しているので、早く治せというプレッシャーが凄いです。

でも、自分が逆の立場だったら、同じように思います。

さて、今回は、当ブログでも愛用しているWordPressテーマ「STORK」のコピーライトをセンタリング表示する方法を書いてみます!

複数のブログに導入するには、複数のライセンスが必要!

STORKのコピーライト

今回のSTORKのコピーライトの話は、全てPCで閲覧した場合のお話です。

スマホ表示では、コピーライトはデフォルトでセンタリングされています。

PCで閲覧すると、通常、STORKのコピーライトは以下のように表示されているはずです。

STORK コピーライト
  • 運営者プロフィール
  • お問い合わせ
  • プライバシポリシー
  • サイトマップ

のように、自分の好きな「フッターメニュー」を作成して設定する使い方が一般的でしょうか。

念のため、この「フッターメニュー」の設定方法も説明してみます。

STORK フッターメニューの設定方法

公式サイトに載っています。

一応、僕も書いてみます。

STORK フッターメニュー設定方法
  1. 管理画面にGo!
  2. 外観の「メニュー」
  3. 「フッターナビ」メニューがある場合は「編集するメニューを選択」から選択
  4. 「フッターナビ」メニューがない場合は「新規メニューを作成」から新規作成
  5. メニュー名は「フッターナビ」でOK
    ※キャプチャ画像では「フッターメニュー」としています。
  6. 「メニュー設定」欄の「フッターナビ」にチェックを付けるのが重要です!

以上でフッターメニューを作成できます。

ただ、このメニューは不要だから、一切表示させなくていいという人もいるかもしれませんね。

そういう場合は、「メニュー設定」欄の「フッターナビ」のチェックを外す、もしくはこのメニュー自体を削除するかでOKです。

コピーライトをセンタリング(中央寄せ)する方法

フッターメニューを非表示にしても、コピーライトの位置は自動的にセンタリングしてくれません。

※今後のSTORKのアップデートで改善される可能性もあります。

こんな状態ですね↓

コピーライトを中央に表示させたい!ですよね。

対応する方法を説明してみますね。

STORKのCSSをカスタマイズするので、STORKの子テーマのCSSに追記します。

STORKをカスタマイズしていきたい人は、必ず子テーマを導入しましょうね。

子テーマのCSS

STORKの子テーマを導入すると、CSSのパスは以下のようになります。

/example.com/wp-content/themes/jstork_custom/style.css

「example.com」はドメインの例なので、ご自身のドメインに置き換えてくださいね。

このCSSファイルのどこかに以下を追記します。

/* コピーライトをセンタリング */
.footer .copyright {
  display: block;
  float: none;
  text-align: center;
}
マメ知識
通常ブロック要素は「text-align: center;」を指定するだけで、テキストをセンタリングできるんですが、STORKの親テーマで設定されるCSSを見たところ、コピーライトには「display: inline-block;」と「float」が指定されていました。
それらを解除することでセンタリングできました。

CSSのどこかに追記すると言っても、今回はPC閲覧時に適用させたいので、スマホ用のスタイル部分には書かないようにしてくださいね。

もし、スマホ用のスタイルをカスタマイズしていて、既に書かれている場合は、下記のように「@media」で始まるメディアクエリが使われているはずです。

この括弧の中には記述しないようにしてください。

@media only screen and (max-width: 767px) {
・
・
・
(これはスマホ用のスタイル)
・
・
・
}

以上でコピーライトをセンタリング表示させることができました!

宣伝

STORKを導入したWordPressテーマで、スマホから閲覧した際にフッター固定メニューを表示させる方法を僕が開発して販売してみました!

ブログでプログラムを販売するという自分なりに新しい試みの第一歩だったりもします。

ご興味ある方は、是非チェックしてみてください!

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

WordPressテーマ「STORK」のコピーライトをセンタリング表示させてみる(PC)

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景