The other way round

ARTICLE PAGE

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

よくあるご質問
  • comment52
  • trackback0
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へ戻る


Comments 52

-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/07/24 (Fri) 13:36 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/07/24 (Fri) 13:42 | EDIT | REPLY |   
Akira  
To 内緒さん

いえいえ。単にこちらの都合だけですので、どうぞお気になさらずe-257

で、今回は全体のセンタリングだったんですね。
過去記事も併せて・新規も自動で
という解釈で合ってますでしょうかね。

--------------

CSSソース(テンプレ管理画面『下段』)の末尾に以下を追加

.inner-contents {
text-align: center;
}


これで全てセンタリングされます。
お試しくださいませーe-454

2015/07/24 (Fri) 13:46 | EDIT | REPLY |   
Akira  
To 内緒さん

私の我儘でメールでの受付をお断りしているんです。
これはもうホント、私の都合だけなので申し訳ない (*_ _)

リコメの確認が面倒ですよね (´・ω・`)
FC2さん改善してくれんだろうかe-252

2015/07/24 (Fri) 13:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/07/25 (Sat) 06:12 | EDIT | REPLY |   
Akira  
To 内緒さん

伝わって安心しました(笑)
こちらこそいつもありがとうございますe-454
また精進致します ( ゚Д゚)ノ

2015/07/25 (Sat) 16:47 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/07/26 (Sun) 01:17 | EDIT | REPLY |   
Akira  
To 内緒さん

おばんです ( ゚Д゚)ノ
こちらこそいつもありがとうございますe-257

んで、どれのことやらわからん(笑)
コロコロ変えてるから自分がわかんないe-452
グリッドの紫ベースのこれかしら?
茶色?どれ?(笑)

いずれにしても順次配布予定でございま ^。・x・)b

2015/07/26 (Sun) 01:59 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/08/09 (Sun) 16:23 | EDIT | REPLY |   
Akira  
To Rachuでお尋ねのMさん

きゃーーーー!またやっちまった (;ωq`)
ごめんなさい。今コメント頂いていたことに気づきました!
大変遅くなりましたことをお詫びします (*_ _)

> Ranchuタイトルを変更したい件

タイトルのテキストを「画像」に変更したい、ということでしょうか。
それともテキストの書体を変更したい、ということかしら。
画像であるならば

<p class="ttl" role="banner"><a href="<%url>"><%blog_name></a></p>

赤字の部分を以下の通り変更

<p class="ttl" role="banner"><a href="<%url>"><img src="画像アドレス" alt="代替テキスト"> </a></p>

これが一番簡素な方法ですが、画像の位置合わせやサイズのことがありますので、
・画像サイズ
・画像の拡張子(.jpg .png など)
・位置合わせの希望(左寄せ センタリング 右寄せ)
この三点を教えて頂けると助かります。

ホントごめんなさいね (*_ _)

2015/08/16 (Sun) 18:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/09/01 (Tue) 16:14 | EDIT | REPLY |   
Akira  
To 「重複」の件でおたずねの内緒さん

ごめんなさい。気づくの遅れてしまいました (*_ _)

今拝見しましたところ、フッター下に確かに重複していますね。
で、サイドバーにJavascriptを多用したプラグインを多く含まれる方 へは「スライドサイドバータイプ」はおすすめしていません。
お互いのスクリプトがぶつかり合うことが多いためです。

ですので、通常の「スマホ閲覧ではサイドバーを下に送る」タイプに切り替えされますようお願い致します (*_ _)
(公式から配信されている最新バージョンをどうぞ)

2015/09/05 (Sat) 19:56 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/29 (Thu) 22:31 | EDIT | REPLY |   
Akira  
To Noirカスタマイズの件 内緒さん

ありがとうございますーe-257

お尋ねの要件全て可能です。

---------- ① タイトルの大きさ変更

Ctrl+Fキー検索(CSSソース内)

/* ここがブログタイトルのフォントです */

このすぐ下の行に

font-size: 50px;

というのがありますので、赤字の部分を修正してください。
で、「プレビュー画面」だけではキャッシュ(履歴)が残っていて実際の変更が反映されませんので「更新(上書き)」をしてください。
更新 = 上書き修正 ですので、事前に複製をお取りくださいね。

