comments trackbacks you may also like

【コピペOK】ニューモーフィズムを簡単にCSS実装できる便利な無料サイト!見た目で調整するだけ!

2020年02月16日
#FC2ブログ #ブログ #ブログカスタマイズ #ブログ運営 #ウェブデザイン #ニューモーフィズム #Neumorphism.io #ブログ日記 #マテリアルデザイン #便利ツール

【コピペOK】ニューモーフィズムを簡単にCSS実装できる便利な無料サイト!見た目で調整するだけ! – FC2ブログ日記-カスタマイズの所感など


こんにちは! FC2ブロガーのM(@yulari_happy )です。


最近のウェブデザインは、Neumorphismニューモーフィズム)というものが流行っているそうです。


これは、New(新しい)とSkeumorphism(スキューモーフィズム)を組み合わせた造語で、「新しいスキューモーフィズム」という意味。現実のものらしく、リアルに模様したスキューモーフィズムとはまたひと味違った立体感のあるデザインを指してこう呼ぶとのこと。


スキューモーフィズムとは?

スキューモーフィズム(skeuomorphism)とは、他の物質に似せるために行うデザインや装飾のことで、(中略)
ユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われる。

引用:スキューモーフィズム – Wikipedia


簡単に言うと、ニューモーフィズムとは背景の一部が手前に突き出ているようなスタイルを2種類の影を組み合わせて表現する新しいデザイン手法です。


言葉ではチンプンカンプンという人のために、今回はコピペで簡単にニューモーフィズムが実装できる無料オンラインサービスをご紹介します。

ニューモーフィズムなCSSスニペットがコピペで簡単に実装できる無料サイト

CSSスニペットをコピペして簡単にニューモーフィズム・エフェクトを表現できればとても便利ですよね。


実は、そんな便利なことが出来てしまう無料オンラインサービスがあるんです。


実際に僕自身も使ってみて、とても便利なサイトだと思いました。


僕みたいにほとんどWebテクのない人間でも、このオンラインツールを活用すれば簡単にニューモーフィズムをブログに導入できますよ。


以下、ざっくりではありますが、簡単にサイトや使い方を説明していきます。

ニューモーフィズムの無料オンラインサービス「Neumorphism.io」

ニューモーフィズムをウェブサイトやブログに導入したい時は、CSSコードがコピペ可能な無料オンラインサービス「Neumorphism.io」がおすすめです。


Neumorphism.ioは、影や凹凸感を画面上でスライダーを調整しながら作成できます。


【コピペOK】ニューモーフィズムを簡単にCSS実装できる便利な無料サイト!見た目で調整するだけ! – FC2ブログ日記-カスタマイズの所感など


見た目でニューモーフィズム・エフェクトを調整できるうえ、CSSコードをそのままコピペして使えるというのですから凄いですよね!

Neumorphism.io の使い方

調整可能な各項目を簡単に説明すると、以下の感じになります。


Neumorphism Soft UI CSS shadow generator の使い方


  • ①Size:画面に表示されている要素のサイズを調整できます。なお、選択した幅などがCSSコードに反映される訳ではありませんが、要素の幅に対応した影の広がり具合を見ながら調整するのに役立ちます。
  • ②Radius角丸を調整します。
  • ③Distance影の長さを調整します。
  • ④Intensity影の強さを調整します。
  • ⑤Blurぼかし具合が調整できます。
  • ⑥Shape⑦の形状を選択
  • ⑦→凸凹感を「Flat平らな)」「Concave凹面)」「Convex凸面)」「Pressed押された)」の4種類から選べます。

Neumorphism.io の使い方として必要な説明箇所は以上になります。まあ、言葉で理解するよりも実際にサイトの中で弄ってみるのが分かりやすいと思いますよ。


スポンサードリンク

僕のFC2ブログ『ゆうらりHappySmile』にニューモーフィズムを実装してみた

実際に、Neumorphism.ioを使って僕のFC2ブログ『ゆうらりHappySmile』にニューモーフィズムを実装してみましたよ。


ニューモーフィズムを導入したのは、個別記事ページの記事タイトルです。実は以前、僕がお世話になっているFC2ブログテンプレート製作者のAkiraさんから「記事タイトル周辺が見づらい」とアドバイスを賜りました。


ゆうらり Happy Smile の記事タイトル周辺


