初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法

WordPressで表を作る時間がもったいないと思ったことありませんか?

Excelからhtmlに出来ればできれば簡単なのでhtmlやcssの知識がなくても大丈夫!(^^)!

今回は、Excelの機能とWordPressの機能をそのまま使ってExcelでの表作成以外のほとんどがコピペだけでWordPressの投稿記事1記事』に適応させる方法をWordPress初心者でもExcel初心者でもわかりやすいように説明します。

初心者の方は、画像に沿って説明していますのでExcel2003の場合とExcel2016の場合をご覧になって下さい。

全バージョン共通では、ショートカットキーを含め文字のみでの説明にしています。

表示されている目次で理解できる方は目次を参照して下さい。

作成した環境:Excel2003=Windows7・Excel2016=Windows10で、WordPressはTwenty Seventeenです。

Excelの設定

1.Excelのワークシート内に含まれるふりがなを一括削除する

Excelにふりがなが表示されていない場合でもhtml側では、入力時にフリガナがExcel中に保存されていますのでふりがなを一括で削除します。

ふりがな付きOKの場合は、この項目は飛ばしてください。

 

Excel2003の場合

ワークシート内を全選択する

下画像の左上のの部分をクリックすると全選択できます

 

すると下の画像のようにワークシート内が全て選択されます

 

 

コピーする

ツールバーにある「コピー」ポタンをクリックします。

 

 

すると下の画像のようにコピーされます。

 

 

新しいワークシートに数式を貼り付ける

①「新しいワークシート」を選択します

②ツールバーの「貼り付け」アイコン右横にある「」をクリック

③「形式を選択して貼り付け」をクリック

すると下の画像のようにポップアップウインドウが表示されますので「数式を選択して「OK」ボタンをクリックします。

 

すると下の画像のように文字のみコピーされますが、書式がまだコピーされていませんので今度は書式をコピーします。

数式を貼り付けたワークシートに書式を貼り付ける

もう一度ツールバーにある貼り付けアイコン右側にある「」をクリックします。

次に「形式を選択して貼り付け」をクリックし、今度は「書式」を選択し「OK」ボタンを押します。

 

これで、元のデータと同じ表示になりましたね。

これでExcelのワークシート内に含まれるふりがなは削除されましたので、Excelhtml形式に変換した時にふりがなは記途されません。

ワークシートの削除と名前の変更

適応対象表はExcelの中にふりがなが存在するので「適応対象表の見出し右クリック」→「削除」で削除します。

Sheet3はデータが存在しないワークシートなので「sheet3の見出し右クリック」→「削除」で削除します。

sheet2はwebで使用するシートなので「sheet2の見出し右クリック」→「名前の変更」で見出しの名前を変更します。

 

次はExcelのデータをhtml形式に変換します。

 

Excel2016の場合

ワークシート内を全選択する。

下の画像のように全セル選択ボタンをクリックします。


すると下の画像のようにワークシート内が全て選択されます。

コピーする

・「ホーム」タブにあるコピーアイコン右横にある」ボタンをクリックし「コピー」をクリックします。

すると下の画像のように全てコピーされます。

 

新しいワークシートを追加する

シートを追加するには下の画像の、エクセル画面の下にある「+」の部分をクリックします。

 

すると新しいワークシート「sheet1」が下の画像のように追加されます。

 

新しいワークシートに数式を貼り付ける

ホーム」タブから「貼り付け」下にある「」をクリックして選択し、貼り付けの中にある「数式」ボタンをクリックします。

 

別の方法として、「ホーム」タブから「貼り付け」下にある「」をクリックして選択し、「形式を指定して貼り付け」をクリックします。

 

するとポップアップウインドウが表示されますので、そのメニューの中にある数式」ボタンをクリックして「OK」ボタンをクリックします。

 

すると下の画像のように数式が貼り付けられます。

これではまだ未完成なので次に書式を貼り付けます。

 

書式を貼り付ける

数式を貼り付けたワークシートにもう一度「ホーム」タブから「貼り付け」の「」をクリックして選択し、その他の貼り付けオプションの中にある「書式設定」ボタンをクリックします。

 

別の方法として、「ホーム」タブから「貼り付け」下にある「」をクリックして選択し、「形式を指定して貼り付け」をクリックします。

 

するとポップアップウインドウが表示されますので、そのメニューの中にある書式」ボタンをクリックして「OK」ボタンをクリックします。

 

すると下の画像のように書式が貼り付けられます。

これでExcelのワークシート内に含まれるふりがなは削除されましたので、Excelhtml形式に変換した時にふりがなは記途されません。

ワークシートの削除と名前の変更

適応対象表はExcelの中にふりがなが存在するので「適応対象表見出し右クリック→「削除」で削除します。


