Bracketsでブログをカスタマイズ

HTML5のお勉強 articleとsectionとか - Qiita

HTML5では構造化タグと呼ばれる新しい要素(タグ)が追加され、
「ヘッダは<header>で囲み、フッタは<footer>で囲む」など、構造が明確になったといえる。
間違った理解をしている可能性もありますが…。
<header>...</header>
<article>...</article>
<nav>...</nav>
<aside>...</aside>
<section>...</section>
といった構造化タグをサイトやブログに追加する作業を行いました。

<div>...</div>の開始タグと閉じタグがわからなくなってしまうと、HTML5の構造化タグを追加…どころか表示が崩れてしまいますが…。

Brackets FC2ブログ カスタマイズ

FC2ブログのHTMLをBracketsで編集。
ChromeのElementsのように折りたたむ事ができるので、開始タグと終了タグの位置関係がわかりやすい。

Brackets さくらのブログ カスタマイズ

さくらのブログのコンテンツHTML、記事のカスタマイズ。
ifの分岐がたくさんあっても、折り畳む事ができるからわかりやすい。
「Brackets」オープンソースで開発されているWebアプリ開発向けのコードエディター - 窓の杜ライブラリ

オープンソースで開発されているWebアプリ開発向けのコードエディター

フリーソフト
対応環境 : Windows Vista/7/8/8.1(64bit版を含む)
作者名 Adobe Systems Incorporated and its licensors
使いやすいエディタですね。HTMLエディタで検索しても見つからないと思ったら、プログラム向けエディタに分類されていました。
Dreamweaver8が動かなくなったらAtom?
でもAtomでサイトを作るのは…大変…と思っていましたが、Bracketsなら。
しかし、Dreamweaver CCを開発、販売しているAdobeがBracketsを作っているわけでAdobeにどんなメリットがあるのか…。

AtomVisual Studio Codeも無料…。

MediBang PaintLibreOfficeも無料…。よく維持できるなぁ…と思います。

P.S
構造化タグを追加したのにレイアウトは<div class="hoge">...</div>のまま…。
「レイアウト目的での構造化タグ使用はしない」と言う記述がQiitaにありましたが、HTML5では<div>の使用は最小限…だったような。
古いブラウザにも対応させたかったので構造化タグをレイアウトに使わないようにしましたが、HTML5本来の文法はどうなのか…ですね。
posted by さとぴあ at 2018/03/19 22:07 | Web制作

CSSの文法をチェックしてくれるbrackets-csslintを使ってみました

GitHub - iwehrman/brackets-csslint: CSSLint extension for Brackets
Brackets brackets-csslint

セレクタにIDを使わないでください。
セレクタにID3つマジですか?
0に単位を入れないでください。
marginの指定はまとめる事ができますよ?
見出しのタグを装飾しないでください。

英文のエラーメッセージをコピーする事ができれば、Googleで翻訳できるんだけどなぁ…と思いながら目視で確認しながら英文をタイプして翻訳…みたいな事をやりました。
C:\Users\hoge\AppData\Roaming\Brackets\extensions\user\brackets-csslint\thirdparty\csslint.js

拡張機能の中身はjavaScriptなので、コードのエラーメッセージ部分をコピーして翻訳の一覧をあらかじめ作っておくとか?

該当エラー行の確認作業をしていたら…
<h2 class="title"><a href="hoge">hoge</a></h2>
の装飾がh2とtitleで二重指定されている事がわかり修正…。このブログのCSSなんですけどね。

Atomのlinter-csslintは、なぜか動作しない…。

Brackets コードの折りたたみ

コードの折りたたみ。

秀丸も、Atomもコードの折りたたみに対応していますが…。
Bracketsは要素単位で折り畳めるので、例えば
<head>...</head>
は折りたたんで作業したい時といった時に便利ですね。
本文の修正作業だけに集中したいのに、途中にjavaScript。うっかりいじってjavaScriptのコードを壊したくない…という時も折りたたんでしまえばいいので助かります。
Brackets 1.0:テーマカラー89種類まとめ - Qiita

約1年前の記事なのでそんなに変わってないだろう…と思いながら、テーマをインストール。
目が痛くならないコントラスト+可読性…。

なかなかいいものがみつかりません。

Atom1.24のダークカラーと同じにできたらいいのになぁ…と思ったら。
GitHub - moritzw1/one-dark-theme-for-brackets: Inspired by One Dark Theme for Atom Editor.
Atom1.24とほぼ同じ背景色と文字の色。
とても見やすい…。
AtomとBracketsを行き来する時にも困らない。
1年前の情報はすでに古い…という。

Brackets テーマ New One Dark

テーマ、New One Dark。

Atomにあって、Bracketsに無いもの…。
linter-htmlhint
でも、Atomでエラーを確認したら、修正作業はBrackets…みたいな感じに。
<p>...</p>のように<p>のタグを閉じるべきなのですが、古いHTMLエディタのソースが残っていて閉じられていない状態で20年とか…。Atomのlinter-htmlhintはこのタグのとじ忘れを指摘してくれるのでわかりやすいんですよね。

でも、タグが閉じられているかどうかを確認する作業はタグがハイライトされるBracketsのほうが…。
AtomでもBracketsのようにタグをハイライトさせる事ができるのかもしれませんが…。
タグ:HTML CSS Atom Brackets
posted by さとぴあ at 2018/03/12 20:06 | Web制作

Bracketsを使ってみた

HTMLやCSSを書き慣れていない人にオススメ、無料のテキストエディタ「Brackets」 | 簡デザ −かんたんデザインブログ−

すごいのは、HTMLやCSSを書いたすぐそばから反映してくれること。保存とか、再読み込みとかしなくてもすぐに反映されるので、見ながらコード書いたりもできます。
史上最強のエディタBracketsに出会ってしまった | Planner(プランナー) クリエイティブの壺ツボ

初期搭載されている機能がすごい
コーディングを超加速するBrackets便利エクステンションまとめ - WEBCRE8.jp

便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているclassとIDが、属性値の記述時にコードヒントとして出てきます。
Atomを最近知ったばかり…。
そんな人が書いている記事なので、詳しい情報は上記リンク先をみたほうがいいと思います。
ただ、バージョンによって挙動が異なるようで…。

Chromeが再起動される欠点がある、デベロッパーツールが使えない→Brackets1.12+Chrome64では問題ないようです。
Bracketsのライブプレビューを使うと、別のユーザープロファイルを持つChromeが多重起動。デベロッパーツールを使う事もできる…と思います。
こちらで把握しきれていない何かがあるのかもしれませんが…。
Shizimily Multi-Encoding for Brackets
Brackets1.12はUTF-8、Shift_JISを自動で判別します。
Brackets1.12にShizimily Multi-Encoding for Bracketsをインストールすると、動作しなくなるため注意が必要です。

これまでDreamweaver8で行ってきた趣味のWebサイトの維持管理ができれば問題ないので、すでに作成しているコンテンツで試してみました。

Brackets
Brackets

画像の挿入。

画像ファイルを一覧から選ぶだけ。
タグも、Emmetという拡張機能をインストールしていればimgと書いてTabキーを押すだけで
<img src="" alt="">
まで入力される。

Brackets

右クリックでCSSのクイック編集。

リンクしていないファイルの一覧も出てくるから面倒…と思いましたが、IE8用の設定まで見渡す事ができたり…。

Brackets

CSSの定義一覧。クリックすると該当行に移動。

Brackets

HTMLエンティティのエンコード。

Brackets

ライブプレビュー。ブラウザを選択すると、ソースの該当箇所のタグがハイライトされる。ソースを選択するとブラウザの該当箇所がハイライトされる。
ソースを編集すると、保存していなくてもプレビューに反映される。

Dreamweaver8でもプレビュー画面をみながらソースを編集、という事が多かったのでこれで十分です。
Brackets CSS Class Code hint
Brackets Icons
CSSFier
Emmet
Highlight Multibyte Symbols
More HTML5 Code Hints + Fat-Free Framework Template Tags
右クリック拡張
W3C Validation (by Umoxfo)

Bracketsにインストールしている拡張機能。
posted by さとぴあ at 2018/03/10 09:18 | Web制作

Dreamweaverの代わりになるHTMLエディタ

Dreamweaver8を使い続けてきましたが、CSS3に対応していないため表示を確認する事が難しくなってきました。
またWindows7で起動するとアイコンに盾マーク。Windows10で動作するのかどうか…。

Dreamweaverの最新版を買えばいいのでは?と思いましたが…。
Adobe Dreamweaver CCの購入 | webデザインソフトウェア

Creative Cloud単体プランが2,180円/月(税別)、または、26,160円/年(税別)です。
毎年2万6千円…。
Dreamweaver8を、2006年に46,190円で購入、12年使いました。

46,190/12=3,849円/年とコスパ良好…。

これが、毎年2万6千円になったら…。

ホームページ・ビルダー21は…。

HTML5、CSS3に対応。12年前のソフトより、もしかしたら使いやすいかもしれない…。
と思いましたがダメでした。

HTMLがわからない人でも使えるソフトとして開発しているからなのか色を16進数で「#666666」のように6桁で入力したいと思っても、16進数による入力は2桁ずつ…。

CSSの編集…。
なぜ何通りものCSSの編集モードがあるのかわからない…。
従来の操作方法を残しながら機能を追加したから…でしょうか?

BlueGriffon

Netscape Composerの末裔。
フリーソフト、拡張機能は有料。

テキスト入力には使える…と思いましたが、phpを読み込んで保存してみたところコードが壊れて…。
本文中の「>」が「&gt;」に書き換えられました。

親切な機能なのですが、phpのプログラムの書き換えは…。

StyleNote

UIが…。何をどうすればどうなるのか…。

Aptana

高機能なWebオーサリングツール…のようなのですが、こちらの回線が遅いからなのか、サーバーが重いからなのかダウンロードに何度も失敗。

やっとダウンロードできた…と思ったらインストールに失敗。
ソフトウェアの使い方を覚えたらずっと使いたいのに、これでは…となりました。

Atom

学習中。

「d」と一文字入力して、候補から「div」を選ぶと…。
<div class="">
 
</div>
まで入力してくれる。

Atom

Atomで三色旗を作ってみました。

Brackets

Brackets

Bracketsでライブプレビュー。

ソースを選択するとChromeの該当箇所が強調表示され、Chromeの表示を選択するとソースの該当箇所が強調表示される。

WYSIWYGじゃなくても、ここまでできれば…。
右クリックからのCSSを編集時は、どのCSSファイルを編集しているのかを確認しなければいけないようです。気がついたらそのHTMLからはリンクされていない別のCSSファイルを編集していました。

Google Chrome。

Chrome デベロッパーツール

ブラウザですが…。
ASCII.jp:CSSの修正が捗る「リアルタイムコーディング」とは|Web制作が3倍速くなるChromeデベロッパーツールの使い方

Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。
CSSの編集方法がDreamweaver8と近い。
DevTools ワークスペースによる永続化の設定 | Tools for Web Developers | Google Developers

デフォルトでは、変更点を外部エディタに手動でコピーして貼り付けておかなければ、ブラウザを最新情報に更新すると、変更内容は失われます。
ワークスペースを使用すると、Chrome DevTools を使いながら、このような変更点をディスクに永続化できます。
chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法 | ぶちねこどっとうぇぶ

改めてChromeデベロッパー・ツールの公式マニュアルを読んだところ、ローカルファイルを直接変更・保存しながらコーディングする方法を知りました。
これができれば、Chromeで十分かも…と思いましたがなぜかできません。

Chrome デベロッパーツール ワークスペース

ワークスペースの設定画面に、バグでマッピングができないからレポートして…と…。

Chromeを多重起動しているからなのか…。

マッピングできなくてもワークスペースに作業フォルダを登録する意味はあるようで…。

Chrome デベロッパーツール

XAMPPを使ったlocalhostの表示なのに、表示しているローカルフォルダの色が変化し、表示しているファイルに緑色のマーク。

ワークスペースに登録している任意のフォルダやファイルを開いてソースを編集できる。
エディタはHTML、CSSの入力を補助してくれる。

Chrome デベロッパーツール

選択したHTMLのElementsを選択してElementsのソースをコピー。
Ghromeの「要素の検証」のElementsの内容をコピー | サイバーキューブ開発メモ
プログラムを実行した結果得られたHTMLをそのまま保存してもあまり意味が無いので、該当箇所だけコピーしてテンプレートを編集…という作業のための機能なのかもしれません。

いろいろ使い比べてみて、一番使いやすかったのはGoogle Chrome…いや、それブラウザだからという…。
Atomや、BlueGriffonも併用する事になると思いますが、今あるサイトを簡易的にメンテナンスするだけなら、Chromeがあれば…。

CSSの調整はDreamweaver8より簡単。

