ご質問の前に「テンプレあるある」

ご質問の前に「テンプレあるある」

よくあるご質問「お困りですか?」
2015/07/22
vanillaice (Akira)
vanillaice (Akira)
Tips

テンプレート使用中に何故かレイアウトが崩れてしまった…。これをこうしたいけれどどうやれば良いの?等々。よくある質問をこちらでまとめようと思います。順次追加予定です。

本ページ内容は レスポンシブ設定を行っている場合に限ります。
レスポンシブ設定 = スマートフォン版表示設定「無効」
スマホ専用版を設定している場合そのスマホ版は私のテンプレートとは一切関連がありません。ソースコードの追加や修正など、スマホ版への言及はできませんので予めご了承ください。

?カラム落ち?と思ったときは

  1. それは本当にカラム落ちですか?詳細を見る
  2. 開始タグと終了タグの数は合っていますか?詳細を見る
  3. 記載している記号が全角になっていませんか?詳細を見る

1. それは本当にカラム落ちですか?

レスポンシブデザインの特徴を勘違いしていませんか?
レスポンシブデザインとは画面サイズに応じてカラムの 再編成 を行い、あらゆるデバイスで快適に閲覧できるように考慮されたレイアウトを指します。
パソコンでは2カラムだと仮定し、スマートフォンでその2カラムを維持してしまうと狭い画面では閲覧が困難です。
そのため読みやすい構成になるよう カラムを横並びから縦一列に再編成を行います。
その再編成のブレイクポイント(レイアウトの切り替え)をカラム落ちだと勘違いしていませんか?
いかなる画面サイズでも基本カラム構成を維持したい場合には レスポンシブデザインを選ぶべきではありません。
固定幅(ソリッド)レイアウトを選び直しましょう。

ブラウザの横幅を変更して確認してみてください。
それでもやはり「カラム落ちである」と判断できる場合には 2 を参照してください。

TOPへ戻る

2. 開始タグと終了タグの数は合っていますか?

テンプレートに何かを追加しませんでしたか?
あるいはプラグインを追加しませんでしたか?

カスタマイズ後に崩れた場合はテンプレートをデフォルトの状態に戻して確認をしてください。
それでも崩れている場合にはプラグインを一旦全て非表示にし、その上で下記のリンク先記事を参照してください。

FC2ブログのレイアウトが崩れた時に試すこと

FC2ブログのレイアウトが崩れた時に試すこと

なんか知らんがレイアウト崩れてしもたがな となった時にですね、んもーテンパっちゃって何したら良いかわかんない! な状態に陥る方が多いわけなんですよ(笑) 何から手をつけたら良いかさえわからん、ってやつ。 そういう時は慌てず騒がず、とりまコーヒーでも飲んで一息入れまして。 そのまま忘却の彼方へ… となってはいけませんが、落ち着いた頃に以下のような対処法を試されてはいかがでしょうか。...

TOPへ戻る

3. 記載している記号が全角になっていませんか?

こちらもよくあるミスです。特に ダブルクォーテーション
以下のリンク先記事を参照してください、

レイアウトを崩してしまうhtmlの凡ミスいろいろ

レイアウトを崩してしまうhtmlの凡ミスいろいろ

凡ミスなんですよ (´・ω・`) 凡とはいえ、htmlでは 記号ひとつ打ち間違えても内容が狂ってしまう んですね。 そんな凡ミスのよく見かけるパターンを挙げてみようと思います。 htmlのありがちなミスには 入れ子のミス (開始タグと終了タグの 位置 間違い) タグの閉じ忘れ (開始タグに対応する終了タグが 欠損) 開始タグと終了タグの数が違う (一部の空要素以外は 開始タグと終了タグの数が一致している必要あり) ...

TOPへ戻る

?画像や文章の盗用を禁止したい(右クリック保存の禁止)

  1. JSを利用したマウス右クリック禁止詳細を見る
  2. スマートフォンでの画像保存禁止詳細を見る
  3. 注意事項と再考詳細を見る

1. JSを利用したマウス右クリック禁止

以下の内容を </body> の直前に記載してください。

jQueryを利用する場合

<script>
$(function() {
  $('body').on('contextmenu',function(e) {
    return false;
  });
});
</script>

Vanilla JS(ネイティブ JS)を利用する場合

<script>document.addEventListener('contextmenu', event => event.preventDefault());</script>

TOPへ戻る

2. スマートフォンでの画像保存禁止

パソコンでのマウス右クリック保存と同時にスマホでの長押し保存やコピーを禁止する場合は以下の内容をスタイルシートに追加します。

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
}

こちらのコードを採用した場合、閲覧者の利便は限りなくゼロに近くなります。
よくよく考えた上で行ってください。

TOPへ戻る

3. 注意事項と再考

右クリックを禁止する際の注意事項です。
画像を掲載する際には aタグ で囲わないようにしてください。
元画像を別タブで開いたり、FC2ブログのアルバムに遷移するなど、リンクとして掲載しないようご注意ください。
遷移先ページはテンプレート内容の効力はありませんので、そのページから簡単に保存できてしまうことになり意味が有りません。

右クリックを禁止する場合には OGP設定についても熟考してください。
OGP設定とはSNSシェアなどに係る内容の設定です。
OGPを有効にしている場合各種SNSシェアやブログカードなど、様々な場面に於いて 画像の直リンクが行われます。
「右クリックは禁止、シェア直リンクは有効」というのは視点が噛み合っていないように思いますのでご一考ください。
また、右クリックの禁止は 一般的に好まれません
その点も併せ、導入前に再考されると良いと思います。

TOPへ戻る

?トップページの掲載記事数を変更したい

  1. 掲載数はテンプレート編集ではなくブログ個人設定です。ブログ個人設定で変更してください。
    記事の設定

?プラグインの動作がおかしい

  1. FC2プラグインが動かなくなった詳細を見る
  2. jQueryプラグインが動かなくなった詳細を見る

1. FC2プラグインが動かなくなった

そのプラグインには jQueryファイルが含まれていませんか?
プラグインが独自にjQueryファイルを有していることがありますが、jQueryファイルはテンプレート内に既に含まれています。
また、jQueryには バージョン があり、日々進化しています。
jQueryファイルの基本については以下のページを参照してください。

jQueryファイル読み込みの誤解

jQueryファイル読み込みの誤解

jQuery?ああ なんかページ内でいろいろやるやつね。スライダーとかページ内スクロールとか、要はJavascriptとかいうやつでしょう? まあそうなんだけども (´・ω・`) テンプレートカスタマイズで例えばそれこそスライダーを追加する、だとか、外部サイトのRSSを読み込んで表示させる、だとか。 色々「追加」をしていく際に jQueryライブラリ というのが一体なんなのかを知っておかないとよくありがちな間違いを犯すことに...