すると下の画像のように「このシートは完全に削除されます。続けますか?」と確認のメッセージが表示されますので「削除」をクリックします。


次にsheet1はwebで使用するシートなので「sheet1見出し右クリック→「名前の変更」で必要に応じて見出しの名前を変更します。


次はExcelのデータをhtml形式にします。

 

全バージョン共通

ワークシート全体を選択します。

ふりがなを削除したいワークシートを選択し

Ctrl+Aを押すとアクティブ セル領域が選択されます。

もう一度Ctrl+Aを押すとワークシート全体が選択されます。

 

コピーする

次に、ワークシートをコピーします。

ショートカットキーのCtrl+Cを押します。

 

新しいワークシートを追加する

選択したシート見出しをマウスの右ボタンでクリックして、[挿入] をクリックします。次に、[標準] タブの [ワークシート] をクリックし、[OK] をクリックします。

※始めから何も入力のないワークシートがある場合は追加の必要はありません)Sheet2などの未入力のワークシートを使います。

数式を貼り付ける

新しいワークシート(セルがA1に選択されている状態)でマウスの右ボタンでクリックして「形式を指定して貼り付け」→「数式」を選択し「OK」を押します。

これで文字データのみコピーされました書式がまだ貼り付けられてませんので今度は、書式を貼り付けます。

書式を貼り付ける

数式を貼り付けたワークシート(セルがA1に選択されている状態)でもう一度、マウスの右ボタンでクリックして「形式を指定して貼り付け」→Excel2003=「書式」Excel2007以降「書式設定」を選択し「OK」を押します。

これで入力したデータと同じように表示されます。

ワークシートの削除と名前の変更
  • 必要のないワークシートは、「見出しを右クリック」→「削除」で削除します。
  • Webに使用するワークシートは「見出しを右クリック」→「名前の変更」で必要に応じて名前を変更します。

 

Excelのふりがなを一括で削除する時のまとめ

1.ふりがなを削除したいワークシート全体をコピーし新しいワークシートに「数式」を貼り付けし、「書式」もしくは「書式設定」のいずれか表示される方を貼り付ける。
2.必要のないワークシート削除し、Webで使用する新しく作成したワークシートは必要に応じて名前の変更をする。

 

2.Excelファイルをhtml形式にして保存する

Excelの機能として従来からあった「webページとして保存」の機能を使用します。

Excel2003の場合

ブラウザでプレビュー

Excel2003ではブラウザでプレビューする機能がありますのでメニューバーの「ファイル」をクリックし「ブラウザでプレビュー」をクリックします。

ブラウザでどのように表示されるのか、プレビュー機能を使用して確認しておきます。この段階で修正がある場合は、修正しておきます。

修正する箇所としては、主にExcelの全体の記事の幅がWordPressの投稿記事幅になるように設定します。

Excelの幅が大きすぎてWordPressの投稿記事に入らない場合は、セルの書式設定などを利用して、Excelの列幅を小さくし全体を表示できるように調整します。

セルの書式設定方法

まず、調整したい列をクリックします。ここではA列を調整しますので「A列」をクリックします。

次にマウスの右ボタンをクリック(右クリック)し、次に「セルの書式設定」をクリックします。

 

すると下の画像のようにダイヤログボックスが表示されますので「配置」のタブから「折り返して全体を表示する」をクリックして「OK」ボタンをクリックします。

その他の方法として、文字を小さくしたり、字体を変更するのも一つの方法です。
Webページとして保存する

いよいよExcelファイルをWebページとして保存します。

メニューバーの「ファイル」をクリックし「Webページとして保存」をクリックします。

すると下の画像のような画面が表示されますので画面右上にあるツールの「」ボタンをクリックし「Webオプション」をクリックします。

すると下の画像のようにWebオプションが表示されますので、「エンコード」タブをクリックし「このドキュメント保存する形式」の「」をクリックし表示されるエンコードの中から「Unicode(UTF-8)」を選択し「OKボタンをクリックします。

次に、①保存先のフォルダを「」から選択します。

ちなみに、私はExcelMyStyleと名前を付けてフォルダを作成し保存しています。

上書き保存を「ブック全体」を選択します。

③ファイル名の拡張子に「~.html

④ファイルの種類を「」から「webページ(*htm *html)」を選択し

⑤「保存をクリックします。

すると保存したフォルダの中に下の画像のようにChromeのアイコンができます。

さぁ❢いよいよWordPressに投稿です。

もう少し頑張って~(*^^*)

Excel2016の場合

WEBページとして保存する

ファイル」タブをクリックします。

 

次に「名前を付けて保存」をクリックし、保存するフォルダを指定します。

 

 

次に、画面下にある「ツール」の「」から「webオプション」を選択します。

