Ubuntu_Press - 20140607のエントリ
カスタマイズの方法としてはこれが正しいのかどうか分かりませんが自分なりに我流でやってみました。
まず管理画面に入りメニューからテンプレートの管理を選択
デフォルトで選択されているart41_sample2を弄る前にダウンロードします。
(ダウンロードは一番右のアイコンから)
カスタマイズはローカルサーバPC環境で直接行います。
まず最初ですのでどうなるか分からなかったのでデフォルト選択されたMAgic3のart41_sample2の画像の差し替えとCSSの修正を行いました。
ブラウザMAgic3のインデックスページを右クリックしページのソースを閲覧
CSSの場所は、templates/art41_sample2/css/template.css
CSSからヘッダー画像のファイルはtemplates/art41_sample2/images/header.jpgです。
画像加工はGIMPとIncscapeで行いました。
header.jpg:デフォルト画像は幅900px高さ200pxを今回少し広めることにするので幅1024px高さ200pxにしました。
画像の加工はGIMPで文字入れはInkscapeで行いました。
template.css:はまず今回は簡単にヘッダー画像の差し替えと全体の幅だけを行うのでgeditを使用。
geditでCSSの中からbodyがwidth:900pxでしたので元画像サイズ900pxを検索すべて置き換えをしてみて
ブラウザよりページの再読み込みを行い問題があれば修正していくつもりで閲覧しました。
結果なんの問題もなく正しく表示されました。
一応他のブラウザでも確認しました(Linux環境なのでIEでは出来ません)
今回はLeft・Rightが固定でCenterが固定されていなかったので上手くいきましたがいつもこんな風に行くとは限りません。
これからいろいろCSSを書き換えてみたいと思います。
まずはここまで
プチカスタマイズ後の画像
まず管理画面に入りメニューからテンプレートの管理を選択
デフォルトで選択されているart41_sample2を弄る前にダウンロードします。
(ダウンロードは一番右のアイコンから)
カスタマイズはローカルサーバPC環境で直接行います。
まず最初ですのでどうなるか分からなかったのでデフォルト選択されたMAgic3のart41_sample2の画像の差し替えとCSSの修正を行いました。
ブラウザMAgic3のインデックスページを右クリックしページのソースを閲覧
CSSの場所は、templates/art41_sample2/css/template.css
CSSからヘッダー画像のファイルはtemplates/art41_sample2/images/header.jpgです。
画像加工はGIMPとIncscapeで行いました。
header.jpg:デフォルト画像は幅900px高さ200pxを今回少し広めることにするので幅1024px高さ200pxにしました。
画像の加工はGIMPで文字入れはInkscapeで行いました。
template.css:はまず今回は簡単にヘッダー画像の差し替えと全体の幅だけを行うのでgeditを使用。
geditでCSSの中からbodyがwidth:900pxでしたので元画像サイズ900pxを検索すべて置き換えをしてみて
ブラウザよりページの再読み込みを行い問題があれば修正していくつもりで閲覧しました。
結果なんの問題もなく正しく表示されました。
一応他のブラウザでも確認しました(Linux環境なのでIEでは出来ません)
今回はLeft・Rightが固定でCenterが固定されていなかったので上手くいきましたがいつもこんな風に行くとは限りません。
これからいろいろCSSを書き換えてみたいと思います。
まずはここまで
プチカスタマイズ後の画像
