straw_manテンプレート初期導入設定解説記事

2023/03/12 17:42

straw_manテンプレートの初期導入時に便利な解説記事です。

この記事の内容さえ行えば、デフォルト見た目があなたのオリジナリティを纏ったブログに早変わり……するかもしれません。

ちなみにこの記事に貼られている画像はすべて、クリックすれば拡大表示されるようになっています。ご活用あれ。

もくじ
前提情報1: テンプレート内の検索について
前提情報2: FC2での画像アップロードについて
1: ヘッダー画像差し替え
　1.1: ヘッダー画像指定の変数名リスト
　1.2: ヘッダー画像の推奨画像サイズリスト
　1.3: 表示崩れを厭わないストロングスタイルなヘッダー画像指定
2: スマホ版カスタムテーマ画像差し替え
　2.1: カスタムテーマ背景画像の推奨サイズ
　2.2: ライトテーマとダークテーマで違うカスタムテーマ背景画像を指定する
　2.3: 初期状態で適用されている各種マスクについて
　2.4: ダークテーマ時のグレイスケールフィルタ解除
　2.5: その他カスタムテーマ機能カスタマイズ
3: グローバルナビゲーション部位の差し替え
　3.1: 単一リンクの記述方法
　3.2: 入れ子項目の記述方法
　3.3: グローバルナビゲーションについての注意点1
　3.4: グローバルナビゲーションについての注意点2

※元記事のキャッシュ
インターネットアーカイブ
googleキャッシュ

当記事の権利と経緯について

当記事の文章とコードはリラ様の著作物です

リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。

このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。

共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました（詳細な経緯はこちら）。

もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。

最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています（当サイトの著作物について）。

ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。

文責：秋田LV3

前提情報1: テンプレート内の検索について

目視で当該箇所を探すのは時間の浪費が著しいので、ブラウザやエディタの検索機能を使って探すことをおすすめします。

使っているOSやソフトウェアにもよりますが、多くの場合は「CtrlキーとFキーを同時押し」が検索機能を呼び出すショートカット。

ぜひぜひ使ってみてくださいね。

前提情報2: FC2での画像アップロードについて

画像アップロード方法についてこの記事では説明いたしませんので、その辺りを知りたい方は以下リンク先などをご活用ください。

※サイトが激重になるので④のアルバム機能は使わないこと

注意点としては、このページで必要とするurlはアップロード画面の「ファイル情報」欄に表示されることです。

上スクショ画像において、青く選択されている部分。

これがこの記事で求められる「それぞれの画像のurl表示欄」なので、画像アップロード後にこの部分からコピペしてくださいね。

1: ヘッダー画像差し替え

テンプレート初期状態ではライトテーマ/ダークテーマ切り替えの際にヘッダー画像を切り替えるようにしていて、そのためにjavascriptでヘッダー画像を書き換えています。

その具体的な書き換え画像指定部分を見つけるには、// # 使用テーマに合わせたロゴ画像urlここからと検索。

当該部分のスクショ画像が、以下の画像。

ヘッダー画像指定部分スクショ

初期状態では、これらに「サンプルサイトのロゴ画像URL」が指定されてるので、ここを別画像urlで上書きすれば画像が差し替わるわけです。

ここでは例として、ライトテーマ時のPC版ヘッダー画像を差し替えるやり方を見てみましょう。

新しい画像URLは仮に、
https://blog-imgs-107.fc2.com/d/e/t/dettalant/header_test.pngというURLであるとします。



// 初期状態
var LIGHT_THEME_LOGO_SRC = "https://blog-imgs-107.fc2.com/d/e/t/dettalant/straw_man_big_logo_light.png";

ならば初期状態ではこうなっている部分を……。

以下のように書き換えればいいわけですね。



// 変更後
var LIGHT_THEME_LOGO_SRC = "https://blog-imgs-107.fc2.com/d/e/t/dettalant/header_test.png";

無論ながら、実際に書き換える場合は表示させたい画像URLを指定する必要があることに注意してください。

ここで重要なのは、"という記号を消したり無用に付け加えたりしないこと。

もし上手くいかない場合は、そのあたりで何かコピペミスが起きていないか確認してみてくださいね。

1.1: ヘッダー画像指定の変数名リスト

テンプレートの注釈コメントにもありますが、それぞれの変数名と意味合いはこういった感じです。

変数名
表示箇所

LIGHT_THEME_LOGO_SRC
ライトテーマ時のPC版ヘッダー画像

LIGHT_THEME_SP_HEADER_LOGO_SRC
ライトテーマ時のスマホ版ヘッダー画像

