Twenty Seventeen – ページ 2 – 暮らしのハンドノート

2017年6月12日2017年6月12日

wordpress-popular-posts/style/wpp.cssでcssのお勉強

wordpress-popuular-postsでサイドバーに人気記事を表示しているのですが、なかなか自分の思うように表示されないので、CSSのお勉強を兼ねての備忘録です。

/*
Wordpress Popular Posts plugin stylesheet
Developed by Hector Cabrera
cabrerahector.com | @cabrerahector

Use the following classes to style your popular posts list as you like.
*/

/* Styles the "Sorry, no data so far" message */
.wpp-no-data {
}

/* UL - Popular Posts container styles */
.wpp-list {	
}

	/* LI - Post container styles */
	.wpp-list li {
		overflow:hidden;/*はみ出た部分を表示しない*/
		float:none;/*フロートの指定なし*/
		clear:both;/*左寄せ・右寄せされた全ての要素に対する回り込みを解除する*/
	}
	
	/* Styles for the popular post in view */
	.wpp-list li.current {
	}
	
		/* Thumbnail styles */
		.wpp-thumbnail {
			display:inline;/*インラインボックスを生成する*/
			float:left;/*画像を左に寄せ、後に続く内容はその右側に回り込みます。*/
			margin:0 5px 0 0;
			border:none;
		}

		/* Title styles */
		.wpp-post-title {
		}
		
		/* Excerpt styles */
		.wpp-excerpt {
		}
		
		/* Stats tag styles */
		.post-stats {
			display:block;
			font-size:9px;
			font-weight:bold;
		}
			
			/* Comments count styles */
			.wpp-comments {
			}
			
			/* Views count styles */
			.wpp-views {
			}
			
			/* Author styles */
			.wpp-author {
			}
			
			/* Post date styles */
			.wpp-date {
			}
			
			/* Post category styles */
			.wpp-category {
			}
		
		/* WP-PostRatings styles */
		.wpp-rating {
		}

Wordpress Popular Posts plugin stylesheet

Developed by Hector Cabrera

cabrerahector.com | @cabrerahector

Use the following classes to style your popular posts list as you like.

/* Styles the "Sorry, no data so far" message */

.wpp-no-data {

}

/* UL - Popular Posts container styles */

.wpp-list {

}

/* LI - Post container styles */

.wpp-list li {

overflow:hidden;/*はみ出た部分を表示しない*/

float:none;/*フロートの指定なし*/

clear:both;/*左寄せ・右寄せされた全ての要素に対する回り込みを解除する*/

}

/* Styles for the popular post in view */

.wpp-list li.current {

}

/* Thumbnail styles */

.wpp-thumbnail {

display:inline;/*インラインボックスを生成する*/

float:left;/*画像を左に寄せ、後に続く内容はその右側に回り込みます。*/

margin:0 5px 0 0;

border:none;

}

/* Title styles */

.wpp-post-title {

}

/* Excerpt styles */

.wpp-excerpt {

}

/* Stats tag styles */

.post-stats {

display:block;

font-size:9px;

font-weight:bold;

}

/* Comments count styles */

.wpp-comments {

}

/* Views count styles */

.wpp-views {

}

/* Author styles */

.wpp-author {

}

/* Post date styles */

.wpp-date {

}

/* Post category styles */

.wpp-category {

}

/* WP-PostRatings styles */

.wpp-rating {

}

1.overflow

overflowプロパティは、はみ出た内容の表示方法を、どう処理するかを指定するプロパティ。

overflow:visible;	領域をはみ出して表示する
overflow:hidden;	はみ出た部分を表示しない
overflow:scroll;	スクロールで表示する
overflow:auto;	自動

2.float

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。後に続く内容は、その反対側に回り込みます。

注意：floatプロパティは、positionプロパティで static以外の値が指定されている要素には適用されない。

float:left;	指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
float:right;	指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。
float:none;	初期値。フロートの指定はなし。
float:inherit;	親要素のフロートの値を継承する。

3.clear

clearプロパティは、floatプロパティで左寄せ、または右寄せを指定された要素に対する回り込みを解除する際に使用する。

clear:left;	左寄せされた要素に対する回り込みを解除する。
clear:right;	右寄せされた要素に対する回り込みを解除する。
clear:both;	左寄せ・右寄せされた全ての要素に対する回り込みを解除する。
clear:none;	初期値。回り込みを解除しない。

4.display

displayとは、要素の表示形式を指定するプロパティで、主にblock、inline、inline-block、noneの4つで他にも、list-item、run-in、tableなど色々とありますが今回使うのは、block、inline、inline-blockなので、この要素についてまとめます。

display	block	inline	inline-block
並び	下に置かれる要素	横に並ぶ要素	横に並ぶ要素
幅・高さの指定	できる	できない。(文字の大きさ・長さなどで決まる)	できる
余白の設定	marginとpaddingを指定できる	・左右のmarginとpaddingは指定できる・上下のmarginは指定できない。・上下のpaddingを指定すると表示がかぶってしまう。	marginとpaddingを指定できる
text-align	要素の中身に適応される。	親ブロックに付けることで指定できる。	親ブロックに付けることで指定できる。
vertical-align	指定できない	指定できる	指定できる

4-1.wordpress-popuular-postsのウィジェットを使って表示するのによく使われるhtmlタグ

要素	開始タグ	終了タグ	用途
ブロックレベル要素のタグ	<div>	</div>	<DIV>～</DIV>で囲んだ範囲をひとかたまりとして定義する。 align属性で位置を指定したり、スタイルシートを適用するのに用います。
	<p>	</p>	<P>～</P>で囲まれた部分がひとつの段落であることを表します。
	<ul>	</ul>	順序のないリストを表示するタグでリスト項目は<li>タグで指定します。
	<ol>	</ol>	順序のあるリストを表示する際に使用します。リストの各項目は<li>タグを用いて記述します。
	<li>	</li>	リストの項目を記述する際に使用します。リスト表示したい項目に<li>タグをつけて<ul>～</ul> または<ol>～</ol>の間に記述します。
	<h1>～<h6>	</h1>～</h6>	見出しを付けるタグで<h1>が最上位の見出しで<h6>が最下位の見出し(小見出し)となります。

5.marginとpadding

marginは、borderを境に外側の余白を指定するプロパティです。

paddingは、borderを境に内側の余白を指定するプロパティです。

