長年の夢、叶う💫


初めてのポートフォリオサイトを公開した頃から、ずっと「自分のサイトでブログを書く」ことに憧れがありました。


憧れてはいたものの、実際あんまり文章を書く習慣はなかったし、アウトプットに対する恐怖心みたいなものも強かったので、即実行!とはいかず・・・気づけば1年。

そして今日。


ポートフォリオサイトを一新し、ついにブログを開設することができました!!!🎉🎉🎉


ということで、この記事ではブログサイトを持てたことへの浮かれっぷりを伝えさせていただきます!!

すでにある機能

初回実装では「ズボラな自分でもストレスなく使い、記事をやんわり公開できる」ことを目標に、機能実装を行いました。


ということで、こだわりの機能について紹介。


画像がつけられます


キャプションもつけられます
キャプションもつけられます

サイズも変えられます。

ちっちゃい
ちっちゃい

記事にOGP(リンクカード)がつきます

サイトテーマに合わせたOGPを出せるようにしました!💜

星空が推しポイントです
星空が推しポイントです


このデザインに辿りつくまでに色々候補がありました。せっかくなので載せます:


Zennすぎる
Zennすぎる

なんかのっぺりしてる
なんかのっぺりしてる

真ん中が薄ピンクでイマイチ締まらない
真ん中が薄ピンクでイマイチ締まらない

自分好みのOGPが出せるってだけで、かなり執筆モチベ上がりますね。🎶


もちろん、コードブロックも出せます

// わーい
System.out.println("Hello World!");

ダークモードではみんな大好きDracula Theme、ライトモードではRosé Pine Dawnを使用しています。


Dracula Themeに関しては前からエディタ上で愛用していたのですが、Rosé Pineとは今回がお初でした。ピンクで目にも優しくてかわいいので、さっそくお気に入りにIN!


ライブエディタで編集できます

Crepeを使ってマークダウンを書いています。CrepeはMilkdownというエディタフレームワークの公式プリセットで、UIまで一式ついてきます。


リッチエディタに欲しい機能が大体built-inで揃っていて、めちゃくちゃ便利です。

特に良いなと思ったのはBlockEdit機能です。私のブログでは、これを使ってスラッシュメニューからh1を消しています。

[Crepe.Feature.BlockEdit]: { textGroup: { h1: null } },

ただしメニューから消えるだけなので、# と打てばh1は書けてしまいます。記事のh1はタイトルだけにしたいので、公開するときに自動でh2へ落とすようにしました。

個人的に嬉しいところ

Zen Maru Gothicが最近かなり好きで愛用しているので、執筆も閲覧もこのフォントでできるのがだいぶアツいです。


あと、好きなカラーテーマで編集できるのはやっぱりテンションが上がる!🖤💜💗🤍


今後追加したい機能

  • OGPを取得できるようにしたい
  • リンクを自動で認識できるようにしたい
  • タグとかつけられるようにしたい
  • いいね機能をつけたい
  • 外でも書けるようにしたい
  • せっかく私のサイトで読んでもらっているので、背景とかで特別感を出したい・・・!
    • 派手にならない程度で。

まとめ

ということで、ポートフォリオ公開記念にブログを書いてみました!✏️


私の今年の抱負に「技術記事を公開する」というものがあります。(実は、Zennにはイベントレポートしか上げたことがない)


このポートフォリオサイトがモチベーションになれば、あと4ヶ月のうちに超技術系アウトプット最強武者になるかも・・・⁉️💓

・・・そんな気持ちで、今後もゆるゆるとサイトとブログを更新していきたいです。


引き続き、よろしくお願いします〜!!