テンプレートのjQueryとプラグインのjQueryの衝突を察知する小ワザ

テンプレートのjQueryとプラグインのjQueryの衝突を察知する小ワザ

小ワザもクソもないのですが (´・ω・`) 今見ているページのjQueryのバージョンがいくつなのか がすぐにわかるようにしておけば良いのです。 jQueryのなんたるかは割愛。 FC2で最近リリースされているテンプレートというのは、共有に限らず公式のものでも jQueryライブラリが既に含まれている ことが多いです。 ところが一昔前(2006〜2013年あたり)まではまだあんまり出回ってはいなかったんですね。 ちなみにjQueryの生...

TOPへ戻る

1. jQueryプラグインが動かなくなった

1 と同じです。

TOPへ戻る

?修正や変更などを指示通りにやっているのに上手く行かない

  1. コピーに失敗していませんか?詳細を見る
  2. 正しい位置に記載していますか?詳細を見る
  3. 必要な記号が欠落 or 間違っていませんか?詳細を見る

1. コピーに失敗していませんか?

html, CSS, Javascript など、文字や記号などがひとつ欠けていても正しく動作しなくなります。
マウスでの操作や右クリックだけに頼らずショートカットキーを活用してください。

対象文字列を検索する

一般的なWindowsキーボード

一般的なMacキーボード

赤く記したショートカットを利用することでページ内の対象部位の検索が容易になります。
以下はその他作業に必須となるショートカットです。

Ctrl + A --- 全選択
Ctrl + C --- コピー(複製)
Ctrl + X --- カット(切り取り)
Ctrl + V --- ペースト(貼り付け)

Macをお使いの方は CtrlCommand に置き換えてください。

TOPへ戻る

2. 正しい位置に記載していますか?

よくある勘違いが 「</body> の直前に〜」と書いてあるにも関わらず、「<body> の直前に〜」と、開始タグと終了タグを見間違えてしまうパターン です。
英単語の前に / (スラッシュ) が付いている場合それは終了タグです。しっかり見て開始タグと間違えないようにしてください。

TOPへ戻る

3. 必要な記号が欠落 or 間違っていませんか?

以下がよくあるミスです。チェックしてみてください。

  • 記号が全角になっている
  • CSSの } ブレイス(brace)の欠損
  • CSSの ; セミコロン(semicolon)の欠損

全角記号の例

<div class=xxx></div>

<div class="xxx"></div>

ブレイス欠損の例

@media screen and (max-width: 700px) {
  .xxx {
    font-size: 1.3rem;
}

@media screen and (max-width: 700px) {
  .xxx {
    font-size: 1.3rem;
  }
}

セミコロン欠損の例

.xxx {
  margin: auto;
  width: 200px
  height: 200px
}

.xxx {
  margin: auto;
  width: 200px;
  height: 200px
}

注意: 最終プロパティ指定のセミコロン無しは正当(valid)です。
例で言うと height: 200px がそれにあたります。
最終以外の末尾には必ずセミコロンが必要です。
普段から例え最終プロパティであってもセミコロンを記載するクセを付けておくことをおすすめします。

TOPへ戻る

?トップページの「read more」や「続きを読む」が表示されない(全文表示タイプ)

  1. 追記を利用していない場合には出ません。本文と追記を分けるようにしてください。
  2. 簡易モードをONにしている場合追記の利用はできません。OFFに変更して追記を利用してください。

?テンプレートhtmlに記載したランキングバナーが思い通りの位置に表示されない

  1. 個別記事の表示順序は予め決められています(FC2ブログの仕様)詳細を見る
  2. パターン別対処詳細を見る

1. 個別記事の表示順序は予め決められています(FC2ブログの仕様)

記事本文 → 記事追記 → ブログ個人設定のSNS関連ボタン → 関連記事リスト → テキスト広告(非表示可) → ここにテンプレート記載内容

上記のように順序が決められています。ランキングボタンに限らずテンプレート内の <!--/more--> の直下に記した内容は赤字部位よりも前に掲載することはできません。
これはFC2ブログの仕様です。
htmlだけでは記載箇所の操作が不可なのでJavascriptで要素の追加を行うことになります。

TOPへ戻る

2. パターン別対処

以下のページをご参照ください。

ランキングバナーやアフィリエイトバナーを好きな位置に表示するには

ランキングバナーやアフィリエイトバナーを好きな位置に表示するには

多くの方がランキングやアフィリエイトのバナーを 記事の直下に掲載したい という希望をお持ちのようです。しかしFC2の仕様により現実は結構それが難しい。というわけでパターン別の解消法です。テンプレート内容の操作をしますので中級以上向け… ですが初心者さんでもできます。基本コピペだけなんで (´・ω・`)...

