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

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

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

 

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

スポンサーリンク

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

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

 

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

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

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

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

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

 

アップロード画像の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: ヘッダー画像の推奨画像サイズリスト

画像 サイズ
PC版ヘッダー画像縦幅 100px程度
PC版ヘッダー画像横幅 500px〜1066px程度
スマホ版ヘッダー画像縦幅 64px
スマホ版ヘッダー画像横幅 224px〜400px程度
スマホ版グローバルナビゲーションヘッダー画像縦幅 64px
スマホ版グローバルナビゲーションヘッダー画像横幅 224px

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

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: カスタムテーマ背景画像の推奨サイズ

説明 推奨サイズ
カスタムテーマ横幅 600px
カスタムテーマ縦幅 1100px

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

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: 初期状態で適用されている各種マスクについて

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

箇所 効果
ライトテーマ時背景色 透過70%の白マスク
ライトテーマ時ボタン背景色 透過20%での色指定
ダークテーマ時背景画像 80%のグレイスケールフィルタ
ダークテーマ時背景色 透過50%の黒マスク
ダークテーマ時ボタン背景色 透過30%での色指定

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

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

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

サンプルサイトでは他の絵描くのめんどくさかった諸事情により、同じ絵をライトテーマ・ダークテーマ両方で使用しているのですが。

その際にダークテーマと色合いを合わせるため、グレイスケールフィルタかけています。

 

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

こういったもの。

 

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

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

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

 

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

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

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

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()という指定方法についての参考サイトリンク

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に怒られるし。

 

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

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