Microsoft Excel Version別関数適応対象一覧表をExcelのファイルでWordPressに表示してみました!

当ページでは、下記バージョンを抜粋してMicrosoft社のサポートページ及びExcel2003を参照し関数の適用対象表を作成しております。

Windows版・・・ Excle2016,Excel2013,Excel2010,Excel2007,Excel2003

Macintosh版・・・ Excel 2016 for Mac,Excel for Mac 2011

Excel Online

Excel for iPad

Excel for iPhone

Excel for Android タブレット

Excel for Android フォン

Excel Mobile

Excel Starter 2010

 

尚、Excel for Android タブレット,Excel for Android フォンは全て適用が一緒でしたのでExcelのBook内ではAndroid のみで表示しております。

名前が変更された統計関数以外は、Excelで作ったデータを表示しておりますのでBook内はExcelと同等にカーソルを移動させてご覧になってください。

名前が変更された統計関数は、Excelのcssとhtmlで表示してます。

 

Excel関数適用対象表(機能別)

 

データベース関数

 

日付と時刻の関数

 

エンジニアリング関数

 

財務関数

 

情報関数

 

論理関数

 

検索/行列関数

数学/三角関数

 

統計関数

関数名が赤文字で表示されている関数はExcel2010以降名前が変更された関数名で青文字で表示されている関数はExcel2016以降に名前が変更された関数名です。
詳細は、名前が変更された統計関数で(旧)→(新)一覧で表示していますので参考にしてください。

文字列操作関数

 

キュープ関数適用対象一覧

 

Web関数適用対象一覧

 

Excel関数適用対象表(アルファベット順)

 

関数一覧

全ての関数一覧を見るには下のエクセルアイコンをクリックして下さい。

名前が変更された統計関数

 

互換性のある関数名(旧) 変更された関数名() 新Ver.
BETADIST  BETA.DIST  2010
BETAINV  BETA.INV  2010
BINOMDIST  BINOM.DIST  2010
CHIDIST  CHISQ.DIST.RT  2010
CHIINV  CHISQ.INV.RT  2010
CHITEST  CHISQ.TEST  2010
CONFIDENCE  CONFIDENCE.NORM  2010
COVAR  COVARIANCE.P  2010
CRITBINOM  BINOM.INV  2010
EXPONDIST  EXPON.DIST  2010
FDIST  F.DIST.RT  2010
FINV  F.INV.RT  2010
FORECAST FORECAST.LINEAR 2016
FTEST  F.TEST  2010
GAMMADIST  GAMMA.DIST  2010
GAMMAINV  GAMMA.INV  2010
HYPGEOMDIST  HYPGEOM.DIST  2010
LOGINV  LOGNORM.INV  2010
LOGNORMDIST  LOGNORM.DIST  2010
MODE  MODE.SNGL  2010
NEGBINOMDIST  NEGBINOM.DIST  2010
NORMDIST  NORM.DIST  2010
NORMINV  NORM.INV  2010
NORMSDIST  NORM.S.DIST  2010
NORMSINV  NORM.S.INV  2010
PERCENTILE  PERCENTILE.INC  2010
PERCENTRANK  PERCENTRANK.INC  2010
POISSON  POISSON.DIST  2010
QUARTILE  QUARTILE.INC  2010
RANK  RANK.EQ  2010
STDEV  STDEV.S  2010
STDEVP  STDEV.P  2010
TDIST  T.DIST.2T  2010
TDIST  T.DIST.RT  2010
TINV  T.INV.2T  2010
TTEST  T.TEST  2010
VAR  VAR.S  2010
VARP  VAR.P  2010
WEIBULL  WEIBULL.DIST  2010
ZTEST  Z.TEST  2010

 

今回の感想と次回の記事

どうですか?どちらの表が見やすいですかね?

