wordpress/Adobe Animate CCなどweb技術やブログ運用に関する話をしていきます!検索エンジン最適化に関する実験に関する情報も!
⇒ 本ブログの詳細/制作者プロフィール/連絡先/現在の行動状況はコチラ!
⇒ 本ブログは複数のテーマ(色)を持った階層構造になってます!詳しくはコチラ!
web/ブログ全般 WordPress SEO/アクセスアップ Adobe Animate CC(旧FLASH) 便利ソフト/サービス紹介 効率化
  1. ホーム
  2. 〇ブログ/web技術
  3. WordPress
  4. Adminerのカスタマイズ方法!スマホからでもDB操作しやすくしてみた!
■注目記事一覧

WordPressのGutenbergで秒速で設定済みブロックを呼び出す方法!超効率的!これでGutenberg移行も怖くない!

Adobe Animate CC(旧FLASH)が凄すぎる!その表現力と効率性を痛感!技術者にこそ是非!

「写真AC」が超オススメ!画像素材サイトとして、3年以上使い続けてます!

エックスサーバーが凄すぎる!本ブログでの超カスタマイズWordPressでも、高速レスポンスを誇る高品質サーバー!

ポイントサイト「げん玉」が凄すぎてビックリ!開始から10分で2000円以上稼げた!買い物のポイント還元もスゴイ!

[Adobe Animate CC使い方講座] Adobe Animate CCって何?まずはFlashからの変遷から解説!

デジハリのAdobeマスター講座がやばすぎる!Adobe Creative Cloudが50%オフで購入可!5分で使用可能に(超重要)!
 
スポンサーリンク
最新コメント

Adminerのカスタマイズ方法!スマホからでもDB操作しやすくしてみた!

前回の記事でphpMyAdminの代わりとしてAdminerを使う方法をご紹介しました。非常に便利にスマホからもDB操作できるようになりましたが、いくつか問題点あったのでAdminerのカスタマイズの仕方について調べてみました。

Adminerをスマホで使う時の問題点・・・自動ズーム

まず自分が陥ったスマホ使用時の問題点について説明します。

AdminerのスマホでのDB操作画面自体は画像のように、ちゃんと全てが見えるようになっているのですが、

この画面から、入力フォームを選択するとこんなふうにズームしてしまうんです!これってスマホの仕様ですよね。入力しやすいように、ズームしてくれるんですが、完全なるお節介。このズームがどうやっても止められず。ズームされちゃうと、各入力フォームがどのフィールドなのか見えなくなってしまうんです。結局、1フィールド入力したら左に移動してフィールド名確認、、、って感じで超無駄な動きになっていたのです。

Adminerはcssで自在にデザイン変えられます

上記のような問題に対して、対策方法があります。AdminerはCSSが自由に変えられるようになっているんです!なので、例えばフォームのフォントサイズを大きくしてズームを抑止したり、そもそもの枠のサイズを小さくしてズームしても横全体が表示できるようにする、、といったことが可能なんです。

方法は簡単です。Adminerの公式ページにいくと選択できるCSSの例がたくさん表示されています。ここから好きなものを選ぶことができます。

導入方法は、1)上記のデザインから好きなものを選んでリンク先のcssをダウンロードし、2)adminer.phpと同じフォルダに格納すれば良いだけです( adminer.cssという名前で登録)。簡単ですね!

あとは、好きなようにcssをいじれば自分の好きな表示に変えることができます!自分は上記の問題があったので、inputの幅を200pxなどに制限してみました。

adminer.css変更部分例
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を中に追加すれば良いだけです。例えば表示サーバー名を変更したい場合は、

class AdminerSoftwareに追記
function serverName($serverName) {
    ・・・
}

を上記のfunction群の中に入れればいいだけです。ちょっと説明がわかりにくいfunctionありますが、比較的簡単に表示など変えられるんですね!!

ということで、adminerはこんなに簡単に色々表示などが変えられます。phpMyAdminと併用し、phpMyAdminはテーブル作成など込み入った操作用(PC)、adminerはデータ入力用(スマホからも使用)など用途別に切り替えるのがいいと思います。phpMyAdminとadminer同時にログインしても何も問題ないので。ガンガン併用していきましょう!

↓WordPressでブログ始めるならエックスサーバーがおススメ!

[関連コンテンツ]




お気軽にコメントお願いします!

Your email address will not be published.