Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

-
sample
テンプレート使用中に何故かレイアウトが崩れてしまった…
これをこうしたいけれど どうやれば良いの?
等々

よくある質問をこちらでまとめようと思います
順次追加予定です


★ 右クリックを禁止するには
★ ソース内検索(ページ内検索)するには
★ FC2検索バーが邪魔
★ 記事を書いただけなのにレイアウトが崩れた
★ 最初からレイアウトが崩れている(公式からプレビュー時など)
★ トップページの表示記事数を変更したい
★ 外部プラグインを入れたら別のプラグインが動かなくなった
★ 確実なコピー&ペーストの仕方
★ Facebookシェアに記事内画像が出てこない * 追記あり *
★ Read more はどうやったら出るの?
★ 見本ではサムネイルが出るはずなのに 何故か自分のブログは出てこない…
★ Instagramの写真をリンクだけでなくブログにそのまま載せたいな
★ トップページ記事一覧のサムネイルをコントロールする * 追記あり *
★ カスタマイズしても何も変わらない…
★ サイドバーからプラグインがはみ出してしまう
★ せっかくのレスポンシブデザインなのにスマホ版が...
★ 特定のテンプレートに対するご質問
★ ランキングバナーは拍手やSNSボタンの「前」に! これは譲れない
★ 新着サムネイルが上手く表示されない
★ 今まで使っていたソースコードが使えなくなった
★ メインカラムとサイドカラムの位置を入れ替えたい
★ ブログタイトルやサブタイトルが変なところで改行されてしまう
★ コメント返信の文言を変更したい・管理画面からのコメント返信がおかしい
★ アクセス数が激減したのですが…
★ ヘッダーの上に隙間ができてしまいます






右クリックを禁止するにはどうしたら良いですか?




以下のコードをお試しください
html ソース(テンプレ管理画面『上段』)

</body>


こうしてスラッシュがついているものを『終了タグ』と言いますが
この body の終了タグの直前に以下を記述

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


bodyの終了タグはどのテンプレートでもソースの最後の方にあります

「右クリックさせません
画像の保存も禁止です
ドラッグ&ドロップしようと思ったって無駄です
コピーもしてはなりません
スマホからアクセスしたって画像の保存はさせてやんない」
なコードは以下の通り

<script>$(function(){$('body').on('contextmenu',function(e){return false});$('body').mousedown(function(e){e.preventDefault()});$('body').mouseup(function(e){e.preventDefault()});var a;$("img").on("touchstart",function(){a=setTimeout(function(){alert("この画像は保存できません")},500);return false});$("img").on("touchend",function(){clearTimeout(a);return false})});</script>


ここまで禁じ手が多いと閲覧者の利便性は限りなくゼロに近くなります
よくよくお考えになった上でどうぞ

画像の保存を禁止する方は記事内に画像を掲載する際
aタグは外してください
aタグがついていると別タブで元画像の表示が行われるか、あるいはアルバムへリンクする設定の方はそちらへ遷移します
遷移先ページ(別タブ含む)はテンプレートとは無関係ですから禁止の効力も失われます


TOPへ戻る






ソース内から該当箇所を効率的に見つけるには?




Ctrl+Fキーを利用して検索してください

一般的な Windows

keyboard

Mac

keyboard

(Macの画像は「MacキーボードでWindowsを操作するとき」のものです
マシンがMacの方は Command+F)
ブラウザの隅 左右いずれか ブラウザの種類によって異なりますが
検索窓が出ますのでそこへ検索対象語句を入れて Enter/ Return キー



TOPへ戻る






FC2検索バーは消すことができますか?規約違反ではありませんか?




広告の強制非表示などと違い禁止されてはいません
公式の機能として個人設定(任意設定)で非表示可能です

FC2ブログでは fixed (フィクストゥ) と呼ばれる「位置固定」のものがいくつかあります
スマホ広告もそうですし(スクロールしても常に画面下部に居座ります)
この「検索バー」も同様です

