見出し画像

Django×Bulmaでデザイン革命!初心者でも簡単に美しいUIを手に入れる方法

こんにちは皆さん、タケトロです!今日はDjangoにbulmaを導入して、あなたのプロジェクトをさっぱりとしたデザインに変身させちゃいますよ!しかも、私、トロがナビゲートしますので、お楽しみください♪

さあ、まずは「トロのコツコツ」から始めますよ!

1. まずは、django-bulmaをインストール!

さて、最初にやるべきこと、それはもちろんインストール!Djangoプロジェクトにbulmaを加えるために、以下のコマンドを打ち込んで、しっかりとdjango-bulmaをインストールしてください。

pip install django-bulma

これで、さっきまで普通だったあなたのDjangoプロジェクトが、もっちりおいしそうなトロのようにリッチにデザインされる準備が整いましたよ。

2. INSTALLED_APPSにbulmaを追加して、旨みを閉じ込めよう!

インストールが終わったら、次にやるべきは設定です!プロジェクトのsettings.pyファイルを開き、INSTALLED_APPSにbulmaを追加します。これで、bulmaがあなたのプロジェクトに組み込まれた状態になります。まるで、トロの脂身がじっくり染み込んだネタのようにね!

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bulma',  # この行を追加
]

うん、これで完璧!bulmaの魔法がDjangoに加わりました。

3. 静的ファイル(CSS)の設定をしっかり確認だよ!

次に、bulmaのスタイリングを正しく読み込むための設定をします。これを怠ると、せっかくのbulmaが美味しいトロとしてお皿に乗らずに終わっちゃうかも。怖いですね。

settings.pyの静的ファイル設定が以下のようになっているか、確認しましょう。

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

この設定で、CSSがしっかり読み込まれて、bulmaのスタイルがあなたのプロジェクトに反映されます。

4. テンプレートにbulmaを追加だにゃ!

さてさて、ここまで来たら、次はテンプレートでbulmaを読み込む番です!まず、mysite/index.htmlを開き、{% load bulma %}と書かれている箇所を探して、ちゃんとbulmaが使える状態か確認してね。

もし、まだdjango-bulmaを利用していないなら、CDNを使ってbulmaを読み込む方法もあります。これがめちゃくちゃ簡単。こんな感じで、base.htmlに追加するだけでOK!

<head>
    <!-- Bulma CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
</head>

あれ?でももし、{% load bulma %}を使いたい場合は、ちょっとだけ変更が必要だにゃ!bulmaタグのライブラリ名が少し違うんです。それは、{% load bulma_tags %}と書き換えてください。

{% load bulma_tags %}

これで、Djangoテンプレートでbulmaをフル活用できるようになったよ!

5. 最後に、django-bulmaを初期化してみよう!

もし、「あれ、うまくいかない?」って時は、ちょっとだけ動いてみてください!以下のコマンドで、django-bulmaを初期化してみましょう。これで静的ファイルも収集され、bulmaが正しく機能するはずです。

python manage.py collectstatic

これで、もっちりトロのように、すべてがしっかりと組み込まれたはずです。


おまけ: トロな心意気で、あなたのDjangoプロジェクトも美味しくなったはず!

さあ、これでDjangoにbulmaを導入する準備は完了!まるで、新鮮なトロがシャリの上に乗った寿司のように、見た目も美味しさも増したあなたのDjangoプロジェクト。さっそく実行して、その成果を確認してみてください。

もし、どこかでつまずいたら、また私、トロが助けに来るからね!それでは、さっそく美味しい開発の時間を楽しんでくださいね~。


いいなと思ったら応援しよう!