TOP
トピックス
baserCMSの管理画面ダッシュボードにランチャーを表示する

_Topics トピックス

baserCMSの管理画面ダッシュボードにランチャーを表示する

2014/10/16

弊社でよく使わせてもらっているbaserCMSですが、もともと拡張性が高く、管理画面のカスタマイズも比較的簡単に行うことが出来ます。そのため、クライアントに納品する際も、その要望に合わせてカスタマイズする場合があるのですが、今回はそんなカスタマイズ事例の中で、特に人気のある「ダッシュボードを変更してランチャーっぽくする」方法について、ご紹介したいと思います。

通常、ダッシュボードを表示すると、コンテンツ部分は３カラム（baserCMSニュース、公開ページ数、最近の動き）に分かれています。このうち、baserCMSニュースと公開ページ数の２カラムを削り、よく使いそうな機能をアイコン表示し、ランチャー化します。（こうすることで、ユーザーが視覚的に目的の機能までの動線を把握できるようになるのではないかと思います。）

１．アイコン画像を準備する。

フリーのものを探すと良いと思います。有名所だと「ICON HOIHOI」や「CristalClear」などが良さそうです（フリーといっても、ライセンスや注意事項が全く無いわけではありません。使用上の注意などを各サイトでご確認ください）。

カラム幅に応じて、ある程度はアイコン画像のサイズを変更したいので、今回は１つ１つのアイコンを130px×130px程度の大きさで用意しておきます（この辺は、並べるアイコンの行数によると思いますので、適当に調節してください）。

出来あがったら規定のフォルダに入れておきます。今回はテーマフォルダ内に作成します。（iconsフォルダは無いので作ってください。その中にアイコンを全て入れます。今回は各画像は01.png〜08.pngという名前で保存しました。）

/app/webroot/theme/（お使いのテーマ）/img/admin/icons/

２.ダッシュボードのHTMLを書き直し、CSSを作成する。

HTMLの編集です。特に難しいことはありません。しかし、baserCMSのコア部分にある原本ファイルを、そのまま編集してしまうと、baserCMSのバージョンアップ時にカスタマイズ部分が消えてしまいますので、必要なファイルをappフォルダ以下（今回はさらにその中のテーマフォルダ以下）にコピーしてそちらを編集します。

まず、ダッシュボードのViewファイルを以下のようにコピーして編集します。もともと３カラムになっていたのを、２カラムに修正し、アイコン表示部分を加えます。また、冒頭でCSSを読み込みます。このCSSは今回のランチャー表示専用のもので、あとで作成するものを読み込んでいます。

■ダッシュボードのViewの場所とコピー先
（元の場所）/lib/Baser/View/Dashboard/admin/index.php
（コピー先）　/app/webroot/theme/（お使いのテーマ）/Dashboard/admin/index.php


<?php
//アイコン部分CSS読込
$this->BcBaser->css(array('admin/admin_icon'));
?>

<div id="AlertMessage" class="message" style="display:none"></div>

<div class="float-left" style="width:66%">
 <div class="panel-box corner10">
  <h2>サイト管理メニュー</h2>

  <div class="clearfix"> 
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/01.png', array('url' => '/pages/index')) ?>
      <br />
      <?php $this->BcBaser->link('固定ページ管理', '/pages/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/02.png', array('url' => '/blog/blog_posts/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('新着情報管理', '/blog/blog_posts/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/03.png', array('url' => '/mail/mail_fields/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('お問合わせ管理', '/mail/mail_fields/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/04.png', array('url' => '/blog/blog_comments/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('コメント一覧', '/blog/blog_comments/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/05.png', array('url' => '/users/index')) ?>
      <br />
      <?php $this->BcBaser->link('ユーザー管理', '/users/index') ?>
    </div>
   
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/06.png', array('url' => '/themes/index')) ?>
      <br />
      <?php $this->BcBaser->link('テーマ管理', '/themes/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/07.png', array('url' => '/plugins/index')) ?>
      <br />
      <?php $this->BcBaser->link('プラグイン', '/plugins/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/08.png', array('url' => '/site_configs/form')) ?>
      <br />
      <?php $this->BcBaser->link('システム管理', '/site_configs/form') ?>
    </div>
   
  </div>
 </div>
</div>

<div class="float-left" style="width:33%">
 <div class="panel-box corner10">
  <h2>最近の動き</h2>
  <div id="DblogList">
       <?php $this->BcBaser->element('dashboard/index_dblog_list') ?>
  </div>
 </div>
</div>

次にCSSを新規作成します。カラム幅にある程度合わせて大きさが変わるようにします。

■ランチャーアイコン用のCSSの設置場所
/app/webroot/theme/（お使いのテーマ）/css/admin/admin_icon.css


div.iconBox{
  float: left;
  width: 21%;
  margin: 2%;
  text-align: center;
  height: 150px;
}

div.iconBox img{
  width: 100%;
  margin: auto;
  max-width: 128px;
}

div.iconBox a{
  text-decoration: none;
  color: #000;
}

div.iconBox a:hover{
  text-decoration: underline;
  color: #000;
}

`３．ブラウザでアクセス`

一応、ブラウザキャッシュを消してアクセスします。ダッシュボードにアイコンが並んでいればOKです。

いかがでしたでしょうか？　今回のサンプルではあまりメリットがありませんが、独自に機能を拡張している場合など、クライアントに分かりやすい動線付けができるため、喜ばれることも多いと思います。ぜひ、お試しください。(^^

タグ：新製品 | baserCMS | PHP

お問い合わせ_CONTACT

弊社への各種ご相談は下記よりどうぞ

よくある質問

ここでは「ホームページを制作するのにどのくらいの期間が必要？」「島根県以外の遠方からでも依頼できる？」などお客様から寄せられる質問に回答しています。
下記の一覧からご覧になりたい質問内容をクリックしてください。

制作について

どのくらいの制作期間が必要ですか？

2ヶ月半〜3ヶ月程度を目処にお考え下さい。実際の作業自体はそれほどかかりませんが、お客様側でご準備いただくものや、新たに用意するもの（写真など）を考慮すると、結果的にそのくらいの期間がかかってしまうのが実情です。

法人ではなく個人事業主なのですが、制作を依頼できますか？

もちろん可能です。ただし、基本的には法人のお客様を想定したサービスとなっておりますので、気になる点などがございましたら、一度お問い合わせ頂ければと思います。

文章の校正はしてもらえますか？

本格的な校正または文章ライティングは、プロのライターに依頼することで可能です（有料）。なお、お客様からお預かりした原稿の誤字脱字等は、可能な限り確認・修正させていただいておりますが、お客様から弊社に完成原稿として提供いただくものにつきましては、なるべくお客様側にて一度チェックしていただきますよう、お願いいたします。

知り合いのデザイナーにデザインをお願いしたいのですが・・・。

事前にご相談いただければ、社外のデザイナーにデザインをお願いすることも可能です。ただし、その方に対して弊社からWeb構築に関する技術・仕様などの指導は出来ませんので、予めWebデザインが可能かどうかをデザイナーにご確認ください。

他社で作った既にあるホームページを修正したいのですが出来ますか？

他社様が制作したホームページでも修正を承っております。ご相談ください。

スマートフォン対応のホームページを作成してもらえますか？

もちろん可能です。現在主流のレスポンシブデザインという制作手法で構築できます。これはユーザーが利用している端末の画面幅に応じてレイアウトを自動で変更するもので、パソコン用のサイトとスマートフォン用のサイトを別で作る必要がないのが特徴です。

現在ホームページを持っていますが、リニューアルをお願いできますか？

もちろん可能です。リニューアルの仕方にもいろいろとあります。CMS（管理システム）やデザインの入れ替え、URLの変更など目的やご要望に応じた手法をご案内しています。

ホームページと一緒にブログも作りたいのですが、可能ですか？

多くのお客様がホームページの制作と同時にブログ機能（お知らせ、新着情報、トピックスなど呼び方は様々）を利用しています。

ホームページに掲載する内容は、一緒に考えてもらえますか？

はい。打ち合わせの際にスタッフへご相談ください。必要であればプロのライターさんに依頼することも出来ます。（有料）。

制作を依頼した場合、何を用意すれば良いですか？

打ち合わせの中で必要なものを確認して進めていきます。一般的には、会社パンフレットなどお客様の事業内容がわかる資料、ロゴマークなどのデータ、ホームページに載せたい写真・画像、

遠方（島根県以外）からホームページ制作の依頼はしてもらえますか？

リモート会議などで対応可能です。弊社では東京・大阪をはじめ、全国のお客様からのご依頼を承っております。ご相談ください。

WordPressを使ったサイト構築は可能ですか？

対応可能です。また、WordPress以外でも対応できますので、その目的・条件にあったCMSをご提案しております。

デザインのみ、コーディングのみなど、制作の一部の依頼は可能ですか？

対応可能です。弊社ではデザイン会社様、広告代理店様、システム開発会社様、ウェブ制作会社様などからの下請け案件も承っております。ご相談くださいませ。

制作会社、広告代理店からの依頼は可能ですか？

はい、対応可能です。ご相談ください。

写真撮影も行ってもらえますか？

対応可能です。弊社の関連会社もしくはパートナー企業が対応いたします。ご相談ください。

動画を使ったホームページを作成したいのですがお願いできますか？

対応可能です。動画は弊社の得意分野の一つです。撮影・編集は弊社の関連会社で映像制作専門の株式会社モットが対応いたします。

ホームページの更新を簡単にできる方法はありますか？

はい、CMS（コンテンツ・マネジメント・システム）の導入をお勧めします。CMSはホームページの管理システムのことで、IDとパスワードを使って管理画面にログインし、ホームページのデータを更新・変更します。

依頼してから完成まではどのような流れですか？

通常、以下のような流れで進んでいきます。

１．コンテンツの確定
ホームページの内容を決めていきます。どんなページがどこにあるか、というのを確定します。

２．デザインの確定
ホームページのデザインを決めていきます。色や雰囲気など最初にご相談させていただき、叩き台となるデザイン案をご用意します。

３．テストサイト構築
確認用のテストサイトをご用意します。

４．公開（納品）
テストサイトで問題なければ、本番環境へホームページを構築し公開します。

ドメイン、URLアドレスについて

現在持っているドメインを引き継ぐことは可能ですか？

可能です。場合によってはドメインの管理者権限を移す手続きが必要になることがあります。ご相談ください。

新しいドメインを取りたいのですが、取得の手配してもらえますか？

もちろん対応可能です。ドメインは「早いものがち」なので、必ずしもご希望のドメインが取得できるとは限りませんが、

サーバーについて

レンタルサーバーは用意してもらえますか？

もちろん対応可能です。弊社は「CPIサーバー（KDDIウェブコミュニケーションズ社）」「Zenlogic（ソフトバンクグループ

見積・費用・契約について

ホームページ制作に費用はどのくらいかかりますか？

ホームページはオーダーメイドになりますので、お客様のご要望の内容によって金額が変わります。

見積りを依頼するには、どのようにして問い合わせすれば良いですか？

弊社ホームページの「お問い合わせ」か、お電話にてご連絡ください。

分割払いはできますか？

原則一括払いでお願いをしておりますが、提携するクレジット会社を利用して分割することができます。ご相談くださいませ。

契約後のキャンセルはできますか？

契約後のキャンセルにつきましては、既に発生した作業の内容に応じて、キャンセル料を頂くことがあります。ご了承ください。

見積りに料金はかかりますか？

お見積りは無料です。お気軽にお問い合わせください。

制作後・メンテナンスについて

納品後のサポートはできますか？

はい可能です。更新頻度の高いサイトをお持ちのお客様や、Webサービスを運用しているお客様には、保守契約をおすすめ致しますが、保守契約の無いお客様や、他社でホームページを制作して運用中のお客様であっても、都度見積もりで対応させて頂いています。

運用は自分で行いたいのですが可能ですか？

はい、可能です。特に更新頻度が高い部分など、予めわかっていれば更新しやすいように管理機能をカスタマイズすることも出来ます。ご相談ください。

他社が作ったホームページを更新だけしてもらうことはできますか？

はい、可能です。ご相談ください。

アクセス解析・広告運用

アクセス解析はお願いできますか？

はい、可能です。レポート作成からコンサルタントによる毎月の報告会まで対応しています（有料）。ご相談くださいませ。

インターネット広告の運用代行をしてもらえますか？

はい、可能です。出稿先、予算、ターゲットなどをご相談し、最適なプランをご提案します。ご相談くださいませ。