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

2018年1月20日2018年5月22日

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関数適用対象表(アルファベット順)

関数一覧

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

5/22追記します。

モバイルでは、表示できない為、「.xls」形式でのダウンロードに変更させていただきました。

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

互換性のある関数名(旧)	変更された関数名(新)	新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に表示した方法を２通り説明したいと思います!!

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

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

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

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

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

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

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

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

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

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

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

共通設定

WordPress Popular Posts

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

アイキャッチ画像

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

レスポンシブ対応:無効

その他

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

にしています。

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

/*WordPress Popular Postsカウンターリセット
*/
.wpp-list {
    counter-reset: wpp-ranking;
}
.wpp-list li:before {
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
}
/* WordPress Popular Postsカウンター順位表示*/
.wpp-list li {
    position: relative;
    list-style-type: none;
    padding-top: 5px;
    padding-left: 5px;
}
.wpp-list li:before {
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
    background: rgba(66, 133, 244, 0.9);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
/*Popular Postsカウンターに1.2.3金銀銅のカラーをつける*/
.wpp-list li:nth-child(1)::before {
  background-color: rgba(230,180,34,0.9);
}
.wpp-list li:nth-child(2)::before {
  background-color: rgba(192,192,192,0.9);
}
.wpp-list li:nth-child(3)::before {
  background-color: rgba(196,112,34,0.9);
}

/*WordPress Popular Postsカウンターリセット

.wpp-list {

counter-reset: wpp-ranking;

}

.wpp-list li:before {

content: counter(wpp-ranking, decimal);

counter-increment: wpp-ranking;

}

/* WordPress Popular Postsカウンター順位表示*/

.wpp-list li {

position: relative;

list-style-type: none;

padding-top: 5px;

padding-left: 5px;

}

.wpp-list li:before {

content: counter(wpp-ranking, decimal);

counter-increment: wpp-ranking;

background: rgba(66, 133, 244, 0.9);

color: #fff;

font-size: 16px;

line-height: 1;

padding: 4px 8px;

position: absolute;

left: 0;

top: 0;

z-index: 2;

}

/*Popular Postsカウンターに1.2.3金銀銅のカラーをつける*/

.wpp-list li:nth-child(1)::before {

background-color: rgba(230,180,34,0.9);

}

.wpp-list li:nth-child(2)::before {

background-color: rgba(192,192,192,0.9);

}

.wpp-list li:nth-child(3)::before {

background-color: rgba(196,112,34,0.9);

}

当サイトのWordPress Popular Postsの設定

本日の人気記事の設定

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

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

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

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

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

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

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

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

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

.wpp-img1 {
    position:relative;
    display:block;
    /* 画像と同じサイズを指定 */
    width:320px;
    height:240px;
    margin:0 0 0 10px;
    padding:0;
    background-color:#000;
}
.wpp-img1 img {
    z-index:0;
    margin:0 0 0 5px;
    padding:0;
}
.img-title1 {
    position:absolute;
    bottom:10px;
    left: 5px;
    z-index:1;
    margin:0;
    padding:5px 10px 5px 10px;
    background-color: rgba(15, 15, 15, 0.7);
    width: 320px;
}
.img-title1 a {
    color: #ffffff;
    font-size: 80%
    font-weight: normal;
    clear:both;
}

.wpp-img1 {

position:relative;

display:block;

/* 画像と同じサイズを指定 */

width:320px;

height:240px;

margin:0 0 0 10px;

padding:0;

background-color:#000;

}

.wpp-img1 img {

z-index:0;

margin:0 0 0 5px;

padding:0;

}

.img-title1 {

position:absolute;

bottom:10px;

left: 5px;

z-index:1;

margin:0;

padding:5px 10px 5px 10px;

background-color: rgba(15, 15, 15, 0.7);

width: 320px;

}

.img-title1 a {

color: #ffffff;

font-size: 80%

font-weight: normal;

clear:both;

}

今週の人気記事の設定

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

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

/* Popular Postsサムネイルにタイトルを重ねる*/
.wpp-img {
    position:relative;
    display:block;
    /* 画像と同じサイズを指定 */
    width:320px;
    height:240px;
    margin:5px;
    padding:0;
    background-color:#000;
}
.wpp-img img {
    z-index:0;
    margin:0 0 0 5px;
    padding:0;
}
.img-title {
    position:absolute;
    bottom:30px;
    left:10px;
    z-index:1;
    margin:0;
    padding:5px 10px 5px 10px;
    background-color: rgba(15, 15, 15, 0.7);
    width: 322px;
}
.img-title a {
    color: #ffffff;
    box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0.7);
    text-decoration: none;/*テキストに線をつけない*/
    font-weight: normal;
}
.img-title a:hover {
    color:#31dde2;
    box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0.7);
    text-decoration: none;/*テキストに線をつけない*/
    clear:both;
}

