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

よくあるご質問「お困りですか？」

2015/07/22

2022/10/04

vanillaice (Akira)

Tips

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

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

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

詳細を見る

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

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

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

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

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

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

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

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

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

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

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

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

詳細を見る

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

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>

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

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

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

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

3. 注意事項と再考

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

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

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

詳細を見る

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

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

詳細を見る

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

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

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

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

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

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

1 と同じです。

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

詳細を見る

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

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

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

対象文字列を検索する

一般的なWindowsキーボード

一般的なMacキーボード

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

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

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

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

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

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 がそれにあたります。
最終以外の末尾には必ずセミコロンが必要です。
普段から例え最終プロパティであってもセミコロンを記載するクセを付けておくことをおすすめします。

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

詳細を見る

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

詳細を見る

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

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

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

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

2. パターン別対処

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

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

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

詳細を見る

以下の記事内容をご参照ください。

ブログタイトルの折返しを制御する方法

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

詳細を見る

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

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

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

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

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

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

詳細を見る

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

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

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

詳細を見る

以下の記事をご参照ください。

記事内の画像を変更してもサムネイルが変わらないという方へ【FC2ブログアイキャッチ仕様変更】

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

詳細を見る

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

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

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

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

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

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

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

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

ブラウザの再起動をする

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

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

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

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

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

Related post

「よくあるご質問「お困りですか？」」カテゴリの一覧を見る