ねこづきあゆむのブログ

どうも、猫月あゆむです。３日目です。明日以降、３日坊主にならないことを祈って書いてます。 今日は、細かいけどでかい変更祭りです。 今日の機能追加今日は色々追加したので、一つずつ説明します。 ① 共有ボタンを追加しました。この記事の一番下とかに共有ボタンができてます。よかったらここから拡散よろしくね。 ② コメント機能を追加しました。DISQUSというコメント機能を追加しました。記事ごとにコメントを付けれます。コメント書くときのマナーは守ってね コメント機能について - About ③ 404 ができましたできてしまいました。ページがないところに行くと自動的に404に飛ばされます。404に共有ボタンはないけど、コメント機能あえて残してるので、雑談にでも自由に使ってくださいｗｗ 404 - Page not found ④ RSS / サイトマップができましたテレビちゃんの右のアイコンからRSS見れます。 RSSリーダーをお使いの方はご利用ください。 サイトマップもできました。検索から人が来やすくなる…はず…（たぶん） ⑤ Googleアナリティクスを導入しました導入したところで…ほぼ見ないと思う。気になる方はCookieをオフにお願いします。 データ収集について - About ⑥ トップページに「お知らせ」を作りました。無理やり感半端ない。 日付10年後になってるしｗｗいつか、初来訪時のデフォルトをナイトモードにしたいです。（今はライト） 今日の変更変更点はそこまで無いです。 ① フォントを変更しました。「今」とかの漢字の中国感がなくなったと思います。 ② カテゴリページへの動線を消しました どうせカテゴリ設定しないし。タグ乱用するひとなので、タグ一覧からどうぞ。 タグ一覧 カテゴリ一覧 ←からっぽ ③ 記事最後のタグ表記を ＃ から に変えました一番下、共有ボタンの上です。後で見てみてね おわりにざっとこんな感じです。変更点の羅列だけで結構長くなっちゃいました… 今後の予定今後の予定はこんな感じ。 ・カスタム絵文字の追加 hexoブログの作成がある程度終わったあと・今年度の新ポートフォリオ作成・猫月あゆむPORTAL(β)の改修 ブログ改修も残り少しとなりました。その後何しようかなって考えとかないとですね… というわけで今日はココまで。ノシノシ document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });

ども、猫月あゆむです。 だいぶデザイン変わりましたね。それもそのはず。テーマを変えました。 個人的に、いわゆる「ダークテーマ（ナイトモード）」が好きで、最初に入れた「gal」というテーマと、「Amazing」というライト＆ダークが切り替えられるテーマ。どちらにするかめっちゃ悩んでました。 ▼ 昨日のスクショ（テーマ「gal」のリメイク） なんで変えたの？前回お話した、「背景チカチカ問題」が修正できず、ただ時間だけが流れてしまっていたので、いっそテーマを変えてみようということになりました。 当初悩んでいた「Amazing」はダークモードへの切り替えができたんですが、「Icarus」というテーマをベースに追加追加してできていたものだったので、日本語への翻訳・細かい箇所の修正ができませんでした。 そんなとき、「Amazing」ダークモード変更の根幹部分のものを見つけたんですが、確認してみたら、Amazing入れるよりよっぽどやりやすい！ということで、結果「Icarus」+ night をテーマとして選択しました。 サイト右上の電球をクリックで明るくなります。 「Icarus」nightの導入方法はコチラ ※ 英語＆中国語 今日やったこと今日は、上述した テーマの変更・導入・各所修正 をしました。 次に、「サイトロゴ」「ファビコン」を設定しました。サイトの上下にある「ねころぐ」っていうやつと、タブのところにあるアイコンです。なぜかSVGで作ったら読み込んでくれなかったので、仕方なくpngです….. それともう一つ。お気づきの人もいるかと思います。自作Webフォントを追加しました。 今回導入したのはこの２つ。 ニコニコテレビちゃんと新しい生放送のアイコンの子。 fontawesomeさんと競合しちゃってずっと奮闘してましたが、なんとか導入できました！！右上フォローボタンの下にずっといる予定です。 今後の予定ざっとこんな感じです。 ・記事下共有ボタン追加・Aboutページの作成・カスタム絵文字の追加・RSSの追加・サイトマップの追加・フォントを日本語ベースに(特に漢字) hexoブログの作成がある程度終わったあと・今年度の新ポートフォリオ作成・猫月あゆむPORTAL(β)の改修 って感じです。昨日よりは減りましたｗ というわけで夜も遅いので今日はココまで。ノシノシ～ document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });

※ 現在各所調整中なので、背景チカチカしたり、ところどころ崩れちゃったりしてます。後日治すのでそれまでお待ちを….！ はじめまして。猫月あゆむです。普段はニコニコ生放送で放送してたり、バーチャル空間で遊んでたりしています。リアルでは、高校3年生です。 これまで、ブロマガ → WordPress → ブロマガ と使ってきたんですが、なかなかオリジナリティを出せず、あまり書けていませんでした。そんなとき、友人の一人がhexoでブログを立てているのを見て、これちょっとやってみようということで作っています。 「hexoでブログを立てるシリーズ」では、このブログを作る上で起こった小話をちょこちょこ投稿できたらなと思っています。技術寄りのやつはQiitaに持っていくので、そこまで難しくないよ～～ と、ここまで書きましたが。hexoでまともなブログ文章書くの、これが初めてなんです。いざプレビューしてみたら、フォントが変！なに、タイトルのちっちゃい「つ」ww 大きくなってるしwまぁテーマが中国の方のものをお借りしているので、自力で修正するしかないんですけどね….（後日やります） とりあえず、話を戻しますｗ その１：数回リセットした話。というのも、試行錯誤の繰り返しでした。 1度目。導入に成功するものの、GitHub Pagesで正常に公開できない。なんでだろ～と小4時間探した末、わからなかったので全消去して再度入れ直しました…. 2度目。↑でダメならnetlifyを使おう！ってことでセットアップ始めて、1度目終わりのところまで来たんですが、その後がエラー祭り。頭の中が全て？？？で埋まって思考停止したので、その日は諦めました。 ネット超会議が過ぎ、昨日。 そう言えばということで3度目の構築をはじめました。やはりエラー祭りでしたが、なんとか構築できた～よかったねという話でした。 その２：背景がおかしい現在進行系でおかしいです。 背景、スライドショーになってて（PC/Tabのみ）、特定ディレクトリ内をランダムで流してくれるんですが、はっきりいって鬱陶しい。ということで切りたいんですが、今の所切り方を見つけられてません。 なので代替策で、白画像用意して1枚だけにすれば…！って思ったんですけど、なぜかブラウザが落ちる（←なぜ？？？） 1枚ダメ、2枚ダメ….というふうにしていって現在6枚で動作中です。 なんとかしてスライドショー切りたい…. その３：これはココ！っていうのを探すの楽しいｗhexo って普通のHTMLブログのいわば “ジェネレーター” なんですよ。なので、サイドパネルのところとかバッラバラに分散してて、それがどこにあるのか探すの楽しかったです。 そして案外、簡単な仕組みで書かれていることを知ったので、数分でTwitterとかも埋め込んでみましたｗ 結構オリジナリティ出せそうですが、流石にテーマ１からというのはレベルが高そうです。 おわりに。今後の予定ということで簡単な小話でした。 今後はこんなことをやる予定です。 表示崩れ/バグ修正・背景のチカチカ・フッターが読みづらい・検索ボックス入力時、表示がうるさい・検索システムが動いてない・中国語→日本語の翻訳作業 仕様変更・各リンクなどのベース色をきみどりに・フォントを日本語ベースに(特に漢字) 追加機能・カスタム絵文字の追加・RSSの追加・サイトマップの追加・ロゴ/ファビコン作成・各記事からのSNS拡散ツール導入 hexoブログの作成がある程度終わったあと・今年度の新ポートフォリオ作成・猫月あゆむPORTAL(β)の改修 やることたくさん……バイトがコロナの影響でお休みになってる今、できるだけじゃんじゃんやりたいことをやっていこうと思います！！ それでは今日はここらへんで。ノシノシ document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });

どうも、猫月あゆむです。一気に投稿数増えましたねｗ それもそのはず、WordPressとブロマガから過去記事をインポートしました。 なぜインポートしたの？過去の自分の記事を１箇所で確認したかったからです。 数年前、自分はどんなことをしていたのか、この出来事はいつだったのか。たとえ黒歴史であっても、（よっぽどじゃなければ）数年後笑って過ごせると思いますｗ どうやったの？WordPress編こちらを利用させていただきました。 WordPress管理ツールのエクスポートから記事データをxml形式で全て引っ張り出し、↑のツールを使ってインポートします。 あとは、全記事のカテゴリ・タグを自らの手で修正して、全記事の上部にインポートした旨のメッセージを入れました。 ブロマガ編ブロマガには「エクスポート」機能は存在しません。なので全て手動です。疲れました。 最後に全手動はきつい。 一応過去ブログも消えてるわけではないのでよかったら見てね document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });

どうも猫月あゆむです。ブログ構築2日目の記事 で、自作フォントを導入したよ！っていうお話をしたと思います。ツイッターで質問が来てたのでそれの詳しい解説です。 導入方法導入方法自体は結構簡単でした。 参考：Webアイコン「IcoMoon」の使い方とアイコンの追加方法 まず、フォント化したい画像、アイコンとかを SVG 形式で用意します。画像が用意できたら、icomoon というサイトを利用してフォント化します。 フォント化方法ざっとこんな感じ。わからないことあったらコメント欄へGO 右上インポートからSVGを読み込む 入れたいアイコンを選択し、右下「Genelate font」をクリック アイコン名、大きさなどを調整 画面右下ダウンロードの隣の をクリック 項目を以下のように改変 理由としては、 Class Prefix　fontawesomeとの競合避けその１ Use i　hexoで色んな所で使うにはfontawesomeと合わせないと、_config.ymlから編集できない（うまく反映されない） って感じです。 設定できたらダウンロード。 hexoへ導入ここから先は、利用しているテーマによってかなり変わってきます。当ブログでは「Icarus」を利用しているのを前提に解説します。 まず、DLしたファイルを以下のように配置します。 12345678910blogdir/ └ themes/ └ icarus/ └ source/ ├ css/ ├ img/ └ fonts/ //なければmkdir ├ style.css //DLファイル ├ selection.json //DLファイル └ fonts/ //DLファイル 次に、head.jsx を編集します。head.jsxは以下の場所に格納されています。 1...blogdir/themes/icarus/layout/common/head.jsx そして以下のように書き換えます。 head.jsx1234- <link rel="stylesheet" href={iconcdn()} />+ <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.13.0/css/all.css" /> + <link rel="stylesheet" href="/fonts/style.css" /> _config.ymlで指定している fontawesomeを切って、直で読み込ませます。あと、さっきの自作フォントも読み込ませます。 直で読み込ませてるのは競合対策です。 これで、<i class="icon2-niconico"></i> ってすると 読み込めます。 おまけ：プロフィールに自作フォントを使うthemes/icarus/_config.yml12345678910111213social_links: Github: icon: fab fa-github url: 'https://github.com/AyumuNekozuki' Twitter: icon: fab fa-twitter url: 'https://twitter.com/nekozuki_2525' niconico: icon: icon2-niconico url: 'https://www.nicovideo.jp/user/45048152' RSS: icon: fas fa-rss url: /atom.xml 以上。何か質問あったらコメント欄へどうぞ。 最後に一言。アウトプットは大事。 document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });

３日坊主にならなくてよかったよ。どうも猫月あゆむです。 今日はトップに画像はありません。画像貼っちゃうとトップページに乗ったときにくっそ長くなってしまったので… ということで、画像を貼ります。ペタリ そう。今日はスマホです。docomoユーザーで、充電が84%で…とか言う話ではなくて、 PWA のお話です。 PWAとはなんぞや？ PWA（Progressive Web Apps）はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ（サービス）にWebとアプリの両方の利点を兼ね備えた仕組みのことです。 引用元 : Webディレクターが知らないとマズい！Googleの注目プロジェクトPWAって何？ らしいです。簡単に言うと、Webサイトをアプリケーション化すると言ったほうがわかりやすいでしょうか。 Twitterとか、ニコ厨だったらわかるビビットアーミー（広告がうるさいやつ）なんかも対応してます。 PWAの利点利点としてはこんな感じ。 ・アドレスバー、タブボタンとかがないので、誤タップが減る・各OSのアプリストアを使わなくて良い　→ 審査で引っかかることがない・GPS取得ができる（IPアドレス補足じゃなくてガチのGPS）・プッシュ通知ができる 利点でも欠点でもない（人による）・ブラウザ → メニュー → ホーム画面に追加しないと使えない 欠点・https（SSL）じゃないと使えない ざっとこんな感じです。 利点でも欠点でもないやつは、アプリストアを使わなくて良いという利点と、ホーム画面に追加が初見勢にとってはわかりにくいという欠点が合わさってできているから。 なぜ導入したの？ねころぐに導入したのは、単に興味本位です。簡単に導入できるライブラリがあったので、入れてみました。 一応Aboutにも書いてますが、GPSなどの位置情報は取得してないし、今の所プッシュ通知も行かないと思うので大丈夫です。 他の変更点その１、GitHub Emoji を導入しました。😄ホントはTwemojiを導入したかった。いずれTwemojiに変わってると思います。 その２、リポジトリに MIT License を付与しました。詳しくは About ページ、メインリポジトリのRead.mdをご確認ください。 当ブログに書いた、猫月あゆむ個人の発言は CC BY-ND 4.0 で利用可能です。 また、後術するGitHubリポジトリに記載されている当サイトのデータは MIT ライセンスで利用可能です。 引用元 : ねころぐについて おわりに今日で、カスタム絵文字以外のブログ構築が終わりました。カスタム絵文字は、絵文字データを登録するだけ（GitHubEmojiさんにカスタム機能がついてた）なので、暇なときにでも追加していくと思います。 せっかくここまで、連日ブログを書いてるので、明日以降も何かしらのブログを書こうと思います。 明日からは、今年度のポートフォリオを作成します。デザイン案とかは結構前にできてるので、中身をバンバン作っていくよ～～お楽しみに。 後でもう１本ブログ上げるかも。ノシノシ document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });