FFXI風β版 - テーマ

FINAL FANTASY XI 風のテーマです。
レスポンシブデザインに対応しています。
β版としての投稿です。ご了承ください。
その他の詳細は以下を参照くださいませ。

対応ブラウザ

2022年05月16日でFF11がサービス20周年です。その記念(?)に、
2022年06月16日でIE11のサポートが終了です。ならびに、
2021年03月09日でEdge(Legacy)もサポート終了済みです。

はてなブログの推奨ブラウザにも含まれていませんので、
本テーマではIE及びEdge(Legacy)は完全非対応とします。
本テーマを適用する際は上記を了承の上で利用ください。

はてなブログでの使用を推奨するWebブラウザ - はてなブログ ヘルプ

β版理由

デザインテーマ制作の手引き - はてなブログ ヘルプ

> ヘッダ・フッタを移動したり隠したりしないでください。また、
> ヘッダメニューより上部やフッタより下部に要素を置かないでください。
> (border等の装飾も含む)。

はてな利用規約 - Hatena Policies

> 第6条 (禁止事項)
> 本サービス内でのページデザイン変更により、
> 当社が標準的に表示しているヘッダ、フッタ、広告及び著作権表示を
> 当社の許諾なく体裁や位置を改変し表示する、あるいは非公開にする行為

ヘッダとフッタに白線を表示すると、
デザインテーマ制作の手引きに記述の注意事項に違反してしまいます。
デザインテーマ制作の手引きに前述の注意事項の記述がある理由は、
同テーマを適用したユーザーが無料版の利用者だった場合、
同テーマを適用したユーザーが、
利用規約の第6条の禁止事項を違反した状態になってしまうため、
とのことです。はてなブログの運営に確認しました。

ですので、
ヘッダとフッタに白線を表示できず、
FFXI風の画面に寄せきれていません。もし、
はてなブログ利用規約の注意事項変更で、
ヘッダとフッタを変更可能になりましたら、
β版から昇格させようと思います。

はてなブログの運営側で変更があった場合、
 デザインのレイアウト崩れが発生してしまうので、
 はてなブログの運営としては非推奨のようですが、
 Pro版を利用中の人が本テーマを適用した場合に限り、
 ヘッダとフッタに白線が表示されるようにしてあります。

各種設定方法

ブログのデザインを変更する(カスタマイズ) - はてなブログ ヘルプ
デザインCSSを記述する - はてなブログ ヘルプ
開発者向けの設定について - はてなブログ ヘルプ

以降の設定を行なうには、
デザインCSSに記述する必要があります。
以降の設定を行なうにあたり上記を読んで、
自己責任での上でのご利用をお願いします。

背景画像設定方法

背景画像に以下画像を表示したい場合の記述例。

:root {
    --blog-background-state: initial;
    --blog-background-image: url(https://cdn.blog.st-hatena.com/images/theme/backgrounds/2014/photo-05.jpg);
}

カラーコンフィグ

ウィンドウの色は上下でグラデーションしており、
ウィンドウの色の上端の色と、
ウィンドウの色の下端の色を設定できます。

カラーコンフィグ可能箇所は以下で、
カラーコンフィグの規定値は以下です。

:root {
    /* ウィンドウ上端の色 */
    --color-config-window-top:                 #191970b3; /*  70% midnightblue */
    /* ウィンドウ下端の色 */
    --color-config-window-bottom:              #191970de; /*  87% midnightblue */
    /* ウィンドウオーナメント両端の色 */
    --color-config-ornament-edge:              #ffffff00; /*   0% white        */
    /* ウィンドウオーナメント中央の色 */
    --color-config-ornament-center:            #ffffffff; /* 100% white        */
    /* サイト全体の文字色 */
    --color-config-font:                       #ffffffff; /* 100% white        */
    /* サイト全体のリンク文字色 */
    --color-config-link:                       #ffffffff; /* 100% white        */
    /* サイト全体のリンク文字色(マウスホバー) */
    --color-config-link-hover:                 #ffffffff; /* 100% white        */
    /* サイト全体のリンク文字色(訪問済み) */
    --color-config-link-visited:               #ffffffff; /* 100% white        */
    /* サイト全体のリンク文字色(キーワードリンク) */
    --color-config-link-keyword:               #ffffffff; /* 100% white        */
    /* 投稿記事内の文字色 */
    --color-config-entry-content-font:         #ffffffff; /* 100% white        */
    /* 投稿記事内のリンク文字色 */
    --color-config-entry-content-link:         #7cfc00ff; /* 100% lawngreen    */
    /* 投稿記事内のリンク文字色(マウスホバー) */
    --color-config-entry-content-link-hover:   #7cfc00ff; /* 100% lawngreen    */
    /* 投稿記事内のリンク文字色(訪問済み) */
    --color-config-entry-content-link-visited: #32cd32ff; /* 100% limegreen    */
    /* 投稿記事内のリンク文字色(キーワードリンク) */
    --color-config-entry-content-link-keyword: #7cfc00ff; /* 100% lawngreen    */
    /* 各種線の色 */
    --color-config-border:                     #d3d3d3ff; /* 100% lightgray    */
    /* <code>の色 */
    --color-config-code:                       #0000008a; /*  54% black        */
    /* <pre>の色 */
    --color-config-pre:                        #0000008a; /*  54% black        */
}

参考
Color Wheel Picker

テーマ ストア
FFXI風β版 - テーマ ストア

記事
[はてなブログ用デザインテーマ]FFXI風β版 - ふぇおのちらうら

些事
FF11とGAMEと昔話(思い出)2002 - ふぇおのちらうら