/* Popular Postsサムネイルにタイトルを重ねる*/

.wpp-img {

position:relative;

display:block;

/* 画像と同じサイズを指定 */

width:320px;

height:240px;

margin:5px;

padding:0;

background-color:#000;

}

.wpp-img img {

z-index:0;

margin:0 0 0 5px;

padding:0;

}

.img-title {

position:absolute;

bottom:30px;

left:10px;

z-index:1;

margin:0;

padding:5px 10px 5px 10px;

background-color: rgba(15, 15, 15, 0.7);

width: 322px;

}

.img-title a {

color: #ffffff;

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

text-decoration: none;/*テキストに線をつけない*/

font-weight: normal;

}

.img-title a:hover {

color:#31dde2;

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

text-decoration: none;/*テキストに線をつけない*/

clear:both;

}

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

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

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

2017年6月26日2018年5月14日

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

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

/*サンプル*/
.msample{
    float:none;/*フロートの指定なし*/
    clear:both;/*全ての回り込みを解除する*/    
    position:relative;/*ポジションを相対位置で指定*/
    width:320px;/*幅320pxで表示*/
    height:240px;/*高さ240pxで表示*/
}
.msample1{/*観光スポットのクラス名*/
    position:absolute;/*relativeに対するポジションを絶対位置で指定*/
    display:inline-block;/*ディスプレイをインラインブロックで表示する*/
    top:0px;/*背景が青色で表示する文字の表示の位置を一番上(0px)から表示*/
    left:0px;/*背景が青色で表示する文字の表示位置を一番左(0px)に指定*/
    color:#fff;/*文字の色を白に指定*/
    line-height:1.5em;/*青色で表示する文字の外の余白を1.5emで指定*/
　　 padding: 0 5px 0 5px;/*文字を表示する開始位置と終わりのに5pxの余白を指定「上」「右」「下」「左」*/
    background: rgba(66, 133, 244, 0.9);/*文字を表示する背景(青)にし、透明度を0.9にする*/
    font-size: 15px;/*フォントサイズを15pxで表示*/
}
.msample2{
    position:absolute;/*relativeに対するポジションを絶対位置で指定*/
    bottom:1.7em;/*下から1.7emに表示*/
    left:0px;/*左から0pxに表示*/
    width:320px;/*背景画像を320pxで表示*/
    text-align:center;/*テキストを中央に寄せる*/
    color:#fff;/*文字色を白*/
    line-height:2.5;/*背景が黒で表示する文字の外の余白を2.5emで指定*/
    background: rgba(15, 15, 15, 0.8);/*背景を黒で透明度を0.8*/
    font-size:18px;/*フォントサイズを18px*/
}
.msample img{
    width:320px;/*イメージ画像の幅を320px*/
}

/*サンプル*/

.msample{

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

clear:both;/*全ての回り込みを解除する*/

position:relative;/*ポジションを相対位置で指定*/

width:320px;/*幅320pxで表示*/

height:240px;/*高さ240pxで表示*/

}

.msample1{/*観光スポットのクラス名*/

position:absolute;/*relativeに対するポジションを絶対位置で指定*/

display:inline-block;/*ディスプレイをインラインブロックで表示する*/

top:0px;/*背景が青色で表示する文字の表示の位置を一番上(0px)から表示*/

left:0px;/*背景が青色で表示する文字の表示位置を一番左(0px)に指定*/

color:#fff;/*文字の色を白に指定*/

line-height:1.5em;/*青色で表示する文字の外の余白を1.5emで指定*/

　　 padding: 0 5px 0 5px;/*文字を表示する開始位置と終わりのに5pxの余白を指定「上」「右」「下」「左」*/

background: rgba(66, 133, 244, 0.9);/*文字を表示する背景(青)にし、透明度を0.9にする*/

font-size: 15px;/*フォントサイズを15pxで表示*/

}

