YoYoYoY

このブログは確かに重い。あきらめないで。

ブログにナビゲーションバーをつけてみた

f:id:yoooooemin:20170116221949g:plain

こんばんは、織田檸檬です。

僕のブログがバージョンアップしましたのでお知らせします。

テーマって改造できるんですね

 

僕がいま使ってるはてブのテーマはこれ

 

www.yukihy.com

 

ゆきひーさんの作ったNakedです。

上の部分のローポリライクなデザインが僕のモーショングラフィックスのイメージと近かったのでこれを選びました。

見ため、オシャレですもんね。気に入っております。

 

あとレスポンシブっていうのも大きな魅力のひとつです。

 

ですが初期設定では、上にあるアバウトとかGIFとかいうナビゲーションバーがありませんでした。

 

そこで作ってみようと思いました。

 

公式にカスタマイズ記事あり

 

作るとは言えHTMLやCSSは書く必要ないです。

そこらへんはゆきひーさんがいい感じにやってくれています。

 

当初は別の記事で独自にナビゲーションバーをつくっていました。

 

www.yukihy.com

 

ですがちゃんとNaked仕様のカスタマイズ記事がありました。

 

theme-naked.hatenablog.jp

 

ていうか同じゆきひーさんの記事だっていうことをあとで知りました。。

 

ナビゲーションバーの改造については、コピペして文字を変えてリンクをはっつけるだけの作業で終わります。

 

ちなみに『タイトル下』っていうのは、設定のなかのデザインのなかのヘッダのところにあります。

 

f:id:yoooooemin:20170116223424j:plain

 

f:id:yoooooemin:20170116223441j:plain

 

とても簡単でした。

 

みなさんもぜひカスタマイズしてみるといいかと思います。

 

終わりに

 

ナビゲーションバーがあると、いろんなカテゴリーにジャンプしやすいので見ている側にとっては便利なのではないでしょうか。

また常に上に表示させることができるので、見て欲しい記事のリンクとか、こちらの希望も盛り込みやすいですよね。

 

おそらくみなさんが使ってるブログのテーマにも、こういうカスタマイズ記事はあると思うので今一度テーマストアを覗いてみてはいかがでしょうか。

 

以上です。

 

今日のGIFについて

 

Nakedの上部のデザインを真似て、それをアニメーションさせました。

文字はAEでいれましたが、アニメーションはC4Dでつくりました。これ簡単につくれます。

 

手短に説明しますと、まず平面を敷いて分割数をちょっとだけあげて(今回は50)それから変位デフォーマをつっこみます。

 

シェーディングのなかのシェーダをノイズにすると平面が凸凹します。

ノイズのプロパティのなかに、アニメーション速度のパラメータがあるので、そこを適当な速さに設定します。

 

スムースタグがついてると思うのでそれを外してパリパリさせたあと、三角ポリゴンにするためにポリリダクションデフォーマを追加したら基本形は完成。

 

あとはこれにマテリアルを設定してあげれば終わりです。

 

なんだか記事のネタになりそうなので、図解は近日中に行おうと思います。