Excelの関数をまとめるのに約半月もかかってしまいました(^^ゞ←全く何してるんだか・・・って感じですよね(笑)

当初はプラグインを使って編集したりしてたのですが・・長くなればなるほどプラグインを使っても大変ですし、Excelだとデータを並べ替えも一行ごとに色付けするのもMOD関数などを利用したら後で行追加も書式が崩れることなくきちんと色づけされますので便利ですよね。

そこで、ExcelファイルをWordPsessで表示できないか?と試行錯誤してやっとできました!(^^)!

次回は、今回ExcelファイルをWordPressに表示した方法を2通り説明したいと思います!!

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ

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

人気記事をサイドバーに表示するのにWordPress Popular Postsを使っています。

サムネイルとタイトルを別々に表示するのは、簡単なんですが、サムネイルにタイトルを重ねて表示するのはちょっと難しいですよね。

そこで、今回は当サイトで設定している内容を記載しますので、そのままコピペして使ってください。

本日の人気記事と今週の人気記事の違いは、タイトルのホバー色とリンク下線の有無です。

月間人気ランキングは、WordPress Popular Postsのcssをそのまま使っています。

3通り記載しますので、ご自分のお好みでどうぞ(*^_^*)

尚、私のブログでは、既存のTwenty Seventeenのリンク色とホバー色をカスタマイズしていますので、その点を考慮して頂ければと思います。

当サイトでは、サイドバーの幅に合わせて画像のサイズを、幅320px 高さ240pxで設定していますが、みなさんのご使用の環境にあわせて、ウイジットとcssのサイズも変更すれば綺麗に反映できると思います。

うまく反映されましたら、コメント頂けると私もとっても嬉しいです。

共通設定

 

WordPress Popular Posts

word pressの「ダッシュボード」→「設定」→「WordPress Popular Posts」→「ツール」の中の設定

アイキャッチ画像

画像の取得元:アイキャッチ画像

レスポンシブ対応:無効

その他

プラグインのスタイルシートを使う:有効

にしています。

css(スタイリングシート)

 

 

 

当サイトのWordPress Popular Postsの設定

 

本日の人気記事の設定

サイドバーに表示している本日の人気記事のウイジェットの設定

※除外する投稿IDは、人気記事に表示しない投稿IDを調べて入力します。

調べ方は、固定ページ一覧・投稿ページ一覧 を表示し、除外したい投稿のタイトルにポインタをあてると、ステータスバーに表示される「post=12」などの数字が固定ページや投稿記事のIDになります。

下記画像はカテゴリーIDを調べるときの画像なんですが、参考に添付しておきます。

 

投稿設定は、アイキャッチ画像を表示にチェックを入れ「カスタムHTMLマークアップを使う」にチェックを入れた後一度保存をクリックします。

保存をクリックした後再度開くと下の画像のように編集できるようになりますので「タイトル」と「投稿のHTMLマークアップ」を編集します。

 

編集内容は下記画像のようにアイキャッチ画像のサイズを手動で指定し、幅と高さを入力します。

この幅と高さは、サイトのサイドバーの幅に合わせて設定して下さい。

 

本日の人気記事のスタイリングシート(css)

 

今週の人気記事の設定

サイドバーに表示している今週の人気記事のウイジットの設定

 

今週の人気記事のスタイリングシート(css)

 

 

月間人気ランキングの設定

サイドバーに表示している月間人気ランキングのウイジットの設定

 

 

最後に・・みなさんのお役に立てれば幸いです。

初心者でも簡単!Twenty Seventeenで画像の上下に文字を重ねて表示する方法をわかり易く説明してみた。No.2

前回の引き続きで今回はCSSのタグなどの使い方を説明したいと思います。

 

前回のHTMLのおさらいから

 

HTMLのおさらい

 

最初に指定している<div>から最後の</div>までの間をひとつのかたまりとして表してましたね。

それで、CSSで読み込むクラス名を

  1. .msample  (クラス名)
  2. .msample1 (クラス名)
  3. .msample2   (クラス名)
  4. .msmple img (クラス名msampleの中にあるimg要素に適用されます。)

 クラス名の前には「.」を入れる。 クラス名と要素の間は半角スペースを入れる

下記画像を合わせて参考にしてください。

 

このように指定しスタイリストシートで読み込み可能なようにしてました。

それでは、今回の本題のCSSの記途の仕方について説明します。

最初に指定した.msamplはcssで読み込みを可能にするクラス名でしたね。

 

CSSの基本

 

.msample { ←この括弧は ” { ” 開始を宣言するもので、こから.mampleに対しては、次のプロパティ(値)を適用しますよ!と宣言しており、最後にプロパティ(値)を宣言し終えた後にはここで終わりですよ!!と ” } “で宣言します。

下記画像を合わせて参考にして下さい。↓

.msample

.msampleはクラス名でしたね最初のおおもととなるクラス名とプロパティ(値)を宣言するために指定します。「.mampleにはこの値を適用すると宣言をします。」

 

float:none;

 

float:none;は、floatを指定しない。ときに使います。

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

今回は配置を指定しないのでfloat:none;で指定しています。

 

clear:both;

 

左寄せ・右寄せされた全ての要素に対する回り込みを解除するときに使います。

何故この設定が必要か?といいますと、画像や文字などを使って、CSSなどの読み込みに設定していたりすると、必然と回り込んだりしているときがあるので、設定をする前にこの設定をすることで、新たに、CSSの適用がスムーズにできるよう設定しています。

 

position:relative;

 

ポジションを指定することにより画像などの開始位置が指定できるプロパティで、相対位置指定で、基準が「現在の位置」が基準となります。

これに対し、absoluteは絶対的な位置指定です。そのため他の要素があろうと表示位置は親要素にぴったりくっき重なって表示されます。

この特性を生かして親要素をrelativeを設定しています。

width& height:

これは、説明するまでもなく、widthは、幅320px でheightは240pxで表示するように設定しました。

この幅と高さは、単純に4:3の比率で設定しているだけで私のサイドバーの幅に合うように設定していますので、お好みに合わせて設定してください。

次に.msample1のクラス名の内容を説明します。

.msample1

この.msample1は「観光スポット」を表示するためのクラス名です。

position:absolute;

まずは、この「観光スポット」の文字をpositionプロパティを使って親要素の「relative」にぴったりとくっつけて表示するために「absolute」を使って絶対位置を指定します。「top:0px;」「left:0px;」

内容は、親要素の一番上の一番左を基点として表示するように指定しています。

「posisition」と「top」・「left」はセットで使用します。

 

display:inline-block;

ここでなぜ「display:inline-block;」を指定するのかといいますと、

横に並ぶ要素。

幅や高さの指定ができる。

marginやpaddingを指定できる。

上記3点から選びました。

続いて、文字の色の指定をします。

 

color:fff;

文字の背景をブルー系の色で表示していますので、文字の色を白で表示するように「color:#fff;」を指定しています。

 

 line-height:

line-heightプロパティは、通常、行の高さを指定する際に使用しますが、今回は、文字の上下に適度な余白が欲しかったのでt設定しています。
「1.5em」=「150%」=「1.5」です。
この数値は、「font-size: 15px」 に対して適用されます。

 

padding:

padding: 0 5px 0 5px;」は文字を表示する開始位置と終わりの左右に5pxの余白を指定しています。
「上」「右」「下」「左」の順になります。
ここで指定したpaddigの詳細は下記画像を参照してください。
paddigを指定しない場合は下の画像のようになります。

 

background:

「background: rgba(66, 133, 244, 0.9);」は、文字の背景をブルー系の色に指定し、透明度を0.9で指定しています。

 

.msample2

この.msample2は「つつじ寺」を表示するためのクラス名です。
ここでも.msample1と同様に「position:absolute;」を指定しますが今回は、一番下の左に合わせて表示しますので「bottom:1.7em」と「left:0px;」と指定しています。
ここで「bottom:1.7em」になるのか?といいますとp要素とp要素の間にできる空白行の調整部分になります。
以下は、実際に上記を指定して表示しているのですが、p要素とp要素の間には空白ができてますね。↓

ちなみに、relativeはline-heightを1.5emで指定し、 absoluteは2.5emで指定しているので行間の高さの違いもはっきりわかると思います。

実際の表示

これはrelativeのp要素です

これはabsoluteのp要素です

 

 

bottomを指定しない場合の表示は、下の画像のようにp要素の空白行が挿入されで位置がずれ文字の部分画像の下よりはみ出してしまいます。

次につつじ寺の背景には、幅320pxを適用することにより画像の横幅とぴったりなのがわかると思います。

 

text-align:center

これは文字を中央に表示するときに使うタグです。

つつじ寺の文字が中央に表示されてますね。

つつじ寺の文字の背景に対しては文字間を2.5で表示しフォントサイズも少し大きめの18pxで指定しています。

それから、最後にimgの幅の設定をします。

 

.msample img

「.msample img」にwidth(幅)をmsampleと同じ320pxで指定します。

 

初心者でも簡単!Twenty Seventeenで画像の上下に文字を重ねて表示する方法をわかり易く説明してみた。No.1

前回、Twenty Seventeenの「追加CSS」の使い方を説明した際に画像と文字を重ねたのですが、今回はそのhtmlとcssを詳しく説明します。

 

 

htmlに指定した「div」「p」「class」について説明します。

divとは・・

 

<div>~</div>の間に記途した部分をひとかたまりの範囲として定義するブロック要素です。

ここから<div>~ここまで</div>はひとつのかたまりですよ!!と宣言しているのです。

div要素の特徴は、前後に改行が入りますが、空白行は入りません。

ブロック要素に関して定義できる詳細は下記の4.displayを参照して下さい。

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

 

pとは・・・

 

<p>~</p>の間に記途した部分をひとつの段落であることを表す際に使用するブロック要素です。

p要素の特徴は、改行された後に1行の空白が入ります。

文章で説明してもわかりづらいと思いますので、実際に記途してみますね。

HTML側↓

 

実際の表示↓

これはHTMLのdiv要素です
これはHTMLのdiv要素です

これはHTMLのP要素です

これはHTMLのP要素です

div要素では改行のみですがP要素とP要素の間下に空白行が入って表示されているのがこれでわかると思います。

 

P要素とP要素の間には、空白行が入る。

cssで表示位置を指定する際にP要素の空白部分が必要になってきますので、覚えておきましょう。

classとは・・

class属性で、要素に対してクラス名(分類名)を付けて特定のクラス名に対して、cssを適用する場合に使います。

今回実際に使用したのは、div classですが、div id

 div class とdiv id の違い

今回指定したdiv classの他にも div idがありますが、

div class=1ページ内で何度も使える。

div id=1ページ内で一度しか使えない。

と上記の違いがあります。

div classを指定した場合のHTMLとCSS書き方

HTML側 <div class=msample>

CSS側 .msample{         } とクラス名の前に「.」を付けます。

div idを指定した場合のHTMLとCSSの書き方

HTML側 <div id=msample1>

msampe名は同じページで一度しか使えないので

msample1

msample2

などのように記途します。

CSS側 #msample{       } とクラスIDの前に「#」を付けます。

#msample1{    }

#msample2{    }

class名やid名の付け方

今回私は「msample」を名前に付与したのですが、CSSなどで指定していない(かぶらない)名前を任意でつけることができます。

これで、htmlとcssの記途の仕方は理解できたと思います。

今回表示するのに当ブログで使用したclass名は

  • .msample
  • .msample1
  • .msample2
  • .msmple img

上記の4点です。

それでは、最後にimgについて説明したいと思います。

WordPressでは、画像の挿入方法が2通りあります。

 

1.メディアファイルから画像のURLをコピーして挿入する

例・・・https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/06/画像のURL.pngを

<img src=”画像のURL”>

の中にいれてテキストモードで投稿記事を編集すると・・下記のように画像が表示されます。メディアからも画像のURLがわかりますね。

2.投稿記事からメディアを追加する

投稿記事のメディア追加から画像を選んで投入すると画像がビジュアルモードでは、そのまま画像が表示され、テキストモードでは

<img class=”alignnone size-full wp-image-2081″ src=”画像のURL alt=”” width=”1289″ height=”799″ />

上記のような感じでclass名や画像のURL サイズの指定が自動でされているのがわかると思います。

 

最後にimg画像を挿入すると自動で付与されるclassを簡単に説明したいと思います。

WordPressで記事に画像を挿入すると自動的に付与されるclassについて

WordPressでは記事に画像を挿入すると自動的に下記のようなタグが出力されますね。

まずこの上記のタグについて説明します。

  1. <img src=は画像を表示するhtmlタグ
  2. “https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024×576.jpg”は画像のURLで.jpgはファイルの拡張子
  3. alt=””は画像の説明文
  4. width=”525″ height=”295″は横幅と高さのサイズ
  5. class=”alignnone size-large wp-image-1838″ />は、投稿画面左上のメディアを追加した際に出力される画像の配置位置です。

alignnone は画像の配置はなし。

size-largeはサイズ大

wp-image-数値は画像のidを表します。

長くなりましたので下記CSSにコメントとして内容は記載しましたがタグなどの使い方の説明は次回にします。

 

 

 

Twenty Seventeenの「追加CSS」はCSS初心者でもわかりやすい!ちょっと本気で説明してみた。

CSSのカスタマイズ機能が備わったTwenty Seventeen

CSS初心者でもわかりやすい、Twenty Seventeenの「追加CSS」の使い方をword press初心者の方向けに解説します。

※ウィジェットにカスタマイズしたい画像などを使って「追加CSS」を使用すると、保存をしない状態でも、表示が変わるので、リアルタイムに変更が表示されてとても便利です。

CSS初心者の方には、特にオススメです。

1.Twenty Seventeenの「追加CSS」の使い方

wordpressの「ダッュボード」→「外観」→「カスタマイズ」の順にクリックします。

すると次のように左下に追加CSSがありますので「追加CSS」をクリックします。

すると左側次の画面になりCSSがカスタマイズでるるようになります。初期状態では以下のように表示されていると思います。

CSSでは、/*○○○○○ */間に記載する文字はコメントと認識され、CSSの表示には影響ありませんので、自分のわかりやすい説明などを記入することをお勧めします。

/*=コメントの開始を表します。

*/=コメントの終了を表します。

補足・・・” {  ” が足りなかったりして、 記途が間違っていれば下記のように表示されますので、そのときは再度確認してください。

訂正すると上記のメッセージの表示はなくなります。

それでは、実際に追加CSSに記途してみます。

まずは、下記のコードをそのままコピペしてください。

コピペが終わりましたら、保存して公開をクリックします。

2.Twenty Seventeenの追加CSSで画像に文字を重ねて表示してみる。

 

2-1.クラス名を指定する。

「ダッシュボード」→「投稿」→「新規追加」の順にクリックすると新規の投稿ができるようになりますね。

テキストモードにして下記のコードをコピペします。

 

2-2.表示したい画像を追加する

</div>の直前に画像を追加します。

投稿画面左上にある「メディア追加」から追加します。

 

一度ビジュアルモードにし、その後テキストモードに変更すると下記のように表示が変わっていると思います。

imgのクラス名の位置がかわってますね。 これでOKです。

次に画像に重ねる文字を入力します。

2-3.画像の左上に重ねる文字を入力する

まず画像の左上に表示させる文字を</div>の前に入力します。

これまでのまとめ

観光スポット

次に画像の下に重ねる文字を入力する

2-4.画像の下に重ねる文字を入力する

先ほどの2-3.のまとめの</div>の前に下記を入力します。

これまでのそうまとめ↓

最終仕上がりはこんな感じです。↓

観光スポット

つつじ寺

次回は、この記事のCSSの内容を説明します。

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

お問い合わせ内容にファイルが添付出来ないとご指摘がありましたので、ファイル添付出来るようにカスタマイズしました。

以前、「お問い合わせホームプラグインContact Form 7 のインストール方法から設置方法まで」で初期設定の方法は掲載しましたので、今回はカスタマイズ方法のみにさせて頂きます。

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

1.フォームにファイルを添付できるようにする

 

1-1.ダッシュボードからコンタクトフォームにアクセスする

現在のフォームを編集する場合は、
ダッシュボードの「お問い合わせ」→「コンタクトホーム」→「編集したいタイトル」の編集をクリックするとフォーム画面になります。

※新規で作りたい場合は、
ダッシュボードの「お問い合わせ」→「新規追加」をクリックしてください。

 

1-2.ファイルをクリックします。

すると、次のようにフォームタグ生成画面になります。

1-3.フォームタグ生成画面

1-3-1.ファイルサイズの上限(バイト)を設定する。

ファイルサイズの上限(バイト):では、ファイルの上限を設定できます。

デフォルトでは、許容ファイルサイズは1 MB(1048576バイト)です。

許容される最大ファイルサイズを制限します。オプションで、kb(キロバイト)またはmb(メガバイト)の接尾辞を使用できます。接尾辞を省略すると、数値はバイトを意味します。

limit:1048576
limit:1024kb
limit:1mb

 

1-3-2.受け入れ可能なファイル形式を設定できます。

デフォルトのファイルタイプ(拡張子)は、jpgjpegpnggifpdfdocdocxpptpptxodtavioggm4amovmp3mp4mpgwavwmvです。

複数指定する場合は、拡張子を,(カンマ)で区切ってください。

するとフォームタグ生成:ファイルの一番下にタグができます。

1-3-3.タグをフォームに追加する。

[file file-537 limit:2mb filetypes:jpg|png|pdf]をフォームに追加します。

訪問者がわかりやすいように

<label>添付可能なファイル形式:jpg png pdf
ファイル容量:最大2mb </label>と表示するようにフォームに追加しました。

入力が終わりましたら、保存してください。

1-3-4.メールのタグをファイル添付にコピペする

最後に保存をしてください。

既存のフォームを編集された方はこれで終わりですが、新規でファイルを作成された方は、投稿、固定ページなどの新規追加でショートコードをテキストエディタにペーストしてください。

 

2.「CAPTCHA」でスパムから守る

 

スパム目的の自動投稿の防止としてCAPTCHAを利用することができます。

2-1.Really Simple CAPTCHAをインストールする

Contact Form 7は、Really Simple CAPTCHAを公​​式に認可されたCAPTCHAモジュールとして利用しているため、フォームにCAPTCHAを使用する前にReally Simple CAPTCHAプラグインをインストールする必要があります。

Word Prsessのダッシュボード「プラグイン」→「新規追加」→キーワードに「Really Simple CAPTCHA」と入力し「今すぐインストール」をクリックします。

2-2.reCAPTCHAのAPIの登録

まず、Googleアカウントにログインした状態で、recaptchaにアクセスして下さい。

すると、reCAPTCHAのAPIを使用する登録画面が表示されます。

画面になります。

2-2-1.Labelに詳細を設定する

Labelにサイト名と貴方が使用している表題を入力します。

2-2-2.Choose the type of reCAPTCHAを設定する

 

簡単に表示させたいので、reCAPTCHA V2のチェックボックスにチェックします。

2-2-2-1.reCAPTCTC V2とInvisible reCAPTCHAの内容

reCAPTCHA v2

reCAPTCHA v2は、ユーザーがロボットではないことを示すチェックボックスをクリックする必要があります。これにより、ユーザーはすぐに(CAPTCHAなしで)ユーザーに渡されるか、ユーザーが人であるかどうかを確認するようにユーザーに挑戦します。これは、統合するための最も簡単なオプションで、チェックボックスを表示するには2行のHTMLしか必要ありません。

Invisible reCAPTCHA

Invisible reCAPTCHAは、見えないRECAPTCHAでユーザーがチェックボックスをクリックする必要はなく、ユーザーがサイトの既存のボタンをクリックしたときに直接呼び出されるか、JavaScript API呼び出しによって呼び出すことができます。reCAPTCHA検証が完了すると、統合にJavaScriptコールバックが必要です。デフォルトでは、最も疑わしいトラフィックだけがキャプチャを解決するように促されます。この動作を変更するには、詳細設定でサイトのセキュリティ設定を編集します。

 

2-2-3.ドメインを設定する

Domeinsには、WordPressで使用しているブログのドメインを指定します。

ドメインはWord Pressの「設定」→「一般」からも確認できます。

例:WordPress アドレス (URL)が「https://xn--68j3b2d8le4af20azcz743e.com」

であれば、ドメインは「xn--68j3b2d8le4af20azcz743e.com」になります。

2-2-4.利用規約に同意する

Accept the reCAPTCHA Terms of Service(サービスのreCAPTCHAの利用規約に同意します。)

2-2-5.登録します。

「Register」をクリックします。

すると次の画面が表示されます。


表示されたサイトキーとシークレットキーをメモしておいて下さい。

2-3.reCAPTCHAをWord Prsess に設定する

 

これからreCaPTCHAで所得したSite keyとSecret keyをWord Pressに登録します。

2-3-1.インテグレーションにキーを設定する。

WordPressの管理画面に戻り、「お問い合わせ」メニューの中にある「インテグレーション」メニューをクリックして下さい。

次に、キーを設定するをクリックします。

 

メモしておいたサイトキーとシークレットキーを入力し「保存」をクリックして下さい。

2-3-2.コンタクトホームを編集する。

コンタクトフォームの編集画面を開き、「reCAPTCHA」ボタンをクリックして下さい。

CAPTCHAの設定画面が表示されます。テーマやサイズを選択して下さい。

フォームに[recaptcha]を記述して保存して下さい。

これで終わりです。

WPをXサーバーのmod_pagespeed設定とSSL化と.htaccessファイル編集で高速化した方法

最近サイトの表示速度がかなり遅いと思いPageSpeed Insightsで調べてみるとモバイルでは19点とかなり悲惨な結果が表示されました。

そこで、今回は2週間程色々試してみた結果プラグインを使わずXサーバーのmod_pagespeed設定&SSL化&.htaccessファイル編集で高速化を図りました。

現在の使用している環境は、

  • Xサーバー
  • WordPress4.7.4
  • テーマは Twenty Seventeen1.2を使用しています。

修正が必要とされる項目としては

  • 画像を最適化する
  • 圧縮を有効にする
  • ブラウザのキャッシュを活用する
  • サーバーの応答時間を短縮する

この4項目です。

1.Xサーバーでmod_pagespeed設定をする

 

1-1.mod_pagespeed設定とは

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能のことで以下の高速化が期待されます。

  • CSSファイル、JavaScriptファイルなどの圧縮
  • 最適な画像タイプへの変換、軽量化
  • 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
  • CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  • 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

 

1-2.mod_pagespeed設定方法

Xサーバーのmod_pagespeed設定にも記載がありますが、手順を記載しておきます。

  • Xサーバーのサーバーパネルにログイン
  • mod_pagespeed設定をクリック
  • mod_pagespeed設定を行う対象ドメインを選ぶと現在の設定が「OFF」表示されますので、ONにするをクリックしてください。

  • mod_pagespeed設定の変更が完了しましたのメッセージが表示されますので、戻るをクリックします。

  • 最後にmod_pagespeed設定が変更になっているか確認してください。

Xサーバーのmod_pagespeed設定はこれで終わりです。

参考の為、この設定で、モバイルの設定は19点→34点になりました。

次に、キャッシュ設定をします。

2.htaccess編集でキャッシュの設定をする

 

2-1.htaccess編集する前の注意事項

  • .htaccessのファイルのテキストエディタなどを使用し現在の.htaccessのバックアップを必ずとってください。参考の為に・・私がWordPressをmod_pagespeed設定をする前はこんな感じでした。
これは、WordPressのパーマリンク設定で利用しているmod_rewriteです。

2-1-1.WordPressのパーマリンク設定の mod_rewrite内容

これは利用環境でmod_rewriteが利用できるかどうかを確認しています。「もし、mod_rewriteが利用できる時は下記を実行してください。」
これはmod_rewriteの機能を有効化するという記述になります。
これはRewrite処理後にベースとなるURLの指定しています。

「%{REQUEST_FILENAME}」というものが、「!-f」という条件を満たしていれば真となります。
「!-f」の場合はファイル以外の場合は、真を返し、ファイルの場合は偽を返します。
また、先ほどと同じような記述がされていて、条件の部分のみ変更されています。
「-d」と記述されていますが、これはディレクトリかどうかの確認を行います。
これはURLが「.」であれば「/index.php」を参照するという命令です。

[L]という記述がありますが、これはLastという意味で「この記述以降の他のルールは適用しません。」という命令です。
これは最初に記途した<IfModule mod_rewrite.c>の最終を指定する記途で「ここまでですよ」と締めくくる記途になります。

ちなみにわかりやすく内容をまとめると、

  • mod_rewriteモジュールを使用出来る。
  • ファイルが存在しない。
  • ディレクトリが存在しない。

という上記にあるすべての条件に当てはまるリクエストは、すべて「/index.php」を参照して下さい。

という条件式の記途になります。

2-1-2.mod_pagespeed設定後の.htaccess

mod_pagespeed設定をした後は、ModPagespeed On が下記のように13行目に追加されていました。

  • Xサーバーでは、WordPressなどのプログラムによる記述が自動的に行われている場合がありますので、心当たりがない記述であっても不用意に削除なされないようにご注意して下さい。

    また、この機能を利用した場合は文字コードが「EUC-JP」として保存されますので.htaccessのファイルはXサーバーから直接編集することをおすすめします。

     

    2-2.Xサーバーで.htaccessを編集してキャッシュを有効にする

    .htaccessの基本的な使い方はXサーバーのマニュアルにございますのでここでは割愛します。

    .htaccessのファイルの中に記途する場所としては、

    # END WordPressのみがある場合は、その下に
    # BEGIN EWWWIOがある場合はその下に下記コードを記途します。

    注意:# BEGIN WordPress~# END WordPressの間はXサーバーで自動で書き換えられる領域になってます。

     

    3.htaccess編集でファイルを圧縮する

    下記のコードを.htaccessに記途します。

     

    ここまで進めても画像の最適化がでる場合は、

  • 保存した画像のファイル名を修正して再度アップロードしファイルを置き換える
  • グーグルマップを埋め込んでいれば、住所にリンクをつけるなどの対処をとりましょうそれでは、次にSSL設定です。

    4.XサーバーでSSLを導入したドメインをhttpsに正規化する

     

    4-1.XサーバーでSSLの申し込み

    主な手順としては、Xサーバーのサーバーパネルに「ログイン」→「SSL設定」をクリック→設定するドメインを選択し、「独自SSL設定を追加する(確定)」をクリックしてください。

    詳しい説明は、Xサーバーのマニュアルにございますので割愛します。

    4-2.待つこと約1時間

    Xサーバーに「ドメイン名」に独自SSL設定を追加しました。

    なお、SSL設定が反映するまで、最大1時間程度かかります。今しばらくお待ちください。

    と表示されると思います。設定が完了する前にアクセスしても以下のようなエラーメッセージが表示されます。

    4-3.WordPressの管理画面からURLを変更

    Word Psessの「ダッシユボード」の「設定」→「一般」をクリクします。次にWordPress アドレス(URL)とサイトアドレス(URL)を「http://~」 「https://~」に変更します。最後に「変更を保存」

     

    4-4.canonicalタグで「https~」を指定してURLの正規化

    URLの正規化で非常に重要な役割を果たすのが、canonicalです。

    httpsを優先してもらうため、このようにカノニカルタグでドメインを指定します。
    WordPressなどのテンプレートで指定している場合は、忘れなく変更しておきましょう。

    4-4-1.canonicalの記述方法

    canonicalはhead要素の上部で使います。body要素の中で使っても、Googleは無視して処理してくれないので注意してください。

    head要素の上部で使うことによりHTML構造をクローラーが解析する際に早い段階でクローラーがcanonicalを読んで処理してくれます。ので、下記のようにインデックスに登録させたいほうのURLを記途します。

    1.ドメイン名(○○○○○.com)を、置き換えて下さい

     

    4-5.「http://~」から「https://~」にリダイレクト設定をする

    独自SSLの設定が完了した時点では、自動的に「https://~」のURLへ転送されませんのでサイト内全てのページをhttpsページにリダイレクトさせる方法です。

    その場合.htaccessファイルの最上部に追記します。

    今回、SSLするに当たりon offで迷いましたのでメイビンラボさんの記事を参考に忘れないように記録しておきます。

    .htaccessだけの変更でSSL対応するにはoffにします。

     

    続いて、Xサーバーではwwwありを優先に設定されますので、wwwなしに統一します。

     

    4-6.URLのwwwありをwwwなしに統一

    1.ドメイン名(○○○○○.com)を、置き換えて下さい
    2.通常はバックスラッシュの箇所は「\」が正しいのですが
    環境の問題で「\」が「バックスラッシュ」バックスラッシュになっています。

     

    4-7..htaccessファイルをまとめるとこんな感じです。

    SSL設定後のSearch Console の設定方法

    4-8.内部リンクを修正する

    私は、自分で修正したのですが、テーター量が多いサイト等はプラグインを活用する方法もあります。その際は必ずバックアップをとっておくことを忘れずに!!

    4-8-1.内部リンクの調べ方

    ご自分のサイトの空白部分の上部で右クリックします。

    次に「ページのソースを表示」をクリックします。

    するとページソースが下の画像のように表示されますので「Ctrl+F」キーを押すと検索窓が表示されますので検索窓に修正したいURLを入力します。

    4-8-2.内部リンクを修正した場所

    • ウィジェットに記途しているアドレス
    • ダッシュボードの「外観」→「メニュー」メニュー構造の「ホーム」のカスタムリンク

    • メディアのファイル名は自動で「https://~」に変更されますが、「fancybox for wordpress」プラグインを利用してで拡大表示設定をしている画像をカスタムURLをドロップダウンメニューから選択して「更新」→メディアファイルに変更

     

  • 自分で内部リンク設定しているカスタムURL

上記の4項目を修正しました。

  • 最終結果はPC94点モバイル85点とまずまずの点数になりました

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 Related Posts-Word Press Plugins

関連記事を簡単に表示できる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のサムネイルにタイトルを重ねて表示する方法をコピペでどうぞ

 

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

↓After

 

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をカスタマイズ

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

 

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

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

 

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

 

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

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

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

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

↓Before

 

↓After

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をカスタマイズします。

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

 

 

 

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

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

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

 

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

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

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

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

お疲れさまでした。ご自分のお好みでカスタマイズしてくださいね。

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

4月20日にWordPress4.7.4が公開されTwenty Seventeenも4月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を作る

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

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

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

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】にします。

 

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

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

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

 

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

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

↓   ↓


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

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

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

 

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

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

 ↓   ↓

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

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

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

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

2-2.functions.phpを作る

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

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

 

2-3.header.phpを作る

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

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

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

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

元のデータは

 

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

 

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

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

 

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.cssfunctions.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://←テーマ作者のサイト

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

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

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

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

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

 

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

 

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

 

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

 

1-4.functions.phpを作る

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

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

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

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

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

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

 

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

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

2.ファイルをFFFTPソフトでアップロードする。

 

次に、作成したこの2つのファイルをFFFTPソフトを使ってアップロードしていきます。

・FFFTPソフトにサーバーに接続します。

・WordPressがインストールされているフォルダをダブルクリック→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」の順にダブルクリックします。

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

・下画像の右側(ホスト側)にstyle.cssとfunctions.phpのファイルをドラック&ドロップします。

 

ホスト側に下の画像のようにstyle.cssとfunctions.phpのファイルがアップロードされているのを確認します。

 

これでFFFTPソフトの使用は終わりです。
FFFTPソフトは使い終わったので閉じちゃってください。

これから最後の総仕上げ(^^♪もうちょっとだよ~!頑張って!!

 

3.子テーマを有効化する

Word Press にログインし、「外観」→「テーマ」の順にクリックします。

 

お疲れさまでした(*^^)v何かご質問があればコメント欄よりお待ちしてます。

Search Console(旧:ウェブマスターツール)構造化エラーの対処方法

hatomとhentryが何故か続出・・・

その時のSearch Consoleの構造化データーは下記画像の通りでした。

 

1.hatom(マークアップ: microformats.org)

 

Search Consoleの構造化データをクリックするとたくさんauthorがありませんとされてました。

 

エラーが出ているところをクリックし「ライブデーターをテスト」をおすと↓

 

構造化データーが出てきます↓
hatomの警告とエラーは表示されませんがhentryの部分が空白表示になってます。

 

1-1.hentryエラーの修正方法

 

私は、WordPress Twenty Seventeenのテーマを使用していて、子テーマを使っているのですが、子テーマのスタイリストシート(style.css)に

/*
Template: twentyseventeen
Theme Name: twentyseventeen-child
*/

と記途していました。

これを下記のようにカスタマイズするとhatomのエラーはなくなりました。

 

修正後の構造化データは↓

 

 

2.hentry(マークアップ: microformats.org)

のエラーが出た時の確認方法です。

構造化データの赤色で囲ってある下のhentryをクリックします。

 

hentryのエラーのページが表示されますのでエラー表示されている部分をクリックします↓

 

「ライブデータをテスト」をクリックします↓

 

赤色で囲ってある部分の下のArticleとをクリックすると↓

 

たくさんのエラーが出ています。

もうこれでは、沢山のエラーがあり過ぎて↓

困り果てた私は・・・

プラグインを探してみました。すると・・・

なんかよさげなプラグインを発見!!これだとWordPressのバージョンのアップデートがあった時にも個別に対処しないでよさそうなのでインストールしてみました。

いつものように管理画面の「プラグイン」→「新規追加」→検索窓に「Hatom」と入力し検索→インストール

 

次に有効化をクリックこれで↓

これでしばらく様子を見てみたいと思います。
しばらくたって変化があれば、また投稿しますね。

最後に、Search Consoleの構造化データを改善するとseo効果も期待されますので、確認してみてくださいね。

WordPressでRSSフィードが出力できていない時に確認すること

alt"RSS検出できない時のRSSリスティング(フィードの自動検出はできませんでした)の画像"

にほんブログ村のブログランキングに参加しているのですが、更新した記事が記載されていない事を発見!!

にほんブログ村の登録時にRSSのフイードURLも登録したので、まさか?と思いRSSリスティングでフィード自動検出をしたところ「フィードの自動検出はできませんでした。」

と表示され、RSSの出力ができてない事を確認。

alt""

 

 

日本ブログ村に登録した後、私がした事といえば・・・

パーマリンクを変更し、Redirection(プラグイン)をインストール
子テーマを作り使用した。

以上の2項目のみ・・

Redirection(プラグイン)を停止しても変化なしそこで子テーマを親テーマに変更
すると見事RSSの出力ができました。

色々調べた結果functions.phpに必要のない改行やスペースがあるとRSSフィードが表示されないらしいです。

 

1.子テーマのfunctions.phpのコードを確認する

 

私の場合は以下のように子テーマでfunctions.phpコードを記途しました。

修正前↓

alt""

 

 

修正後↓

alt""

 

私の場合は子テーマを使っているので子テーマのfunctions.phpの改行を取り除きました。

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

 

最後までお読み頂きありがとうございます。

 

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

リダイレクトとは

 

パーマリンクを変更する前のページにアクセスした際に自動的に新しいページを表示させる機能の事です。

301リダイレクトをうまく利用すると、Wordpressでパーマリンク設定を変更した時などにGoogleにインデックスされている旧ページをクリックしても、新ページを表示させることができます。

 

1.Redirectionプラグインのインストールの仕方

1-1.WordPress管理画面→プラグイン→新規追加で「Redirection」を検索してください。
1-2.「今すぐインストール」を押し、インストールできたら有効化してください。

alt"Installation image"

 

2.Redirectionプラグインの表示方法

2-1.管理画面の「ツール」→「Redirection」をクリックしてください。

alt""

 

すると転送ルールの項目が表示されます。

3.転送ルールーの設定

3-1.ソースURL : 転送元のURLを入力します。

3-2.ターゲットURL : 転送先のURLを入力します。

3-3.グループ : パーマリンク変更など変更されたURLを転送する場合は「Modified Posts」を選択してください。通常のリダイレクトであればそのまま「Redirections」でOKです。

3-4.新しい転送ルールを追加してください。

 

最後までお読み頂きありがとうございます。

 

RSSのURL取得と表示を簡単にする方法


RSSとは


Webサイトの概要や更新情報(更新記事)を、リアルタイムに配信するための仕組みで。「RSSURL」を「RSSリーダー」に読み込む事でブログの新着記事(タイトル、記事の概要、サムネイル)を見やすくまとめて表示してくれます。

 

1.RSSフィードURL取得方法

 

RSSのサイトURLはRSSリスティングのフィード検出を使って調べます。

1-1.サイトURLを入力

1-2.自動検出スタートをクリック

1-3.RSS(フィード)URLが表示されます。

alt"RSSリスティングの使い方"

 

 

2.WordPressに設定する方法

 

WordPressの管理画面からはRSSウィジェットとテキストウィジェットを使用する2通りのパターンがあります。

2-1.  WordPressのRSSウィジェットを使用する方法

 

管理画面の「外観」→「ウィジェット」の順にクリックします。

次に、「RSS」をクリックするとサイドバーにチェックが入り「ウィジェットを追加」のボタンが表示されますのでウィジェットを追加します。

※サイドバーにドラッグしてもOKです。

alt"rssウィジェットの使い方1"

 

1.RSSフィードURLを入力する。
2.タイトルを入力する。
※空白のままですと、ご自分のサイト名が表示されます。
3.保存をクリック。

 

実際の表示画面はこんな感じです。少し小さめですね。↓

alt"rssウィジェットを使用した時の表示画像"

 

 

 

2-2.Word Pressのテキストウィジェットを利用して追加する方法

 

1.まず、RSSアイコンを用意します。

デザイン素材.comさんやアイコン素材さんからダウンロードします。

①ダウンロードした画像を管理画面の「メディア」→「ライブラリ」→「新規追加」

②管理画面の「メディア」→「ライブラリ」→アップロードした画像をクリック

右上のURLがリンク先の画像URLになります。

 

2.管理画面メニューの「外観」→「ウィジェット」からテキストをサイドバーにドラッグします。

 

テキストの▼ボタンをクリックすると下の画像のようになりますのでタイトルと内容を入力します。

 

 

タイトルは、表示される項目の名前です。ここではRSSと入力しました。

内容には以下の文字を入力します。

<a href=”サイトのフィードURL“><img src=”RSSリンク先の画像URL” border=”0″ /></a>

の赤文字部分をご自分のURLにして入力して下さい。

最後に保存を押して完了です。

こんな感じにアイコンが大きくなりました!!

 

テキストを使うと任意のサイズで表示できますのでいいですね!!

 

最後までお読み頂きありがとうございます。

 

Twenty Seventeen のリンク色を変更する方法

Twenty Seventeenのリンク色を管理画面からカスタマイズする方法

 

WordPress 4.7.3 Twenty Seventeen1.1でカスタマイズしています。

管理画面>テーマの編集>スタイルシート(style.css)の画面で

Ctrl+Fを押し右上に出てきた検索画面にHover effectsと入力すると 探しやすいです。

 

 

 

 

 

 

 

 

リンク色の変更

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

ご自分のお好みでカスマイズして下さい。

HTMLカラーコード  カラーコード変換ツール

これでリンクの色は青になりましたが、リンクの下の線がありません。

もう少し下にスクロールすると
↓    ↓

 

reba(255, 255, 255, 1)になってます。これは白なのでこのタグも変更します。

 

リンクの下線を白→青に変更

reba(255, 255, 255, 1)をreba(0, 0, 255, 1)に変更

因みに・・・

box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);の部分を

box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);に変更したら、

表題やサイドバーに表示しているカテゴリーなど全てのリンクに青の下線がつきました。

 

Twenty Seventeenのホバー色を管理画面からカスタマイズする方法

 

Twenty Seventeenのホバー色は黒系でオレンジ系の色に変更しました。

11.0 Featured Image Hoverのすぐ上にあるタグを探して

 

ホバー色の変更

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

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

※下線の太さを変更したい時は3pxより値の少ない数値にして下さい。

 

ご参考にして頂ければ幸いです。

Twenty Seventeenのproudly powered by wordpressをCopyright (C)にカスタマイズする方法

フッターのproudly powered by wordpress表記をCopyright (C)にカスタマイズする方法

 

WordPress 4.7.3 Twenty Seventeen1.1でカスタマイズしています。

Twenty SeventeenはWordPressの管理画面からはできませんでしたのでFTPソフトを使いました。

WordPressのインストールをしているサーバーに接続します。

実際にアクセスする方法は以下の通りです。

インストールしたディレクトリ>public_html>wp-content>themes>twentyseventeen>tenplate-parts>footer>site-info.php

すると以下のようなhtmlタグが表示されますので赤文字の部分を削除しCopyrightに変換するタグを追加します。

<?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 –>

 

追加するCopyrightタグ

↓  ↓

Copyright (C) <a href=”<?php echo home_url( ‘/’ ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘Your name‘, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘Your name‘ ); ?> </a>All Rights Reserved.

 

Your nameの部分を表示したい文字にしてタグを追加します。

タグを追加したらFTPソフトを使ってアップロードします。

■Windowsのメモ帳に保存する場合■
1.ファイル名・・・site-info.php
2.ファイルの種類・・・すべてのファイルを選択して保存して下さい。

 

 

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

WordPress 4.7.3 Twenty Seventeen1.1 でカスタマイズしています。

お問い合わせホームContact Form 7プラグインのインストール

 

お問い合わせホームのプラグインは日本語版のContact Form 7を使用しています。

管理画面のプラグイン>新規追加>プラグインの検索にcontact Form 7と入力します。

今すぐインストール>有効化をクリック。

 

 お問い合わせホームContact Form 7設置方法

 

プラグイン>インストール済みプラグインからcontact Form 7の編集をクリック


お問い合わせ>コンタクトホーム1>編集

 

ショートコードをコピーする

 

 

管理画面>固定ページ>新規作成からお問い合わせページを作成しテキストのページにショートコードをペースト

更新して終了。

Googleアナリティクスコードを直接貼る方法Twenty Seventeen1.0対応

管理画面の外観>テーマの編集>テーマヘッダー(header.php)の順にクリックしてテーマヘッダを開きます。

Googleアナリティスクを直接貼る方法

①CtrlとFを同時に押すと右上に検索画面が出てきます。

※検索画面に</head>と入力すると</head>の部分のみオレンジ色になるので貼り付ける場所がわかりやすいです。

②</head>の直前にGoogleアナリティスクのトラッキングコードをコピーして貼ります。

③ファイルの更新を押して終了です。