ExcelをWordPressなどのwebページに表示させる方法5選

WordPressやブログに表示させる方法

 

OneDrive経由で表示する

埋め込みコードを使って表示したデータは下のようにOneDrive経由で表示例

                                                 ↓ ↓ ↓

OneDriveは携帯電話、タブレット、コンピューターを使えばどのデバイスからでもアクセスでき更新もできるのでとても便利です。

OneDriveはWordPressだけではなくhtml形式で記入できるblogなどのWeb Pageであれば表示可能です。

OneDriveの登録がない方は、OneDriveを無料で新規登録しましょう。

OneDriveにアクセスして「OneDriveに移動」します。

 

OneDriveにファイルをアップロードする

PCなどの各デバイスからアップロードする。

OneDriveからご自分がアップロードしたいフォルダをクリックして開きます。ここでは「ドキュメント」をクリックします。

 

 

次に、OneDriveからExcelのファイルをアップロードします。

画面上部にある「アップロード」をクリックし「ファイル」を選択します。

 

次にご自身がPCなどに保存している「フォルダ」から「ファイル」をクリックし表示されてる画面右下にある「開く」ボタンをクリックします。

その他にも下記の通りOneDriveにアップロードしたり、保存する方法もあります。1.Excelを保存する時にExcelの「名前を付けて保存する」の画面からOneDriveに直接保存する。

2.お使いのデバイスにOneDriveアプリがある場合は直接OneDriveに保存する。

3.お使いのデバイスからOneDriveにドラッグする。

 

OneDriveから埋め込みコードを取得する

次にアップロードしたファイル右上にある「をクリック」すると◯の部分にチェックマークが入りますのでその後「</>埋め込み」をクリックします。

すると、下画像のように緑点線内に埋め込みを生成する画面が表示されますので「生成」ボタンをクリックします。

 

次に、埋め込み生成されたコードをクリックすると下画面のようにコードの背景色が青色に変わります。青色に変わったのを確認し、ショートコードの「Ctrl+C」を使ってコピーするか、埋め込みコードが書かれているところで右クリックし、表示されたメニューの中からコピーをクリックします。

 

WordPressやblogに埋め込みコードを貼り付ける

さぁ❢いよいよWordPressやblogに埋め込みコードを貼り付けます

WordPressの場合

新規で作成するなら「ダッシュボード」→「投稿」→「新規」

現在投稿及び編集しているページに追加する場合は「ダッシュボード」→投稿→「投稿一覧」の中から編集したいページの「編集」をクリックし投稿したいページを表示します。

WordPress投稿画面右上にある「テキスト」をクリックし「Ctrl+C」で貼り付けます。

高さを調整したい時は、 width=”500″ height=”400″ の数値の部分を好みの大きさになるように変更します。

 

 

blogなどのwebページの場合

投稿画面の「テキスト」や「html」のタブをクリックして埋め込みコードを貼り付ければOKです。←htmlが記入できるところ❢と覚えておくと良いでしょう。

OneDrive経由で表示する時のまとめ

1.OneDriveに表示したいファイルをアップロードするか保存する。

2.表示したいファイルの右上にある◯をクリックしチェックをONにする。

3.OneDrive上部にあるメニューバーから「</>埋め込み」をクリックし、「生成」ボタンをクリックし、コードをコピーする。

4.ブログやWebページのhtml形式ノページに貼り付ける。

 

どうでしたか?無事表示できましたか?

サーバーにアップロードする方法

 

今回は、Excelをhtml形式で保存したファイルを「ドメイン名/関数一覧表.html」というアドレスにアクセスしてExcelを表示させる方法をご紹介します。

2018/5/22追記します。
Search Console モバイルフレンドリーテストでこのページはモバイル フレンドリーではありませんと怒られてしまったので、ファイルの横幅を短くし修正したものに変更しましたので現在のアドレスは「ドメイン名/excel1.html」になっています。

 

実際の表示例

↓ ↓

 ←画像にリンクして表示 したり、

関数一覧表 ←文字にリンクをして表示ができます。

※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の2.Excelファイルをhtml形式にして保存するで説明していますのでご覧になってください。

それでき、まず・・・

Xサーバーのログインからファイルマネジャーをクリックします。

次にユーザー名とパスワードを入力しログインをクリックします。

するとドメインを登録しているファイルが一覧で表示されますので、アップロードするドメインのファイルをクリックします。

するとxsever WebFTP というページが開き、ドメインをとったファイル名が表示されます。

 

 

すると下の画像のようにファイルの中にpubric.htmlというファイルがあります。

これがWordPressがインストールされているファイルになりますので「pubric.html」をクリックします。

 

次に表示された画面の右上にパス名が「ドメイン名pubric_html」となっているのが確認できると思います。

次にファイル選択をクリックします。

 

すると一覧で表示されるのでアップロードするファイルをクリッします。

今回アップロードするのは「関数一覧表」ですので

「 関数一覧表.html」をクリックします。

 

すると下の画像のようにファイルを選択の横に関数一覧.htmlと表示されているのが分かると思います。

次に、このファイルを保存した時文字コードを「UTF-8」で保存していますので文字コードを「UTF-8」にします。その後「アップロード」のボタンをクリックします。

これでサーバーにアップロードが完了できました。

後は、WordPressなどの投稿記事に画像や文字を入力しリンクを「ドメイン名/ファイル名」に設定すればOKです。

 

もし、下の画像のようにExcelをwebページとして保存した時にfilesのフォルダーとhtmlのファイルが同時にできた場合は、xサーバーのpubric_htmlの中に(pubric_htmlを開いた状態で)

1.「Excelデータベース関数・・・・files」の名前のファルダを作ります。

2.作ったfileフォルダの中にpcなどのデバイスからフォルダの中身を全てアップロードします。

3.htmlファイルは、pubric_htmlを開いた状態でアップロードします。

4.関連付けるリンクは「ドメイン名.com/Excel・・・・.html」ファイル名にします。

参考例・・・私のドメインはhttps://暮らしのハンドノート.comですので、下の画像をそままアップロードした場合は、「https://暮らしのハンドノート.com/Excelデータベース関数バージョン適用対象表.html」となりこれをリンク先に設定します。

 

補足:Excelを「.xls」や「.xlsx」のファイル形式のままアップロードするには、XサーバーでMINE設定をする必要があります。

Windows Server 2003 Service Pack 2 (SP2) 以降のバージョンでは自動的に登録されますがXサーバーはLinuxの為xサーバーのMINE設定が必要になります。

MIne設定をすることによりサーバー側で新しいファイル形式が認識されるようになります。

MINE設定とは、インターネットで使用される拡張子とファイルの種類を関連づけるもので、サーバーとファイルを関連付ける役目を果たします。

MINEタイプを設定する場合はご参考に❢

↓  ↓  ↓

MINEタイプ 拡張子 アプリケーション
application/msword .doc Microsoft Word2003以前
application/vnd.ms-excel .xls Microsoft Excel2003以前
application/vnd.ms-powerpoint .ppt Microsoft Powerpoint2003以前
application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx Microsoft Word2007以降
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx Microsoft Excel2007以降
application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx Microsoft Powerpoint2007以降

 

WordPressの投稿記事に表示させる方法

WordPressのメディアにアップロードする方法

表示方法は、サーバーにアップロードした時と同じになりますが、これはかなり簡単です。

出来上がりの表示はこんな感じです。

↓ ↓ ↓

 ←エクセルの画像をupし画像にリンク先を設定しています

データベース関数適応対象表 ←文字を入力しリンク先を設定しています。

 

まず、wordPressの「ダッシュボード」→「メディア」→「新規追加」の順にクリックすると「ドロップするかファイルを選択する」ようになってますので今回は複数のファイルをまとめてアップロードしたいので、「ドロップ」します。

アップロードするファイルは、filesのフォルダの中の3つのファイルと

 アイコンの付いたhtmlファイル1つです。

まずフォルダをダブルクリックして、開きます。

すると下のようなファイルがありますので「.xml」以外のファイルを全て選択し、WordPressにアップロードします。

次に アイコンが付いたhtmlのファイルもアップロードします。

これで必要なファイルはアップロードできましたので

WordPressのダッシュボードに戻り「メディアファイル」→「ライブラリ」の順にクリックすると最後にアップロードした  アイコンのファイルが変わり<>表示されていますので「編集」をクリックします。

すると、アップロードしたファィルのURLが下の画像のように表示されますので、このURLをコピーし投稿記事のリンク先に設定します。

 

どうでしたか?案外簡単でしょ(*^^*)

 

WordPressの1記事にcssを適応させ記途する方法2選

投稿記事のみに全てのソースコードをコピペして投稿する

この記事を使った場合は下の表のようになりますがCSSを<style>~</style>で囲ってhtmlの中に入力しているので、どうやら非推進のようです。
↓↓↓

関数名 Windows版 Mac版 Online iPad iPhone Android Mobile Starter 2010
2016 2013 2010 2007 2003 2016 2011
DAVERAGE
DCOUNT
DCOUNTA
DGET
DMAX
DMIN
DPRODUCT
DSTDEV
DSTDEVP
DSUM
DVAR
DVARP
GETPIVOTDATA

この表示方法は前回投稿していますのでご覧になってください。

↓ ↓ ↓

 

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


WordPressのカスタムフィールドを使用し投稿する方法

以前プラグインのSimple Custom CSSを使用していて、cssの反映が上手くできなかったこともあり、Excelのcssを反映させるたびに追加cssなどを使っても・・と思い個別にcssが設定できないか検索してたところNaifixさんの「WordPressで記事ごとに個別のCSSを設定する方法3選」という記事に出会いました。

その記事の中からプラグインを使わずカスタムフィールドを利用する方法をそのまま使わさせて頂きました。Naifixさんありがとうございます\(^o^)/

header.php に追記する

header.php に書かれている <head> ~ </head> に以下のコードを追記します。

コードの意味は、「記事ページであれば article_css という名前のカスタムフィールドに書かれた値を出力しますよ」というものだそうです。

