XLXリフレクターの構築 Vol.08

XLXリフレクターのダッシュボード(トップページ)のデザインの編集です。
ヘッダー画像を替えたり、メニューを追加したり、ボディーのデザインを替えたり出来ます。

xlx854_2021_05_004.jpg

私のXLX854リフレクターのデザインを替えてみた画像です。(上画像)
ヘッダーの画像は、栃木県内のダムの写真です。
メニューボタンに「ITMay」「Maywind(五月の風)」「ダム」「温泉」を追加しました。

ページ全体のバックカラーには、「JG1UEV」のコールサインを入れてみました。
下は、編集する前のXLXリフレクターの基本的なデザインです。(下画像)
チョット手を加えるとオリジナルのデザインになります。

xlx854_2021_05_001.jpg

編集するには、ラズパイの「var」「www」中にある「html」を書き換える必要があります。
ラズパイをwindowsで直接編集が出来るFTPクライアントソフトWinSCP」を使いました。

安全にネットワーク越しにファイルやデータのやり取りが出来る無料のソフトです。(下左画像)
FTPクライアントソフトWinSCP」の使い方を参考にしました。

xlx854_2021_05_005.jpg xlx854_2021_05_006.jpg

最初に、ヘッダーの画像を編集します。
「WinSCP」を立ち上げてラズパイから「var/www/html」の全フォルダをPCのローカルフォルダにダウンロードして置きます。(上画像左)
htmlフォルダの中の「index.php」をエディタソフトなどで開きます。(上右画像)

2番目の赤線部分を編集するのですが、ヘッダー用の画像を作成しておきます。
私の場合、お気に入りの画像を横長に繋ぎ合わせて作成しました。
作成したイメージファイルを2番目の赤線部分の様にエディタソフトで編集します。

次に、ボディーのバックの画像を作成しておきます。
そして、バックの画像のファイルを一番目の赤線部分の様にエディタソフトで編集します。
私の場合、コールサインが「JG1UEV」なのでこの様な画像に作成してみました。

次に、メニュー部分の編集です。
基本形のメニューにリンクしたいメニューを追加します。
下画像の赤線部分の様にエディタソフトで編集します。(下画像左)

ボディーのバック画像については、CSSファイルで編集することもできます。(下画像右)
私の場合は、「index.php」で編集しました。

xlx854_2021_05_007.jpg xlx854_2021_05_008.jpg

最後に、編集した「index.php」「CSS」「画像ファイル」などを「WinSCP」でアップロードすれば完了です。