すると下の画像のようにWebオプションが表示されますので、「エンコード」タブをクリックし「このドキュメント保存する形式」の「」をクリックし表示されるエンコードの中から「Unicode(UTF-8)を選択し「OKボタンをクリックします。

 

ファイルの種類の「」から「webページ」を選択します。


次に、ファイル名の語尾に拡張子の「.html」を入力し、「ブック全体」を選択し「保存」をクリックします。


すると下の画像のように「Webぺージとして保存する場合、ブックの一部の機能が失われる可能性があります。この形式でブックを保存しますか?」とメッセージが表示されますので「はい」をクリックします。


すると「ファイル名.files」というフォルダとフォルダの下にHTMLファイルができます。


保存した時にフォルダが作成されずにGoogleのアイコンの付いたファイル「ファイル名.html」が1つだけ表示された場合はWordPressの投稿はExcel2003の場合を参照してください。

さぁ❢いよいよWordPressに投稿します。もう少しですよ(*^^*)

WordPressに投稿

Excel2003の場合(Google Chromeのアイコンが表示されたファイルのみの時)

先程できたChromeのアイコン をダブルクリックします。
すると下の画像のようにWebとして表示ができます。


次にこのwebページ上で右クリックし「ページのソースを表示」をクリックします。※ショートカットキーの「Ctrl+U」でもOKです。


すると下の画像のようにソースが表示されます。

上の画像と下のソースでは色は異なりますが全てのソースを下に表示しています。

表示されたソースを「Ctrl+A」で全て選択し、「Ctrl+C」でコピーします。

 

次にWordPressの「ダッシュボード」→「投稿」→「新規追加」の順にクリックします

 

投稿記事のテキストに「Ctrl+V」で貼り付けます。

 

 

これからWordPressでちょっとおまじないをします。

先程「テキスト」モードに貼り付けましたね。これを一旦「ビジュアル」モードにすると不要な文字が表示されます。でも、この不要な部分を今から削除するので大丈夫です。

 

 

それでは、もう一度「テキスト」モードしてください。

すると下のコードのように1行目~12行目が削除され、cssコードが一行にまとめられているのがわかると思います。

これで少しはいらないソースがなくなりましたね。

後2箇所不要なコードがありますので削除します。

 

削除する行としては、下のコードでは

1行目~21行目

27行目~86行目

になります。

必要となるのは、

23行目<style>~25行目</style>までがcssの部分で必要となる部分。

87行目の<table style~334行目の</table>までがhtmlで必要となるコードです。

これでWordPressの投稿を一旦保存し、プレビューしてみてください。

どうでしたか?無事成功しましたか?

Excel2016の場合(フォルダとhtmlのファイルが構成された時)

先程webページとして保存したフォルダの「.files」が付いたフォルダをダブルクリックします。

 

すると次の「filelist」「sheet001」「stylesheet」「tabstrip」という名前のファイルが4つあります。

この中でWordPressに使用するのは「sheet001」と「stylesheet」です。

まずは、「sheet001を右クリックし、表示されたメニーの中から「プログラムから開く」の「」にポンイターを当て「Google Chrome」をクリックします。

するとExcelで作成したファイルがwebで表示されのすので、表示されたwebで右クリックし「フレームのソースを表示」をクリックします。

すると下のようなソースが表示されます。

この時表示されたソースを「Ctrl+A」で全て選択し、「Ctrl+C」でコピーします。

次にWordPressの「ダッシュボード」→「投稿」→「新規追加」をクリックします。

次に「テキストモード」にし投稿記事に「Ctrl+V」で貼り付けします。

次に、一度Excelのフォルダに戻り今度は「stylesheet.css」をタブルクリックします。

すると下記のようなcssコードがメモ帳で開きます。開いたファイルを「Ctrl+A」で全て選択し先程WordPressの投稿記事に貼り付けた画面に戻ります。

WordPressに貼り付ける場所としては、下の画像のように –> の直前になりますので「display:none;}」の後で改行し空白行を追加した後、ショートカットキーの「Ctrl+V」で貼り付けます。

 

次にWordPressの投稿記事を一旦「ビジュアル」モードにします。

 

次に「テキストモードにして先程表示されてた不要な部分を削除します。

</style>~<table までがWordPressでは不要な部分になります。

これでWordPressの投稿を一旦保存し、プレビューしてみてください。

どうでしたか?無事成功しましたか?

 

WordPreesに投稿する時のまとめ

<style>~</style>=css ※フォルダで作成されたら–>の直前にcssを貼り付ける 

<table>~</table>=Excelで作った表のhtml   と覚えておくと良いでしょう。

 

長くなりましたので、OneDriveで表示する方法は次回にさせて頂きます。ご了承くださいm(_ _)m

にほんブログ村 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の内容を説明します。