---------- ② 流れてくる文字の変更

Ctrl+Fキー検索(htmlソース内)

Beautiful days for beautiful people

上記文字列を削除されましたら、好きな文字列を入れてください。
日本語もOKです。

---------- ③ 携帯用の〜

こちらは「スマホ版」のことでしょうか。
それとも「フィーチャーフォン(ガラケー)版」かしら。
ガラケーの方はもうほとんどサポートされていないので(SSL暗号化の関係 他)、たぶんスマホのことでしょうかね。
私ガラケー持ってないので動作確認できないんです。
ごめんなさい ^^;
スマホ版のことだと仮定してすすめますね。

PC版と同じ表示にしたい(レスポンシブとして使いたい)というのがご希望ですので、
ブログ個人設定を変更してください。

環境設定 > ブログの設定 > スマホ版の表示設定
ここでスマホ版表示を「無効にする」にチェックを入れて「更新」をクリックです。

スマホ版を非表示にされた場合には、スマホ用のアドレスを入れても無効化されてPC版がそのまま表示されます。
内部的には「スマホ版はありません(存在しません)。」という振る舞いになります。
SEO的にも特に問題ありません(寧ろスマホ版は無い方が良いです)。
こちらこのページに説明がありませんでしたね。失礼しました。
追記しておきましたe-257

---------

以上お試しください。
わかりにくい点・うまく行かない等ありましたらお気軽にお申し付けくださいませe-454

2015/10/30 (Fri) 01:13 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/30 (Fri) 23:04 | EDIT | REPLY |   
Akira  
To Noirの件 内緒さん

はい。いつでもお気軽にどうぞe-257

2015/10/30 (Fri) 23:05 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/31 (Sat) 12:26 | EDIT | REPLY |   
Akira  
To Noirの件 内緒さん

んー。なんでやろ(笑)
もしかしたら別のテンプレを設定したままで編集→プレビュー
ですかね?
一旦設定した状態でご確認頂ければと思います。
ダメなようでしたら
#blog_title {
font-size: 50px;
省略
}

このfont-size: 50px; を消去した上で 上記文字列の「下」に

.ttl {
font-size: 希望の数値px;
}


を追加してみてください。


> 三本線をわかりやすく

これ私が途中で背景の変更をしてしまったもんですから見づらくなってしまいました。
すみません ( ̄∀ ̄;)
もしあれでしたら三本線の色を白に変更されると目立つようになると思います。
Ctrl+Fキー検索

