サイトのレイアウトを少し変更しました

サイトの調整がようやくひと段落しましたので、簡単な記録記事にしたいと思います。

以前から来ていただけてる方は気づいたかもわかりませんが、サイトのレイアウトが少し変わりました。

配色とかヘッダーとか細かいところで大まかな変更はしていない(つもり)なので、サイトの更新履歴に残すほどでもないかな、と思っているのですが……。

各コンテンツもお話とかイラストとか分けずに1ページの縦長にまとめましたので(一部はそのまま別ページ据え置き)、少しでも使い勝手というか見やすくなってくれていたらいいなーと願っております。

ついでに、今まで応援ボタン設置していたんですが、感想ボタンにリニューアルしました。
今まで利用していた応援ボタンに色々思うところがあって、結局自作。
自作はいいぞ。自分の好きなように仕様組めるからな。

ブロク記事の下にも設置していますが、こんな感じでボタンを押すと感想フォームが開閉します。

感想フォーム

デフォルトで「応援しています」にチェックが入っているので、そのままポチッと送信を押せばこちらに下記みたいなメールが届く仕様になっています。

メールで届くよ!
(あ、件名直してない・・・まあいっか)

絵文字対応は入れたけど機能してるのかよくわかっていないので、使わないのが無難そうです。
ちなみにメールには表示されないので、今のところ絵文字非対応と変わらないかも(笑)

この辺の細かい部分を自分で取捨選択できるのはやはり自作の良いところ。
セキュリティとメンテ考慮するのが面倒なところですけれど。

それに合わせて今までの応援ボタン(TINAMI製)へのリンクは外しました。
そのうち別窓小ウィンドウ開くタイプも作ろうかとは思っています。

せっかく設置したので、活用していただけたら嬉しいです〜!

後で管理画面も作ってみようと思ってDBにも溜まるようにしているので、まずは管理画面の機能とレイアウトを考えたいと思います♪( ´▽`)


さて、ここからは細かすぎて伝わらない変更点の記録、もとい、ご紹介です!

脱 jQuery

脱 jQuery を目指して、 今まで jQuery が使われていたところを全て! Vue.js に置き換えました!

!!! ※jQuery も Vue.js も JavaScript のフレームワークの一つ。

一応言っておきますと、私は全然 jQuery と親しんでこなかった人間なので、実はほぼ使えない部類。使用している CMS のデフォルトが jQuery なので、プラグインとかそのまま jQuery 製のものを使っていた流れです。
jQueryは 2 系と 3 系の好きな方を選べるのですが、3系を選ぶと動かないプラグインがあったり……。

今の時代は Vue.js だろ!とそちらに置き換えることに。

Vue.js を猫本で勉強したり、ネットで Vue.js での代替探したりして無事に置き換え完了しました!
それにしても、Vue.js はコードがあまり冗長にならなくていいですね!ぜひ今後も末永く生き残って欲しいところです。

フッターのコピーライトの所にCMS名併記

たまーに見かける「Powered By」ってやつですね。「Build with」も見かけるんですが、何がどう違うんでしょうか。
わかる方がいたら教えて欲しいです。

他のCMSに浮気してみたら、今使用している Grav CMS が使いやすくて使いやすくて、もう逆に好きが深まってしまったので、

宣伝のために書いておくのは全然ありだな!むしろこのサイトは Grav CMS で動いてるんだぜ!って言わせて!!

くらいの気持ちで記述を追加しています。

辞書の表示にdetailsタグを使ってみた

MSAの用語解説ページでしか確認できないのですが、辞書のレイアウトが少し変更になっています。

というのも、今までdlタグをCSSハックで無理やりアコーディオンさせていたのですが、HTML5 から追加になった details タグでも用途としては合うんじゃないかと思いましてそちらに置き換えをしました

この details タグ、なんと CSS や JS でごにょごにょしなくても、勝手に詳細を開閉してくれちゃうんですよ(※IE、Edge未対応)。

見出しのレイアウトはあまりいじれませんが、別に見にくくはないし問題ないだろうと。
未対応のIEとかでは、最初から開いた状態になっているみたいなので、閲覧にも問題はないだろうし。

ヘッダーを小さくした

見ての通りで、高さが小さくなりました。
スマホも横スクロール形式に変更になっています。
矢印の濃さ表示は面倒で放置。スクロールできることがわかればいいのよ!(わからなかったらごめんなさい・・・)

Epub を章ごとに分割した

ただいま想起録とかMSAとか今まで一話分まとめてEpubファイル一つで掲載していたのですが、章ごとにファイルを分割しました。
おかげで想起録三話の序章みたいにめっちゃ短いのも出てきてますが、まあ気にしない。こっちの方が閲覧しやすいかな?と思いまして。

お話詳細ページからのリンクも、各章ごとに掲載ページやサイトへのリンクを繋げるように変更になっています。

ブログ記事のコメント欄をDISQUSにした

見ての通りです。埋め込み型のコメント欄(そもそもこれも一つのSNSらしい)で、移動することあるか知らないけどこれに移行しとくともしかしたら後々楽になるかも?くらいです。

見出しのレイアウトちょっと変えた

いや、本当にちょっとだけ。


細かいところはこんなところでしょうかね。
あとはまたぼちぼち気づいたところに手を入れていきたいと思います〜。

自分のサイトをいじってる時は最高に楽しいのに、なんで仕事になるとめんどくさくなるのだろうか。