connecting...
Google translation for articles :
16 NEMBER donated to you!!

nemlogで誰でも使えるシャレオツなブログカード(とおまけデザイン)

nem428xem (16) 854 23 12

 

 

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

 

 

 

おはこんばんちわ、エヌと申します。今回の記事では「nemlogで使えるシャレオツなブログカード」を紹介していきたいと思います。この記事をご覧になって頂いている皆様にも使えるよう、nemlog用にHTMLのみでカスタマイズしたブログカードコードです。どなたでも、nemlogユーザーの皆様は下記のコードをコピペしてちょこっと編集をして頂ければ、あっという間にシンプルシャレオツなデザインブログカードをご使用いただけます。

 

本来であれば、ブログやサイトのデザイン装飾はCSSでおこなうものですが、nemlogのようなプラットフォーム上で装飾を施したい場合、おもにHTMLに装飾の指定をしてあげることである程度の思うままのデザイン装飾が可能となります。

 

是非、読み手の印象や感動、読みやすさを大事にしたUXをnemlogの記事でも取り入れて頂き、HTMLだけでも記事をデザインできる「楽しさ」を共有できれば幸いです。

 

 

 

コードサンプル

 

<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="ここにリンク先のURL(画像部分)" target="_blank" rel="noopener"><img style="border-radius: 5px; width: 856px;" src="表示させる画像のURL" /></a></p><a style="display: block; text-decoration: none;" href="ここにもリンク先のURL(タイトル部分)" target="_blank" rel="noopener"><span style=" font-size: 1.2em; font-weight: 600; color: #b36b8b;">タイトルはここです</span></a><br /><span style="font-size: 0.9em; color: #666666;">ここにリンク先の説明文。説明文はすこし長いくらいのほうが見た目のバランスとりやすいと思います。150文字程度のディスクリプションを考えてみましょう。</span></div>
 
<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="ここにリンク先のURL(画像部分)" target="_blank" rel="noopener"><img style="border-radius: 5px; width: 100%;" src="表示させる画像のURL" /></a></p><a style="display: block; text-decoration: none;" href="ここにもリンク先のURL(タイトル部分)" target="_blank" rel="noopener"><span style=" font-size: 1.2em; font-weight: 600; color: #b36b8b;">タイトルはここです</span></a><br /><span style="font-size: 0.9em; color: #666666;">ここにリンク先の説明文。説明文はすこし長いくらいのほうが見た目のバランスとりやすいと思います。150文字程度のディスクリプションを考えてみましょう。</span></div>

 

 

 

使い方の説明

 

 

[ 使い方 ]

 

1). まず上記のコードをまるっとコピーして、下記の画像を参照してnemlog記事本文エディタ内のアイコンが【<>】のソースコードを開いてペーストしましょう。

 

 

 

2). 次に、上記の太文字部分をそれぞれ任意の内容に変更しましょう。表示させる画像のURLの取得方法は、nemlogで一度「画像の挿入」をおこない、その画像のURLを上記のソースコード(src=""の部分)から拾うことができます。また、ご自身のページなどをお持ちの場合は、直リンクで表示させることも可能です。(うえのブログカードの画像は僕のサイトからの直リンクです。)

 

 

 

 

 

3). ブログカードの装飾の変更ですが、背景の色は黄緑部分のカラーコードを、タイトルの文字色は紫部分のカラーコードを編集しましょう。お好きな色はGoogleで「html カラーコード」などと調べてみつけてくださいね。

 

 

[ 注意書き ]

 

・画像の幅は100%として指定しています。nemlogのPC時記事の幅は856px、うえのブログカードデザインの外側ブロック要素のpaddingが20pxとってますので、画像の表示幅は816pxとなります。816px以下の幅の画像を配置した場合は拡大により劣化して見えますのでご注意ください。(縦の指定はございません。)

 

フォントは私の好みの問題で『游ゴシック』を優先表示とした設定をして記事全体にしております。nemlog自体のフォント設定は「"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, メイリオ, YuGothic, 游ゴシック, Helvetica, Arial, sans-serif;」ですので、お好みによって設定を変更してください。

 

 

 


 

 

 

