追加テンプレ2の女性向け汎用をちょびっと弄って使い勝手良くしよう!

追加テンプレは見目は綺麗だけどヘッダーが固定だったりいろんな制約があってちょっと使いにくい…とか勝手に思ってるんですが、せめて使いやすくカスタムしちゃおうよ!のコーナーです(*´Д`*)
女性向け汎用をお持ちの方は是非やってみてね!!
でもあくまで…

ですw

 

さて、件のテンプレートはこんなです。可愛いねー(*´Д`*)

ヘッダーのイメージもほんわり酵素とか健康食品!って感じだしね!
でもこのヘッダーだけ使ってる訳にはいかないっしょ。

 

テンプレート設定後にヘッダー画像を指定することで、ヘッダー画像の変更は出来るのですが…あれ?なんかおかしい?ってなりませんでした?
縦幅が265px以上あれば別に問題ないのですが、それ以下だとテンプレートの表示が思いっきり崩れるのです。
その謎はまさにCSS内に潜んでおるのですよ。

 

ってことでCSSを見てみてくださいな。
Styles.css内を「header」で検索して、すぐ下の行を見てみてくださいまし。ここにすべての謎が集約されております。

 

修正前

反転してる箇所。まさに縦は265pxで決め打ちされておったのでございますよ。
まぁデザイナーさんからしたら、ここは変えないでほしいってことなのかもしれませんが、ユーザーからすると変えさせて頂きます('◇')ゞでございますよ。

 

ってことで変更後はヘッダー画像の縦幅読み込み独自タグです。こんなです↓

修正後

 

たったこれだけなんですけどね…

これだけで、もともと縦幅の広めに取られたテンプレートを頭スマートにすることが可能になるのでございますヽ(´ー`)ノそれがこれ→

 

ちなみにどうやってるのか知らないんだけど、ヘッダーテキストは上下の中央に表示される仕様なので、どんな縦幅でもちゃんとタイトルが収まる安心仕様なのがこのテンプレートの良いところ(*ノノ)
折角の可愛いテンプレートだからこそ、ちょびっと手を加えるだけで、汎用利きまくるようになるので是非やってみてくださいましねw

 

あ、会社用は更に使いやすいように、サイドメニューの幅がデフォルト214pxから264pxになってしまっておるです。こういう応用も触れば触るほど簡単に出来ちゃうので、ご自身の使いやすいシリウステンプレートにどんどん進化させていってくださいましーヽ(´ー`)ノ

この記事の関連ページ

■ SIRIUSの独自タグってどんなん?
SIRIUSは各種ブログなどと一緒で独自タグが設定されていて、そのタグにこの文言って風に表示がされるのです。なのでそれを知ってれば、オリジナルテンプレートが作れるってわけです。
■ 関数について調べてみましょ★
独自タグ・関数表に載ってる関数の使い方をまず説明しましょうか!!
■ メモ★サイドバーのHTML構成
SIRIUSは独自タグで構成されておるので、もれなく定型タグが貼りつきます。うん。今回はサイドバーの話。
■ サイドメニューのHTML構成が変更したいぞ!
良くあることだと思うのですがSIRIUSのサイドメニューの構成は特徴的。
一般的なサイトだとこうなのに…と思っちゃったりしますよね。
それも変更可能です。という話。
■ サイドメニューを固定してみようか。
静的サイト生成ツールSIRIUS様を弄くり倒す。そんないわのりのSIRIUS愛なページです。この溢れんばかりの愛(カスタマイズ魂)を皆様にもお届け!
■ そのうちポータルサイトテンプレートも…
シリウスの魅力を活かせばどんなサイトでも出来そうな気がしています…
■ ガチのレスポンシブSIRIUSテンプレートを作った話
シリウスのテンプレート作成はある意味ルーチンワーク(*´Д`*)ないわのりです。先日はやっとこさ、自分でも使いたいぞ!なレスポンシブテンプレを作ったのです♪