5-1.marginの指定の仕方

marginとは上下左右のマージンを一括で指定するプロパティです。上下左右を異なるマージン幅にすることができ、その場合は、スペースで区切って複数の値を指定します。負の値を指定することもでき、複数の領域を重ねて表示させるような表現も可能です。

主に使われる指定方法は次のように、個別で４タイプショートハンドで４タイプがあります。それぞれの値は、半角スペースで区切って記述します。

長さ（初期値は0）数値＋単位（px, %, pt, emなど）で指定します。Auto自動でマージンを指定します。

個別	margin-top: ○px;	borderより外側に上の余白を指定
	margin-right: ○px;	borderより外側に右の余白を指定
	margin-bottom: ○px;	borderより外側に下の余白を指定
	margin-left: ○px;	borderより外側に左の余白を指定
ショートハンド	margin: ○px;	borderより外側に「上下左右」共通に余白を指定
	margin: ○px ○px;	borderより外側に「上下」「左右」の順に余白を指定
	margin: ○px ○px ○px;	borderより外側に「上」「左右」「下」の順に余白を指定
	margin: ○px ○px ○px ○px;	borderより外側に「上」「右」「下」「左」の順に余白を指定(時計回り)

※ブロックボックスが上下に並ぶ場合は、隣接する垂直方向のマージンが相殺されます。

上下に隣接する要素のmarginが同じ場合、相殺されてしまい、20pxの場合40pxではなく20pxになります。

margin: 20px 0px 20px 0px;だと上と下にそれぞれに20pxの余白を設定の場合は20pxの空白がブラウザで表示されます。(20px+20px=40px)にはなりません。

margin: 20px 0px 40px 0px;だと値の大きい40pxの空白がブラウザの表示となります。

5-1-1.ブラウザのデフォルトの余白を取り除く方法

一般的なブラウザでは、リストの周囲に適度な余白が設定されていますので、ブラウザで設定されている余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。

ul {
margin: 0 0 0 1em;
padding: 0;
}

ul {

margin: 0 0 0 1em;

padding: 0;

}

ul要素に設定する場合 … 1em 程度
ol要素に設定する場合 … 1.5em ～ 2em 程度が目安

5-2.paddingの指定の仕方

paddingとは上下左右のパディングをまとめて指定するプロパティです。

幅（初期値は0）数値＋単位（px, %, pt, emなど）で指定します。パーセンテージによる指定の場合、幅は包含ブロック（親要素など）の大きさ比例します。

paddingには負の値やautoを指定することはできません。

個別	padding-top: ○px;	borderより内側に上の余白を指定
	padding-right: ○px;	borderより内側に右の余白を指定
	padding-bottom: ○px;	borderより内側に下の余白を指定
	padding-left: ○px;	borderより内側に左の余白を指定
ショートハンド	padding: ○px;	borderより内側に「上下左右」共通に余白を指定
	padding: ○px ○px;	borderより内側に「上下」「左右」の順に余白を指定
	padding: ○px ○px ○px;	borderより内側に「上」「左右」「下」の順に余白を指定
	padding: ○px ○px ○px ○px;	borderより内側に「上」「右」「下」「左」の順に余白を指定(時計回り)

6.border

6-1.ボーダーのスタイルを指定する

borderプロパティでは、ボーダーのスタイル・太さ・色について上下左右バラバラの指定をすることはできません。上下左右のボーダーを異なったものにする場合には、 border-top、 border-bottom、border-left、 border-right、または、 border-style、 border-width、 border-color、で指定します。

borderスタイルの値	borderスタイルの内容
border: none	ボーダーは表示されません。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
border: hidden	ボーダーは表示されません。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
border: solid	1本線で表示されます。
border: double	2本線で表示されます。
border: dashed	破線で表示されます。
border: dotted	点線で表示されます。
border: groove	立体的に窪んだ線で表示されます。
border: ridge	立体的に隆起した線で表示されます。
border: inset	上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
border: outset	上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。

※補足・・・border-radiusプロパティでは、角を丸くしたりできます。

6-2.borderの太さと色を指定する

borderの太さの指定は、数値やキーワードを使って指定します。

キーワードで指定した場合はブラウザにより表示が異なります。

borderの色は、#000fffなどの記述やカラーネームで色指定をします。

数値	px	1ピクセルを1とする単位で、実際に表示されるサイズはモニタの解像度により変化します。
	em	フォントの高さを1とする単位です
	ex	小文字の｢x｣の高さを1とする単位です。
キーワード	thin	細い
	medium	普通
	thick	太い

6-2-1.wordpressの段落で見出し3を指定した場合のcssの記途例

/*--------------------------------------------------------------
 h3タグの見出しを装飾
--------------------------------------------------------------*/
.entry-content h3 {
 border-bottom: 2px solid #205a97;
 padding: 0 0 0 15px ;
 line-height: 2;
 font-size: 19px;
 background-color: #fff;
}

/*--------------------------------------------------------------

h3タグの見出しを装飾

--------------------------------------------------------------*/

.entry-content h3 {

border-bottom: 2px solid #205a97;

padding: 0 0 0 15px ;

line-height: 2;

font-size: 19px;

background-color: #fff;

}

6-2-2.wordpressで投稿記事に反映させたい場合の記途例

html側(投稿記事のテキストに記入)

<p class="sample1">反映させたい文字をここに記入</p>

1	<p class="sample1">反映させたい文字をここに記入</p>

css側