FC2固有のツールバーなどが固定されていると テンプレートの要素と被ってしまうことがあります
その際の対処法として最も簡単・安全なのは
検索バーを非表示にすること
です
こちらの用途はぶっちゃけた話しがFC2の宣伝ですし
オマケっぽい検索については 通常の何のひねりもないブログ内検索というだけですから
非表示で(笑)
表示させない設定に切り替えができることをご存知ない方もおられますので 以下の手順でどうぞ


① 管理画面右上「環境設定」クリック
sample

② ブログの設定 > 検索バーの設定 クリック
sample

③ 非表示を選択
sample


非表示にするとブログ内検索ができなくなる といったことは起こりません
公式プラグインを利用されるか テンプレに付加されている場合もあります
特にスマホをPC版でご覧になる訪問者さんは
このバーに指が触れてしまうと別窓でFC2の広告(有料版への誘導)が開いてしまいます
表示しておいても良いことは一つもありません(笑)

強制ではありませんので ご自分の利便性と秤にかけてお決めください

------- 追記(重要) -------

注) 2016現在 検索バーを「利用する」を選択した場合のデバイス別状態
パソコン --- 検索バー表示 画面からはみ出した場合にははみ出し分カット(画面上に出てこない)
タブレット --- 検索バー表示 画面に無理やり入り込んでくるので全体レイアウト(横幅)が狂う
スマートフォン --- 検索バー強制非表示

