Adminerのカスタマイズ方法！スマホからでもDB操作しやすくしてみた！
2019-05-12 
前回の記事でphpMyAdminの代わりとしてAdminerを使う方法をご紹介しました。非常に便利にスマホからもDB操作できるようになりましたが、いくつか問題点あったのでAdminerのカスタマイズの仕方について調べてみました。
Adminerをスマホで使う時の問題点・・・自動ズーム
まず自分が陥ったスマホ使用時の問題点について説明します。
AdminerのスマホでのDB操作画面自体は画像のように、ちゃんと全てが見えるようになっているのですが、
この画面から、入力フォームを選択するとこんなふうにズームしてしまうんです！これってスマホの仕様ですよね。入力しやすいように、ズームしてくれるんですが、完全なるお節介。このズームがどうやっても止められず。ズームされちゃうと、各入力フォームがどのフィールドなのか見えなくなってしまうんです。結局、1フィールド入力したら左に移動してフィールド名確認、、、って感じで超無駄な動きになっていたのです。
Adminerはcssで自在にデザイン変えられます
上記のような問題に対して、対策方法があります。AdminerはCSSが自由に変えられるようになっているんです！なので、例えばフォームのフォントサイズを大きくしてズームを抑止したり、そもそもの枠のサイズを小さくしてズームしても横全体が表示できるようにする、、といったことが可能なんです。
方法は簡単です。Adminerの公式ページにいくと選択できるCSSの例がたくさん表示されています。ここから好きなものを選ぶことができます。
導入方法は、1)上記のデザインから好きなものを選んでリンク先のcssをダウンロードし、2)adminer.phpと同じフォルダに格納すれば良いだけです( adminer.cssという名前で登録)。簡単ですね！
あとは、好きなようにcssをいじれば自分の好きな表示に変えることができます！自分は上記の問題があったので、inputの幅を200pxなどに制限してみました。
pre,
textarea,
input,
select {
font: 16px 'Roboto', Verdana, Arial, Helvetica, sans-serif;
width:240px;
}
td.function select{
width:60px;
}
Adminerのphpを編集すれば、さらに設定などを変えられます！
上記はCSSによる表示変更が可能、、というカスタマイズ方法でしたが、表示文字を変えたい！といった部分も変更可能になっているようです。
こちらのページにAdminerのカスタマイズの方法と、どういったものが変えられるかが一覧で掲載されています。
この拡張の仕方は簡単です、上記のページにある下図のfunction adminer_object()部分をphpファイルの下に追加して、動作を変更したいfunctionを中に追加すれば良いだけです。例えば表示サーバー名を変更したい場合は、
function serverName($serverName) {
・・・
}
を上記のfunction群の中に入れればいいだけです。ちょっと説明がわかりにくいfunctionありますが、比較的簡単に表示など変えられるんですね！！
ということで、adminerはこんなに簡単に色々表示などが変えられます。phpMyAdminと併用し、phpMyAdminはテーブル作成など込み入った操作用(PC)、adminerはデータ入力用(スマホからも使用)など用途別に切り替えるのがいいと思います。phpMyAdminとadminer同時にログインしても何も問題ないので。ガンガン併用していきましょう！
⇒「WordPress関連TIPS」カテゴリ記事一覧
その他関連カテゴリ
↓WordPressでブログ始めるならエックスサーバーがおススメ！
