PukiWikiのデザイン変更

PukiWikiはサイドバーとメインの記事部分が表(テーブル)になっているので、SEO上不利です。そこで、重要な事柄を先に書くのです。また、サイドバーを左にして、それ以外は右側にしてCSSで2段組になるように配置します。ヘッダーのイメージロゴとナビゲーターをサイドバーに移動しました。

PukiWikiのデザイン変更と改造点

PukiWikiのデザイン楽天は主にskin/pukiwiki.skin.phpとskin/pukiwiki.css.phpを変更します。

PukiWikiはサイドバーとメインの記事部分が表(テーブル)になっているので、SEO上不利です。つまり、HTMLはヘッダー、サイドバー、メイン記事、フッターの順に記述されています。

これを、ヘッダー、メイン記事、フッター、サイドバーの順になるようにします。つまり、重要な事柄を先に書くのです。また、サイドバーを左にして、それ以外は右側にしてCSSで2段組になるように配置します。

右側のメイン部分の横幅は最大値のみ設定して、環境に応じて伸び縮みするようにしました。また、高機能の携帯電話(スマホ)ではサイドバーを後ろに表示するようにしました。

このデザイン変更の詳細は、「HP作成」の「2段組レイアウト」のページを参照してください。

ヘッダーの内容をできるだけ減らす為に、ヘッダーのイメージロゴとナビゲーターをサイドバーに移動します。これはサイドバーのトップに持って来ます。理由はサイドバーへの移動リンクが上向きなのと、下にも画像のナビゲーターリンクがあるからです。

イメージロゴも別の画像に変更します。今までと同じ80ピクセルの正方形の画像としました。画像のファイル名を別にしてそれを指定します。

plugin/menu.inc.phpを変更して、MenuBar を使用できるようにしたので、表を取り払ってメニューバーをサイドバーに移動します。また、メニューバーにカテゴリーへのリンクを追加しました。

メインの記事の上下、つまり、ヘッダーの下とフッターの上とサイドバーに広告を配置しました。PukiWikiでは記事の中にはHTMLを書けないので、このようになりました。でも良い感じです。