TOPへ戻る

?ブログタイトルの見た目(改行)がおかしい

?ヘッダーの上部に何故か隙間ができる

  1. head情報内容をカスタマイズしませんでしたか?詳細を見る
  2. FC2ソーシャル解析を利用していませんか?詳細を見る

1. head情報内容をカスタマイズしませんでしたか?

head内には一般的に「metaタグ」と呼ばれる重要な要素が数多く記載されています。
その内容にミス(invalid 不正)があるとヘッダー上に隙間ができることがあります。

TOPへ戻る

2. FC2ソーシャル解析を利用していませんか?

FC2アクセス解析には通常タイプとソーシャルタイプの2種類があります。
コード内容への言及は避けますが、ソーシャルタイプの方を利用するとヘッダー上に隙間が生じます。
ソーシャルタイプのSEO的メリット等は特にありませんので通常タイプに変更をおすすめします。

TOPへ戻る

?コメント欄で表示されるはずの管理人アイコンが表示されない

  • 一旦ログアウトし、再ログインする
  • FC2ブログで非ログイン状態になっていないか、別アカウントでのログイン状態になっていないかを確認
  • ブラウザのキャッシュやクッキーを削除する

管理人アイコン表示はログイン確立で成り立っていますので、このいずれかで解決する場合が多いです。それでも解決しない場合にテンプレートの不具合やカスタマイズの影響を考えましょう。

TOPへ戻る

?トップページのサムネイル画像が変更できない

?ページの表示が異常なまでに遅い

  • 公式プラグインの アルバム を利用していませんか?詳細を見る
  • スマートフォンの帯域制限を迎えていませんか?省電力モードに入っていませんか?詳細を見る
  • スマートフォンのマルチタスクを終了し、再起動をする詳細を見る
  • ブラウザの再起動をする詳細を見る
  • キャッシュやクッキーの削除などクリーニングをする詳細を見る
  • 任意追加したアクセス解析やウィジェットなどのJSが機能しているか確認詳細を見る

公式プラグインのアルバムを利用していませんか?

最も多いのはこの該当者です。アルバムプラグインを掲載しているだけで表示速度が10倍以上遅くなります。詳細は以下の記事をご参照ください。

FC2ブログ プラグインは厳選して利用しましょう

FC2ブログ プラグインは厳選して利用しましょう

web一般の「プラグイン」ではなく、FC2ブログの「プロフィール」や「最新コメント」など主にサイドメニューとして掲載する「プラグイン」のことです。 これらの利用は 必要最小限に留めましょう のススメ。...

TOPへ戻る

スマートフォンの帯域制限を迎えていませんか?省電力モードに入っていませんか?

念の為個人の通信環境をご確認ください。

TOPへ戻る

スマートフォンのマルチタスクを終了し、再起動をする

たくさんのアプリを起動させたままになっていたり、ブラウザのタブを大量に開いたままにしていたりなど、メモリを消費しすぎていないかご確認ください。

TOPへ戻る

ブラウザの再起動をする

スマートフォン・パソコン共にブラウザ再起動を行ってみてください。

TOPへ戻る

キャッシュやクッキーの削除などクリーニングをする

デバイス自体のメモリが落ちている可能性がありますので定期的なメンテナンスもおすすめします。

TOPへ戻る

任意追加したアクセス解析やウィジェットなどのJSが機能しているか確認

テンプレートへ任意追加した主に JavaScriptファイル がサービス終了などにより機能していないことがあります。読み込めないJSファイルはテンプレート全体の表示スピードに悪影響を及ぼします。

TOPへ戻る

Related post