た、たしかに!記事タイトル上下にはGoogle AdSenseの広告を貼っていますからまるでインパクトに欠けていますよね(汗)


そこで、記事タイトルにニューモーフィズムなデザインを実装してみました。


やり方は簡単。Neumorphism.ioであれこれとスライダーさせながら、これ!と思ったところでCSSコードをコピー。


【コピペOK】ニューモーフィズムを簡単にCSS実装できる便利な無料サイト!見た目で調整するだけ! – FC2ブログ日記-カスタマイズの所感など


そして、スタイルシートにある「#entry-title」の1番後ろに貼り付けただけで完了しました。


記事タイトルをニューモーフィズムにした結果は下の画像をご覧下さい。


【コピペOK】ニューモーフィズムを簡単にCSS実装できる便利な無料サイト!見た目で調整するだけ! – FC2ブログ日記-カスタマイズの所感など


や、やけにインパクトのある記事タイトルへと変貌を遂げたのでした!!

まとめ/ブログのどこでも何でもニューモーフィズムに実装できる

今回は、コピペで簡単にニューモーフィズムが実装できるNeumorphism.ioの使い方をご紹介しました。


Neumorphism.ioを使えば、ウェブサイトやブログの好きな箇所にどこでも何でもニューモーフィズム・エフェクトを実装することが出来ますね!


興味がおありの方はぜひ挑戦してみて下さい。

この記事、おもしろかったわ。
さすがに他の似た記事ないわよねぇ…
あるよ。(田中要次風)
下の「検索」ボタン押してみてや。

【ブログのリライト方法】Googleで検索上位に表示させるためのやり方について説明します!

こんにちは! FC2ブロガーのM(@yulari_happy )です。ブログを運営してますと「このキーワードで絶対1位を取ってやる!」とか「Googleで検索上位に入りたい!もっと検索順位を上げたい!」など、ブロガーなら誰でもこう思っていませんか?FC2ブログ『ゆうらりハッピースマイル』をやっている僕も、よくそんなことを考えたりします。そこで、狙ったキーワードをGoogleの検索上位に表示させるため、様々なSEO対策を行なっているわけ...

無料で使えるSEO対策ツールの便利な使い方 ブログやサイトのSEO情報を解析できる!

こんにちは! FC2ブロガーのM(@yulari_happy )です。ウェブサイトやブログの運営をするうえで、SEOは僕たちブロガーにとって切っても切れない関係かと思います。ブログへのアクセス数アップを目指しつつ、GoogleアナリティクスやFC2アクセス解析などの解析ツールをチェックしながら、SEOにつながるさまざまな工夫や努力を重ねている方も多いはず。そんな中、ブロガーにとっては朗報ともいえる画期的なSEO対策ソフトが提供開始され...

ブログの書き方: SEO・アクセスアップの敵“重複コンテンツ”簡単な対策方法は?

こんにちは! FC2ブロガーのM(@yulari_happy )です。僕がこのFC2ブログ『ゆうらり Happy Smile』を開設してから早いもので6年6ヶ月を迎えました。これまでコツコツとブログを書き続けてきた甲斐もあってか、ブロガー歴に比例する形で記事数についてもかなりのボリュームとなり、今回のブログ更新が10,372記事となります。ブログを始めた当初は右も左も分からずに書いていたのだけれど、今では1記事1記事がアクセスアップへと繋が...

この記事、おもしろかったわ。
気に入ったらどしどしシェアしてね♪
\Thanks/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール
iconiconiconicon

この記事が気に入ったら
いいねとシェアしよう!

data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
未分類 (0)
シン・胃がん闘病記 (51)
┣  AVANT:癌の余命宣告~共存 (38)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5951)
┣  胃がんブログ (287)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (575)
┣  がんブログ (335)
┗  がんニュース (240)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
Amazon (172)
┣  Amazonセール (4)
┗  Kindleセール (167)
おもしろグッズ (12)
今日のエッセイ (168)
ニュース-芸能-話題 (897)
┗  転職-キャリアアップ (21)
占い-心理テスト (6)
恋愛-人間関係 (30)
終活ブログ (12)
グルメ (118)
┣  低糖質レシピ (31)
┗  お酒の飲み方 (2)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (263)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (188)
┣  FC2ブログ日記-カスタマイズの所感など (28)
┣  GoogleAdsense-アドセンス (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhoneの使い方-アプリなど (34)
司法書士 (26)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)