.msample2{

position:absolute;/*relativeに対するポジションを絶対位置で指定*/

bottom:1.7em;/*下から1.7emに表示*/

left:0px;/*左から0pxに表示*/

width:320px;/*背景画像を320pxで表示*/

text-align:center;/*テキストを中央に寄せる*/

color:#fff;/*文字色を白*/

line-height:2.5;/*背景が黒で表示する文字の外の余白を2.5emで指定*/

background: rgba(15, 15, 15, 0.8);/*背景を黒で透明度を0.8*/

font-size:18px;/*フォントサイズを18px*/

}

.msample img{

width:320px;/*イメージ画像の幅を320px*/

}

前回のHTMLのおさらいから

HTMLのおさらい

<div class="msample">
<img class="alignnone size-large wp-image-1838" src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" />
<p class="msample1">観光スポット</p>
<p class="msample2">つつじ寺</p>
</div>

<p class="msample1">観光スポット</p>

</div>

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

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

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

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

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

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

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

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

.msample {
    float:none;/*フロートの指定なし*/
    clear:both;/*全ての回り込みを解除する*/    
    position:relative;/*ポジションを相対位置で指定*/
    width:320px;/*幅320pxで表示*/
    height:240px;/*高さ240pxで表示*/
}

.msample {

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

clear:both;/*全ての回り込みを解除する*/

position:relative;/*ポジションを相対位置で指定*/

width:320px;/*幅320pxで表示*/

height:240px;/*高さ240pxで表示*/

}

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 style="background-color: #ffff99; color: green; position: relative; line-height: 1.5em;">これはrelativeのp要素です</p>
<p style="background-color: #ffff99; color: blue; position: absolute; line-height: 2.5em;">これはabsoluteのp要素です</p>

1 2	<p style="background-color: #ffff99; color: green; position: relative; line-height: 1.5em;">これはrelativeのp要素です</p> <p style="background-color: #ffff99; color: blue; position: absolute; line-height: 2.5em;">これはabsoluteの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で指定します。

2017年6月19日2018年5月25日

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

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

<div class="msample">
<img class="alignnone size-large wp-image-1838" src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" />
<p class="msample1">観光スポット</p>
<p class="msample2">つつじ寺</p>
</div>

<p class="msample1">観光スポット</p>

</div>

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

divとは・・

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

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

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

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

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

pとは・・・

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

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

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

HTML側↓

<div style="background-color: #d1e9ed;">/*div要素の全体がわかりやすいように背景に色をつける*/
<div style="color:green;">これはHTMLのdiv要素です</div>
<div style="color:blue;">これはHTMLのdiv要素です</div>
<p style="color:red;">これはHTMLのP要素です</p>
<p style="color:black;">これはHTMLのP要素です</p>
</div>

<div style="background-color: #d1e9ed;">/*div要素の全体がわかりやすいように背景に色をつける*/

<div style="color:green;">これはHTMLのdiv要素です</div>

<div style="color:blue;">これはHTMLのdiv要素です</div>

<p style="color:red;">これはHTMLのP要素です</p>

<p style="color:black;">これはHTMLのP要素です</p>

</div>

実際の表示↓

これはHTMLのdiv要素です

これはHTMLのP要素です

div要素では改行のみですが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を

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

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

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

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

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

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

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

<img src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" class="alignnone size-large wp-image-1838" />

1	<img src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" class="alignnone size-large wp-image-1838" />

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

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

alignnone は画像の配置はなし。

size-largeはサイズ大

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

長くなりましたので下記のCSSの使い方の説明は次回にします。

/*サンプル*/
.msample{
    float:none;/*フロートの指定なし*/
    clear:both;/*全ての回り込みを解除する*/    
    position:relative;/*ポジションを相対位置で指定*/
    width:320px;/*幅320pxで表示*/
    height:240px;/*高さ240pxで表示*/
}
.msample1{/*観光スポットのクラス名*/
    position:absolute;/*relativeに対するポジションを絶対位置で指定*/
    display:inline-block;/*ディスプレイをインラインブロックで表示する*/
    top:0px;/*背景が青色で表示する文字の表示の位置を一番上(0px)から表示*/
    left:0px;/*背景が青色で表示する文字の表示位置を一番左(0px)に指定*/
    color:#fff;/*文字の色を白に指定*/
    line-height:1.5em;/*青色で表示する文字の外の余白を1.5emで指定*/
　　 padding: 0 5px 0 5px;/*文字を表示する開始位置と終わりのに5pxの余白を指定「上」「右」「下」「左」*/
    background: rgba(66, 133, 244, 0.9);/*文字を表示する背景(青)にし、透明度を0.9にする*/
    font-size: 15px;/*フォントサイズを15pxで表示*/
}
.msample2{
    position:absolute;/*relativeに対するポジションを絶対位置で指定*/
    bottom:1.7em;/*下から1.7emに表示*/
    left:0px;/*左から0pxに表示*/
    width:320px;/*背景画像を320pxで表示*/
    text-align:center;/*テキストを中央に寄せる*/
    color:#fff;/*文字色を白*/
    line-height:2.5;/*背景が黒で表示する文字の外の余白を2.5emで指定*/
    background: rgba(15, 15, 15, 0.8);/*背景を黒で透明度を0.8*/
    font-size:18px;/*フォントサイズを18px*/
}
.msample img{
    width:320px;/*イメージ画像の幅を320px*/
}

