attention admin about comments trackbacks you may also like

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

2015年07月22日
よくあるご質問「お困りですか?」
-
Tips

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

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

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

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

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

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

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

TOPへ戻る

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

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

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

FC2ブログのレイアウトが崩れた時に試すこと - カスタマイズ

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

TOPへ戻る

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

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

レイアウトを崩してしまう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?ああ なんかページ内でいろいろやるやつねスライダーとかページ内スクロールとか要はJavascriptとかいうやつでしょう?まあそうなんだけども (´・ω・`)...

テンプレートのjQueryとプラグインのjQueryの衝突を察知する小ワザ - カスタマイズ

小ワザもクソもないのですが (´・ω・`) 今見ているページのjQueryのバージョンがいくつなのか がすぐにわかるようにしておけば良いのです。 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. jQueryを利用した表示位置操作詳細を見る

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

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

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

TOPへ戻る

2. jQueryを利用した表示位置操作

利用の前にhtml(DOM)に無い要素を追加しますのでページ表示に負担がかかることを理解しておいてください。
また、ネイティブ JSを用いる方法はとても複雑なのでjQueryをおすすめします。

<!--permanent_area-->
<script> 
$(function() { 
$('<div style="text-align:center; margin: 30px auto;">バナー関連ソースコード</div>').insertBefore('.fc2_footer'); 
}); 
</script>
<!--/permanent_area-->

上記JS内容(一部修正必須)をテンプレートhtml内 </body> の直前に記載します。
バナー関連htmlは コード内改行不可(brタグ利用は可) です。
CSS内容は別途準備する必要があります。

4行目の .fc2_footerSNS関連ボタンの集合要素 を示すクラス名で、上記内容の通りであればSNSボタンの「直前(上)」に表示されることになります。
ボタンの直後(下)にしたい場合は同じく4行目の BeforeAfter に変更します。

関連記事を基準とした位置指定は .relate_dl に変更してください。
ブログ個人設定で非表示化している要素を基準にすることはできませんので注意。

TOPへ戻る

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

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

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

「ブログタイトルがおかしなところで折り返してしまいます。」という質問が寄せられることがあります。 例えば仮にブログタイトルが ハーレーダビッドソンのバイクを熱く語るブログ だとします。 不自然な折返しの例 ハーレーダビッドソンのバイ クを熱く語るブログ 自然な折返しの例 ハーレーダビッドソンのバイクを 熱く語るブログ 一文が全て横に並んでいるのが最も自然なわけですが、スマー...

TOPへ戻る

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

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

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

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

TOPへ戻る

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

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

TOPへ戻る

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

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

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

TOPへ戻る

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

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

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

書こうかなと思いながら長らくスルーしていた 【アイキャッチ画像】設定の仕様変更 についてです。 えっとねー、いつだったかな? 6月からFC2ブログが各機能をにちょこちょこと変更かけてたんですよね。 「… 迷走しとる (´・ェ・`)」などと思ったものです。 システムを変えてみたり戻してみたりやっぱり変えてみたり… という時期があったんです(笑) 迷走なんて言葉を使うと失礼ですね。「調整」という表現の方が良いか。 ...

TOPへ戻る

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

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

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

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

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

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

TOPへ戻る

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

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

TOPへ戻る

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

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

TOPへ戻る

ブラウザの再起動をする

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

TOPへ戻る

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

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

TOPへ戻る

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

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

TOPへ戻る

vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *