HTMLだけで作るオシャレなブログカード

Photoshop講座 ~ シネマグラフの作り方 ~ | Fragment
シネマグラフってずっと見ていられるような不思議感覚ありますよね。個人的には結構好きなシネマグラフ。この記事では、動画のつなぎ目を無くすちょっとしたテクニックなどをふまえ、windows環境下でのPhotoshopCCを使用したシネマグラフの作り方を説明しております。(当リンクは著者のブログへのリンクとなります。)

 

今回の記事ではスタイルシートやfunctions.phpやJavaScriptを使用せずにHTMLのCSS記述のみで使えるオシャレなブログカードを紹介していきたいと思います。おそらくHTML記述のできるWordpress以外のブログプラットフォームでもカスタマイズのできるブログカードとなります。どなた様でも下記コードをコピーしてちょこっと編集をして頂ければ、あっという間にシンプルシャレオツなデザインブログカードをご使用いただけます。

本来であれば、ブログやサイトのデザイン装飾は外部.CSSにコードを記述しておこなうものですが、外部のスタイルシートを直接編集することができないプラットフォーム上でこのような装飾を施したい場合、おもにHTMLに装飾の指定をしてあげることである程度の思うままのデザイン装飾が可能となります。

是非、wordpress以外のどのブログプラットフォーム上でも、読み手の印象や感動、読みやすさを大事にしたUXを取り入れて頂き、HTMLだけでも記事をデザインできる「楽しさ」を共有できれば幸いです。

全体的な注意点として

当記事ではHTMLのみでのCSS装飾されたデザインプログカードを紹介しております。functions.phpやjsなどの動的に動くスクリプトを一切使用しておりませんので、コード内のリンク部分(href)や画像の選択など、全て自由にカスタマイズできる事が強みでもある反面、手間のかかるデメリットでもあります。

ご理解を頂いたうえで当記事をご覧になって頂けますと幸いです。

 

 


ブログカードコードサンプル

 

<div style="width: 100%; border: 1.5px solid #E0E0E0; border-radius: 5px; padding: 20px 20px 20px 20px; line-height: 1.5em; text-align: Justify; background: #F5F5F5;">
<p style="float: left; margin: 0 0 20px 0;"><a style="display: block; text-decoration: none;" href="#" target="_blank" rel="noopener"><img style="border-radius: 5px; width: 856px;" src="#" /></a></p>
<a style="display: block; text-decoration: none;" href="#" target="_blank" rel="noopener"> <span style="font-size: 1.2em; font-weight: 600; color: #b36b8b;">*タイトル*</span></a>
<span style="font-size: 0.9em; color: #666666;">*説明文*</span></div>

 

hrefやsrcなどの”#”の部分には対応するURLをご入力ください。

画像の幅は100%として指定しているため、小さい画像は横いっぱいに拡大表示されます。例えば、当サイトのPC時記事の幅は900px、うえのブログカードデザインの外側ブロック要素のpaddingが20pxとってますので、画像の表示幅は860pxとなります。860px以下の幅の画像を配置した場合は拡大により劣化して見えることとなります。それぞれの環境ごとに画面幅は異なりますが、画像の拡大は劣化して(ボヤけて)見えますのでご注意ください。(縦の指定はありませんので、画像によって成り行きのサイズとなります。)

また、当サイトのフォントは私の好みの問題で”Noto Sans JP”と”Lato”を優先表示とした設定をしております。お好みによって設定を変更してください。

 

 


応用編:HTMLのみでレスポンシブに対応させる

 

通常、レスポンシブに対応するサイトやページを作る場合は、CSSに”@media screen and (max-width: 600px)”などのメディアクエリを追加して制御することが広く一般的ですが、実はHTMLだけでも画像であればレスポンシブに対応させることが可能です。
それでは、まず下記のブログカードをご覧ください。

 

 

上記のブログカードはPCのデスクトップ(厳密には画面幅1000px以上の場合)では、左側に正方形のキャッチ画像が表示される横長タイプのブログカードが見えているかと思いますが、スマホで見ると当記事の始めに表示してあるブログカードと同じデザインが表示されております。(スマホでも当記事を開いて見比べてみてください。)

 

こちらのQRを読み込んで
スマホからアクセスしてみてください。

 

 

また、PC環境でご覧になれない方用に、実際にPCで見た場合にうえのブログカードがどう見えているかを画像として下記に用意しました。

 

▼ 上の画像はPC上で見た場合はこのように見えてます。

 

このように、画面のサイズ(px幅)によって画像やレイアウトを可変させながら表示させることをレスポンシブと言います。前述したように一般的にはCSSでメディアクエリを指定して作りますが、HTML5.1以降からはHTMLのみでの画像のレスポンシブ対応が可能となるpicture要素が追加されました。

 

 


HTML5.1 picture要素とは?

 