LIGHT_THEME_LOGO_BANNER_SRC
ライトテーマ時のスマホ版グローバルナビゲーションのヘッダー画像

DARK_THEME_LOGO_SRC
ダークテーマ時のPC版ヘッダー画像

DARK_THEME_SP_HEADER_LOGO_SRC
ダークテーマ時のスマホ版ヘッダー画像

DARK_THEME_LOGO_BANNER_SRC
ダークテーマ時のスマホ版グローバルナビゲーションのヘッダー画像

つまり「ダークテーマのスマホ版ヘッダー画像を差し替えたい場合にはDARK_THEME_SP_HEADER_LOGO_SRCを変える」といった感じで、それぞれの部分を書き換えていけば大丈夫です。

もし「ライトテーマとダークテーマで同じ画像を使用したい」場合は、それぞれに同じURLを指定すると良いでしょう。

1.2: ヘッダー画像の推奨画像サイズリスト

推奨と異なる画像サイズであっても表示はされますが、テンプレート制作者の想定とは違う表示崩れが起きる可能性があります。

1.3: 表示崩れを厭わないストロングスタイルなヘッダー画像指定

ヤマノスでのヘッダー表示スクショ

予想外の使い方がなされるのはテンプレートやプログラムの常ではありますが。
どうやらこのヘッダー画像についても、上スクショのようなストロングスタイル指定も出来るみたいです。（他人事みたいに話す）

表示崩れにも繋がるので制作者として無条件で推奨はしづらいものなのですが、この表示に需要があるのも確か。

そのため、表示崩れを目立たなくする修正方法付きで解説を書いておくことにしました。

まずこの表示でのスマホ版ヘッダー画像は以下表を参考にしてください。

991pxと超半端な数字である理由は、スマホ/タブレット表示がこのピクセル数から行われるためです。

つまり、この数字は「これ以上のサイズでスマホ表示が行われることはない」しきい値ということになりますね。

ついでに掲載しておくと、上スクショでは「ページ左上バーガーボタンを浮遊配置させる」ようにもしています。

それを行いたい場合は、以下cssコードをテンプレートcss自由記述領域にコピペすると良いでしょう。



/* スマホ版ページ左上バーガーボタンを浮遊させるやつここから */
.header {
  position: relative;
}