タブレットでの表示が一番問題ですね (´・ω・`)
ですからやはり「非表示設定」をおすすめします
(fixed要素との被りは 私のテンプレについてはJSで回避しています)


TOPへ戻る






カスタマイズも何もしていないのに 何故かレイアウトが崩れてしまいました




十中八九 記事を書かれる際に利用したhtml内容に起因しています
htmlタグを手打ちしていなくても FC2エディターツール を利用した時点でhtmlタグを利用していますので
ツールの操作に失敗していることもあります
まず確認すること

・ 記事内でhtmlタグを利用していないかどうか
・ トップページだけでなく 個別記事をいくつか開いて 特定のページだけそうなるのかどうか確認


例えばブログ村クリックですとか 別サイトへの誘導バナーですとか
そういった類のものを貼り付けされる方によく起こります

以下はhtmlタグの知識が無くとも一応お読みください(笑)

よく見る内容にこんなのがあると思います

<div>


そして

</div>



前者を「開始タグ」後者のスラッシュつきのものを「終了タグ」と言います
この両タグの数は揃っていなければいけません
開始タグが3つあるのならば 終了タグも必ず3つ必要です


この数が合っているかどうかをまずご確認ください
大抵の場合は終了タグの過不足がレイアウト崩れを引き起こします
テンプレートを変更しても全て崩れる 崩れないページもある
こういった状況の場合 十中八九タグの整合性が失われていると思ってください

あるいは記事内ではなく サイドバーにプラグインとして加えた何かかもしれません
ともかく作業以前の状態に戻ってみて修正されるのであれば
適用した「何か」に問題があります


TOPへ戻る






カスタマイズを始める前からレイアウトが崩れています



ひとつ前の内容と照らして該当しないのであれば プラグインのコードに起因しているかもしれません
一度プラグイン(最新コメント アーカイブ 等々) を非表示にしてみてください
プラグインはプラグインの テンプレはテンプレのJavascriptが組まれています
その全てが相性ぴったり ということの方が稀です
公式プラグインは基本的にJavascript (Jquery) を利用していませんので
よほどのことが無い限り互いに干渉しあうことはありませんが
共有プラグインは相性があると思ってください
あるいはご自分で導入された内容であった場合 そのコードが正しいかどうか今一度ご確認ください


TOPへ戻る






トップページの記事数を増やしたい/ 減らしたい




こちらはテンプレートカスタマイズではなく 個人のブログ設定です
以下の手順でどうぞ

① 環境設定 > ブログの設定 > 記事の設定
sample

② 1ページあたりの表示件数を指定
sample


TOPへ戻る






外部プラグインを入れたら別のプラグインが動かなくなりました




Jqueryファイルの重複やバージョン誤差があるかもしれません
外部プラグインというのは例えば
音楽を流すウィジェットであったり 画像のスライドであったり
最近のほとんどのプラグインは Jquery というライブラリを参照して動作します(意味わからなくて良いです)
どこかのサイトさんでハウツーを読みながらテンプレートに加える際

Jquery ライブラリを言われるままに導入してしまうことがあります

入れろって書いてあるから入れてしまいますよねemo
ですが(私の作品の場合は)テンプレの方に既に入っていますので重複してしまいます
Jquery の scriptファイルが重ならないようにご注意ください
そして バージョンの確認もしてくださいね

参考記事(詳細)
Jqueryファイル読み込みの誤解


TOPへ戻る






コピー&ペーストが上手くできません




htmlやCSSは修正を加える際に 半角ひとつ 記号ひとつ 違えても動作しません
ここでコピペの仕方ですが

マウス動作だけを頼りにしない

というセオリーがあります
コピーして貼り付けたのに上手くいかない場合 コピーそのものに失敗している可能性もあります
記号の羅列はとってもコピーし難くてですね
抜け落ちてしまうことがあるんです
自分はちゃんと拾ったつもりでも " が拾えてなかったり
せっかくドラッグ選択したのに 右クリックしたら解除されてしまったり
記号の抜け落ちなどは狭い範囲でマウスだけを利用しようとするので起こります
狭い文字列間をコピーする時には キーボードを使ってください

対象の文字列文頭 あるいは 文末に キーボード矢印キーでカーソルを合わせ
Sift キーを押しながら 上下左右の矢印キーで選択をします
これが一番確実です
そして全選択はマウスドラッグで行うのではなく

Ctrl + A

で一発コピーです
マウスドラッグでは拾い残しがあるかもしれません
キーボードを上手く利用してください

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


TOPへ戻る






Facebookシェアしても画像が出てきません




これはFC2がサムネイルの実装をしていないからです 改正あり 後述)
テンプレ製作者側ではどうにもできません
リクエストに賛成票をお願い致します ^^;

そして投稿済みエントリーを編集する際にうっかり「テーマ」を変更してしまうと
整形済テキストがぶっ壊れてレイアウトが死亡するのもFC2の仕様でございます(ニコ)

--- 追記 2-15.9.5 ---

FC2の新機能として「OGP設定」が追加されました
個人の環境設定になりますが 記事内最初の画像が抽出できるようになりました

sample


sample

FC2のOGP導入に伴うテンプレ内容変更


TOPへ戻る






Read more や 続きを読む が出てこないのですが…




こちらはテンプレートの仕様に左右されるものではありません
各個人が「追記」を利用しているかどうかです
FC2のトップページで表示される記事の『状態』は大別して二通りあります
ひとつは「要約」表示
もうひとつは「全文」表示

要約表示はトップページ用などに特化しており
『本文の編集』 に記載した内容から最大200文字(改行含まず) が抽出されます
こちらのパターンでは「追記編集」を利用している・いないに関わらず Read more の表示とともに個別記事への誘導が為されます(Read moreなし タイトルクリックなどの場合もあり)

追記の編集は簡易モードONの状態では使えません
利用するには簡易モード設定をOFFにします

全文表示は
トップページでも表示文字数の制限はなく『本文の編集』及び『追記の編集』 に記載した内容も区切りなく表示することが可能です
Read more ボタン表示と共に 個別記事へ誘導される場合と その場で折りたたまれたコンテンツを開いて読める場合とのいずれかです

全文表示タイプの場合には
この『追記』が存在しない場合 (全文章を『本文の編集』に記載した場合) には
Read more や 続きを読む の文言は出てきません

トップページで記事が折りたたみになっており その場で開いて読めるタイプのテンプレートも
この『追記の編集』を利用して表示を行っております
『本文編集』内容はそのまま表示し 残りの『追記編集』内容は折りたたみ = Read more あるいは 続きを読む などで開く(ページ遷移なし)

ですから「折りたたみ」を利用される方は 本文と追記とを分けてください


TOPへ戻る






トップページなどにサムネイル画像が出てきません




FC2サムネイルの取得条件と合致しているか確認しましょう
FC2で抽出できる画像は

『本文の編集』に存在する一番最初の画像
FC2サーバーにアップロードされている画像

この二つの絶対条件があります
追記以降の画像は例え全体の一番最初のものであっても抽出が行われません
また 画像ホスティングサービスへアップロードしたもの等 直リンクでの表示も対象外です
さらに注意点として

ファイルアドレスに括弧が付いていると抽出が行われない
というのもあります
ファイル拡張子の前の「名称」のことです

○ 12345.jpg
✕ 12(345).jpg

また RSSを利用したサムネイルの場合とは条件が異なりますので そちらもご参照ください コチラをクリック


TOPへ戻る






Instagram の写真を表示したい




たまにお問い合わせがありますが
アカウント入力が必要なサービスをテンプレ製作者側で操作するのは不可能だと思ってください(笑)
みなさんのアカウントを把握する術がありませんので 個人でカスタマイズして頂く他ありません
FC2個人設定への機能追加に期待 というところです
Instagram に関しては以下のサイトさんが参考になるかと思います

ブログのサイドバーにInstagramの写真を載せるのにちょうど良いウィジェットを発見
iLog 様


TOPへ戻る






トップページに表示されるサムネイルに好きな画像を設定することはできますか?




少しの知恵を使えば可能です
既に述べました通り FC2で記事サムネイルとして抽出できるのは
・ 「本文の編集」内に存在する一番最初の画像
という制約があります
これを自分の好きな画像にするための小技は下記のリンク先参照のこと (当ブログ内の別ページです)
絵文字やバナーがサムネイルになってしまう状況も含め 対処法を記しています

好きな画像をサムネイルにするには

----- 追記 2016.6.27

FC2の新機能として 記事作成画面からサムネイル画像の指定ができるようになりました
こちらは便利ではありますが
RSS新着サムネイルを利用する方は使わないようにお願いします

FC2サムネイルとRSSサムネイルは全く性質の異なるものです
FC2の指定サムネイルはFC2内だけで完結しますので RSSなどに外部発信されません
従ってRSSを利用した新着サムネイルでは該当画像の抽出ができません
従来通り素直に「記事の一番最初の画像」にするか あるいは上記にある通り 0✕0 での掲載を選択してください


TOPへ戻る






カスタマイズをしたのに反映されていないようです…




「プレビュー画面」をご覧になっているのではないでしょうか
プレビューでは設定がすぐに反映されません
また Javascriptの関係上 プレビューで確認ができないものもあります
事前にテンプレ複製をお取り頂くのを忘れずに 「上書き(更新)」をしてご確認ください
テンプレート自体の不具合 あるいは カスタマイズに失敗した と思い込んでしまう場合がありますので
プレビュー画面で本当の見た目を確認することは「できない」と思って頂いた方が良いと思います


TOPへ戻る






サイドバーに設置したプラグインがサイドバーからはみ出してしまいます




こちらの記事をご参照ください

レスポンシブのためのプラグインサイズ設定


TOPへ戻る






スマホ版を非表示にしてレスポンシブデザインを採用したい




こちらは各個人のブログ設定で可能です

環境設定 > ブログの設定 > スマホ版の表示設定

sample

SEO的に特に何か問題が発生する等ありませんので
レスポンシブデザインの場合にはスマホ版非表示をおすすめします
Googleの推薦優先順位は以下の通り
・レスポンシブデザイン
・レスポンシブが不可能な場合にはスマホ版設定


TOPへ戻る






特定のテンプレートについて質問したい




サイドバーのカテゴリに テンプレート という項目があります
そちらをクリックして頂くと該当テンプレが見つかりますので まずは該当する記事をご覧ください
ご質問内容の答えが記されているかもしれません


TOPへ戻る






ランキングバナーを常に拍手の「前」に入れたい




以下のJSをお試しください
FC2のトップページに於ける記事表示タイプはいくつかパターンがありますが
FC2拍手やSNSボタンを表示するJavascriptの関係上
ユーザーが任意でテンプレソースに書き込むランキングバナーの内容が思い通りの位置にならないことがあります
(記事を書く度に記事末尾にソースを貼り付けている方は無関係です)
記事のパターン毎に書き込む位置を変更するのも大変ですので こちらもJSを使って拍手に対抗します(なんか表現おかしいけど)

</body>


直前に以下を追加

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


これでどんな形式のテンプレでも常に拍手の「前」にバナーが表示されます

注意) Jqueryファイルが導入されていることを前提としたコードです

/ajax/libs/jquery/

の文字列を持つscriptファイルが無ければ動作しません
無い場合には vanilla js (通常のJavascript ネイティブJavascript)で書く必要がありますが
私のテンプレには必ず入っていますので割愛
また このファイルよりも「後ろ」に記述する必要がありますので
やはり
</body>
の直前が望ましいです

貼り付けても何も表示されない... という場合には
ランキングバナー自体のコード内容をご確認ください
</ br>
<br>
が多用されていたり(改行コードにはルールがあります)
<div align="center">
などの廃止属性(align)が含まれている
開始タグと終了タグの位置や数が合っていないなど
バナー関連コードの方が間違っていると真っ白で何も表示されません


TOPへ戻る






RSS新着サムネイル表示の使い方がよくわかりません




2017.1.13 追記
現在この機能を導入しているテンプレートはありません(FC2公式実装・Google Feed API廃止に伴う変更のため)

--- 以下本文 ---

ブログに鍵をつけていないことが大前提です
鍵つきブログの方は基本的に新着サムネイルはご利用頂けません(例外あり)

FC2では新着一覧のサムネイルが準備されていません(2015.11月現在)
SNSシェアのサムネイル実装が済みましたので 今後正規機能として追加されることもあるかもしれませんが
現時点で私のテンプレートではRSSを利用した表示を行っています
(RSS新着サムネイルを採用しているテンプレとそうでないものとあります)

記事自体が表示されない
記事内に画像があるにも関わらずNo image代替画像になってしまう
絵文字がサムネイルになってしまう 等

この機能をご利用頂くには個人設定を済ませる必要があります

環境設定 > ブログの設定 > 記事の設定

sample

下から2ばん目に RSSの設定 という項目があります
まずこちらの表示件数を できれば8件以上にしてください
Google API から取得できるRSSサムネイルの最大数は8件です
ブログにいくつ表示するかはテンプレソース内で選べますので
RSS発信の状態はMAXの8件(またはそれ以上)にしておくと良いと思います
そして 全文表示 を選択してくださいね
(スクリーンショットは「一部表示」になっていますが ここを「全文」に変更です)

RSSサムネイル適用テンプレに変更する以前に
なんらかの問題でRSSが上手く発信されていない場合 記事そのものが表示されないことがありますが
正しく設定すれば一両日中には表示されるようになるかと思います

また この設定を変更した際 変更が適用されるまでのタイムラグがあります
件数を変更しただけでもこのラグは発生し 画像が一旦全てNo imageに置き換わることもあります
平均約10〜20分程度で落ち着きますので まずは慌てずに様子を見てください

サムネイルが絵文字になってしまう
FC2記事サムネイルと異なり 記事内最初の画像が絵文字の場合でもそれを認識して表示します
変更するには最初の画像を別のものに置き換えるか あるいは
既に記した内容と重複しますが 以下の記事内容をご参照ください

好きな画像をサムネイルにするには


TOPへ戻る






今まで使っていたタグで記事が作成できない



テンプレートのhtmlバージョンである 5 と
お使いのソース内容のhtmlバージョンが不整合かもしれません ご確認ください

HTML5で廃止された要素や属性一覧


TOPへ戻る






メインカラムとサイドカラムの位置入れ替えたい




テンプレート毎の個別対応は行っておりません
左右入れ替えについてはこちらの記事をご参照ください ↓

テンプレートのカラム位置変更について

また カラムの変更についてのご質問は承っておりません
すみません (*_ _)


TOPへ戻る






ブログタイトルやサブタイトルが変なところで「折り返し(改行)」されてしまいます




FC2変数を使わずに直接テキストを書き込んでください
ブログのタイトル そしてサブタイトル(ブログ説明)が意図せぬところで折り返される(改行される)ことがあるかと思います
テンプレートのCSSで調整することも可能ですが
一番簡単なのはこのタイトル2点を意図的に改行操作する方法です

テンプレート製作者はユーザーのブログ名までは把握できませんので

<%blog_name>


というFC2独自変数でもって テンプレ利用者のブログ名を出力します
この変数は「使わなければいけない」ものではありませんので
テンプレート内でCtrl+Fキー検索されまして
テキストと置き換えてください

例)
日々のいろいろを記録するための個人的日記ブログ

日々のいろいろを<br>記録するための<br>個人的日記ブログ<br>


改行したい文章末尾に
<br>
を記述します

結果)

日々のいろいろを
記録するための
個人的日記ブログ


文字の位置揃えはテンプレート内容を踏襲します


TOPへ戻る






管理画面からコメントへの返信をするとテンプレートが一部おかしくなります




管理画面からの返信を想定して制作をしておりません(すみません)
訪問者の方の利便を優先しています
コメント下にあります REPLY をクリックすると デフォルトでは自動で

To ○○さん

という文字列がタイトル部分に入ります。
タイトル欄に毎回決まった返信文章をお持ちの方は以下の箇所を編集してください
Ctrl+Fキー検索

reply

を目印に

<a href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%comment_name>さん">REPLY</a>



<%comment_name>
がコメント主のハンドルネームの出力部分です
緑の部分を編集してください

また 管理画面から返信をされますと JS同士が衝突しておかしな文字列が表示されたり
ということが起こります
管理画面返信を優先されます方はテンプレート側の機能自体を削除してください
検索

&nbsp;|&nbsp;<a href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%comment_name>さん">REPLY</a>


上記を削除
続きまして検索

<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>


上記内容を削除


TOPへ戻る






テンプレートを設定したらアクセス数が減ってしまいました




アクセス解析コードをサイドメニュープラグインに掲載していませんか?

テンプレートの種類に エンターページ が設けられているものがあります。
あるいはトップページに サイドメニュー(サイドバー)が設けられていないものもあります。
もしあなたが解析コードをサイドメニューに掲載したのであれば、サイドメニューの無いページでは アクセス数の取得ができません
実際にアクセスが減ってしまったのではなく、恐らく解析情報から除外されているための減少です。
解析コードはフリーエリアなどのプラグインとしてではなく htmlソースに直接記載する ことが望ましいです。


TOPへ戻る






ヘッダーの上に隙間ができて見苦しいのですが




① FC2アクセス解析の「ソーシャルタイプ」をご利用ではありませんか?
② head情報をカスタマイズしていませんか?


① FC2アクセス解析のソーシャルタイプの仕様上、ヘッダー上部に強制的に隙間ができてしまいます。
アイコンタイプに変更するだけで解消されます。

② head情報をカスタマイズされた場合、内容にミスがあるとヘッダー上に隙間ができます。


TOPへ戻る


最終更新日2017-07-12
Posted by
Tips