新規ルールを設定したり、idやclassを割り振る作業にはDreamweaver8を使ったほうがいいのかもしれません。しかし、すでに設定されているCSSの数値の変更はChromeのデベロッパーツールでリアルタイムで変化する画面を確認しながら作業したほうが早くて確実…でした。

追記。

ワークスペースにフォルダを追加してもマッピングできないと書きましたが…。
デベロッパーツールで変更すると、ローカルのCSSも変更されていて…。
デベロッパーツールで加えた変更がリアルタイムでローカルに保存できればいいわけですから、この設定で問題ない事になります。
Mapping are inferred automatically.
翻訳してみたら…自動的にマッピングしたよ…。
posted by さとぴあ at 2018/03/04 21:31 | Web制作

お絵かき掲示板の入力フォームにautocomplete属性を設定

設置しているお絵かき掲示板のコメント欄の入力フォームにautocomplete属性を設定しました。

Chromeのパスワード保存機能に対応させるためです。

autocomplete属性 お絵かき掲示板autocomplete属性 お絵かき掲示板

右、BBSNote。左、relm。

autocomplete属性を設定したので、名前+パスワードで保存できるようになりました。

これまでは、URL+パスワードでした。
URLを変更するとその組み合わせて再度パスワードを記憶…というおかしな事になっていました。

POTI-board、は題名+パスワードで、題名を書き換えるたびにパスワードを記憶していました。

<input type="text" name="name" class="post_input_text" autocomplete="username">

名前のところにautocomplete="username"といれただけですが…。

autocomplete属性 お絵かき掲示板

こちらも、名前+パスワードで記憶できるようになりました。

autocomplete属性 お絵かき掲示板

続きから描く時にも名前を選択すればパスワードが入ります。

input 要素 - HTML | MDN

username
new-password: 新しいパスワード (例: アカウントの新規作成やパスワード変更のとき)
current-password

他の絵板と同じパスワードが入っても問題ないはずなので、記憶したいパスワードはcurrent-password、自動的に入力されると困る記事番号+パスワードはnew-password。
フォームのオートコンプリートを無効にするには - Web セキュリティ | MDN

パスワードフィールドのオートフィルを抑止したい場合、autocomplete="new-password" を指定するべきです。ただし、この機能はどのブラウザでもまだ実装されていません。
どのブラウザでもまだ実装されていないとありますが、Chrome64はautocomplete="new-password"で対応可能でした。

Chromeには有効な設定だったのですが、IE11でパスワードを記憶させるとPOTI-boardでは題名+パスワードの組み合わせに…。
Firefoxは…何が変わったのかよくわかりませんでした。

P.S
この記事には後日談があります。

Chrome68 オートフィルを抑止したいだけなのに新規パスワード生成メニューが出る

Chrome68から、autocomplete="new-password"が指定されている箇所をクリックすると新規パスワード生成メニューがでるようになりました。
パスワードを記憶しないようにするための工夫のつもりでしたが、この記事の通りに設定してもうまくいかないかもしれません。

あさりよしとお作品の女性キャラ

posted by さとぴあ at 2018/02/07 21:20 | あさりよしとお

POTI-board用テンプレート PINK を配布します。

Chrome、FirefoxともにJavaのサポートを終了。
Windows10のアクセサリに入っているIE11を使えば、とりあえずJavaを使う事ができますが…。

描くたびにJavaのセキュリティの警告…。

これでは、しぃちゃんお絵描き掲示板PaintBBSはすたれてしまう、と思ったら…。
GitHub - funige/neo: PaintBBS NEO

お絵描きしぃ掲示板 PaintBBS ((C)2000-2004しぃちゃん) をhtml5化するプロジェクトです。
Flashやhtml5のお絵描きサイトはいっぱいあるんだけど、そうじゃないんだ。
おじさんは昔のjavaアプレットそっくりの環境が欲しいんだ。
かなりの再現度です。

HTML5ですから、Chromeでお絵かきできます。

PaintBBS NEOは、既存のお絵かき掲示板に組み込む事が可能なので、BBSNote、relm、らくがきひろばでも使えるのですが…。
新規設置をするなら、POTI-boardがいいのかなぁ…と思います。

BBSNoteはPerl5.12以上では動作しない、relmは管理パスワードがURLに出るので、リファラを返す設定で使うと…。

しかし、POTI-boardにも問題があります。
php7では動作しない、と思ったら…。
POTI-board改とテンプレートシリーズ

Punyu NetのPOTI-boardを、php7で使えるように改造したものです。 使いやすさの観点から1.33のベータ版ではなく安定版の1.32から作りました。
さくらのレンタルサーバの一番安いライトプランで、phpのバージョンを7.1にして動作確認。

今のところ問題ありません。

でも、レス送信時のコメント欄の位置が、と思ったら…。
ドラ☆クロウ! - オリジナルイラスト中心よろずサイト -

POTI-boardテンプレート Cool Solid
POTI-board v1.32以降向けのテンプレートです。
SakaQさん作のMONO WHITEを元にHTML5とCSS3で大幅にアレンジしました。
BBSNoteのスキンsiberiaの作者れいさんzero(配布サイト)の、POTI-board版siberiaのデザインを取り入れているのでBBSNoteと見た目が近い。

コメント欄はスレッドの下。

これをベースにすれば、BBSNoteに近いテンプレートを作る事ができると思いました。

作ってみました。

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

タブレット。
iPadとiPad ProをChromeでエミュレート。

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

スマートフォン。
Galaxy S5、iPhone8をChromeでエミュレート。

配布したくなったので、配布します。

画像アップロードができない仕様。
お絵かき掲示板として使いたいという方向けのテンプレートです。

管理画面からの画像アップロードには対応しています。
設置方法、注意事項はreadmeにまとめておきました。

たまに、readmeを読まない方がいますが、読まないといろいろと…。

キャンバスサイズを選択式にしましたが、
セレクトボックスを貼り付けあるだけなので、変更するにはテンプレートを…。

そのあたりの事も、書いてありますので目を通していただけたらと思います。

POTI-board用テンプレート PINK 設置サンプル

設置サンプル。
POTI-board用テンプレート PINK
pink181031.zip

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

BBSNote8.0にPaintBBS NEOを組み込む

HTML5版 PaintBBS NEO 起動画面
以下はBBSNote8.0b19でHTML5版のPaintBBS NEOを使うための設定方法です。

何かのお役に立てればと思いながら書いていますが、この記事を参考にした事によりトラブルが起きても何もしてあげる事ができません。
私はなんら責任を負いません。無保証です。

BBSNoteb8.0はPerlのバージョンが5.12以上の場合動作しません。

いまのところ、さくらのレンタルサーバではPerlのバージョンを5.8.9、5.10.1に切り替える事ができるため動作します。しかし、いつ使えなくなってもおかしくありません。
以下はそれでも、NEO化したいという方向けの情報です。

BBSNoteは配布が終了していて、再配布も禁止されているため新規に入手する事ができません。
作業する前にバックアップを取り、さらに、動作確認のためのテスト用の掲示板を別途設置します。

テスト用の掲示板を設置して問題がないことを確認してから実際に使う掲示板に転送すれば、すでに動作しているお絵かき掲示板をトラブルに巻き込む事なく作業をすすめる事ができます。

NEOを使えるようにする。

GitHub - funige/neo: PaintBBS NEO

から必要なファイルをダウンロードしてヘッダに2行追加します。
neo/README.md at master ・ funige/neo ・ GitHub

1. 基本的には<head>に2行追加するだけです

<head>
<link rel="stylesheet" href="neo.css" type="text/css" />
<script src="neo.js" charset="UTF-8"></script>
...
</head>

neo.jsとneo.cssの2つのファイルを/dist からダウンロードしてください。
最新版のPaintBBS-x.x.x.(css|js)とneo.(css|js)は同じものです。
問題はどこに追加するかですが、Javaのしぃペインターも使いたいのであれば、PaintBBSの設定のところに追加するのが適当だと思います。

paint.cgiの

#=== ★ ShiPaintBBS の設定 ===================================================

以下の箇所に2行追加します。
#-------< ヘッダ内テキスト >--------------------------------------------------
'TxtHead' => <<_TXT_
<link rel="stylesheet" href="PaintBBS-1.2.3.css" type="text/css" />
<script src="PaintBBS-1.2.3.js" charset="UTF-8"></script>
_TXT_
_TXT_を消すと500エラーになるため注意が必要です。

PaintBBS-1.2.3.css
PaintBBS-1.2.3.js

上記の2つのファイルがbbsnote.cgiと同じディレクトリに転送されていることを想定しています。

