国立西洋美術館での「国立西洋美術館開館60周年記念 松方コレクション展」の開催を記念して制作されたというこちらのスマホケース。
見ての通り、モネの代表作「睡蓮」がモチーフになっています。
美しい！！
ラメが流れ落ちるとき、さらなる魅力を発揮します。
動画をご覧ください！
「モネの代表作 睡蓮 」×「流れるラメ」の組み合わせが美しいスマホケース
涼しげで素敵です♪
ちなみに、内部に使われいる液体は「化粧用,医薬用などに使用される安全性の高いオイル」だそうです。
パルコのショップでで購入できますよ。
気になる方はチェックしてみてください。
先日の「記事上部にアイキャッチ画像を表示する方法」には大変嬉しいことにたくさんのリアクションをいただきました！ありがとうございます！
そこで、今回ははてなブログカスタマイズ記事の第二弾です！
タイトルの通りですが、記事一覧画面で一番上の記事だけ見た目を変える方法をご紹介します。
当ブログはPCで見たときに一番上の記事の表示が変わるようにしています。
↑最初の記事だけ画像を大きくし、説明文も表示しています。
こうすることで最新の記事に目が行きやすくなりますよね。
ブログのテーマはMinimalismを使っています。
色々とカスタマイズをしていて説明が煩雑になってしまうので、今回も私がもう１つやっているブログ「初めて猫と暮らしてみたら。」の画面を使ってカスタマイズ方法をご紹介します。（こちらも同じくMinimalism）
それでは早速Before、Afterをご覧ください。
左がカスタマイズなしの一覧表示。
右がカスタマイズ後です。
一番上の記事だけ画像を大きくして、説明文も表示してみました。
これを実装するには
「デザイン」→「カスタマイズ」→「デザインCSS」
に以下のコードをコピペすればOKです。
簡単に説明すると、
1つ目の記事だけ、
という3つの設定をしています。
Minimalism以外ではうまく表示されないこともあると思うので、適宜、位置や幅の調整などを行ってみてください。
このままだと画像サイズのバランスが悪いので調整してみます。
あくまで一例ですが、こんな感じ↓
PCサイズ（画像を大きく表示）
タブレットサイズ（画像と文章を横並びで表示）
スマホサイズ（画像を大きく表示）
このように画面サイズごとにレイアウトを変えるには以下のように設定します。
@media screen and (max-width: ○○px)
の部分がサイズごとの設定です。
説明のために簡素にしていますが、実際に使う場合はお好みのデザインに調整してみてください。
一覧画面の記事表示を2カラムにしている方も多いと思います。
通常、2カラムにするとこんな感じですよね↓
Minimalismを2カラムにする方法は検索するとたくさん出てくるので気になる方は探してみてください。
2カラムの最初の記事だけ表示を変えるとこんなことができます↓
1記事目だけ横幅100%にしています。
2カラムの設定方法にもよりますが、以下のように指定すると1記事目だけ幅100%になります。
※一覧画面で表示する記事数を奇数にしておかないと最後が半端になるので気を付けてください（設定→詳細設定→「トップページの記事数」で変更できます）
少しデザインを調整してみるとこんな感じ↓
画像を大きく表示しています。
ソースはこちら↓
上で説明した内容とほぼ同じです。
一覧画面の表示に少しアクセントを加えるカスタマイズをご紹介しました。
今回ご紹介した方法はそのままコピペというよりは、参考にしつつお好みのデザインに調整してもらえると良いかなと思います。
ブログをカスタマイズすることで読みやすくするのはもちろん。
自分好みのデザインにすることでブログを書くのが楽しくなりますよね。
ブログを長く続けるため、自分のブログに愛着を持てるデザインにカスタマイズしてみてはいかがでしょう！
今回はブログのカスタマイズについて。
記事上部にアイキャッチ画像を表示する方法をご紹介します。
このページも画像入ってますよね。これです↑
実はとても簡単に実装できます。
早速ちょっと脱線しますが、このブログでは「Minimalism」というテーマを使ってます。
言わずと知れたはてなブログでは人気のテーマ。
そのまま使ってもおしゃれですが、シンプルなのでカスタマイズもしやすいです。
私がやっているもうひとつのブログ「初めて猫と暮らしてみたら。」も同じくMinimalismを使っています。こちらはほぼカスタマイズなし。
PCのトップページを比べるとこんな感じです。
同じテーマでもカスタマイズで印象が変わりますよね。
今回のカスタマイズもこのMinimalismをベースにしていますが、基本的には他のテーマでも使えると思います。
さて、本題のカスタマイズ内容に戻ります。
記事ページ上部のタイトルの背景にアイキャッチ画像を設定します。
先に完成形をお見せします。
左が元の状態、右がカスタマイズ後です。
一度デザインに反映すれば過去の記事や今後追加する記事も自動で画像が表示されるようになりますよ。
変更するのは２箇所だけ。
それではそれぞれの手順をご紹介。
記事ページをカスタマイズするので、まずは記事ページのプレビューモードにしましょう。
「デザイン」→「カスタマイズ」→「記事」で「記事ページをプレビュー」を選択
画像はmetaタグに設定されている「og:image」を使用しています。
「デザイン」→「カスタマイズ」→「記事」→「記事上」に以下のコードをコピペしてください。
※すでに他のカスタマイズなどでJQueryを使っている方は１行目のJQueryの読み込み部分は不要です
これでプレビュー画面に画像が表示できたと思います。
左が設定前、右が設定後
簡単ですね♪
ただ、これだとタイトルの文字が見にくいので、もうひと工夫します。
「デザイン」→「カスタマイズ」→「デザインCSS」に 以下のコードを追加します。
左が設定前、右が設定後
これでタイトルの文字が見やすくなりました。
あとはブログに合ったデザインに調整しましょう。
参考になりそうな方法を２つご紹介。
padding: 90px 25px;
background-color: rgba(0, 0, 0, 0.5);
各文字は白に(#FFF)
だいぶ印象が変わりますね。
文字を見やすくするにはさらにこちら↓
ぼかしの方法はこちらの記事を参考にさせていただきました。
CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法 | Design Color
アイデア次第で色んなカスタマイズができます。
理想のデザインに挑戦してみてはいかがでしょう！
これまで、ブログの運営とかカスタマイズについて書くことはなかったのですが、たまにはこういう内容も書いていけたらなーと思ってます。
（ニーズがあったらですけどね笑）
改めてですが、読者登録やスター本当にありがとうございます！
とても励みになります！！
これからもどうぞよろしくお願いします！
本日（11/10）デザインフェスタ vol.48に行ってきました。
デザインフェスタはプロ、アマ問わずいろんなジャンルのアーティストが作品を展示、販売できるイベントです。
年に2回、5月と11月に開催されています。
今回のvol.48は11/10（土）、11/11（日）開催。
良い刺激を受けて創作意欲を掻き立てられるので、ここ何年か通っています。
と言っても何も作れてないんですけどね。笑
デザフェスはハンドメイドのアクセサリーや雑貨を扱っている個人のクリエイターさんが多く出展されています。
ここでしか手に入らないアクセサリーやTシャツなどもあるので「他の人と被りたくない」っていう人にはオススメですよ。
作品を少しだけご紹介。
幻想的な光るキノコのインテリア。
こちらの方、毎回出展されていていつもとても人気です。
展示されている作品の多くがすでに「売約済み」でした。
会場にはその場で絵を描いている方がたくさんいます。
生で描いている姿なんてなかなか見られないから貴重ですよね。
中にはこんな巨大な絵も。
知海さん
描いている姿も絵になる。素敵です！
こんな大迫力の巨大ペイントは20作品以上あります。
デザインフェスタ vol.48 巨大ライブペイント出展者一覧
たくさんの展示があるデザフェス。
広い会場を歩き回ってお腹が空いたらフードエリアもあります。
人気のお店には長蛇の列ができてました。
毎回大人気の福ねこ弁当も残念ながら売り切れ。
あ、そうそう。
デザフェスで人気のものを手に入れようと思ったら朝並ぶんです。
こちら、会場の外の写真なんですが、コーンのあるあたりに朝は行列ができます。
会場に入っても人気のブースには行列ができています。
と言っても昼頃に行けばすんなり入れますし、会場内をぐるーっと回るのに特に並ぶこともないのでふらっと行って気軽に楽しめるイベントです。
行ったことがない方は是非！
終了間近の「デザインあ展」にようやく行けました！
前回5年ほど前に行ったのは六本木、今回はお台場の日本科学未来館です。
「デザインあ」はNHKのEテレで放送されている番組です。
私の解釈では、日常のあらゆるものをデザインとしてとらえて、その成り立ちを分かりやすく、楽しく、おしゃれに魅せる。
みたいなコンセプトなのかなーと思ってます。勝手に。笑
（ちゃんとしたコンセプトは公式ページに書かれています）
その「デザインあ」を見て、触って、体験できる展覧会なのです。
撮影を自由にできるのも嬉しいポイント！
2013年に六本木で行われた時は平日ということもあってか空いており、
ゆっくり、じっくりみることができました。
が、今回は、大盛況！
土日だと入場制限をしていることもあるようです。
私が訪れた平日も「梅干しのきもち」（タイトルだけですでに惹かれる笑）など体験できるコーナーだと40分待ちの行列ができていたくらいです。
さてさて、今回はどんな展示があるかいくつかご紹介。
まずは「観察のへや」
お弁当の材料をそれぞれ並べてみるとこんな感じ。という展示。
次に「体感のへや」
音楽にシンクロする映像が展示室の四方の壁面に映し出されます。
映像、音楽のシンクロ感が心地良いです。個人的には「解散！」がお気に入り。
続いて、「概念のへや」
それぞれ「じかんのかたち」を表しています。
何だか分かりますか？
イチオシはこの色々な「寿し」！
ぜひ映像で見てもらいたいです。
お土産もたくさんありました。
付箋、缶バッチ、アクリル「あ」などなど、いっぱい買ってしまいました。
ちなみにデザインあ展の企画展チケットで科学未来館の常設展を見ることもできます。
常設展もなかなか面白かったです。
未来館は大人も子供も楽しめるのでオススメです。
あ、ご飯を食べるところもありますよ。
これは7階にあるレストランの竜田揚げです。
デザインあ展 in TOKYOは10月18日（木）まで。まもなく終了です。
興味のある方はお早めに〜〜！
突然ですが、アイコンにしているウサギ（なのか？）。
言わずもがな「ハヤタ」と言います。
S N Sを始める時ってプロフィールのアイコンに迷いませんか？今回のブログでもかなり迷ったんですよ。それでいっそのこと…と思い、Photoshopで描きました↓
絵心が全くないので二足歩行のうさぎ？っぽい謎のキャラクターになりました。
ちなみになんで作ったか覚えてないんですが、正座バージョンもあります。
さらに迷走したあげく、正座にマスクに辿りつきました。（ヘタ過ぎ笑）
で、今のところ、このキャラの使い道は特にないです。でももしかしたらポーズを自由に変えたら楽しくなるかもと思いついてみまして…。今回、3D化してみることにしました！
ちなみに3Dとかそういう知識はまったくないです。
なので、まず「何のソフトを使えば良いのか」を調べるところから始まりました。
無料で使えて初心者に優しいものを探した結果、「Metasequoia」というソフトを使ってみることにしました。
使い方はYouTubeにたくさん上がってます。便利な時代ですねー
その中でもVTuberの方が実際にキャラクターを作っている様子を生配信していた動画のアーカイブを見つけたので、さっそく視聴。
このあたりの２本を見たところで大体の操作方法が理解できました。
とても分かりやすかったです。ありがとうございます！
もちひよこと一緒に３Dで可愛いお顔を作ろう生（・8・）＃１ - YouTube
もちひよこと一緒に３Dでミニキャラを作ろう生（・8・）＃１ - YouTube
それにしてもVTuberの人気ってすごいんですなね。
この生配信も数千人が見ていたようです。
一通り使い方も分かったところでいざソフトをインストール！
私のパソコンは6〜7年前のMacBook Airなんですが問題なくサクサク動きます。
作っているときの画面がこんな感じ↓
YouTubeでの勉強が2時間、制作時間は約10時間。
ようやく形になったのがこちら↓
なんとか、それっぽくなりました。
まだ「ボーン」と言われる骨格を入れていないのでポーズをとったりはできないです。引き続き勉強して動かせるところまで頑張ってみようと思います！
今さら気づいたんですが、ボーンを入れるにはStandardライセンスの購入が必要でした。ここまできたら買うしかない！
ということで今回はここまで。