HTML 5.1にて実装されているpicture要素を使うことによって、CSSメディアクエリを使って画像を出し分けることが可能です。また、source要素は複数指定できます。例えば、画面幅が600px以下、1000px以下、それ以外でそれぞれ画像を出し分けるコード例は次のようなコードになります。

 

<picture>
 <source media="(max-width: 600px)" srcset="a.png">
 <source media="(max-width: 1000px)" srcset="b.png">
 <source srcset="etc.png">
 <img src="etc.png" alt="">
</picture>

この場合は下記のように動きます。

・画面幅が600px以下のモバイル画面の場合は「a.png」という画像が表示されます。
・画面幅が1000px以下のタブレット画面の場合は「b.png」という画像が表示されます。
・それ以外の場合、つまり画面幅が1000pxより上のPC画面では「etc.png」という画像が表示されます。

このように、スタイルシートに”@media screen and (max-width: 600px)”などのメディアクエリを追加して条件分岐をしなくても、picture要素を使用して画像をモバイル用、タブレット用、PC用などレスポンシブに対応させることが可能となります。

 

 


レスポンシブ対応のブログカードデザインコード

 

それでは、実際にHTML5.1によるpicture要素で画像をレスポンシブ対応させたコードを説明していきます。HTMLに無理やりCSS記述を施してデザインしてあるブログカードですので、コードが長く「めんどくさい感じ」ですがご了承くださいませ。

 

<div style="width: 100%; border: 1.5px solid #E0E0E0; border-radius: 5px; line-height: 1.5em; text-align: Justify; background: #F5F5F5;">
<p style="float: left; margin: 20px 20px 20px 20px;"><a style="display: block; text-decoration: none;" href="#" target="_blank" rel="noopener"><picture><source style="border-radius: 5px;" srcset="#" media="(min-width: 1000px)" /><img style="border-radius: 5px; width: 100%;" src="#" alt="fragment.love" /></picture></a></p>
<a style="display: block; text-decoration: none; padding: 0 20px 5px 20px;" href="#" target="_blank" rel="noopener"><span style="font-size: 1.2em; font-weight: 600; color: #b36b8b;">*タイトル*</span></a><a href="#" style="display: block; text-decoration: none; font-size: 0.8em; color: #c0c0c0; padding: 0 0 0 20px;">*URL*</a><a style="display: block; text-decoration: none; padding: 20px 20px 20px 20px;" href="#" target="_blank" rel="noopener"><span style="font-size: 0.9em; color: #666666;">*説明文*</span></a></div>

 

hrefやsrcなどの”#”の部分には対応するURLをご入力ください。

srcset属性に指定した画像を、media属性によって表示を分岐させております。上記ブログカードの設定では1000px以上の場合には小さい正方形の画像を使用するように、それ以下の場合は横長の画像を表示するように、それぞれの画面サイズで表示させる「異なる2枚の画像を用意」して割り振っております。

今回使用した画像は静止画をトリミングして2枚の異なる画像としておりますが、例えばGIFなどの動きのある画像と静止画など、全く別な画像をPCとモバイルで分岐表示させることも可能です。また、分岐の種類も『min-width: 1000px』『min-width: 600px』などの設定することで、PC用、タブレット用、モバイル用と画像を分岐表示させることも可能です。

こちらのレスポンシブ用ブログカードデザインコードは、当記事の最初に紹介したコードとCSSの調整が微妙に違っております。横長のブログカードデザイン用に、画像と文字を別々にaタグのインラインブロック要素としてmarginとpaddingで調整しておりますので、文字の長さに応じて一番外側の枠の大きさが決まるような設計とります。ご使用の際にはご注意ください。

 

 


まとめ

 

このようなHTML5.1上における特定条件下で、デバイスごとに異なる画像を可変的に表示させる方法を「アートディレクション」と言うそうです。

このようなアートディレクションでのレスポンシブ対応は、画像リソースを複数記述してもその表示される条件と適合した画像1枚だけが読み込まれる仕様となるため、sourceタグとimgタグで指定したほかの画像を余計に読み込ませることもなく、パフォーマンスの向上にも期待ができるでしょう。

また、picture要素の対応状況(2019年4月現在)は、9割以上の現行ブラウザで対応しており、環境によって動作しないなどの心配の必要もありません。IEだけ11のみの対応となるようですが、皆さんWindows10への移行もすでに完了しているかと思いますので、特にIE用に措置を考える必要も無いでしょう。(万が一、picture要素が読み込まれなくてもimg要素が読み込まれます。)

 

 

以上、picture要素を使用することにより自由にレスポンシブに画像を表示できる事をお分かり頂けたかと思います。アートディレクションのような別画像への切り替えは、以前からレスポンシブサイトではよく使われている手法だったので、JavaScriptを書かずにHTMLだけで記述できるのはとても便利です。

今回はブログカードのデザインとして紹介しましたが、アートディレクションはその他の色々な場面でも使用できる画期的なHTMLの新要素です。