応用編:HTMLだけでレスポンシブに?

 

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

 

下記のブログカードをご覧ください。

 

 

nemlog

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

 

 

 

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

 

スマホのブラウザのみからご覧になっていただいている方用に、実際にPCで見た場合にうえのブログカードがどう見えているかを画像として下記に用意しました。

 

 

▼ PC上で見た場合はこう見えてます。

 

 

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

 

それでは、実際にHTML5.1によるpicture要素で画像をレスポンシブ対応させたコードを説明していきます。

 

 

 

応用編:レスポンシブ対応コードサンプル

 

<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="ここにリンク先のURL" target="_blank" rel="noopener"><picture><source style="border-radius: 5px; width: 100%;" srcset="PC上だけで表示させたい画像のURL" media="(min-width: 1000px)" /><img style="border-radius: 5px; width: 100%;" src="モバイル上だけで表示させたい画像のURL" alt="nemlog" /></picture></a></p>
<a style="display: block; text-decoration: none; padding: 20px 20px 20px 20px;" href="ここにもリンク先のURL" target="_blank" rel="noopener"><span style="font-size: 1.2em; font-weight: 600; color: #b36b8b;">タイトルはここです</span></a><a style="display: block; text-decoration: none; padding: 0px 20px 20px 20px;" href="ここにもリンク先のURL" target="_blank" rel="noopener"><span style="font-size: 0.9em; color: #666666;">リンク先の説明文をここに。</span></a></div>

 

<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="ここにリンク先のURL" target="_blank" rel="noopener"><picture><source style="border-radius: 5px; width: 100%;" srcset="PC上だけで表示させたい画像のURL" media="(min-width: 1000px)" /><img style="border-radius: 5px; width: 100%;" src="モバイル上だけで表示させたい画像のURL" alt="nemlog" /></picture></a></p><a style="display: block; text-decoration: none; padding: 20px 20px 20px 20px;" href="ここにもリンク先のURL" target="_blank" rel="noopener"><span style="font-size: 1.2em; font-weight: 600; color: #b36b8b;">タイトルはここです</span></a><a style="display: block; text-decoration: none; padding: 0px 20px 20px 20px;" href="ここにもリンク先のURL" target="_blank" rel="noopener"><span style="font-size: 0.9em; color: #666666;">リンク先の説明文をここに。</span></a></div>

 

 

応用編:コード説明

 

使い方は前述したものと同様に、nemlog記事本文内のソースコードにコピペしてご使用ください。

 

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

 

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

 

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

 

この画像レスポンシブ用のブログカードデザインコードは、当記事の最初に紹介したコードと微妙に違っております。横長のブログカードデザイン用に、画像と文字を別々にaタグのインラインブロック要素としてmarginとpaddingで調整しておりますので、文字の長さに応じて一番外側の枠の大きさが決まるような設計となっておりますのでご注意ください。また、URLをそれぞれに割り振らなきゃいけないめんどくささはあるかもですが、上記応用のようにアートディレクションにて表示させたい場合はこちらのコードをコピーしてご使用ください。

 

 

 


 

 

 

おまけコーナー

 

 

[ 見出しのHTML ]

 

