3シーモアくどすぎて笑いが止まらんかった。

もうどこかにすでにありそうですけども
FF風boxをcssで作ってみました。

というわけでまず使えるかテストでございます。

おおお…出来た…（感動している）

codepenにてソースを公開しておきます。

→codepen←

と言っても調べただけでこれはすごい簡単に作ったものなんですが
元祖FF7のときにウィンドウのグラデーションまで自分でカスタマイズ出来たよね？
めちゃくちゃ懐かしい。
濃い赤にして楽しんでました。
そういうことをしてたのでグラデーションに関しては全く考えなしですぐ色も作れた。
それにしてもここに来るのが久々すぎてhugoの触り方すっかり忘れてしまいました。
動画が簡単に貼れるようになってる！すごーい！とかwordpressさんの機能だとか思ってたらhtml5からの新しい仕様だったんですね。恥ずかしい。
と、そんなことをしばらくひたすら勉強していました。

多分知識的にはほんの少しは無知よりマシになっているはず…
（何かの説明を今までよりはすんなり読めるはず…）

愛海SSRの為に溜めてたジュエルでなんとなしに引いてみたら出た。
そりゃビジュアル不足だし同郷としても歌鈴は欲しかったけど…オ・バ・ロ❤️

そしてこのオチはずるいと思う。

そして 音ズレタップ無反応など、いつもはほっといたらなんとか改善されてはまた悪化してを繰り返してたのですが

これにてわたしはデレステを卒業しようかと思ったのでした…。
完走出来ないほど無反応て（今までも何度もあったけども
ゆっこ欲しさに珍しくイベ走ってスタドリ使ってこれだったからほんと辛かった（しかも連続でこの状態だった）

まあ今のライブパレード終わったら次何来るかな〜とは思ってますけどね！！！
愛海諦めてねえからな！！！！！！！！！！！！！！

事あるごとにこれ使っていきたい。

…とりあえず落ち着いたらgitの使い方とかメモするつもりだったのに気付いたらゲーム記事じゃねえか！！！
っていうか完全に使い方忘れて自分の記事読み直してやっと記事出来たよ…
自分ぐっじょ…

デレステ風の吹き出しをcssで書いてみました。

と言っても初心者がいろんなサイトまわってコピペしたりしただけなので
ソースはぐちゃぐちゃのまんまですけど
元のcssがぐちゃぐちゃになりそうなので取り敢えずスクショだけ。
codepenだけ置いていきます。

ソース

初めてcssで三角作ったり
そもそも横並びってどうすんの！？から始まり
デレステに使われてる（と言われる）フォントの配布終わってる！！！とか
矢印太字にできねええええええとか
（結局縁をつけることで太字に近づけましたが、ただ矢印がずれて重なってるだけに見える←まあそのままそうなんですけどね）

ってゆーか背景画像必要じゃね？とか思ってわざわざ研坊描き始めたり

わたしは1日かけて何をしているんだろう…

結局旦那にほとんど手伝ってもらったんですが
解説してもらってもさっぱりで結局自分一人の力では無理でした。

そして上のボックスと三角にシャドウつけられていない…
つけるとぐちゃぐちゃになるんでその辺は妥協しました。
三角だけにシャドウをつけるともうちょっとそれらしくなるかも？
あと三角との結合部分の角丸は諦めました。
全体的にセンターに寄せたりとか課題は山積みですね…

タイトルに１ってつけてるけど
ここまで苦労して他にまだ作る気になれません…
プロデューサー用のセリフアイコンは是非作りたいですね

わ　た　し　は　な　に　を　目　指　し　て　い　る　の　か

血祭り週間で床に３回ほどぶっ倒れながら作りました（涙の痕

ファビコンをつけました。

すごく分かりにくいんですけどもタイトル横の豚のつかいまわしです。はい。

iphoneで見るとこんな感じ。

ファビコンジェネレーターをいうものを使ったのですがだいぶ前になるので
どこでどうしたか覚えてなくて記録すら出来ないのですが…

ジェネレーターで作ったiPhone用やその他android用も含めて
一気にstaticディレクトリ直下に置いてしまいます。

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

その後＜head＞タグ内に以上を追記して完了です。

ファビコンはずっとやろうと思ってて手を出してなかったので
ちょっとスッキリしました。

ギャラリーサイトの方もちょこちょこ更新してます。
というか今日一気にコンテンツ上げました。

次はgitについて書こうと思うのですが頭がアレなので今日はデレステして寝ます。
ライブパーティー…上位下位一枚ずつ取れたらそれでいかなって思うけど楽しくてついついやっちゃうんですよね
マッチングは不満だらけですけどね…！！！！

詰んでます。

お勉強ブログとして始めたはいいけど
何を勉強するのか定まってないまま始めたので
そもそも何を書けばいいのかわからず詰んでます。はい。

ギャラリーサイトの方は色々いじってて
結構進んできました。

「結構最近のサイトっぽくなってきたんちゃう！？」って言われました…
どうせ15年前のサイト作りレベルで止まってる化石BBAですよ…
テキストサイト…ランキング…100の質問…同盟…相互リンク…うっっ

そんな感じで椅子が遂に届きました。

これで無理矢理クッション積んで背もたれ作ったり靴下履かせたりしなくて済むのね…

と喜んでたんですけど

足が届きません・・・・・・・・・・・・・・・・・・・・・
絶望・・・・・・・・・・・・・・・・・・・・・・

結局ロンは２回ぐらい轢きましたどんだけ言うても避けてくれません
足場がないので（足元に写ってるのは自作したワゴン…）
それがあるのもあって足場を作るのも無理そうなので
取り敢えずデスノートのLの体制で頑張ってます。