/* ヘッダー画像を中央寄せで表示する */
.header_branding {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.global_nav_opener {
  position: absolute;
  /* 
    初期状態では50%透過の白背景
    ヘッダー画像に合わせて色を変更すること推奨
  */
  background: rgba(255, 255, 255, .5);
  left: 0;
  top: 0;
}
/* スマホ版ページ左上バーガーボタンを浮遊させるやつここまで */

※ 2019/11/27あたりに修正/共有申請した不具合が残っているバージョンをお使いの場合は、修正済み不具合まとめ記事を参考に修正を施すことをオススメしています。

2: スマホ版カスタムテーマ画像差し替え

ここからは、スマホ版でのグローバルナビゲーションカスタムテーマ用画像差し替え方法について。

カスタムテーマ表示サンプル画像

上スクショで言うところの、左側背景画像部分です。

この部分はcss側から背景画像指定しているので、テンプレートcssの以下部分を編集する必要があります。

追加すべきcssコードは以下のようなもの。



.is_custom_theme .global_nav_container::before {
  /* 背景画像として表示する画像を指定 */
  background-image: url("https://blog-imgs-107.fc2.com/d/e/t/dettalant/bg_test.png");
}

https://blog-imgs-107.fc2.com/d/e/t/dettalant/bg_test.pngというURL指定をしていますが、ここは例によって指定したい画像に合わせてURLを書き換えてください。

これをテンプレートcss最後部の自由記述領域コメント下あたりにコピペすれば良いでしょう。

cssをコピペ後の参考スクショ画像1

上スクショをコピペ位置の参考にすると良いかも知れません。

2.1: カスタムテーマ背景画像の推奨サイズ

「中央揃えで表示しきれない部分は見切れる」表示方法にしているので、見切れてほしくない部分を画像の中央に持ってくることをおすすめします。

2.2: ライトテーマとダークテーマで違うカスタムテーマ背景画像を指定する

初期状態では「ライトテーマ/ダークテーマで同じカスタムテーマ背景画像が使用される」設定になっています。

が、人によっては別々の画像を指定したいこともあるかもしれません。

その場合は上で説明したコードの代わりに、以下のようなコードを用いると良いでしょう。



/* ライトテーマ用カスタムテーマ背景画像指定 */
.theme_light.is_custom_theme .global_nav_container::before {
  background-image: url("https://blog-imgs-107.fc2.com/d/e/t/dettalant/bg_light_test.png")
}

/* ダークテーマ用カスタムテーマ背景画像指定 */
.theme_dark.is_custom_theme .global_nav_container::before {
  background-image: url("https://blog-imgs-107.fc2.com/d/e/t/dettalant/bg_dark_test.png")
}

https://blog-imgs-107.fc2.com/d/e/t/dettalant/bg_light_test.pngがライトテーマ時画像、
https://blog-imgs-107.fc2.com/d/e/t/dettalant/bg_dark_test.pngがダークテーマ時画像と仮定して記述しています。

実際にコピペする際は使用したい画像URLで書き換えるようにしてください。

cssをコピペ後の参考スクショ画像2

上画像も例によってコピペ位置の参考スクショです。

2.3: 初期状態で適用されている各種マスクについて

デフォルトのカスタムテーマ部分には、以下のようなマスクがかかるようにしています。

cssカスタマイズを行えば、これらを個々に変更することが可能です。

が、これらすべてを簡潔かつ詳細に説明する自信はないので、この記事ではグレイスケールフィルタを解除する方法のみ解説することとします。

2.4: ダークテーマ時のグレイスケールフィルタ解除

サンプルサイトでは他の絵描くのめんどくさかった諸事情により、同じ絵をライトテーマ・ダークテーマ両方で使用しているのですが。
その際にダークテーマと色合いを合わせるため、グレイスケールフィルタかけています。

グレイスケールフィルタ適用時画像

こういったもの。

このフィルタは初期状態では有用であっても、差し替えたい絵によっては邪魔になることもあるでしょう。

その場合は以下のコードをcss最後部にでもコピペしてください。



/* 初期状態で適用されているグレイスケールフィルターを解除 */
.theme_dark.is_custom_theme .global_nav_container::before {
  /* ここでは解除していますがお好みのフィルターを付与することもできます */
  filter: none;
}

これを適用すると、表示が以下のように切り替わるはずです。

グレイスケールフィルタ無効化時画像

※リラさんのサイトにつき編集権がなくフィルタOFF画像が出せません。
上記の画像はイラストソフトで元の色味を再現した仮のものです。
ようは、カラーフィルターがなくなり本来のイラストが表示されるという仕組みです。（脚注：秋田ＬＶ３）

フィルタを切ったことで色鮮やかに！

2.5: その他カスタムテーマ機能カスタマイズ

・グローバルナビゲーション背景マスクの透過率を変えたい
・カスタムテーマ時ボタン背景色を変えたい

など、カスタムテーマに適用している他フィルタを変更したい場合は、以下のコード群から選んでコピペし、指定している色をお好みに合わせて変更してください。

LV3さんが作ってくれたrgbaの説明画像

rgba指定については、テンプレート監修をしてくださっているLV3さんがこういった解説画像を作ってくれました。

わかりやすいのでペタリ。

ライトテーマ時透過白マスク



.theme_light.is_custom_theme .global_nav {
  /* この書き方で透過70%の白マスクになる */
  background: rgba(255, 255, 255, .3);
}

ライトテーマ時ボタン背景色変更



/* ライトテーマ時プルダウン要素背景色 */
.theme_light.is_custom_theme .global_nav_clip_wrapper {
  background: rgba(238, 238, 238, .8);
}

/* ライトテーマ時テーマ変更ボタン等の背景色 */
.theme_light.is_custom_theme .switch_theme,
.theme_light.is_custom_theme .switch_custom_theme,
.theme_light.is_custom_theme .switch_fixed_button_pos {
  /*
    css3の仕様だとHEX表記でのアルファ指定はできないので、
    透過設定を用いるにはrgba()関数を使う必要がある
  */
  background: rgba(226, 226, 226, .8);
}

ダークテーマ時透過黒マスク



.theme_dark.is_custom_theme .global_nav {
  /* この書き方で透過50%の黒マスクになる */
  background: rgba(0, 0, 0, .5);
}

ダークテーマ時ボタン背景色変更



/* ダークテーマ時プルダウン要素の背景色 */
.theme_dark.is_custom_theme .global_nav_clip_wrapper {
  background: rgba(38, 41, 51, .7);
}

/* ダークテーマ時テーマ変更ボタン等の背景色 */
.theme_dark.is_custom_theme .switch_theme,
.theme_dark.is_custom_theme .switch_custom_theme,
.theme_dark.is_custom_theme .switch_fixed_button_pos {
  background: rgba(72, 77, 97, .7);
}

以下、rgba()という指定方法についての参考サイトリンク

CSS：CSS3の「rgba()」で背景色を透過する方法 | raining
rgba()－CSS3リファレンス

3: グローバルナビゲーション部位の差し替え

ここからはグローバルナビゲーション項目の差し替えについて。
PC版サンプルサイトのグローバルナビゲーション画像

PC版では全ページの上側（上スクショ参考）、スマホ版ではメニューボタンを押した際に表示される部分のカスタマイズについてです。

この部分をカスタマイズする場合は、テンプレート内を
# グローバルナビゲーションカスタマイズ領域ここからで検索すると出てくる、
<nav id="globalNav" class="global_nav">という部分に内容を記述する必要があります。

3.1: 単一リンクの記述方法

クリックするとすぐさま別ページへ飛ぶリンク。

PC版グローバルナビゲーションの単一リンク部分がハイライトされた画像

画像で示すとこの部分。（上画像赤枠部分）

これを追加するのは簡単です。



<a href="リンク先url">リンクタイトル</a>

上記コードを、以下画像のようにコピペして……。

エディタ内に単一リンク要素をコピペした画像

url指定とタイトル指定を書き換えればいっちょう上がり。

urlとタイトル指定を書き換えた画像

あとはテンプレートを更新するだけ。

単一リンク追加後のグローバルナビゲーション画像

このような変更がなされていれば、リンク追加完了です。

3.2: 入れ子項目の記述方法

ここからは「項目をクリックすると子項目が展開される」入れ子型（プルダウンとも言われる）項目追加方法について。

PC版グローバルナビゲーションの入れ子項目部分がハイライトされた画像
画像で示すとこの部分。（上画像赤枠部分）

これは少し複雑な部分ですが、追加すること自体はそう難しくありません。

以下コードがコピペ用の雛形になります。




<div class="global_nav_clip">
  <button class="global_nav_clip_opener" type="button" title="リンク" aria-haspopup="true">
    <span class="global_nav_clip_opener_text">ここが項目タイトルになる</span>
    <svg class="svg_icon icon_expand" role="img" aria-labelledby="svgExpandTitle">
      <use class="svg_main_color" xlink:href="#svgExpand"></use>
    </svg>
  </button>
  <div class="global_nav_clip_wrapper">
    <a href="リンク先urlをここに指定" rel="nofollow">入れ子リンクタイトル1</a>
    <a href="リンク先urlをここに指定" rel="nofollow">入れ子リンクタイトル2</a>
    <a href="リンク先urlをここに指定" rel="nofollow">入れ子リンクタイトル3</a>
  </div>
</div>

これを、以下のスクショ画像のようにコピペして……。

エディタ内にコピペした画像

こんな風に書き換えれば良いでしょう。

エディタ上でリンクタイトルなどを書き換えたスクショ画像

この上でテンプレート更新すると、ブログ上での見た目がこう変わるはずです。

項目が増えたことをアピールするスクショ画像

（画像は入れ子要素展開時のもの）

追加記述を施した要素が表示されていれば、入れ子項目追加完了！　

あとは入れ子項目内のリンクを増やしたり減らしたりして、あなたのサイトに合わせていってくださいね。

3.3: グローバルナビゲーションについての注意点1

グローバルナビゲーション項目カスタマイズについては、

# グローバルナビゲーションカスタマイズ領域ここからというコメントから、
# グローバルナビゲーションカスタマイズ領域ここまでというコメントまでの領域に記述することをおすすめします。

そこから外れた箇所に記述しても問題ない場合もあると思いますが……。

「この部分に記述したらここが変わるんだな」とよくわかっていないうちは、上記記述領域から外れないようにすることをおすすめします。

3.4: グローバルナビゲーションについての注意点2

FC2ブログ無料版には「スマホ版ページ下部に表示されるオーバーレイ広告」というものがありまして。

これがどうにも、このテンプレートの表示形式と相性悪いんですよね……。

こういった表示になってしまうんです。

グローバルナビゲーションを下側を覆い隠すパズドラの広告

（画像は開発時のもの。オーバーレイ広告がグローバルナビゲーションに乗っかっている状態です）

このオーバーレイ広告は「どんな状況でも画面一番上に表示されるように」わりと強引な手法が使われてるので、どうにもできない部分なんですよね。

サイト側で広告消す細工するとFC2に怒られるし。

なので誠に申し訳ないのですが、これについては「重要なものほど上側に置く」などの運用をしていただければと思っています。

テンプレートが完成した今からここの表示方式変えるの、正直つらいんで許して……。

関連記事

当記事の文章とコードはリラ様の著作物です