当ブログでも愛用しているWordPressテーマ「STORK」のコピーライトをセンタリング表示する方法を書いてみます。
複数のブログに導入するには、複数のライセンスが必要！
STORKのコピーライト
今回のSTORKのコピーライトの話は、全てPCで閲覧した場合のお話です。
スマホ表示では、コピーライトはデフォルトでセンタリングされています。
PCで閲覧すると、通常、STORKのコピーライトは以下のように表示されているはずです。
- 運営者プロフィール
- お問い合わせ
- プライバシポリシー
- サイトマップ
のように、自分の好きな「フッターメニュー」を作成して設定する使い方が一般的ですかね。
念のため、この「フッターメニュー」の設定方法も説明してみます。
STORK フッターメニューの設定方法
公式サイトに載っています。
一応、僕も書いてみます。
- 管理画面にGo!
- 外観の「メニュー」
- 「フッターナビ」メニューがある場合は「編集するメニューを選択」から選択
- 「フッターナビ」メニューがない場合は「新規メニューを作成」から新規作成
- メニュー名は「フッターナビ」でOK
※キャプチャ画像では「フッターメニュー」としています。 - 「メニュー設定」欄の「フッターナビ」にチェックを付けるのが重要です！
以上でフッターメニューを作成できます。
ただ、このメニューは不要だから、一切表示させなくていいという人もいるかもしれませんね。
そういう場合は、「メニュー設定」欄の「フッターナビ」のチェックを外す、もしくはこのメニュー自体を削除するかでOKです。
コピーライトをセンタリング(中央寄せ)する方法
フッターメニューを非表示にしても、コピーライトの位置は自動的にセンタリングしてくれません。
※今後のSTORKのアップデートで改善される可能性もあります。
こんな状態ですね↓
コピーライトを中央に表示させたい！ですよね。
対応する方法を説明してみますね。
STORKのCSSをカスタマイズするので、STORKの子テーマのCSSに追記します。
STORKをカスタマイズしていきたい人は、必ず子テーマを導入しましょうね。
子テーマのCSS
STORKの子テーマを導入すると、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テーマ「STORK（ストーク）」に関し、スマホで閲覧した際に以下のような固定フッターメニューを表示できるプラグインをリリースしました。
年々大型化するスマホの画面では、もはやページ上部のハンバーガーメニューはイマイチ使いづらくなってきたと言えます。
ページ下部、スマホホームボタンのそばに固定フッターメニューが表示されるとかなり使いやすくなります。
STORKテーマ限定の機能とはなりますが、ユーザービリティの向上やSNSでの拡散、他の記事への誘導などに、このプラグインをぜひ使ってみてください。
