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

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

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


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


↑
タイトルが長くて改行が入ると画像の横並びがそろわないので…

入らなかった文字を三点リーダで省略表示 - Qiita

を使いました。


↑
長い文字列を三点リーダーで省略する事ができました。

POTI-board用テンプレート PINK

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

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

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

フレームセットを使った古い日記のHTMLを書き直しました: STP^3

この作業で、フレームを撤去しましたが…。
スマートフォンでアクセスすると記事本体の上にメニューが並んでしまって…。

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


↑
PC。


↑
スマートフォンの時は、ハンバーガーメニューのタップでメニューが開閉。

HTMLとCSSだけ！要素の表示・非表示を切り替える方法

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

【らくがき絵日記】の過去ログはこちら。