WordPress〈Twenty Seventeen〉引用文のデザイン変更|子テーマの作成【初心者向け】

WordPressのテーマ Twenty Seventeen。

いいデザインなのですが、引用部分(blockquote)がやや見にくい気がします。

ですので、以下のようなシンプルなデザインに変更しました。

 

 

ここでは、できる限り細かく、手取り足取り、その手順をご紹介します。

 

FTPからファイルのダウンロード

まず、必ずFTPサーバーのバックアップをとっていることを確認してから、以下の作業を開始して下さい。

かなりの確率で自分のサイトが真っ白になり、更にはダッシュボードにさえ入れなくなって、ブログが死んでしまう可能性もあるので・・。
ぼくは、以下の方法を調べる過程で、4〜5回バックアップからの復元に助けられました。

 

FTPサーバーにログインします。
(ここではロリポップ!レンタルサーバーFTPでの方法をご紹介します。)
https://lolipopftp.lolipop.jp/

 

 

【FTP・WebDAVアカウント】
【FTP・WebDAVパスワード】
を入力。

 

すると、こういう画面になります。

 

 

その中のフォルダ(ディレクトリ)をどんどん選んで、下の階層に進んでいきます。

 

wp-content  >  themes  >  twentyseventeen

 

twentyseventeenフォルダの中のファイルから、以下のファイルをダウンロードしていきます。

  • functions.php(上画像で緑っぽくなっているファイル)
  • style.css(上画像で一番下にあるファイル)

 

青の「ダウンロード」ボタンをクリック。

 

 

「OK」を選択。

 

すると、おそらく、Macでは「ダウンロード」フォルダに「functions.php」と「style.css」が保存されていると思います。

それらをひとまずデスクトップなど作業しやすい場所に移動します。

子テーマの作成

デスクトップ画面上の適当な場所で、右クリックし、「新規フォルダ」作成。
そのフォルダに「twentyseventeen_child」という名前を付けます。
(子テーマという意味です。このフォルダ名は任意ですが、上記を推奨。)

 

そして、そのフォルダの中に、さきほどダウンロードした「functions.php」と「style.css」を入れます。

 

その「functions.php」を右クリックをして、
「このアプリケーションで開く」→「テキストエディット」で開きます。

 

 

すると以下のように細々した記述が出てきます。

 

 

しかし、これらをすべて消して、真っ白にします。

そして、代わりに、以下をコピーペースト。

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>

 

 

貼り付けられたら、保存して閉じます。

 

次に、同じように「style.css」も編集します。

 

先ほどと同様、書いてある内容を全て削除した上で、こちらのコードを貼り付けます。

/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/

blockquote {
color: #000;
background: #F5F5F5;
font-size: 100%;
font-style: normal;
line-height: 1.7;
margin-top: 1.5em;
margin-bottom: 1.5em;
overflow: hidden;
padding: 1.5em 1.5em 1.5em 1.5em;
}

この際、お好みではありますが、バランスも考えて、
ついでに本文(引用でない部分)の行間も編集してしまうこともできます。

その場合は、上記のコードの下に、以下をコピーペーストしてください。

p {

line-height: 2;
margin: 1;
}

こういう感じになります。

こちらも、保存して閉じます。

FTPサーバーにアップロード

次に、FTPサーバーの画面に戻ります。

そして、「新規フォルダ作成」を選択。

 

 

次に、以下のような画面になるので、

「twentyseventeen_child」というフォルダ名を付けて、「保存する」。

 

 

すると、以下のようなフォルダができていると思います。

 

 

その「twentyseventeen_child」フォルダを選択。

そして、「アップロード」クリック。

 

 

「ファイルを選択する」をクリック。

 

 

Mac(PC)内に先ほど作った、「functions.php」と「style.css」を両方とも選択し、「開く」をクリックします。

 

 

すると、以下のようになるので、「アップロードする」を選択。

 

 

無事に以下のようにアップロードされたら、次はWordPressのダッシュボードへ。

 

 

子テーマを有効化

WordPressのダッシュボードから、

外観  >  テーマ   と選ぶと以下の画面に。

 

 

その中の「Twenty Seventeen Child」というテーマ(上の画像で言うと右端のテーマ)にマウスのカーソルを合わせると、
「有効化」「ライブプレビュー」というボタンが現れるので、「有効化」を選択。

すると、以下のようになります。

 

 

これで、引用文のデザイン変更は、ひとまず完了です。

ご自分のサイトに行って、確認してみて下さい。
以下のような感じになっているでしょうか。

 

 

追記:スーパーリロード

このデザイン変更確認の際、ブラウザ上で確認しても変更が反映されていないことがあります。

そんなときの対処法は「スーパーリロード」。

 

Macの場合〈command + R〉などでスーパーリロードできます。

詳しくは、こちらの記事をご覧ください。

WordPress〈Twenty Seventeen〉子テーマのスタイルシート(CSS)を変更しても反映されない場合に対処する方法|スーパーリロード Mac版

 

トップ画像を再設定

うまく行っていれば、あと一手間。

 

今回の作業でホームページのトップ画像が当初の観葉植物に戻ってしまっていると思いますので、お好みの画像(映像)に戻します。

 

ダッシュボードから、

外観  >  カスタマイズ  >  ヘッダーメディア

と進んで、設定し直して下さい。

 

以上で、完了です。

おまけ:再編集はダッシュボードから

なお、今後、行間や余白や字体などを調整したい時は、Wordpress のダッシュボードから手軽に編集できます。

 

 

ダッシュボード  >  外観  >  テーマの編集

 

そこから右側の「スタイルシート」を選び、編集します。

 

 

なお、CSSの記述方法は、調べればネット上にたくさん書いてあります。

 

 

 

ここでも注意点は、ブラウザで変更が反映されたか確認する時、「スーパーリロード」(Mac なら command + R など)をしないと確認できません。

ご注意を・・。

 

 

 

以上、WordPress〈Twenty Seventeen〉引用文のデザイン変更|子テーマの作成【初心者向け】のご紹介でした。

 

お疲れさまでした。

 

 

コメントを残す

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

CAPTCHA