皆さんこんにちは、雪だるまです。
今回は、habiticaのタスクに画像を挿入する方法をご紹介したいと思います。
画像を挿入することで、以下のように、よりゲーム感のあるデザインにすることができます。
ぜひ最後までお付き合いください。
1. 画像を挿入する方法
あまり知られていませんが、実はhabiticaでは、画像を埋め込むことができます。
デバイス内から画像を直接アップロードすることはできませんが、画像URLを埋め込むことで、画像を挿入することが可能です。
タスクに画像を埋め込む方法はとても簡単です。
タスクのメモに
を入力するだけ。
詳しい情報は、公式の説明に書いてありますが、マークダウン記法を使用して画像を埋め込みます。
ちなみに、タスク以外にも画像を埋め込めるようです。
- タスクやごほうびのタイトル、メモ、チェックリスト
- ギルド、パーティー、チャレンジのタイトル、概要、説明
- ギルド、パーティー、キャンプ場の投稿
- プライベートメッセージ
- プロフィールの文章
では、実際にブラウザ版で画像を埋め込んでみましょう。
上手くいきましたね！
次は、スマホアプリ版で確認してみましょう。
あれ？
なんか小さい…。
残念ながら、スマホアプリの場合、このように小さく表示されてしまいます。
でも、ご安心ください。
画像のサイズを調整する方法があります！
次は、スマホアプリ版で画像サイズを調整する方法を解説していきます。
2. 画像サイズを調整する方法
画像サイズを調整する方法もとても簡単です。
「半角スペース×2、改行、全角スペース×サイズ分」を追加するだけ。
よくわからないという方は、以下のテキストを参考にしてみてください。
黄色い部分が半角スペース、青い部分が全角スペースになっています。
どうやら、スマホアプリ版の場合、画像サイズはメモ内のコンテンツの長さに依存するようです。そのため、全角の空白を画像の下に加えることで、疑似的にコンテンツの長さを作り出しています。
また、マークダウン記法の都合上、通常の改行では改行することができません。
マークダウン記法のルールに従って、半角スペースを2つ挿入してから改行しましょう。
さらに、全角スペースではなく半角スペースを使用した場合、メモ内のコンテンツとして認識されませんのでご注意ください。
実際に「半角スペース×2、改行、全角スペース×8」を追加すると、画像のようになります。
先ほどと比較して、ちょうどいいサイズになりましたね！
画像サイズをもっと大きくしたい、小さくしたいという方は、全角スペースの数を調整してみてください。
3. まとめ
今回は、habiticaのタスクに画像を埋め込む方法について解説しました。
以下の記事では、タスクをクエストやモンスターのようにアレンジする方法をご紹介していますので、興味がある方はぜひ、こちらの記事もご覧ください。
