POTI-board用テンプレートPINKをバージョンアップしました。

POTI-board改の配布用テンプレートをlot.190225にバージョンアップしました。

カタログモードをPCの時はよりギャラリー的に、スマートフォンの時はより作品を探しやすくなるようにしました。
ファイルサイズが小さくなるようにCSSを書き直しました。
横幅の指定方法を見直しました。

POTI-board用テンプレートPINKPOTI-board用テンプレートPINKPOTI-board用テンプレートPINK

iPad Pro iPad iPhoneをエミュレート。

POTI-board用テンプレートPINK

タイトルが長くて改行が入ると画像の横並びがそろわないので…
入らなかった文字を三点リーダで省略表示 - Qiita
を使いました。

POTI-board用テンプレートPINK

長い文字列を三点リーダーで省略する事ができました。
satopian/pink: POTI-board用テンプレート PINK

テンプレートのダウンロードはこちらから。

お絵かき掲示板はこちら。

古い日記の過去ログにハンバーガーメニューをつけました

フレームセットを使った古い日記のHTMLを書き直しました: STP^3
この作業で、フレームを撤去しましたが…。
スマートフォンでアクセスすると記事本体の上にメニューが並んでしまって…。

やはりタップするとメニュー一覧が出てくる三本線のハンバーガーメニューが必要…という事で…。

らくがき絵日記 レスポンシブデザイン

PC。

らくがき絵日記 レスポンシブデザインらくがき絵日記 レスポンシブデザイン

スマートフォンの時は、ハンバーガーメニューのタップでメニューが開閉。
HTMLとCSSだけ!要素の表示・非表示を切り替える方法

CSSだけでできるんですね。
inputのタップする場所をlabelで決めて、チェックボックスは非表示。
チェックが入ったら表示してはずれたら表示しない。

【らくがき絵日記】の過去ログはこちら。
posted by さとぴあ at 2019/03/01 15:54 | Web制作