p.sample1 {border: double 3px #0000ff;}

1	p.sample1 {border: double 3px #0000ff;}

ブラウザでの実際の表示

反映させたい文字をここに記入

↑これをブラウザで表示する際に重要なことに気がつきました。

cssを追加するのにSimple Custom CSSを使っていたのですが・・どうやら、このカスタムcssで、うまく読み込めていなかったことを発見 💡 ！！

Twenty Seventeenにある追加ｃｓｓで無事解決しました 🙂

2017年5月6日2017年7月6日

WordPress4.7.4で動作確認済みのおすすめプラグイン

Word Pressには色々なプラグインがありますが、探すのにかなりの時間がかかったりしますので、今回は、私が実際に試してよかったプラグインを管理画面のプラグイン検索から直接インストールできるものを抜粋しています。

プラグインは入れているだけでも負荷がかかりますので、ご自分のWord Press のテーマに存在する機能のプラグインや重複する機能が付いているプラグインなど選定して最小限度にインストールすることをおおすすめします。

1.WordPrressに必須と思われるプラグイン

1-1.WordPress Ping Optimizer

WordPress Ping Optimizer-Word Press Plugins

記事の投稿を編集するたびに送信されるPingを最適化するプラグインです。

WordPressのデフォルト設定では、
記事を修正した時でもその都度Pingが送信されてしまいます。

ピングスパマーとしてタグ付けされるのはあまり好ましくないので是非導入しておきましょう。

WordPress Ping Optimizerの設定方法

1-2.All In One SEO Pack

All In One SEO Pack-Word Press Plugins

SEOに関するカスタム投稿タイプの機能が細かく設定できるプラグインです。

特定の記事・固定ページ、カテゴリページ、タグページのnoindex設定
サイトトップページや各ページのtitle・meta description・meta keywordタグの設定
Google Analytics、Google Search Consoleのコードの簡易設置
SitemapXMLの生成

1-3.Contact Form 7

Contact Form 7-Word Press Plugins

お問い合わせフォームを簡単に育成できるプラグイン。

シンプルなコンタクトホーム、でも柔軟。

お問い合わせホームプラグインContact Form 7 のインストール方法から設置方法まで

Contact Form 7 に「ファィル添付」＆「CAPTCHA」設定

1-4.AddToAny Share Buttons

Add ToAny Share Buttons-Word Press Plugins

SNSシェアボタンを簡単に設置できるプラグインです。

カウンター機能
Floating share buttons
100以上のサービスから選んで表示

1-5.Google XML Sitemaps

Google XML Sitemaps-Word Press Plugins

Google、Bing、Yahoo、Ask.comなどの検索エンジンがブログをよりよく索引付けするための特別なXMLサイトマップを生成するプラグイン

すでにAll In One SEO Packをインストールしている場合All In One SEO Packの機能管理からXmlサイトマップをActiveにすればインストール不要です。

1-6.Throws SPAM Away

Throws SPAM Away-Word Press Plugins

日本語が存在しないコメントを捨ててしまうコメントスパムプラグイン

コメント内に日本語の記述が存在しない場合はあたかも受け付けたように振る舞いながらも捨ててしまうプラグイン

対応する最新バージョン: 4.7-RC1となってましたが、無事スパムコメントは0になりました。

1-7.BackWPup-Word Press Plugins

BackWPup-Word Press Plugins

サイトのデータを設定で定期的に自動でバックアップもしてくれるプラグインです。

データベースをバックアップ
ファイルバックアップ
インストールされたプラグインを使用してファイルを生成します

Word Pressの復元やデータ破損時にバックアップを取っておけば安心です。

1-8.001 Prime Strategy Translate Accelerator

001 Prime Strategy Translate Accelerator-Word Press Plugins

WordPressを日本語で表示させる場合には、英語と日本語を対訳させるja.moというファイルを読み込んでいます。
この日本語翻訳ファイルをキャッシュして高速化するプラグインです。

2.必要に応じてあると便利なプラグイン

2-1.TablePress

TablePress-Word Press Plugins

投稿やページに美しく機能豊富なテーブルを作成してくれるプラグインです。

面倒なHTMLコードを書かずに直感的に作成でき、Excelデータをインポートする機能も付いています。

投稿画面に作成したショートコードをコピペするだけで表示されます。

2-2.TinyMCE Advanced

TinyMCE Advanced-Word Press Plugins

ビジュアル・エディタのツールバー上に表示されているボタンを配置し自分の好みでカスタマイズできます。

フォントサイズの選択
フォントファミリの選択
テーブルをExcelデータのようにセルの結合などができます

2-3.Crayon Syntax Highlighter

Crayon Syntax Highlighter-Word Press Plugins

HTMLなどのソースコードを記事上に綺麗に表示してくれるプラグイン

複数の言語、テーマ、URL、ローカルファイル、または投稿テキストを強調表示しますので、HTMLやCSS、PHPなどの解説をするサイトや、プログラミング言語を扱うサイトは便利なプラグインです。

対応する最新バージョン: 4.2.0となってましたが、4.7.4で使用した結果動作可能でした。

2-4.Hatom/hentry remover

Hatom/hentry remover-Word Press Plugins

Search Consoleの構造化データに役立つプラグインです。

このプラグインはpost_classフィルターで「.hentry」クラスを削除し、単にJavaScriptで再びタグを追加することによって、すべてのテーマをサポートしています。
これは、レイアウトをめちゃくちゃにせずに「構造化データ」のhentryとしてそれをインデックスからGoogleのを防ぐことができます。

対応する最新バージョン: 4.4.9となってましたが、構造化テストで「.hentry」クラスを削除し最終的なエラー数が減少しました。

2-5.WordPress Related Posts

関連記事を簡単に表示できるWordPressプラグイン

記事下などに設定した任意のレイアウトで画像やテキストを表示してくれます。

対応する最新バージョン: 4.6.5となってましたが、4.7.4でも関連表示可能でした。

2-6.Redirection

Redirection-Word Press Plugins

パーマリンクを変更したときやサイトを引越ししたときに役立つプラグインです。

301 リダイレクトを管理し、404 エラーをモニターするための WordPress プラグインです。

WordPressパーマリンク変更時に必須なリダイレクト設定方法

2-7.Simple Custom CSS

Simple Custom CSS-Word Press Plugins

テーマのCSSを直接編集しなくても、CSSを追加・上書きできるプラグインです。

~~対応する最新バージョン: 4.4.9となってましたが4.7.4で使用した結果、子テーマのcssをそのままコピペしても大丈夫でした。~~

2017.6.11訂正　クラス属性（class)で名前を付けて、CSS（スタイルシート）での指定が一部できませんでした。

2-8.fancybox for wordpress

FancyBox-Word Press-Word Press Plugins

画像をクリックすると画像を拡大表示してくれるプラグインです。

画像の細かい部分が見やすくなるのでおすすめです。

2-9.Table of Contents Plus

Table of Contents Plus-Word Press Plugins

記事の見出しごとに目次を自動で設置してくれるプラグインです。

投稿ペーシに<a href=”#”> </a>などのタグ入力が不要になります。

また、アンカーにジャンプするのではなくスクロールする機能が付いていますのでページ内のリンクに飛ぶとき滑らかにスクロールするプラグインです。

対応する最新バージョン: 4.4.9となってましたが、4.7.4で使用した結果設置は可能です。

2-10.Simple Scroll to Top Button

Simple Scroll to Top Button-Word Press Plugins

矢印など10種類のアイコンからボタンの背景色やボタンのサイズを自分の好みで色をカスタマイズできクリックすると記事の上部までスクロールするボタンです。

記事を読み進めた時記事のトップに速く戻れます。

2-11.WordPress Popular Posts

WordPress Popular Posts-Word Press Plugins
ウィジェットに人気記事を表示できるプラグインです。

人気の記事をページビュー数やコメント数を基本に、24時間・1週間・30日間・すべての時間単位で表示できるプラグインです。

対応する最新バージョン: 4.6.5となってましたが4.7.4でカスタマイズし、動作確認しました。

Twenty SeventeenでWordPress Popular Postsのサムネイルにタイトルを重ねて表示する方法をコピペでどうぞ

2017年4月27日2018年5月25日

Twenty Seventeenタイトル見出しの装飾方法

前回に引き続き子テーマを使ったTwenty Seventeenのカスタマイズ方法を記載します。

カテゴリーから選択した時に一覧で表示されるtitleと本文との境目がわかりずらかったので装飾してみました。

投稿記事のtitleや固定ページの記事titleをtemplate-partsを使ってカスタマイズします。

1.投稿記事タイトルを子テーマを使ってカスタマイズします

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen」→「template-parts」→「page」の順にタブルクリックします。すると、content-front-page.phpのファイルの中に下記のように記途されていると思います。

親テーマの34行目の

<?php the_title( ‘<h2 class=”entry-title”>’, ‘</h2>’ ); ?>

の部分にcssで装飾できるように<span>タグを使って囲みます。

↓Before

<?php
/**
 * Displays content for front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

	<?php if ( has_post_thumbnail() ) :
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

		$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		// Calculate aspect ratio: h / w * 100%.
		$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
		?>

		<div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
		</div><!-- .panel-image -->

	<?php endif; ?>

	<div class="panel-content">
		<div class="wrap">
			<header class="entry-header">
				<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

				<?php twentyseventeen_edit_link( get_the_ID() ); ?>

			</header><!-- .entry-header -->

			<div class="entry-content">
				<?php
					/* translators: %s: Name of current post */
					the_content( sprintf(
						__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
						get_the_title()
					) );
				?>
			</div><!-- .entry-content -->

		</div><!-- .wrap -->
	</div><!-- .panel-content -->

</article><!-- #post-## -->

<?php

/**

* Displays content for front page

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

<?php if ( has_post_thumbnail() ) :

$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

// Calculate aspect ratio: h / w * 100%.

$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;

</div>

<?php endif; ?>

<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

<?php twentyseventeen_edit_link( get_the_ID() ); ?>

</header>

<?php

/* translators: %s: Name of current post */

the_content( sprintf(

__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

get_the_title()

) );

</div>

</div>

</div>

</article>

↓After

<?php
/**
 * Displays content for front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

	<?php if ( has_post_thumbnail() ) :
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

		$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		// Calculate aspect ratio: h / w * 100%.
		$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
		?>

		<div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
		</div><!-- .panel-image -->

	<?php endif; ?>

	<div class="panel-content">
		<div class="wrap">
			<header class="entry-header">
				<?php the_title( '<h2 class="entry-title"><span>', '</span></h2>' ); ?>

				<?php twentyseventeen_edit_link( get_the_ID() ); ?>

			</header><!-- .entry-header -->

			<div class="entry-content">
				<?php
					/* translators: %s: Name of current post */
					the_content( sprintf(
						__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
						get_the_title()
					) );
				?>
			</div><!-- .entry-content -->

		</div><!-- .wrap -->
	</div><!-- .panel-content -->

</article><!-- #post-## -->

<?php

/**

* Displays content for front page

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

<?php if ( has_post_thumbnail() ) :

$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

// Calculate aspect ratio: h / w * 100%.

$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;

</div>

<?php endif; ?>

<?php the_title( '<h2 class="entry-title"><span>', '</span></h2>' ); ?>

<?php twentyseventeen_edit_link( get_the_ID() ); ?>

</header>

<?php

/* translators: %s: Name of current post */

the_content( sprintf(

__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

get_the_title()

) );

</div>

</div>

</div>

</article>

1-1.ファイルをメモ帳などに一旦保存します。

ファイルをメモ帳に保存する時の注意点
ファイル名・・「content-front-page.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

1-2.FFFTPソフトで子テーマにアップロードします。

・FFFTPソフトのツールバーの「UTF-8」をクリック。

・下画像の右側(ホスト側)に「content-front-page.php」のファイルをドラッグ＆ドロップしてアップロードします。

・アップロードする場所は、WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」→「template-parts」→「page」フォルダの中です。

1-3.子テーマのスタイルシート(style.css)に追記します。

「外観」→「テーマの編集」からstyle.cssをカスタマイズ

/*--------------------------------------------------------------
12.0 投稿ページのtitleを装飾
--------------------------------------------------------------*/
h2.entry-title {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
}

/*--------------------------------------------------------------

12.0 投稿ページのtitleを装飾

--------------------------------------------------------------*/

h2.entry-title {

background: #dfefff;

box-shadow: 0px 0px 0px 5px #dfefff;

border: dashed 1px #96c2fe;

padding: 0.2em 0.5em;

color: #454545;

}

↓仕上がりの画像はこんな感じです。

配色は、ご自分のサイトに合わせてカスタマイズして下さい。

最後に更新を押して終了です。

2.固定ページの記事タイトルを子テーマを使ってカスタマイズします

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen」→「template-parts」→「post」の順にタブルクリックします。するとcontent.phpのファイルの中に下記のコードの記途があると思います。

これも先ほどと同じように親テーマの35行目の

the_title( ‘<h1 class=”entry-title”>’, ‘</h1>’ );

の部分にcssで装飾できるように<span>タグを使って囲みます。

↓Before

<?php
/**
 * Template part for displaying posts
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php
		if ( is_sticky() && is_home() ) :
			echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
		endif;
	?>
	<header class="entry-header">
		<?php
			if ( 'post' === get_post_type() ) :
				echo '<div class="entry-meta">';
					if ( is_single() ) :
						twentyseventeen_posted_on();
					else :
						echo twentyseventeen_time_link();
						twentyseventeen_edit_link();
					endif;
				echo '</div><!-- .entry-meta -->';
			endif;

			if ( is_single() ) {
				the_title( '<h1 class="entry-title">', '</h1>' );
			} elseif ( is_front_page() && is_home() ) {
				the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
			} else {
				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
			}
		?>
	</header><!-- .entry-header -->

	<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
		<div class="post-thumbnail">
			<a href="<?php the_permalink(); ?>">
				<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
			</a>
		</div><!-- .post-thumbnail -->
	<?php endif; ?>

	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
				get_the_title()
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
				'after'       => '</div>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			) );
		?>
	</div><!-- .entry-content -->

	<?php if ( is_single() ) : ?>
		<?php twentyseventeen_entry_footer(); ?>
	<?php endif; ?>

</article><!-- #post-## -->

<?php

/**

* Template part for displaying posts

* @link https://codex.wordpress.org/Template_Hierarchy

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.2

<?php

if ( is_sticky() && is_home() ) :

echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );

endif;

<?php

if ( 'post' === get_post_type() ) :

echo '<div class="entry-meta">';

if ( is_single() ) :

twentyseventeen_posted_on();

else :

echo twentyseventeen_time_link();

twentyseventeen_edit_link();

endif;

echo '</div>';

endif;

if ( is_single() ) {

the_title( '<h1 class="entry-title">', '</h1>' );

} elseif ( is_front_page() && is_home() ) {

the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );

} else {

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

}

</header>

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>

<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>

</a>

</div>

<?php endif; ?>

<?php

/* translators: %s: Name of current post */

the_content( sprintf(

__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

get_the_title()

) );

wp_link_pages( array(

'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),

'after' => '</div>',

'link_before' => '<span class="page-number">',

'link_after' => '</span>',

) );

</div>

<?php if ( is_single() ) : ?>

<?php twentyseventeen_entry_footer(); ?>

<?php endif; ?>

</article>

↓After

<?php
/**
 * Template part for displaying posts
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php
		if ( is_sticky() && is_home() ) :
			echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
		endif;
	?>
	<header class="entry-header">
		<?php
			if ( 'post' === get_post_type() ) :
				echo '<div class="entry-meta">';
					if ( is_single() ) :
						twentyseventeen_posted_on();
					else :
						echo twentyseventeen_time_link();
						twentyseventeen_edit_link();
					endif;
				echo '</div><!-- .entry-meta -->';
			endif;

			if ( is_single() ) {
				the_title( '<h1 class="entry-title"><span>', '</span></h1>' );
			} elseif ( is_front_page() && is_home() ) {
				the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
			} else {
				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
			}
		?>
	</header><!-- .entry-header -->

	<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
		<div class="post-thumbnail">
			<a href="<?php the_permalink(); ?>">
				<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
			</a>
		</div><!-- .post-thumbnail -->
	<?php endif; ?>

	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
				get_the_title()
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
				'after'       => '</div>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			) );
		?>
	</div><!-- .entry-content -->

	<?php if ( is_single() ) : ?>
		<?php twentyseventeen_entry_footer(); ?>
	<?php endif; ?>

</article><!-- #post-## -->

<?php

/**

* Template part for displaying posts

* @link https://codex.wordpress.org/Template_Hierarchy

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.2

<?php

if ( is_sticky() && is_home() ) :

echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );

endif;

<?php

if ( 'post' === get_post_type() ) :

echo '<div class="entry-meta">';

if ( is_single() ) :

twentyseventeen_posted_on();

else :

echo twentyseventeen_time_link();

twentyseventeen_edit_link();

endif;

echo '</div>';

endif;

if ( is_single() ) {

the_title( '<h1 class="entry-title"><span>', '</span></h1>' );

} elseif ( is_front_page() && is_home() ) {

the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );

} else {

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

}

</header>

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>

<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>

</a>

</div>

<?php endif; ?>

<?php

/* translators: %s: Name of current post */

the_content( sprintf(

__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

get_the_title()

) );

wp_link_pages( array(

'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),

'after' => '</div>',

'link_before' => '<span class="page-number">',

'link_after' => '</span>',

) );

</div>

<?php if ( is_single() ) : ?>

<?php twentyseventeen_entry_footer(); ?>

<?php endif; ?>

</article>

2-1.ファイルをメモ帳などに一旦保存します。

ファイルをメモ帳に保存する時の注意点
ファイル名・・「content.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

2-2.FFFTPソフトで子テーマにアップロードします。

・FFFTPソフトのツールバーの「UTF-8」をクリック。

・下画像の右側(ホスト側)に「content.php」のファイルをドラッグ＆ドロップしてアップロードします。

・アップロードする場所は、WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」→「template-parts」→「post」フォルダの中です。

2-3.子テーマのスタイルシート(style.css)に追記します。

「外観」→「テーマの編集」からstyle.cssをカスタマイズします。

/*--------------------------------------------------------------
13.0 固定ページのtitleを装飾
--------------------------------------------------------------*/
h1.entry-title {
border-top:1px solid #004488;
border-bottom:2px solid #004488;
padding: 0 0 0 15px ;
line-height: 2;
}

/*--------------------------------------------------------------

13.0 固定ページのtitleを装飾

--------------------------------------------------------------*/

h1.entry-title {

border-top:1px solid #004488;

border-bottom:2px solid #004488;

padding: 0 0 0 15px ;

line-height: 2;

}

↓仕上がりはこんな感じで上に細いラインと下に少し太めのラインを入れてシンプルに仕上げてみました。

3.カテゴリー別に記事タイトルをカスタマイズする

カテゴリー別にしたいときは、子テーマのCSSに追記します。

.category-46 .entry-title {
background: #F8ECE0;
box-shadow: 0px 0px 0px 5px #F8ECE0;
border: dashed 1px #B45F04;
padding: 0.2em 0.5em;
}

.category-46 .entry-title {

background: #F8ECE0;

box-shadow: 0px 0px 0px 5px #F8ECE0;

border: dashed 1px #B45F04;

padding: 0.2em 0.5em;

}

.category-46→この数字はカテゴリーのIDです。

投稿→カテゴリーをクリックするとこれまで作成したカテゴリー一覧が表示されます。

IDを確認したいカテゴリータイトルをマウスオーバー(マウスカーソルを上に重ねる)してみましょう。すると、ブラウザのステータスバーにURLが表示されます。

このURLの中にある、ID=46&postの部分の数字が、このカテゴリーのIDになります。

※ステータスバーが表示されないとき
ブラウザの種類や設定内容によっては、ステータスバーが表示されない場合があります。そのときは、カテゴリー一覧画面でカテゴリーの名前をクリックして、カテゴリーの編集画面を開いてみましょう。このとき、ブラウザのアドレスバーに表示されるURLの中にあります。

Twenty Seventeenコピペで実装できるサンプル集

WP【Twenty Seventeen】初心者でも簡単にできる!タイトル見出しサンプル集22選

【WordPress】初心者向け1記事に装飾枠を付けるサンプル

2017年4月24日2021年1月23日

WordPressのテーマTwenty Seventeenで子テーマを作った一覧

４月20日にWordPress4.7.4が公開されTwenty Seventeenも４月18日にVersion upの更新情報が届いてましたね。

さっそくWordPressと私が使っているTwenty Seventeenのテーマを最新バージョンに更新しました。

実は、このフォルダ階層でちょとはまりましたので記載します。

1.子テーマを作るときのフォルダ階層一覧

まず、FFFTPソフトでサーバーにアクセスするとご自分のドメインがあります。これがWordPressをインストールしたディレクトリです。

※フォルダの作成方法がわからない方はWordPress初心者向け「Twenty Seventeen子テーマの作り方」で紹介してますので参考にしてください。

1-1.Twenty Seventeen-childのフォルダを作る

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」の順にタブルクリックします。

twentyseventeenのフォルダが表示されている状態でtwentyseventeen-childをつくります。

1-2.template-partsのフォルダとfooterのフォルダを作る

・twentyseventeen-childのフォルダをダブルクリックしてこの中に「template-parts」のフォルダを作ります。

・次にtemplate-partsをダブルクリックし「footer」のフォルダを作ります

これでフォルダ作成は終わりましたので次にファイルを作ります。

2.Twenty Seventeen-child子テーマのファイルを作る

前回の記事でも紹介しましたが、今回は、一覧として表示したいと思います。

2-1.基本となるstyle.cssを作る

まず、スタイリストシートの必須項目となる部分を作ります。

/*
Theme Name: twentyseventeen-child
Theme URI: http://テーマのURL/
Description: twentyseventeen Child Theme
Author: 子テーマの作者名
Author URI: http://←テーマ作者のサイト
Template: twentyseventeen
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Text Domain: twentyseventeen-child
*/

Theme Name: twentyseventeen-child

Theme URI: http://テーマのURL/

Description: twentyseventeen Child Theme

Author: 子テーマの作者名

Author URI: http://←テーマ作者のサイト

Template: twentyseventeen

Version: 1.2

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

Text Domain: twentyseventeen-child

その次に追加したい項目があればこの後に記途します。

私が子テーマのスタイリストシートに追加したのは、

2-1-1.リンク色とホバー色の変更

これは、親テーマのlinksの部分のみをコピーして下記のように加工したものです。

・リンク色の変更

①文字の色を黒【color; #222】→青【color: #0000FF;】に変更
②下線の色を黒【rgba(15, 15, 15, 1);】→青【rgba(0, 0, 255, 1);】に変更

・ホバー色の変更

①【color: #000;】をオレンジ【color: #FF8000;】のタグに変更。

②【rgba(0, 0, 0, 1)】の部分を同様のカラータグ【255, 128, 0, 1】にします。

/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
	color: #0000ff;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #000;
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba( 0, 0, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #FF8000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(255, 128, 0, 1);
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

a {
	color: #0000FF;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #000;
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #FF8000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba( 0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 128, 0, 1);
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

/*--------------------------------------------------------------

10.0 Links

--------------------------------------------------------------*/

a {

color: #0000ff;

text-decoration: none;

}

a:focus {

outline: thin dotted;

}

a:hover,

a:active {

color: #000;

outline: 0;

}

/* Hover effects */

.entry-content a,

.entry-summary a,

.widget a,

.site-footer .widget-area a,

.posts-navigation a,

.widget_authors a strong {

-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-title a,

.entry-meta a,

.page-links a,

.page-links a .page-number,

.entry-footer a,

.entry-footer .cat-links a,

.entry-footer .tags-links a,

.edit-link a,

.post-navigation a,

.logged-in-as a,

.comment-navigation a,

.comment-metadata a,

.comment-metadata a.comment-edit-link,

.comment-reply-link,

a .nav-title,

.pagination a,

.comments-pagination a,

.site-info a,

.widget .widget-title a,

.widget ul li a,

.site-footer .widget-area ul li a,

.site-footer .widget-area ul li a {

-webkit-box-shadow: inset 0 -1px 0 rgba( 0, 0, 255, 1);

box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);

text-decoration: none;

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-content a:focus,

.entry-content a:hover,

.entry-summary a:focus,

.entry-summary a:hover,

.widget a:focus,

.widget a:hover,

.site-footer .widget-area a:focus,

.site-footer .widget-area a:hover,

.posts-navigation a:focus,

.posts-navigation a:hover,

.comment-metadata a:focus,

.comment-metadata a:hover,

.comment-metadata a.comment-edit-link:focus,

.comment-metadata a.comment-edit-link:hover,

.comment-reply-link:focus,

.comment-reply-link:hover,

.widget_authors a:focus strong,

.widget_authors a:hover strong,

.entry-title a:focus,

.entry-title a:hover,

.entry-meta a:focus,

.entry-meta a:hover,

.page-links a:focus .page-number,

.page-links a:hover .page-number,

.entry-footer a:focus,

.entry-footer a:hover,

.entry-footer .cat-links a:focus,

.entry-footer .cat-links a:hover,

.entry-footer .tags-links a:focus,

.entry-footer .tags-links a:hover,

.post-navigation a:focus,

.post-navigation a:hover,

.pagination a:not(.prev):not(.next):focus,

.pagination a:not(.prev):not(.next):hover,

.comments-pagination a:not(.prev):not(.next):focus,

.comments-pagination a:not(.prev):not(.next):hover,

.logged-in-as a:focus,

.logged-in-as a:hover,

a:focus .nav-title,

a:hover .nav-title,

.edit-link a:focus,

.edit-link a:hover,

.site-info a:focus,

.site-info a:hover,

.widget .widget-title a:focus,

.widget .widget-title a:hover,

.widget ul li a:focus,

.widget ul li a:hover {

color: #FF8000;

-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);

box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(255, 128, 0, 1);

}

/* Fixes linked images */

.entry-content a img,

.widget a img {

-webkit-box-shadow: 0 0 0 8px #fff;

box-shadow: 0 0 0 8px #fff;

}

.post-navigation a:focus .icon,

.post-navigation a:hover .icon {

color: #222;

}

a {

color: #0000FF;

text-decoration: none;

}

a:focus {

outline: thin dotted;

}

a:hover,

a:active {

color: #000;

outline: 0;

}

/* Hover effects */

.entry-content a,

.entry-summary a,

.widget a,

.site-footer .widget-area a,

.posts-navigation a,

.widget_authors a strong {

-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-title a,

.entry-meta a,

.page-links a,

.page-links a .page-number,

.entry-footer a,

.entry-footer .cat-links a,

.entry-footer .tags-links a,

.edit-link a,

.post-navigation a,

.logged-in-as a,

.comment-navigation a,

.comment-metadata a,

.comment-metadata a.comment-edit-link,

.comment-reply-link,

a .nav-title,

.pagination a,

.comments-pagination a,

.site-info a,

.widget .widget-title a,

.widget ul li a,

.site-footer .widget-area ul li a,

.site-footer .widget-area ul li a {

-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);

text-decoration: none;

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-content a:focus,

.entry-content a:hover,

.entry-summary a:focus,

.entry-summary a:hover,

.widget a:focus,

.widget a:hover,

.site-footer .widget-area a:focus,

.site-footer .widget-area a:hover,

.posts-navigation a:focus,

.posts-navigation a:hover,

.comment-metadata a:focus,

.comment-metadata a:hover,

.comment-metadata a.comment-edit-link:focus,

.comment-metadata a.comment-edit-link:hover,

.comment-reply-link:focus,

.comment-reply-link:hover,

.widget_authors a:focus strong,

.widget_authors a:hover strong,

.entry-title a:focus,

.entry-title a:hover,

.entry-meta a:focus,

.entry-meta a:hover,

.page-links a:focus .page-number,

.page-links a:hover .page-number,

.entry-footer a:focus,

.entry-footer a:hover,

.entry-footer .cat-links a:focus,

.entry-footer .cat-links a:hover,

.entry-footer .tags-links a:focus,

.entry-footer .tags-links a:hover,

.post-navigation a:focus,

.post-navigation a:hover,

.pagination a:not(.prev):not(.next):focus,

.pagination a:not(.prev):not(.next):hover,

.comments-pagination a:not(.prev):not(.next):focus,

.comments-pagination a:not(.prev):not(.next):hover,

.logged-in-as a:focus,

.logged-in-as a:hover,

a:focus .nav-title,

a:hover .nav-title,

.edit-link a:focus,

.edit-link a:hover,

.site-info a:focus,

.site-info a:hover,

.widget .widget-title a:focus,

.widget .widget-title a:hover,

.widget ul li a:focus,

.widget ul li a:hover {

color: #FF8000;

-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba( 0, 0, 0, 1);

box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 128, 0, 1);

}

/* Fixes linked images */

.entry-content a img,

.widget a img {

-webkit-box-shadow: 0 0 0 8px #fff;

box-shadow: 0 0 0 8px #fff;

}

.post-navigation a:focus .icon,

.post-navigation a:hover .icon {

color: #222;

}

※この部分の変更はTwenty Seventeen のリンク色を変更する方法で詳しく記載しています。

ご自身に会う色で変更してください。

2-1-2.ページサイズを1200幅に変更

/*--------------------------------------------------------------
11.0 ページのサイズを1200に変更
--------------------------------------------------------------*/
@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1200px;/*記事・サイドバー・余白の全幅*/
		padding-left: 2em;/*記事の左余白*/
		padding-right: 2em;/*サイドバーの右余白*/
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;/*記事幅*/
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;/*サイドバー幅*/
	}
	.navigation-top .wrap {
		max-width: 1200px;/*メニューバー幅*/
		padding: 0.75em 3.4166666666667em;
	}
	.site-content {
		padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
	}
}

/*--------------------------------------------------------------

11.0 ページのサイズを1200に変更

--------------------------------------------------------------*/

@media screen and (min-width: 48em) {

.wrap {

max-width: 1200px;/*記事・サイドバー・余白の全幅*/

padding-left: 2em;/*記事の左余白*/

padding-right: 2em;/*サイドバーの右余白*/

}

.has-sidebar:not(.error404) #primary {

float: left;

width: 67%;/*記事幅*/

}

.has-sidebar #secondary {

float: right;

padding-top: 0;

width: 29%;/*サイドバー幅*/

}