2021.1.23追記します。
header.phpの上記コードに修正点がありました。
コードは以下のコードを参照してください。

詳しくはこちらで説明しています
↓     ↓

WordPressで「Warning: Use of undefined constant article_css – assumed ‘article_css’」と表示された際の対処方法

カスタムフィールドを表示する

WordPressの「投稿」画面上に表示されている「表示オプション」をクリックし、「カスタムフィールド」にチェックをいれます。

すると投稿画面下にカスタムフィールドが使用できるようになっていますので「新規追加」をクリックします。

次に名前の欄に「article_css」と入力し、値の欄にCSSを入力する準備ができましたので次はCSSをこの値の欄に入れる為の準備をします。

※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の2.Excelファイルをhtml形式にして保存するで説明していますのでご覧になってください。

 

cssとhtmlの整理をする

まず、webページしとて保存したfilesフォルダを開くと4つのファイルができています。今から使うのは「sheet001.html」と「stylesheet.css」のファイルです。

sheet001.html』のファイルをダブルクリックで開くとwebページが開きますのでwebページ上で「右クリック」し、「フレームのソースを表示」をクリックします。

下の画像のようにこのフレームのソースが表示されますのでショートカットキーの「Ctrl+A」で全て選択し「Ctrl+C」でコピーします。

このソースをWordPressの画面に戻り投稿記事の「テキスト」に全て貼り付けます。

※TeraPadやメモ帳などに貼り付けて必要なソースだけをWordPressに貼り付けてもいいでしょう。

次に、少し下の方にいくと、</style>があります。その直前に「-->」がありましたらこの前にカーソルをあわせて不足しているCSSのコードを貼れる準備をします。

</style>はCSSコードの終わを示します。

 

次に、filesフォルダの中にある「stylesheet.css」のファイルをダブルクリックで開きます。

するとメモ帳などで開かれますので、これもショートカットキーの「Ctrl+A」で全て選択し「Ctrl+C」でコピーします。

次にWordPressの投稿画面に戻り下画面の位置「-->」の直前にカーソルをあわせた状態でCSSをショートコードの「Ctrl+V」で貼り付けます。

 

Excelのcssをカスタムフィールドにコピペする

CSSとして必要なのは<style>~</style>の間です。

先程wordpressの投稿記事に貼り付けた中からこの部分を切り取りカスタムフィールドに貼り付けます。

現在wordpressの投稿記事にあるのは下記コードですね。

CSSとして必要なのは、このコードの中で14~274行目になります。

では、必要なコードをコピーし、切り取りしカスタムフィールドに貼り付けしてみましょう。

スカタムフィードに貼り付けるのは上記コードの中から<table~</table>までのコードなので、下記コードですね。

カスタムフィールドの「」の欄に貼り付けが終わりましたら、「カスタムフィールドを追加ボタンをクリックします。

これでCSSの入力は完了です。

WordPressの投稿記事に残っているコード内で不要なコードを削除する

それでは不要なコードを削除していきましょう。

Excelの表を記載するので、htmlとして必要なのは、基本的に<table>~</table>までなのですが、その中でも不要なコードがあります。

から始まっているコードで「サポートされていない場合は次の処理をしなさい!という条件式」です。

調べてみたところJavaScriptを使用したdisplayのコードでhtmlには不要なコードなので下記条件式のコードは削除します。

次に不要なコードは、一番上の

から始まり

で終わる間までの下記コードですので、このコードも削除します。

残りは、一番最後の</body>と</html>ですのでこのコードも削除します。

※<html と<body で始まるソースは削除してますので終わりの</html></body>不用です。

後残ったコードは<table ~</table>までの下記コードですね。

 

すると下表のように表示されます。

↓ ↓ ↓

関数名 Windows版 Mac版 Online iPad iPhone Android Mobile Starter 2010
2016 2013 2010 2007 2003 2016 2011
DAVERAGE
DCOUNT
DCOUNTA
DGET
DMAX
DMIN
DPRODUCT
DSTDEV
DSTDEVP
DSUM
DVAR
DVARP
GETPIVOTDATA

どうでしたか?カスタムフィールドからCSSが設定できれば、個別に記事のスカタマイズもできるので便利ですね。

この記事が参考になったという方はポチッと応援お願いします。

↓   ↓

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

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に表示した方法を2通り説明したいと思います!!

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

WPにhtmlで文字に蛍光ペンみたいなマーカーを引く方法

WordPressの標準機能ではない蛍光ペンみたいなマーカーを投稿記事のhtmlに記途するだけで引けますので色々試してみてくださいね。

太さを変えたいときは%を変更して、色はhtmlでお好きな色に変更してみてください。

線の太さ3種類と色は9色用意してみました!

マーカーの高さを変えたパターン

文字全部にピンクのマーカー

 

上半分薄くなったピンクのマーカー

 

文字半分にピンクのマーカー

 

文字の下にピンクのマーカー

マーカーの色を変えたパターン

赤のマーカー

 

紫のマーカー

 

水色のマーカー

 

青のマーカー

 

黄色のマーカー

 

オレンジのマーカー

 

緑のマーカー

 

茶のマーカー

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で指定します。