お問い合わせ 03-5846-2151

ブログ

ブログ

ownCloud 5 ロゴの変更方法

ビーグッド・テクノロジー ownCloud担当です。

ログイン画面やメニュー画面の左上には、おなじみのownCloudのロゴがありますが、このロゴを任意のものに変更することが出来ます。

公式な変更方法は、owncloud.org の テーマ(Theming) に記載されていますが、svgファイルのロゴを専用ツール( illustrator や open source inkscape)で作成する必要があり、少し面倒だなと思う方も多いと思います。

そこで、ownCloud の phpファイルを修正することでロゴを変更してしまおうというのが今回の趣旨です。なお、ownCloudの格納先は "/var/www/html" 配下としています。

1.変更対象のロゴを確認

■ログイン画面のロゴ


■メニュー画面のロゴ


2.ロゴの作成

変更後のロゴを下記のファイル名で作成します。ロゴのサイズを参考にしてみてください。
※ロゴの転用はご遠慮願います。

■ログイン画面用(logo.png)609*134ピクセル
■メニュー画面用(logo-wide.png)147*32ピクセル


3.ownCloud の phpファイルの修正

//ログイン画面用
vi /var/www/html/owncloud/core/templates/layout.guest.php
<img src="<?php print_unescaped(image_path('', 'logo.png')); ?>" class="svg" alt="ownCloud" />
logo.svg を logo.png に変更

//メニュー画面用(その1)
vi /var/www/html/owncloud/core/templates/layout.user.php
src="<?php print_unescaped(image_path('', 'logo-wide.png')); ?>" alt="ownCloud" /></a>
logo-wide.svg を logo-wide.png に変更

//メニュー画面用(その2)
vi /var/www/html/owncloud/apps/files_sharing/templates/public.php
src="<?php print_unescaped(image_path('', 'logo-wide.png')); ?>" alt="ownCloud" /></a>
logo-wide.svg を logo-wide.png に変更

4.作成したロゴのアップロード

作成したロゴを下記のディレクトリにアップロードします。
※アップロードする前に、既存のロゴファイルはリネームしておきましょう。

コピー先: /var/www/html/owncloud/core/img



5.変更を確認

ownCloudへアクセスすると、ロゴが変更されたことが確認できます。
※変化がない場合はブラウザのキャッシュをクリアしてみましょう。





6.注意点

ownCloudをバージョンアップすると、ロゴファイル(logo.png , logo-wide.png)と phpファイルは上書きされてしまいます。少々面倒ですが、この手順でやり直しましょう。
慣れると簡単ですよ!

ownCloudのバージョンアップ方法は こちら です。

ownCloudを日本語でまとめているサイトは owncloud.jp です。

トップへ戻る
Copyright © 2017 BeGoodTechnology All rights reserved.