サイトをスマホで表示したとき下端にメニューバーが表示されるようにする

スマホの場合は、画面下端の方が圧倒的にタップしやすく、スマホアプリは大体画面下部に重要なナビゲーションが並んでいる。 本サイトもそれに倣って改修する。 環境 Django v2.1.4 Bootstrap v4.2.1 スマホのみに表示する Bootstrapの機能を使う。 以下のようにHTMLに記載すれば、スマホ(画面サイズ768px未満)の場合のみ表示される。 <div class="d-block d-sm-none">スマホのみ表示</div> iPhone8の画面サイズで表示すると以下のように最下部に"スマホのみ表示"というテキストが表示されるが、 iPadの画面サイズで表示すると"スマホのみ表示"というテキストが表示されなくなる。 参考 表示ユーティリティ~Bootstrap4移行ガイド 下端に固定する CSSで実装する 表示位置を絶対位置で指定する。 以下のようにCSSで指定することで画面下端に要素を固定できる。 /* スマホ用画面下端メニュー */ .footer-menu-bar { position: fixed; /* 要素の位置を固定する */ bottom: 0px; /* 絶対位置を指定する(下0px) */ } ただ、この方法だと他コンテンツと重なって表示されてしまうので他の用途に使う場合は注意。(今回の用途としては重なっても問題なしとしている) 参考 【css】フッターをページ下部に固定する方法【お手軽コピペ】 | Pで作業軽減しましょ 横並びでリスト表示する Bootstrapの機能を使ってリスト表示を実装する。 HTMLを以下のように変更する。 <div class="d-block d-sm-none">スマホのみ表示</div> ↓ <div class="d-sm-none d-block footer-menu-bar w-100 border-top"> <div class="row m-2"> <div class="col"> TOP </div> <div class="col"> 検索 </div> <div class="col"> タグ </div> </div> </div> 表示は以下のようになる。...

May 31, 2020 · 2 min

Djangoで記事をカード型で表示するようにした

参考サイト Bootstrap公式ドキュメント https://getbootstrap.com/docs/4.3/components/card/ Card decksの部分をほぼそのまま使った。 css部分は以下のQiitaの記事を参考にさせていただいた。 https://qiita.com/iwato/items/840b831ad66fec0dd4c1 コード html <div class="col-sm-4"> <div class="card card-link post-card"> <a href="{% url 'posts:post_detail' post.id %}"></a> <img class="card-img-top" src="{{ post.middle_image.url }}" alt="thumbnail"> <div class="card-body"> <h5 class="card-title">{{ post.title }}</h5> </div> <div class="card-footer"> <small class="text-muted">published at {{ post.published|date:"Y/n/j" }}</small> </div> </div> </div> 一行に最大3つ記事を表示するためにcol-sm-4を指定している。 記事のサムネイル、タイトル、公開日を表示するようにしている。 css /*div要素全体にリンクをつけるために必要な要素*/ .card-link { position: relative; } .card-link a { position: absolute; top: 0; left: 0; height:100%; width: 100%; } .post-card { margin-top: 5px; margin-bottom: 5px; } カード全体にリンクをつけるために....

October 3, 2019 · 1 min

Djangoでタグクラウドを実装した

参考ページ https://programmer-jobs.blogspot.com/2012/12/djangodjango-taggit.html django-taggitとdjango-taggit-templatetagsがあればできるらしい。 実装した流れ 1 setting.pyを確認し、taggitが導入されていることを確認(taggitは昔すでに導入済み) ただ、taggit-templatetagsは導入されていなかった。 2 pip install django-taggit-templatetagsでインストール 3 setting.pyのINSTALLED_APPSにtaggit-templatetagsを追加 INSTALLED_APPS = ( ... "taggit", "taggit_templatetags", ... ) 4 pip freezeでインストールしたtaggit-templatetagsのバージョンを確認 $ pip freeze ... django-taggit-templatetags==0.2.5 ... 5 requirements.txtに4.で確認したバージョン情報を追記 ... django-taggit-templatetags==0.2.5 ... 6 デプロイ 7 動作確認したらエラー発生 File "...templatetag_sugar/parser.py", line 5, in <module> from django.db.models.loading import cache No module named 'django.db.models.loading' django.db.models.loadingがないらしい。 google先生に聞くと、django.db.models.loadingはDjango1.9で廃止され、現在はdjango.appを使う必要があるようだ。 https://stackoverflow.com/questions/36234635/what-is-the-equivalent-of-django-db-models-loading-get-model-in-django-1-9 8 tamplatetag_sugar/parser.pyを修正 - from django.db.models.loading import cache + from django.apps import apps ....

September 15, 2019 · 1 min