Fragmentシネマグラフってずっと見ていられるような不思議感覚ありますよね。個人的には結構好きなシネマグラフ。この記事では、動画のつなぎ目を無くすちょっとしたテクニックなどをふまえ、windows環境下でのPhotoshopCCを使用したシネマグラフの作り方を説明しております。(当リンクは著者のブログへのリンクとなります。)おはこんばんちわ、エヌと申します。今回の記事では「nemlogで使えるシャレオツなブログカード」を紹介していきたいと思います。この記事をご覧になって頂いている皆様にも使えるよう、nemlog用にHTMLのみでカスタマイズしたブログカードコードです。どなたでも、nemlogユーザーの皆様は下記のコードをコピペしてちょこっと編集をして頂ければ、あっという間にシンプルシャレオツなデザインブログカードをご使用いただけます。本来であれば、ブログやサイトのデザイン装飾はCSSでおこなうものですが、nemlogのようなプラットフォーム上で装飾を施したい場合、おもにHTMLに装飾の指定をしてあげることである程度の思うままのデザイン装飾が可能となります。読み手の印象や感動、読みやすさを大事にしたUXをnemlogの記事でも取り入れて頂き、HTMLだけでも記事をデザインできる「楽しさ」を共有できれば幸いです。#666666;">ここにリンク先の説明文。説明文はすこし長いくらいのほうが見た目のバランスとりやすいと思います。150文字程度のディスクリプションを考えてみましょう。#666666;">ここにリンク先の説明文。説明文はすこし長いくらいのほうが見た目のバランスとりやすいと思います。150文字程度のディスクリプションを考えてみましょう。上記のコードをまるっとコピーして、下記の画像を参照してnemlog記事本文エディタ内のアイコンが【<>】のソースコードを開いてペーストしましょう。次に、上記の太文字部分をそれぞれ任意の内容に変更しましょう。表示させる画像のURLの取得方法は、nemlogで一度「画像の挿入」をおこない、その画像のURLを上記のソースコード(src=""の部分)から拾うことができます。ご自身のページなどをお持ちの場合は、直リンクで表示させることも可能です。(うえのブログカードの画像は僕のサイトからの直リンクです。ブログカードの装飾の変更ですが、背景の色は黄緑部分のカラーコードを、タイトルの文字色は紫部分のカラーコードを編集しましょう。カラーコード」などと調べてみつけてくださいね。]・画像の幅は100%として指定しています。nemlogのPC時記事の幅は856px、うえのブログカードデザインの外側ブロック要素のpaddingが20pxとってますので、画像の表示幅は816pxとなります。816px以下の幅の画像を配置した場合は拡大により劣化して見えますのでご注意ください。(縦の指定はございません。)・フォントは私の好みの問題で『游ゴシック』を優先表示とした設定をして記事全体にしております。sans-serif;」ですので、お好みによって設定を変更してください。600px)"などのメディアクエリを追加して制御することが広く一般的ですが、実はHTMLだけでも画像であればレスポンシブに対応させることが可能です。下記のブログカードをご覧ください。Fragmentシネマグラフってずっと見ていられるような不思議感覚ありますよね。個人的には結構好きなシネマグラフ。この記事では、動画のつなぎ目を無くすちょっとしたテクニックなどをふまえ、windows環境下でのPhotoshopCCを使用したシネマグラフの作り方を説明しております。(当リンクは著者のブログへのリンクとなります。)上記のブログカードはPCのデスクトップ(厳密には画面幅1000px以上の場合)では、左側に正方形のキャッチ画像が表示される横長タイプのブログカードが見えているかと思いますが、スマホで見ると当記事の始めに表示してあるブログカードと同じデザインが表示されております。(スマホでも当記事を開いて見比べてみてください。)スマホのブラウザのみからご覧になっていただいている方用に、実際にPCで見た場合にうえのブログカードがどう見えているかを画像として下記に用意しました。PC上で見た場合はこう見えてます。このように、画面のサイズ(px幅)によって画像やレイアウトを可変させながら表示させることをレスポンシブと言います。前述したように一般的にはCSSでメディアクエリを指定して作りますが、HTML5.1以降からはHTMLのみでの画像のレスポンシブ対応が可能となるpicture要素が追加されました。それでは、実際にHTML5.1によるpicture要素で画像をレスポンシブ対応させたコードを説明していきます。#666666;">リンク先の説明文をここに。#666666;">リンク先の説明文をここに。使い方は前述したものと同様に、nemlog記事本文内のソースコードにコピペしてご使用ください。上記コードの太字の部分がpicture要素のhtmlです。srcset属性に指定した画像を、media属性によって表示を分岐させております。上記ブログカードの設定では1000px以上の場合には小さい正方形の画像を使用するように、それ以下の場合は横長の画像を表示するように、それぞれの画面サイズで表示させる「異なる2枚の画像を用意」して割り振っております。今回使用した画像は同じ画像をトリミングして2枚の異なる画像としておりますが、例えばGIFなどの動きのある画像と静止画など、全く別な画像をPCとモバイルで分岐表示させることも可能です。600px』などの設定にしてPCとタブレットとモバイルで画像を分岐表示させることも可能です。このようなHTML5.1上における特定条件下で、デバイスごとに異なる画像を可変的に表示させる方法を「アートディレクション」と言うそうです。言葉がかっこいい(笑)この画像レスポンシブ用のブログカードデザインコードは、当記事の最初に紹介したコードと微妙に違っております。横長のブログカードデザイン用に、画像と文字を別々にaタグのインラインブロック要素としてmarginとpaddingで調整しておりますので、文字の長さに応じて一番外側の枠の大きさが決まるような設計となっておりますのでご注意ください。URLをそれぞれに割り振らなきゃいけないめんどくささはあるかもですが、上記応用のようにアートディレクションにて表示させたい場合はこちらのコードをコピーしてご使用ください。]こちらの記事で使ってる見出しのHTMLです。カラーコードはNEMの3色を使ってます。(#ECA328、#31B1A4、#69A8D4のいずれかを使用しています。]投げNEMオネシャス!HTMLのみで作られた、記事のところどころに投げNEMを促すことのできる画期的な乞食ボタン。投げNEMのリンクはnemlogの「アカウント」から「ウィジェット作成」の「投げnemボックス」にあるコードの中の「src=」にある「https://nemlog.nem.social/iframe/xxxxx/f7a800ffffff」というアドレスをコピペしてください。本来のボタンのように押したらポップアップ?で別ウィンドウを開きたいのですが、本家はJavaScriptを使用しているのでHTMLのみでのやり方がわからず。分かる方がいらっしゃいましたらご教示頂ければ幸いです。上記のボタンでは記事内に配置してもその記事への投げnemというカウントではなく、プロフィールから投げられたカウントとなりますのでご注意ください。]投げNEMウィンドウ用に作ったデザインブログパーツです。画像は右クリックで保存してどうぞご自由にご利用くださいね。こちらも、nemlogの「アカウント」から「ウィジェット作成」の「投げnemボタン」でコードを取得できるよう、管理者のしゅうさんが作ってくれております。こちらはnemlog内では機能しませんので、外部サイトに投げnemボタンを設置する場合などにご利用ください。一応、下記に外部サイトで使用できるコードを載せておきますので、リンクアドレスをご自身の投げNEMのリンクに変えてご使用ください。width="400px"></a>まとめというか...こんなにもクソ長い記事をご覧になっていただき、ありがとうございました。紹介したブログカードや素材うんぬんをChromeの拡張機能などに登録して、nemlog内で呼び出せたらなぁとかも思うのですが、ワシにはそんな高等技術は無いためアナログでのコード提供です。デザインを意識した作りを案内しておきながら恐縮なのですが、mac環境での見え方チェックをおこなっておりませんので、もし崩れていたら教えてくださると助かりますです。HTMLのみでの装飾は普段あまりしないこともあり、当記事内の説明に不十分なところ、間違っているところなど沢山あるかと思います。間違いなどをご指摘いただければお礼nemを差し上げますので、お気軽に「クソコード乙」とコメントくださいね。上記のブログカードの色や画像を変えて、見た目に変化をつけたものを数種類置いておきますのでご参照ください。"Harvestale""Harvestale"とは、収穫のharvestと物語のTaleを掛け合わせたもの。日常におこる物語の中で自分なりの幸せを収穫してきた。不安で慌ただしい日常。その中で僕らが紡ぎだしてきた様々な実り。君の物語が"harvestale"と共に暖かな実りとなるよう、祈りをこめて。さんが主軸となって発信していたことでTwitterでは話題となりました。Fragment当nemlog記事の内容を、個人的なサイトのFragmentにも掲載しました。当記事より深くHTML5.1に触れたうえで、より丁寧に説明しているつもりです。こちらのサイト内の記事も、是非ご覧になってご理解を深めて頂ければ幸いです。00:20:45ID:96583>>しゅう:nemlog作ったモヒカン::さんうおぉ!??マジすかw光栄すぎて漏れそう。22:41:41ID:96455nemgraphはエヌさんと作りたいですね。articleエヌコミュ障。2今日のスコア順でアクティブユーザー400人のプロフィールリンクを作ってみた。8NEMberよ、創造は自由だ。