.bar {

2箇所出てきますので最初の方を見て頂いて下を順に眺めますと

rgb(128,0,0);

という箇所が
.bar {
の中にひとつ
.menu-btn:hover .bar {
の中にひとつ
.menu-btn:hover .menu-btn__text {
の中にひとつ

合計3箇所あります。
この3つのrgb(128,0,0); を

white;

に変更します。
で、今内緒さんはFC2検索バーをご利用ですので、バーがボタンに若干被ってますよね。
・検索バーを非表示にする
・.menu-btn {
の中の
top: 20px; の部分を top: 30px; に変更する

このいずれかの対処でお願いします。
一度ボタンの色を変更してどんな感じかご確認頂きまして、まだ調整が必要でしたらおっしゃってくださいねe-257

---------

> top画面下へ

こちらのテンプレートの構造上ちょっと難しいと思います。
難しいというよりも大掛かりと言った方が良いかな ^^;
サイドバーの内容とメインコンテンツのhtml内容をゴソっと移動して調整する必要が出ますので、今回はごめんなさい (*_ _)

----------

> ランキングバナー

こちらはサイドに収納したくない、ということですよね。
私ならフッターに置きますけれど、どうでしょうか (´・ω・`)
こちらはお返事待ちにしておきますね。

2015/10/31 (Sat) 16:51 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/11/01 (Sun) 12:03 | EDIT | REPLY |   
Akira  
To Noirの件 内緒さん

ガンバです ╭( ・ㅂ・)و ̑̑ グッ

2015/11/02 (Mon) 12:29 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/11/02 (Mon) 12:52 | EDIT | REPLY |   
くまぽ  
質問させてください<(_ _)>

こちらのテンプレを使わせていただいております、くまぽと申します。

とてもかわいくて気に入っています。本当にありがとうございます。

気に入っているのですが、読み込み時に少し時間がかかることが多く
少しでも軽減できればと思っているのですが
何かいい方法はありますでしょうか??

特に、右のカテゴリー欄から記事を呼び出すときに
時間がかかってしまいます。(この部分、ユーザータグから
呼び出せるように作ってあるのですが…何か方法ありますでしょうか)

当方ど素人で、少し改良するのにテンプレいじったりする程度で
知識はほとんどありません(汗
そんな私にもなにか対処出来ることがありましたら
ご教授願えたらと思います。

お手数おかけしますが、どうぞよろしくお願い致します<(_ _)>

くまぽ

2015/11/03 (Tue) 00:58 | EDIT | REPLY |   
Akira  
To Noirの件 内緒さん

おはおーございます ( ゚Д゚)ノ

今喫茶店におりますー。
出先から戻り次第確認しますね。

2015/11/03 (Tue) 08:19 | EDIT | REPLY |   
Akira  
To くまぽさん

ありがとうございますe-257

くまぽさんが現在お使いのテンプレ名を教えてくださいね。
ページ遷移時のエフェクトがローディングを遅くしていますので、それを取り除けば速くなります。
各テンプレートでやり方が異なりますので名称をお知らせくださいませ。
お手数おかけします!

ごめんなさい。今確認しました。
GirlOnWireでお間違いないでしょうか。
やはり重たいですね。もうべらぼうに(笑)

http://vanillaice000.blog.fc2.com/blog-entry-249.html

こちらにエフェクト削除の仕方を記していますので、一度お試しください。
ご面倒おかけします (*_ _)

2015/11/03 (Tue) 08:20 | EDIT | REPLY |   
Akira  
To Noirの件 内緒さん

> openボタンをテキストに

Ctrl+Fキー検索

<label class="menu-btn" for="checked">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>

上記<span>の三行を削除して、表示したいテキストに差し替え
例)

<label class="menu-btn" for="checked">
CLICK
</label>

注意点
OPENの文言にしてしまうと、クリックして開いた後同じボタンでCLOSEするわけですが、テキストはCLOSEに書き換わりませんので(Javascriptを使わずCSSだけの実装なのでできません)、CLICKの文字が妥当だと思います。

続きまして検索

.bar {
position: absolute;
top: 0;
left: 0;
display: block;
width: 40px;
height: 1px;
background: rgb(128,0,0);
-webkit-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}

.bar.middle {
top: 15px;
opacity: 1;
}

.bar.bottom {
top: 30px;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
}

上記は全て不要ですので削除します(残しても特に問題ありませんが、レンダリング時の無駄は生じます)

続きまして検索

.menu-btn {
position: fixed;
display: block;
top: 20px;
right: 20px;
display: block;
width: 40px;
height: 40px;
font-size: 10px;
text-align: center;
cursor: pointer;
z-index: 3;
}

赤字の部分の数字を大きくしてください。
このままだと文字が小さいです。
文字を大きくされますと、テキストの右半分が見切れてしまうかもしれません。
その際には青字部分の数字を大きくします。
数字を大きくすると「左方向」へ。小さくすると「右方向」へ移動します。
また、テキストのフォントをタイトルと同じものにするには

font-family: 'Sorts Mill Goudy';

を追加します。
例)

.menu-btn {
position: fixed;
display: block;
top: 20px;
right: 35px;
display: block;
width: 40px;
height: 40px;
font-size: 25px;
text-align: center;
cursor: pointer;
z-index: 3;
font-family: 'Sorts Mill Goudy';
}

ここまでボタン変更の件です。
一旦投稿します。

2015/11/03 (Tue) 12:38 | EDIT | REPLY |   
Akira  
To Noirの件② 内緒さん

> ランキングバナーをフッターに

Ctrl+Fキー検索

<nav class="footer_navi">
<ul>
<li class="header_li"><a class="navButton" href="<%url>archives.html">Title list</a>
<li class="header_li"><a class="navButton" href="<%url>">Home</a>
<li class="header_li"><a class="navButton" href="<%server_url>control.php">Admin</a>
</ul>
</nav>

この直下に以下を追加

<div id="for-ranking">
<div id="ranking-no-1">ここにランキングソース</div>
<div id="ranking-no-2">ここにランキングソース</div>
<div id="ranking-no-3">ここにランキングソース</div>
</div>

今のバナーの状態をそのままご利用になるのであれば

ここにランキングソース =
<a href="リンク先" 省略><img src="画像" 省略><br><a href="リンク先">テキスト</a>

<br>をご利用になっていますのでちょっとあれですが...。
ここは私から不可侵ということで、ご自分での整形をお願いします (*_ _)

続きましてCSSソース(テンプレ管理画面「下段」)の末尾に以下を追加。

#for-ranking {
margin: 0 auto 60px;
width: 100%;
max-width: 600px;
text-align: center;
}

#ranking-no-1, #ranking-no-2, #ranking-no-3 {
margin: 0 5px;
display: inline-block;
text-align: center;
}

------------

で、ヘッダー下はおすすめできないです (´・ω・`)
一応ファーストビューでは記事内容は見えず、スクロールしてもらうことで記事が出てくるような感じなのですが、
スクロールを促す赤い三角マークが画面上に出ていないと、閲覧者さんは何がなんだかわかりません(笑)
バナーで縦幅が取られるとちょっと厳しいんじゃないだろうか ( ̄∀ ̄;)
スマホではバナー横並び三列はできませんので(デバイス幅によりますが、iPhone5系だと画面幅が足りません)、幅が足りなくなればバナーは下へ繰り越します。
一度フッターに設置されましてご判断くださいね。

2015/11/03 (Tue) 13:09 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/11/03 (Tue) 22:02 | EDIT | REPLY |   
Akira  
To Noirの件 内緒さん

はい。あまり根詰めず楽しくできると良いですねe-257
またお気軽にどうぞ (っ´∀`c)

2015/11/04 (Wed) 09:22 | EDIT | REPLY |   
くまぽ  
To Akiraさん

回答ありがとうございます<(_ _)>!!

指示通りやってみましたら
嘘みたいに早くなりました!!!(*^▽^*)

ありがとうございます〜♪

とっても素敵なテンプレなので
長く使わせていただきたいです。

本当にどうもありがとうございます<(_ _)>

くまぽ

2015/11/04 (Wed) 10:12 | EDIT | REPLY |   
Akira  
To くまぽさん

良かったですーe-257
ご面倒おかけしました。

くまぽさんのブログはお洒落ですね。
バナーに選んだ画像やサイドバーに入ってるプラグイン配列なんかもとっても素敵です。
元インテリアコーディネータなのでこういうブログは好きですe-456

2015/11/04 (Wed) 10:33 | EDIT | REPLY |   
くまぽ  
To Akiraさん

わーわー( ゚д゚)
プロの方に褒めてもらえて
ものすごくうれしいです…勇気が出ました(笑)

いろいろごまかしながらやってるブログなので(笑)
テンプレにもかなり助けてもらっています(;^ω^)
おしゃれにみえーる★

今まで、いろんな方のテンプレにお世話になってきましたが
Akiraさんのテンプレは
実は1番くらいに気に入っております…(。-_-。)ポッ

かわいいのはさることながら
最初と最後に、記事がいくつか並んでくれるので
とても助かります。これが出来なくて苦労してました。

しかも最初のは動くし!!Σ( ゚Д゚) スッ、スゲ

なので、しばらくお世話になるつもりです。

どうぞよろしくお願いします♪<(_ _)>

2015/11/06 (Fri) 00:04 | EDIT | REPLY |   
Akira  
To くまぽさん

華やかなイメージあるかもですが、実際には配電図なんかも書いてました(笑)
エアコン配管図とかも ( ̄∀ ̄;)

素敵なブログが順風満帆でありますようe-257
ありがとうございますe-454

2015/11/07 (Sat) 09:27 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/11/16 (Mon) 22:08 | EDIT | REPLY |   
Akira  
To Grunge_flowerスマホ版の件 内緒さん

ありがとうございますe-257

> 記事背景を白に

背景のデフォルトは透過グラデーションになっています。
要するに全背景を白に変更という形で良いですかね?
以下をCtrl+Fキー検索。

background: -webkit-gradient(linear, left top, left bottom, from(rgba(147, 115, 63, .5)), to(rgba(219, 157, 58, .5)));
background: -moz-linear-gradient(top, rgba(147, 115, 63, .5), rgba(219, 157, 58, .5));
background: linear-gradient(to bottom, rgba(147, 115, 63, .5), rgba(219, 157, 58, .5));


ちょっとややこしいですが、一番上のbackground指定がwebkit系ブラウザ(Safari等)への指定。
2番目がFirefox用。
3番目は一般です(Google Chrome, ie 等)。

グラデーション不要で白っぽくするには上記を全て削除した上で以下を追加。

background: rgba(255,255,255,.7);

最後の .7 (どっと なな) が不透明度設定で1が完全不透明、0で完全透明です。
.5 の指定でちょうど半分透過されます。
ここはご自分で具合を見て調整をお願いします。
数カ所出てきますので全て変更です。

で、背景色を変更されますと文字が同系色なので読めなくなります。
文字色修正は以下をCtrl+Fキー検索。
(タイトル)

h2, h2 a {
font-size: 14px;
color: rgb(238, 238, 238);
}


赤字部分を変更してください(#6桁数字 の16進数指定も可)。
例えば黒なら

black

でもOKです。
黒が強すぎる場合は

rgb(51,51,51)

あたりがおすすめです。
同じ要領で

color: rgb(255, 255, 255);

を検索されまして全て変更してください。
color が「文字色」の指定です。
お手数おかけします。よろしくお願いします。

2015/11/16 (Mon) 23:06 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/11/17 (Tue) 16:50 | EDIT | REPLY |   
Akira  
To Grunge_flowerの件 内緒さん

うまくいったようで良かったです。
お疲れ様でしたe-454

2015/11/17 (Tue) 23:52 | EDIT | REPLY |   
みゃ  

初めまして。
FC2でテンプレートをお借りしています。
シンプルでとてもきれいなテンプレートが多いのですきです。
そこで「記事内の写真の角を記事UP時に自動で丸角にしたい」とふと思って
色々調べて試してみたのですが、なかなかうまくいきません。
初心者には記事作成時、直接写真を書こうするhtmlを書き込んだ方がいいと言うことなのですが、それだと手間かかって仕方ありません。
もしテンプレートを触って角落とせるのであればその方法を教えていただきたいのですが
いかがでしょうか。

2015/11/20 (Fri) 16:40 | EDIT | REPLY |   
Akira  
To みゃさん

ありがとうございますe-257
ご利用のテンプレートはChillingでお間違いないでしょうか。
画像を角丸にする方法は二段階です。
一段階は必ずやって頂く処理で、CSS内容編集です。
二段階目は選択をして頂くことになりますので場合によってはテンプレソース編集不要になります。

--------- 一段階 CSSソース編集

CSSソース末尾に以下を追加

.覚えやすい文字列 {
border-radius: 4px;
}


青文字の部分、まず「覚えやすい文字列」はご自身の都合の良いものを入れてください。
文字列の前にドット(.)が要りますのでお忘れなく。
文字列を決める際には小文字英数字、最初の一文字は必ずアルファベットでお願いします。数字や記号不可です。
文字列内に使える記号はハイフン(-)、またはアンダースコア(_)のみ

○ for-border
× For-border
× -for-border
× 5border

4px の数字についてはお好きな見た目になるよう調整してください。
数字が大きくなると丸みも大きくなります。

----------------- 第二段階

ここで選択肢ですが、事前のご説明。
「画像」とはなんぞや、ということになりますけれども、
記事内にUPする「写真」などの他に例えば「絵文字」そしてランキング等の「バナー」SNS「シェアボタン」「拍手」など。
これ全て「画像」に分類されます。
自動で角丸を適用するにはこう命令文を書きます ↓
"一定範囲に存在する画像全てに角丸を適用する"
ソース内容を説明するとこんな感じの指定になるわけです。
ですから絵文字等々全てに適用されてしまう、ということになります。
まずそれが良いのかどうかのご判断をお願いします。

OKの場合

Ctrl+Fキー検索

$(function(){
$('#wrapper a').addClass("animsition-link");

このすぐ下の行に以下を追加。

$('.inner-contents img').addClass("覚えやすい文字列");

一段階目で決めたものと同じものを入れてください。
こんな感じになればOKです ↓

$(function(){
$('#wrapper a').addClass("animsition-link");
$('.inner-contents img').addClass("覚えやすい文字列");
$('a[target=_blank]').removeClass("animsition-link");
$('a[href^=#]').removeClass("animsition-link");
$('.side_bar a').removeClass("animsition-link");
〜以下省略〜


全ての画像に適用するのはマズいな、とお考えになる場合は以下の手順をどうぞ。
ソース内容はもう触りません。
記事を書いて頂く際に逐一記す方法です(こちらの方がおすすめです)
html構文は難しく手間でもありますので、なるべく簡単に。
画像を貼り付けされる際はFC2のエディターをご利用ですよね。
こんな感じだと思います。

<a href="元画像またはFC2アルバムへのリンクアドレス" target="_blank"><img src="画像アドレス" alt="bottomleft.png" border="0" width="130" height="128" /></a>

ここまではエディターが自動で入れてくれます。
で、私のテンプレートでは末尾の 半角スペース スラッシュ( /) これが不要ですので、
スラッシュの部分だけを削除されまして(半角スペースは消さないよう注意)、以下の内容をスラッシュと差し替えます。

class="覚えやすい文字列"

<a href="元画像またはFC2アルバムへのリンクアドレス" target="_blank"><img src="画像アドレス" alt="bottomleft.png" border="0" width="130" height="128" class="覚えやすい文字列"></a>

追加文字列は辞書登録に入れておくとすぐに記入できますのでさほど手間にはならなのではないかな と思います。

まとめ
・第一段階としてCSSの追加
・第二段階 全適用の場合にはJS追加(htmlソース内) --- こちらを選んだ場合には全て自動で処理
・第二段階 一部適用(手動適用)の場合には記事作成時にクラス付与 --- こちらは記事作成時の記入必須
* 各手順共通事項 = ドットなどの記号に注意

一度お試しくださいませ。
わかりにくい点がありましたらお気軽にどうぞe-454

2015/11/20 (Fri) 20:46 | EDIT | REPLY |   
みゃ  
ありがとうございます

お返事遅くなってしまいすみません。
さっそく試してみたところ、上手くいきました^^
またタグを辞書登録というところに目からうろこというか…
そういう使い方があるのだということ、
また丁寧に解説いただきとてもいい勉強になりました。
本当にありがとうございます。
バニラアイスさんのテンプレート本当にきれいで好きでsakuraのテンプレからずっと使わせていただいています。
これからもしばらくお世話になり続けると思うので、また聞くこともあるかと思いますがよろしくお願いします。
今後もお忙しいとは思いますが、素敵なテンプレが仕上がってくること楽しみにしています♡

2015/11/27 (Fri) 10:48 | EDIT | REPLY |   
Akira  
To みゃさん

上手くいきましたか。
良かった

こちらこそありがとうございます

2015/11/27 (Fri) 21:51 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/04/16 (Sat) 11:57 | EDIT | REPLY |   
Akira  
To 右クリック禁止の件 内緒さん

なるほどー (´・ω・`)
私も散々やられました(現在も)のでお気持ちわかります(笑)
ホントに節操の無い輩は大嫌いです。私 (´・ω・`)

本題です。
Valparaisoテンプレである、というのを前提に
まず記載すべき箇所をスクショでご確認ください。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/seor934r_zpsiw9qm3vc.jpg

この場所へ以下のコードをペタリ。

<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>

圧縮してしまいましたので読みづらいですが、
コピペを防ぎたいお気持ちのある方はhtmlでもCSSでも圧縮(shrink, compress)されると良いですね。
難読化するとさらに良いんだろうけれど、誤動作の原因になることもありますのでおすすめしません。

ソースコードの簡単なご説明。
まず右クリックを封殺。
続いてドラッグ&ドロップを葬り、
スマホだと画像保存できちゃう間抜けな件にならぬようタッチイベント禁止(アラート付き)
ドラッグを抹殺したことでコピー範囲選択は不可状態。
と、以上の内容が全て収まったコードです。

Javascript禁止を禁止、という手についてはやらない方が良いと思います。
SEO的によろしくないどころかGoogleからのペナルティもあるはず(笑)
ですからこの内容には含まれません。

パクる輩というのは自分で考えたり創造することは時間をかけませんしその能力も持ち合わせませんが、
どうしたら著作主のトラップをくぐり抜けてソースを引っ張り出せるか、どうすれば丸パクできるかを模索する時間も努力も惜しみません。
そのパワーをもっと他のことに使え (´・ω・`)< 世界平和とか
なのでどこまで効果があるか... というところですが、
少なくとも手間取らせることはできるかと思います。
とりあえず一度お試しください

2016/04/16 (Sat) 14:06 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/04/20 (Wed) 00:06 | EDIT | REPLY |   
Akira  
To 右クリックの件 内緒さん

はい。お試しください。
何か至らぬ点がありましたらお気軽に

2016/04/20 (Wed) 11:03 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/01/31 (Tue) 15:18 | EDIT | REPLY |   
Akira  
To 管理画面コメント返信の件 内緒さん

ありがとうございます

これ「JSが〜」と書いたんですけども、実際はもっと単純でして。
<
とか
>
という記号はhtmlソース内で多用されるものである、というのを大前提に、
色変更をした時におかしくなる、というのは、色を変更するためには

<span style="color: 色コード;">ここに投稿者名</span>

こうして投稿者名を<span>〜</span>で挟むことになるのですが、それを実現するのに管理画面では
<%comment_name>
という変数を探り当ててそれを挟みます。
ところがテンプレ内ではクリック返信やなんかを実現するために当該変数をクラス名として用いています。
でも管理画面では「クラス名である」という認識まではできないんですね (´・ω・`)
これはもう変数で出力する以上避けられないんです。
同じ理屈で「太字にする」を選んでもおかしくなります。
太字にするための
<span style="font-weight: bold;">投稿者名(変数)</span>
これですね。上記に含まれる
<
>
の記号とテンプレのそれが混同・混濁して起こります。
つまり投稿者名に何も装飾を加えなければ追加htmlが無いのでおかしくならない、という理屈。

どちらを優先すべきか、というところですが、作者としては「訪問者の利便」を優先させて頂いております (*_ _)

また何かお気づきの点がありましたらお聞かせくださいね。
とても参考になります。
ありがとうございます

2017/01/31 (Tue) 17:03 | EDIT | REPLY |   
はるかげ  

お忙しい中、丁寧な返信をいただき、ありがとうございました!
Akiraさんは既に把握している内容だったようでお恥ずかしい;
プログラムってなかなかうまくいかないものですね。勉強になる(´・ω・`)
コメントアイコンのシステム、とても気に入っているので
太字などにもしないように気をつけて使います♪

記事を見ているとFC2もチョコチョコ使用を変更して
それに合わせるのに大変な思いをしているように思います。
プログラムチンプンカンプンな身としては
頭が上がりませんですよ;本当にスゴイと思います!

それでは、重ね重ねありがとうございましたo( _ _ )o

2017/01/31 (Tue) 19:21 | EDIT | REPLY |   
Akira  
To はるかげさん (追記あり)

いえー。
ホントはこのあたりも対策できるのが一番なんですけどもね。
思いつかない(笑)

こちらこそありがとうございます

===== ここから追記

とっても素晴らしいカスタマイズをされているのですが、少し修正を入れるとさらに良くなると思います。

① ブログバナーの横幅超過

もともとあった img要素への max-width: 100%; という指定を削除されており、バナーサイズが横490pxありますので、スマートフォンでは画面幅を超過してしまいます。
超過 = 横スクロールバーが出て画面がふらつく状態。
いわゆる「オーバーフロー」になってしまっています。
スマホの画面は小さいもので320pxしかありませんので、できれば対策した方が良いかもです。
スマホ専用版を併用されているので必要なしと思われましたら捨て置いてくださいね。

対策

img {
max-width: 100%;
}

を追加(デフォルトに戻す)
スマホではバナーが若干縮小されることになりますが、オーバーフローよりは良いと思います。

========

② ナビゲーション縦幅超過

.navi-menu
で検索して頂くと、

height: 45px;

という箇所があります。
こちらを削除された方が良いですね。
リンクを画像に変更されていますので、こちらも今度は横ではなく縦のオーバーフロー状態です。
それによって要素同士が重なったり、後続要素(記事)との距離も消失してくっついてます。
この箇所については私がリンクの追加や画像への変更を考慮して制作しておりませんでしたので、ごめんなさいね ^^;
(固定ナビのheight無効ですので、オブジェクト移動の位置が狂うことについてはご了承ください)

=========

③ バナーリンク

そしてaタグがついていませんのでできれば付けた方が閲覧者にとって便利だと思います。

<h1 id="blog-title"><a href="<%url>"><img src="画像アドレス" alt="ブログ名"></a></h1>

お時間がある時にでも流し読みして頂ければと思います。

2017/02/01 (Wed) 15:55 | EDIT | REPLY |   
はるかげ  
To Akiraさん

わぁ~!ありがとうございます!

私のカスタマイズはキレイに積まれたジェンガを
好きな形に抜き、積むような方法なので
「そのブロック抜くと危ないよ」的な
ご指導いただけて、非常に助かりました;
カスタマイズの新着記事もとても勉強になりました!

>ブログバナーのサイズとリンク
コメントを参考に修正させていただきました!
imgの縦横指定はブログ内の画像をサムネ風にするのに
四苦八苦した挙句、消したのを忘れてました;危ない!
リンクはメニューのHOMEボタンを使って欲しいという
ジャイアニズムで消しちゃってましたw
ちゃんと閲覧者の気持ちを考えなければダメですね(´・ω・`)

>ナビゲーション縦幅超過
これがよくわからなくて
.navi-menu内のheightは35pxに指定しているのですが
そこを消せばいいのでしょうか?
消すとナビメニューが縦にものすごくデカくなってしまいました;
height: 45px; で検索してみると
.mobile-toggle内に1件しか該当しなくて
それを消しても特に変わった所が見当たりませんでした。
とりあえず、好き勝手にカスタマイズした弊害として
そっとしておこうと思います。

親切に優しくご教授いただき、ありがとうございました♪

2017/02/02 (Thu) 14:13 | EDIT | REPLY |   
Akira  
To はるかげさん

そっとしておく、ということですので、この件についてはお疲れ様でした

今気がついたのですが、一つ大きなエラーがあります。
こちらは修正必須でお願いします。

ファビコンを設定するために<link>を
<!DOCTYPE html>
の「上」に記述されているかと思いますが、ドキュメントタイプの宣言よりも「上」あるいは「前」には何も置かないようにしてください。
ファビコンの<link>を記載する場所は

<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS">

のすぐ「下」が妥当です。
よろしくお願いします (●'0'●)/
最初に気づかなくて二度手間になってしまい申し訳ないですー ( ̄∀ ̄;)

2017/02/02 (Thu) 15:31 | EDIT | REPLY |   
はるかげ  
To Akiraさん

ご指摘ありがとうございました!
訳も分からず適当な所にぽんと置いたままでした;
基礎も学ばずに関数だけ調べて付けてもダメですねi-201
無知ってコワイ。(;^ω^)

お陰で修正できました!o( _ _ )o
なんだかピカピカになった気分です。
プログラムわからないのにカスタマイズするという
恥知らずな私なんぞに勿体なき助言の数々…
ホントにありがとうございました!

やっぱりプログラマってカッコイくてスゲェ。シミジミ

2017/02/02 (Thu) 23:15 | EDIT | REPLY |   
Akira  
To はるかげさん

プログラマーなんて上等な者ではないです ^^;
こちらこそありがとうございます。
お疲れ様でした

2017/02/04 (Sat) 10:31 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い