フッターの「by FIT-Web Create. Powered by WordPress.」を非表示にする。

フッターの「by FIT-Web Create. Powered by WordPress.」を非表示にする。

ページ下部に表示されているテーマ配布先のリンク元

WordPressではどのテーマをダウンロードしても、自分のブログの著作権表示の下に、必ずテーマ配布先のリンクが表示されてきます。

↑赤く囲んだところですね。

いろんなブログを拝見しても、大抵みなさんこちらの表示が出てきません。
確かにこのテーマは気に入っているところですが、極力関係ないリンクは非表示にしたいので、「LION MEDIA」の小ページ編集にて、「これさえコピペしておけばOK!」なCSSを紹介したいと思います。

 

とりあえず、仕組みの理解抜きでコピペする。

どこに入れるの?

「外観」→「テーマの編集」→「スタイルシート」を開く。
このスタイルシートの中の、「下記ユーザーカスタマイズリア」の下にCSSを入れていきます。
まだなにもないので、20行目にCSSを追加します。

なにを入れるの?

.copySns__copyInfo {
display: none;
}

これを、上記20行目以降に入れてください。

すると、全部消えました!

 

ページ下部の配布先リンクが非表示になるのはなぜ?

「親テーマ」「子テーマ」

「親テーマ」と「子テーマ」という概念を理解する必要があります。
全くの初心者なので理解に悩んだところですが、噛み砕いて説明してみます。
例えば、消えないポールペンで書き上げた論文(親テーマ)があるとします。
ただし、内容を読んでいくと、少し文章構成を変えたいと思うところがありました。
消えないポールペンで書き上げたので、修正するときは校正記号を使いますよね。こういうやつ。

普通ならば、論文本体(親テーマ)に修正を加えていくと思います。
しかし、修正もボールペンで行うという前提があれば、この修正自体を間違えてしまったとき、取り返しつかないことになりますよね。
修正の上に修正を重ねて…としてしまうと、論文本体(親テーマ)がぐちゃぐちゃになってしまいます。
そこで、論文本体(親テーマ)を数枚コピーした上で、コピーした論文にボールペンで修正を加えていけば、たとえ失敗したとしてもコピーなので、論文本体(親テーマ)の体裁は整ったままになります。
このコピーした論文に該当するのが、「子テーマ」です。
Wordpressでは親テーマをカスタマイズすることも可能でありますが、スタイルが崩壊すると取り返しがつかなくなるため、子テーマを編集することでカスタマイズしていきます。

 

実際のコードを確認する

文中で複製したい箇所があったとき、右クリックでコピーしますよね。
その時に開くメニュー画面で、「検証」があると思います。(Macの場合)
変更したい箇所がどのようなソースになっているのか確認するとき、コピーするときと同じ要領で右クリックして検証を開きます。
今回は、ヘッダーの下部を編集したかったので、該当部分を検証してみました。

そうすると、非表示にしたいところのソースが以下のようになっているのがわかります。(真ん中の赤く囲まれている部分です。)

<span class=”copySns__copyInfo”>
ゆとり世代が色々さとって地方公務員を辞めるブログ by <a class=”copySns__copyLink” href=”http://fit-jp.com/” target=”_blank”>FIT-Web Create</a>. Powered by <a class=”copySns__copyLink” href=”https://wordpress.org/” target=”_blank”>WordPress</a>.
</span>

これを非表示にするには親ページの該当部分を削除する方法もありますが、親ページをいじるのは好ましくないので(テーマがアップデートされると編集した箇所が消えます。)、子ページのスタイルシートからアプローチします。

 

スタイルシートに追加するコードの編集

今回の場合は、「<span>〜</span>に囲まれた部分を表示しない!」という指示をする必要があります。
表示しないという指示を表すコードが、「display: none」です。
具体的にどこを表示しないのかを指定しなければなりませんので、これは非表示にしたいコードの要素を確認します。
ここではclassで定義されているので、「copySns__copyInfo」が該当します。
また、先ほどのスクリーン画面左上の赤枠内を見ると、その枠内左上に「style.css:1120」という表記があります。
<span>〜</span>は、スタイルシート内にあるよ〜ってことを意味しているので、先ほど子ページの中でもスタイルシートにコードを追記したということになるわけです。
ちなみに、子ページに先ほどのコードをコピペした後、再度検証して見ると次のようになりました。

子ページのスタイルシートで、「表示しない!」って指示を出したので、「display: block;」部分が斜線入っており、表示が無効になっていることが確認できます。
スタイルシートは後ろで定義されたものが優先的に適用されますが、今回のようにclass指定することで優先順位が上がり、非表示にすることできるそうです。

Wordpressカスタマイズカテゴリの最新記事