こちらの記事で使ってる見出しのHTMLです。カラーコードはNEMの3色を使ってます。(#ECA328、#31B1A4、#69A8D4のいずれかを使用しています。)

 

<h2 style="color: #31b1a4; padding: 0.25em 1em; border-left: solid 5px #31b1a4; font-size: 1.5em; line-height: 2em; font-weight: 500;">見出し文字</h2>

 

<h2 style="color: #31b1a4; padding: 0.25em 1em; border-left: solid 5px #31b1a4; font-size: 1.5em; line-height: 2em; font-weight: 500;">見出し文字</h2>

 

 

 

[ HTMLのみ乞食ボタン ]

 

 

 投げNEMオネシャス!

 

 

HTMLのみで作られた、記事のところどころに投げNEMを促すことのできる画期的な乞食ボタン。

 

投げNEMのリンクはnemlogの「アカウント」から「ウィジェット作成」の「投げnemボックス」にあるコードの中の「src=」にある「https://nemlog.nem.social/iframe/xxxxx/f7a800ffffff」というアドレスをコピペしてください。

 

本来のボタンのように押したらポップアップ?で別ウィンドウを開きたいのですが、本家はJavaScriptを使用しているのでHTMLのみでのやり方がわからず。分かる方がいらっしゃいましたらご教示頂ければ幸いです。

 

また、上記のボタンでは記事内に配置してもその記事への投げnemというカウントではなく、プロフィールから投げられたカウントとなりますのでご注意ください。

 

<a class="button" style="width: 250px; height: 50px; border-radius: 10px; background-image: linear-gradient(-90deg, #BB7CCB, #73F2D0); display: flex; align-items: center; justify-content: center; font-size: 1em; text-decoration: none; margin: auto; font-weight: 500; color: #fff;" href="投げNEMのリンク" target="_blank"><img src="https://fragment.love/wp-content/uploads/2019/04/nem_icon_80px.png" alt="" width="25" height="25" /> 投げNEMオネシャス!</a>

 

<a class="button" style="width: 250px; height: 50px; border-radius: 10px; background-image: linear-gradient(-90deg, #BB7CCB, #73F2D0); display: flex; align-items: center; justify-content: center; font-size: 1em; text-decoration: none; margin: auto; font-weight: 500; color: #fff;" href="投げNEMのリンク" target="_blank"><img src="https://fragment.love/wp-content/uploads/2019/04/nem_icon_80px.png" alt="" width="25" height="25" /> 投げNEMオネシャス!</a>

 

 

 

[ 投げNEM用ブログパーツ ]

 

投げNEMウィンドウ用に作ったデザインブログパーツです。画像は右クリックで保存してどうぞご自由にご利用くださいね。

 

こちらも、nemlogの「アカウント」から「ウィジェット作成」の「投げnemボタン」でコードを取得できるよう、管理者のしゅうさんが作ってくれております。また、こちらはnemlog内では機能しませんので、外部サイトに投げnemボタンを設置する場合などにご利用ください。一応、下記に外部サイトで使用できるコードを載せておきますので、リンクアドレスをご自身の投げNEMのリンクに変えてご使用ください。

 

<a href="javascript:void(0);" onclick="window.open('投げNEMのリンク','nemlog','directions=0, location=0, menubar=0, scrollbars=0, status=0, toolbar=0, resizable=0, width=400px,height=370px');"> <style>img.nemthr:hover{opacity:0.7;cursor: pointer;}</style><img style="transition:0.7s;" class="nemthr" src="画像のURL" title="nem donation" width="400px"></a>

 

<a href="javascript:void(0);" onclick="window.open('投げNEMのリンク','nemlog','directions=0,location=0,menubar=0,scrollbars=0,status=0,toolbar=0,resizable=0,width=400px,height=370px');"> <style>img.nemthr:hover{opacity:0.7;cursor: pointer;}</style><img style="transition:0.7s;" class="nemthr" src="画像のURL" title="nem donation" width="400px"></a>

 

 

 

 

 

 

 

 

まとめというか…

 

こんなにもクソ長い記事をご覧になっていただき、ありがとうございました。紹介したブログカードや素材うんぬんをChromeの拡張機能などに登録して、nemlog内で呼び出せたらなぁとかも思うのですが、ワシにはそんな高等技術は無いためアナログでのコード提供です。

 

また、散々デザインを意識した作りを案内しておきながら恐縮なのですが、mac環境での見え方チェックをおこなっておりませんので、もし崩れていたら教えてくださると助かりますです。HTMLのみでの装飾は普段あまりしないこともあり、当記事内の説明に不十分なところ、間違っているところなど沢山あるかと思います。間違いなどをご指摘いただければお礼nemを差し上げますので、お気軽に「クソコード乙」とコメントくださいね。

 

 

 

独学で回り道をするのが大好きな:エヌ

 

 

 


 

 

見本という名の宣伝

 

上記のブログカードの色や画像を変えて、見た目に変化をつけたものを数種類置いておきますのでご参照ください。(宣伝です。)

 

 

飛びだせ "Harvestale"
"Harvestale"とは、収穫のharvestと物語のTaleを掛け合わせたもの。日常におこる物語の中で自分なりの幸せを収穫してきた。不安で慌ただしい日常。その中で僕らが紡ぎだしてきた様々な実り。君の物語が"harvestale"と共に暖かな実りとなるよう、祈りをこめて。

 

nemlog

趣味で "nemgraph" のデザインをしてみたけど楽しくて1週間かかった話nemgraphとは、写真投稿を主軸としたSNSスタイルをRaccoonWalletのDeeplinkを画像と一緒にツイートすることで、そのツイート自体に投げNEM機能を保持させつつ気軽に写真投稿してみようといったような取り組みで、 @kumanemcoffee さん、@satojun56 さんが主軸となって発信していたことでTwitterでは話題となりました。

 

HTMLだけで作るオシャレなブログカード | Fragment
当nemlog記事の内容を、個人的なサイトのFragmentにも掲載しました。当記事より深くHTML5.1に触れたうえで、より丁寧に説明しているつもりです。こちらのサイト内の記事も、是非ご覧になってご理解を深めて頂ければ幸いです。

 

 

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber
エヌ
2019-04-05 00:20:45ID:96583

>>しゅう:nemlog作ったモヒカン::さん
うおぉ!??マジすかw
光栄すぎて漏れそう。もちろん、こんな自分にでも何かしらでしゅうさんのお手伝い出来ることがあれば全力で応対させて頂きたいです!!入用の場合はいつでもご連絡くださいませm(_ _)m

しゅう:nemlog作ったモヒカン
2019-04-04 22:41:41ID:96455

nemgraphはエヌさんと作りたいですね。本気と書いてマジで((´∀`*))
暫くの間、開発の時間が取れなくて残念w

エヌ
2019-04-04 18:15:05ID:96263

>>ZEMZEM🐳nemlog基金理事長::さん
ありがとうございます\(^^)/

ゼム🦈ゼム
2019-04-04 17:57:09ID:96251

・w・オサーレ!
参考にさせて頂きます!

ほなねむ@魔眼のほなコロ
2019-04-04 16:17:39ID:96228

>>エヌ::さん
なるほど、ありがとうございます!
時代の変化で、デザインも変化していく、楽しみですね

エヌ
2019-04-04 15:21:22ID:96222

>>ほなねむ::さん
モバイルファーストの視点からレスポンシブが流行になり、カードデザインも大きめに変化していますね!ただ、これからの時代はAIファーストとなるので、どのような機能性をもったデザインが出現してくるのかワクワクします\(^^)/

ほなねむ@魔眼のほなコロ
2019-04-04 15:13:06ID:96219

今はこういう大きめのカード型スタイルが流行りなんでしょうね・・・多分(よくわかっていない

エヌ
2019-04-04 13:00:13ID:96206

>>りゅーげん::さん
ありがとうございます!!記事内のコードを貼り付ければ簡単に装飾可能です!!オリジナルな装飾をしながらnemlog記事をシャレオツにカスタマイズしていこうよって試みでした!!記事を整えることは読み手の感動・印象といったUXを向上させることにも繋がります!!

りゅーげん
2019-04-04 12:29:13ID:96184

えーー!!すごーー!!!カッコいい!!!!
そんなに進化させれるものなんですか!!(読んでもよくわかっていないw)

エヌ
2019-04-04 08:58:08ID:96123

>>ほなねむ::さん
ありがとうございまっシュ!!レスポンシブ対応のブログカードは何気に使える機能性だと思うので、ガシガシ応用してください!!文字のブロックに対して外側の枠の大きさ変わるので注意ですm(_ _)m

NEMber who posted this article

コミュ障。
19007
0

Why don't you read following articles?


10.5 XEM
194 10 0

4.995 XEM
510 3 3

0.85 XEM
247 0 0

2.8 XEM
216 6 0



0.05 XEM
419 16 2