転送したファイルの名称が

neo.css
neo.js

の場合は、ファイル名をそれに合わせます。

PaintBBS-1.2.3.js

という記述は特定のバージョンのNEOを動作させるためのものです。
<link rel="stylesheet" href="neo.css" type="text/css" />
<script src="neo.js" charset="UTF-8"></script>
としておいて、
バージョンアップしたら

neo.css
neo.js

を上書きする形でも運用できます。

まとめると、paint.cgiのShiPaintBBS の設定のヘッダ内テキストに2行追加して、指定したファイル名と同じファイルをbbsnote.cgiと同じディレクトリに転送するだけです。

PaintBBSを選択した時にはHTML5のPaintBBS NEOが起動し、しぃペインター選択を選択した時にはJavaのしぃペインターが起動します。

Java版のPaintBBSと共存させる事もできますが、書き直す箇所が多くなるため割愛します。

ここから先は、ちょっと難しい設定になります。

PaintBBS NEOで投稿できるのはPNG形式だけです。
BBSNote8.0はPNG形式の画像から続きを描く事ができません。

つまり、NEOで投稿した画像からは続きを描く事ができません。

それでは不便なのでPNG形式の画像から続きを描けるようにします。

paint.cgi
3751行付近の
$fmt_png = 1 if($Data{ ImageSrc } =~ /\.png$/);
$ok_image = 1 if($Data{ ImageSrc } =~ /\.png$/);
に書き換えます。
これだけでは続きから描くためのリンクが出てこないので、skin.cgiの続き表示関係の該当箇所を
$Data{ImageSrc} =~ /\.(jpg|gif|png)$/i) &&
とします。

JPEGでもGIFでもPNGでも続きから描くリンクが出るようになります。

PaintBBS NEOが使えてPNGから続きを描く事ができるBBSNoteのお絵かき掲示板。

気軽にお絵かき PaintBBS/しぃペインター

お絵かき掲示板をスマートフォン対応にする

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportを指定します。PC用の解像度で表示しなくなるので、文字が小さすぎて読めない、クリック可能な要素が近すぎるといった問題を回避する事ができます。
ビューポートを設定する  |  PageSpeed Insights  |  Google Developers

ビューポートは携帯端末でのウェブページの表示方法を制御します。ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。

お絵かき掲示板をスマートフォン対応にする

ブラウザの幅をせまくすると文字が縦並びになって読みにくいので…。

お絵かき掲示板をスマートフォン対応にする

ここからブラウザの幅をせまくすると…。

お絵かき掲示板をスマートフォン対応にする

コメントが画像の下に回り込むように設定。
<div class="message">
蒼の六郷の昴さん。
</div>

.messageの幅が200pxより小さくならないようにして、それよりブラウザの幅がせまい時はカラム落ちさせます。
.message {
min-width:200px;
display: table;
}

コメントの横幅が200pxより小さくならないように指定。
min-width:200px;だけではうまくいかないので、display: table;を使いました。

お絵かき掲示板をスマートフォン対応にする

ブラウザの横幅にあわせて画像を縮小。
img {
max-width: 100%;
height: auto;
}

お絵かき掲示板をスマートフォン対応にする

ChromeでiPhoneをエミュレート。

スマートフォンに対応させたお絵かき掲示板はこちら。

「るくるく」「カールビンソン」あさりよしとお作品の女性キャラ

反逆の赤ずきん あさりよしとお短編集
反逆の赤ずきん あさりよしとお短編集

あさりよしとお短編集」収録、反逆の赤ずきん。

橋の下の超人 あさりよしとお短篇集 毒入り 錠剤篇橋の下の超人 あさりよしとお短篇集 毒入り 錠剤篇
橋の下の超人 あさりよしとお短篇集 毒入り 錠剤篇橋の下の超人 あさりよしとお短篇集 毒入り 錠剤篇

「あさりよしとお短篇集 毒入り<錠剤篇>」 収録、橋の下の超人。
Amazon / honto

コロナちゃん 宇宙家族カールビンソン

宇宙家族カールビンソン」のコロナちゃん。

ペロちゃん るくるくペロちゃん るくるく

るくるく」のペロちゃん。

1枚だけpooお絵かき、その1枚以外はJavaなしで描けるPaintBBS NEOのお絵かき掲示板で。
posted by さとぴあ at 2017/11/06 00:18 | あさりよしとお