.navigation-top .wrap {

max-width: 1200px;/*メニューバー幅*/

padding: 0.75em 3.4166666666667em;

}

.site-content {

padding: 2.5em 0 0;/*メニューバーと記事の間隔*/

}

2-1-3.<h2>見出しの装飾

左に青の下線が入り見出しの背景に少し色を入れたパターンです。

↓　　　↓

CSSを追加した後に投稿ページで下記2パータンのいずれかで入力。

①ビジュアルモードで「段落」からh2を選択する

②テキストモードで<h2>ここに文字を入れる</h2>

.entry-content h2 {
 border-left: 5px solid #205a97;
 padding: 0 0 0 15px ;
 line-height: 2;
 font-size: 28px;
 background-color: #f6f6f6;}

.entry-content h2 {

border-left: 5px solid #205a97;

padding: 0 0 0 15px ;

line-height: 2;

font-size: 28px;

background-color: #f6f6f6;}

2-1-4.<h3>タグを使った見出しの装飾

下に青の下線が入ったタイプです。

　↓　　　↓

CSSを追加した後に投稿ページで下記2パータンのいずれかで入力。

①ビジュアルモードで「段落」からh3を選択する

②テキストで<h3>ここに文字を入れる</h3>

.entry-content h3 {
 border-bottom: 2px solid #205a97;
 padding: 0 0 0 15px ;
 line-height: 2;
 font-size: 25px;
 background-color: #fff;}

.entry-content h3 {

border-bottom: 2px solid #205a97;

padding: 0 0 0 15px ;

line-height: 2;

font-size: 25px;

background-color: #fff;}

※保存場所は「twentyseventeen-child」フォルダの中です。

2-2.functions.phpを作る

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

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );

}

注意:functions.phpに記途する場合空白があったり、編集を間違えると画面が真っ白になったり、RSSなどうまく機能しなくなったりしますので気をつけてください。

※保存場所は「twentyseventeen-child」フォルダの中です。

2-3.header.phpを作る

Search ConsoleHTMLタグ、Adsenseのコードなどを親テーマに入力している場合は親テーマのhwader.phpをコピーして子テーマに保存します。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
//ここにAdsenseのショートコードを入力
//Search ConsoleのHTML タグを入力
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

	<header id="masthead" class="site-header" role="banner">

		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

		<?php if ( has_nav_menu( 'top' ) ) : ?>
			<div class="navigation-top">
				<div class="wrap">
					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
				</div><!-- .wrap -->
			</div><!-- .navigation-top -->
		<?php endif; ?>

	</header><!-- #masthead -->

	<?php
	// If a regular post or page, and not the front page, show the featured image.
	if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
		echo '<div class="single-featured-image-header">';
		the_post_thumbnail( 'twentyseventeen-featured-image' );
		echo '</div><!-- .single-featured-image-header -->';
	endif;
	?>

	<div class="site-content-contain">
		<div id="content" class="site-content">

<?php

/**

* The header for our theme

* This is the template that displays all of the <head> section and everything up until <div id="content">

* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

?><!DOCTYPE html>

<html <?php language_attributes(); ?> class="no-js no-svg">

<head>

//ここにAdsenseのショートコードを入力

//Search ConsoleのHTML タグを入力

<?php wp_head(); ?>

</head>

<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

<?php if ( has_nav_menu( 'top' ) ) : ?>

<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>

</div>

</div>

<?php endif; ?>

</header>

<?php

// If a regular post or page, and not the front page, show the featured image.

if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :

echo '<div class="single-featured-image-header">';

the_post_thumbnail( 'twentyseventeen-featured-image' );

echo '</div>';

endif;

※保存場所は「twentyseventeen-child」フォルダの中です。

2-4.site-info.phpを作る

フッターのproudly powered by wordpress表記をCopyright （C）にカスタマイズしたデータを保存する時に使用しますが、

元のデータは

<?php
/**
* Displays footer site info
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/

?>
<div class=”site-info”>
　<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’, 
‘twentyseventeen’ ) ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘twentyseventeen’ ), ‘WordPress’ ); ?></a>
</div><!– .site-info –>

<?php

/**

* Displays footer site info

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

　<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’,

‘twentyseventeen’ ) ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘twentyseventeen’ ), ‘WordPress’ ); ?></a>

</div><!– .site-info –>

となっており13～14行目を削除しこれをコピーライトに変更する時に使用します。

<?php
/**
 * Displays footer site info
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<div class="site-info">
	Copyright (C) <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( '暮らしのハンドノート', 'display' ) ); ?>" rel="home"><?php bloginfo( '暮らしのハンドノート' ); ?> </a>All Rights Reserved.
</div><!-- .site-info -->

<?php

/**

* Displays footer site info

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

</div>

※このファイルの保存場所は、「twentyseventeen-child」→「template-parts」→「footer」のフォルダの中に「site-info.php」のファイルを保存してください。

次回は、タイトル見出しの装飾方法を子テーマを使用して解説します。

2017年4月20日2018年5月25日

WordPress初心者向け「Twenty Seventeen子テーマの作り方」

先日、子テーマについて記載したのですが、本日は、子テーマの作成方法について記載したいと思います。

子テーマを何故作るのか?

親テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれませんが、子テーマを使用すれば親テーマがアップデートされても子テーマは確実に保持されますので、自分がカスタマイズした内容が保持できます。

1.子テーマの作り方

子テーマを作るのには、サーバーで直接作る方法とFFFTPソフトを使って作成する方法がありますが、今回はFFFTPソフトを使って作成する方法を記載します。

FFFTPソフトのイントール方法や初期設定がわからない方はsynclogue-navi.comさんに設定方法など記載がありますので参考にして下さい。

1-1.FFFTPソフトを使ってフォルダを作ります。

FFFTPソフトでサーバーに接続します。
WordPressがインストールされているフォルダをダブルクリック→「Public_html」→「wp-content」→「themes」の順にダブルクリックすると以下のフォルダーが表示されます。

上の画像表示の状態でFFFTPソフトのツールバーの中にあるフォルダ作成をクリック↓

ポップアップ画面に「twentyseventeen-child」と入力し「OKをクリック」

するとtwentyseventeenの下にtwentyseventeen-childのフォルダができます。

フォルダ作成はこれで完了です。

※子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されますが、必須ではありません。

1-2.子テーマを有効にするため最低限のファイルを作る

子テーマを有効にする為にはstile.cssとfunctions.php

この2つのファイルが最低限必要です。

1-3.style.cssを作る

Search Console(旧:ウェブマスターツール)構造化エラーの対処方法でも記載しましたがSearch Consoleの構造化データーにエラーがでましたので

WordPress codex日本語版を参考にさせていただきました。

※style.cssに追加する場合以下のコードの後に記途してください。

Twenty Seventeen Version1.1をお使いの方でフォルダ名をtwentyseventeen-childと付けられた方は、

Theme URI: http://テーマのURL/
Author: 子テーマの作者名
Author URI: http://←テーマ作者のサイト

この３項目をご自分用に書きかえればOKです。

メモ帳に貼り付けて、ディスクトップなどわかりやすい場所に保存してください。

ファイルを保存する時の注意点
ファイル名・・「style.css」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

するとstyle.cssが下の画像のようにディスクトップにできているのが確認できます。

フォルダに保存した場合の画像

↓

ディスクトップに保存した場合の画像

↓

1-4.functions.phpを作る

functions.phpに、親テーマのスタイルシートを呼び出す記述を書き込みます。

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

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );

}

※functions.phpに機能を追加する場合は、” ?> “の前に記途して下さい。

ファイルを保存するときの注意点
ファイル名・・「functions.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して「保存」

注意:functions.phpに記途する場合空白があったり、編集を間違えると画面が真っ白になってしまいます。必ずバックアップを取って下さい。