もたれられるだけ、うん、大丈夫

絵はその…魔がさしたというか…
そんなことより右上な！君な！そこで寝るなら寝ててくれよな！
足元は危ないからやめような！

ちなこのあと５分ももたず降りて来た。

gitというものを習得してるところなんですけど
みーとんが作ったコマンドとかあってちょっと書きづらいのでみーとんが記事にしてくれるのをひたすら待っています

あと地味にiphoneで見た場合のデザイン崩れを直したりブログ自体もちょこちょこいじってます。
せめてそれ書けばいいんですけどもう忘れました。
もうね、ワーキングメモリーが皆無状態。

いや、無気力でほんと書くことない イベントほとんどやってない・・・・・・・・ みりあやんないよ・・・

みりあSSR出たばっかりだしな…

handmadeサイトのURLを変更したのでお知らせします。
gallery.btnb.jpに変更しました。

それに伴いハンドメイド作品だけでなく
写真などのギャラリーやコンテンツも増やしていきたいなあと思いつつ

詰んでます。笑

今までindex.htmlに置いていたものを
マークダウンファイルで個別記事として移動できないかなーと思ったんですが
そんなにうまく行くはずがありませんでした…。

こちらの記事が参考になるかなーと思ったんですけど
私の乏しい知識量では読解出来ず…
そもそもやろうとしてること逆じゃね…？

そんな感じで今日も別のところで拾ったCSSでフォトギャラリーというのを試してみようと思います
ほんとはギャラリーサイトで実践したかったんだよ！ こちらからお借りしてきました。

画像までお借りしてきといてなんだけどめっちゃくちゃ骨の折れる作業でした…
画像が縮小されてないのでサムネイルも何がなんだかだし、どこかいいればいいのですが
ちょっとめんどくさくてこれ以上いじる気になれません…

やっぱりフォトギャラリーってCSSでやるものじゃない、かな…

（でもきっと懲りずにまたやる）

したはいいけどほとんどやってもらったので理解出来てない頭でまとめられるか不安…
hugo本来の機能にドロップダウンがあるんですね。
知りませんでした。
そちらを使ってプルダウンにしたところ、元から書いていたcssも効いてこんな感じになりました。

ただCSSのドロップダウンを自分で持ってきたかったので
現在使って要るテーマ(デフォルトのbeautifulhugoです)でmenuを表示している場所
nav.htmlの中身を思いっきり書き換えました。

config.tomlから親メニュー、子メニューを指定してnav.htmlをいじると上記のようなトロップダウンが出来上がります。

が、全部ごっそり消してみました。

タグの意味など全部羅列したかったのですが、そこまで整理する余力はなく…

 <div id="dropmenu" class="dropmenu">
      <ul>
        {{ $site := .Site }}
        {{ range .Site.Menus.main.ByWeight }}
        {{ if eq .Name "Tags" }}
          <li>
          <a class="navlinks-parent" href="{{ .URL }}">{{ .Name }}</a>
          <ul>
          {{ range $name, $taxonomy := $site.Taxonomies.tags }}
            {{ if ne $name "" }}
            <li>
            <a href="/tags/{{$name}}">{{$name}}</a>
            </li>
            {{ end }}
          {{ end }}
          </ul>
          </li>
        {{ else if eq .Name "about" }}
          <li>
            <a class="navlinks-parent" href="{{ .URL }}">{{ .Name }}</a>
          <ul>
          {{ range where $site.Pages "Section" ""}}
          {{ if .IsPage }}
          <li>
            <a href="{{.RelPermalink}}">{{.Title}}</a>
            </li>
          {{ end }}
          {{ end }}
          </ul>
          </li>
        {{ else }}
        <li>
          <a title="{{ .Name }}" href="{{ .URL }}">{{ .Name }}</a>
        </li>
        {{ end }}
        {{ end }}
      </ul>
   </div>

今はこんな感じのソースにして読み込ませています。

結果がこんな感じ。
参考はこちらから
ドロップダウンメニュー２を使用してます。
もう少しカスタマイズしたいのでちょこちょこいじることになりそうです。

あとはデザイン崩れや不具合を地道にちょこちょこ直してました。
書くほどのことは何もない…と思う…

前回の記事のスライドショーにも出て来た江ノ島の猫です。
江ノ島もっかい行きたいなあ。

転がるアニメーションをCSSで、というのを発見したので
テストしてみます。

フリーザ様転がりすぎくそわろた
追記でもう二人転がしてみたんですがフリーザ様だけの方が何かシュールだったので消しました。

ついでにナビゲーション部分タイトル横の豚のロゴはマウスオーバーで震えます。
ちょっとなんかいきんでるみたいで嫌ですね（戻さない

CSSでフォトギャラリー。テストです。

こちらのサイト様を元に
スライドショーを作るテストをしてみました。
スライドショー関連はcssで地道に組むより何かしらプラグインやjsみたいなものを探した方が良さそうですね…。
一枚一枚貼り付けて画像の大きさを気にするの、結構地道に無駄な気がする。
写真が少ない、アスペクト比が一定だといいのですが
わたしの場合アスペクト比も写真によってかなりいじるので
その辺の修正がわたしがソース読めれば問題ないんですけど全然わかりませんでした。
表示された写真をcenter寄せぐらいはやりたかった…。

jsではなくCSSを使う利点は軽さとかなのかな？
今はCSSを勉強しなきゃーと思ってるのでとにかくCSSで出来ることというのを片っ端から調べては試して行きたいと思ってます。

ついでなので動画もテスト。

どうもCSSでのスライドショーの貼り付けはうまくいきませんでしたが
おかげで動画の貼り付け方がやっとわかりました。笑