/*サンプル*/

.msample{

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

clear:both;/*全ての回り込みを解除する*/

position:relative;/*ポジションを相対位置で指定*/

width:320px;/*幅320pxで表示*/

height:240px;/*高さ240pxで表示*/

}

.msample1{/*観光スポットのクラス名*/

position:absolute;/*relativeに対するポジションを絶対位置で指定*/

display:inline-block;/*ディスプレイをインラインブロックで表示する*/

top:0px;/*背景が青色で表示する文字の表示の位置を一番上(0px)から表示*/

left:0px;/*背景が青色で表示する文字の表示位置を一番左(0px)に指定*/

color:#fff;/*文字の色を白に指定*/

line-height:1.5em;/*青色で表示する文字の外の余白を1.5emで指定*/

　　 padding: 0 5px 0 5px;/*文字を表示する開始位置と終わりのに5pxの余白を指定「上」「右」「下」「左」*/

background: rgba(66, 133, 244, 0.9);/*文字を表示する背景(青)にし、透明度を0.9にする*/

font-size: 15px;/*フォントサイズを15pxで表示*/

}

.msample2{

position:absolute;/*relativeに対するポジションを絶対位置で指定*/

bottom:1.7em;/*下から1.7emに表示*/

left:0px;/*左から0pxに表示*/

width:320px;/*背景画像を320pxで表示*/

text-align:center;/*テキストを中央に寄せる*/

color:#fff;/*文字色を白*/

line-height:2.5;/*背景が黒で表示する文字の外の余白を2.5emで指定*/

background: rgba(15, 15, 15, 0.8);/*背景を黒で透明度を0.8*/

font-size:18px;/*フォントサイズを18px*/

}

.msample img{

width:320px;/*イメージ画像の幅を320px*/

}

2017年6月15日2018年5月25日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*サンプル*/
.msample{
    float:none;
    clear:both;    
    position:relative;
    width:320px;
    height:240px;
}
.msample1{
    position:absolute;
    display:inline-block;
    top:0px;
    left:0px;
    color:#fff;
    line-height:1.5em;
　　 padding: 0 5px 0 5px;
    background: rgba(66, 133, 244, 0.9);
    font-size: 15px;
}
.msample2{
    position:absolute;
    bottom:1.7em;
    left:0px;
    width:320px;
    text-align:center;
    color:#fff;
    line-height:2.5;
    background: rgba(15, 15, 15, 0.8);
    font-size:18px;
}
.msample img{
    width:320px;
}

/*サンプル*/

.msample{

float:none;

clear:both;

position:relative;

width:320px;

height:240px;

}

.msample1{

position:absolute;

display:inline-block;

top:0px;

left:0px;

color:#fff;

line-height:1.5em;

　　 padding: 0 5px 0 5px;

background: rgba(66, 133, 244, 0.9);

font-size: 15px;

}

.msample2{

position:absolute;

bottom:1.7em;

left:0px;

width:320px;

text-align:center;

color:#fff;

line-height:2.5;

background: rgba(15, 15, 15, 0.8);

font-size:18px;

}

.msample img{

width:320px;

}

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

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

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

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

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

<div class="msample">
</div>

1 2	<div class="msample"> </div>

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

<div class="msample">
<img src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" class="alignnone size-large wp-image-1838" />
</div>

</div>

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

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

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

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

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

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

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

<p class="msample1">観光スポット</p>/*←観光スポットの文字を任意の文字にしてください。*/

1	<p class="msample1">観光スポット</p>/←観光スポットの文字を任意の文字にしてください。/

これまでのまとめ

観光スポット

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

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

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

<p class="msample2">つつじ寺</p>

1	<p class="msample2">つつじ寺</p>

これまでのそうまとめ↓

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

観光スポット

つつじ寺

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