Mocha - FC2ブログテンプレート

Mocha - FC2ブログテンプレート

テンプレート 配布中テンプレート
2016/07/05
168
vanillaice (Akira)
vanillaice (Akira)
LivingStandardRWD

Mochaテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

名称 Mocha もか
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 要約表示タイプ
記事幅(PC 最大) メイン --- 最大970px(内寸 890px)
サイド --- 最大約300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.7.0)
Google fonts導入 Poppins
Roboto
Font Awesome導入 なし
Lazyloading導入 あり
OSダークモード対応 なし
パン屑リスト表示 あり
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Lighthouseスコア
(トップページ平均)
Mocha Lighthouseスコア
固有機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • その他
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 * 横660px以下でサイドメニューがドロワーになります。
パソコン
2カラム
サイドメニュー --- 右
タブレット
1 or 2カラム
サイドメニュー --- 右 or 下
(デバイス幅依存)
スマートフォン
1カラム
サイドメニュー --- 右ドロワー
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.15
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2023.7.4
  • IE用対応終了
  • ヘッダー背景切り替えをJSからCSSに変更
  • jQueryを3.7.0にアップグレード
  • サイドメニュードロワーのJS内容及び仕様を変更
  • スクロールアンカーJSの利用を停止
  • フッター上第三カラムを廃止
  • カスタムプロパティ導入
  • SNSリンク追加
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

左右カラムの入れ替えや横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

また、Font Awesomeの廃止を行っていますので、再DLされる際はその点に注意してください。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.5.30
  • ページ送りのJSを修正
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.25
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.6
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

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

続きまして <footer class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </footer> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
  <li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

#community" で検索するとhtml内に2箇所あります。2つとも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">Leave a comment</h3> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 45px;
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

#inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

続いてスタイルシート末尾に以下を 追加

#inner-contents {
  margin: 20px 0;
}

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2019.1.4
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 全記事リストと検索結果にコメント数とトラックバック数の表示を追加
  • スマホのホバー動作を取り除きました

不具合修正ではありませんので旧バージョンのままでもお使い頂けます。

更新履歴 2018.3.7
  • iOS11.2.6でモーダルが開かない件修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • 新変数導入により管理人コメントプロフィールアイコンをデフォルト表示(遅延読み込み対象)

iPhoneに関連する不具合の修正も含まれます ので是非アップデート(再DL)をお願いします。

更新履歴 2018.1.30

メンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みをのJSを変更しました(デフォルトではグリッドページのみ適用)
  • jQueryのバージョンを3.3.1にUPしました
  • スマートフォンでも2列を維持するようにデザインを変更しました(320pxデバイスは1列です)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップ及びパン屑リストを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

Mocha大規模メンテナンスのお知らせ

Mocha大規模メンテナンスのお知らせ

Mochaテンプレートの大規模なメンテナンスを行いました。 要約表示タイプのメンテナンスの進捗状況は逐次お知らせをしていませんが、Colony 同様 本テンプレートについては見た目上の大きな変更もありますのでご一読ください。 また、不具合修正ではありませんので新しい仕様をご確認頂きまして、再DLの検討をお願いします。...

更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2017.1.13
  • RSS新着サムネイルをFC2独自変数での表示に切り替えました
更新履歴 2016.10.6
  • Microsoft10 の IE11及びMicrosoft Edgeのバグ用ハックJSを削除
  • FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- ページ表示の動作が軽快になりました
  • Microsoft Edgeのリンクホバー継承バグをハック
  • ベンダープレフィックスの整理
  • その他微調整
「Nostalgia」「Little-thing」「Mocha」メンテナンスのお知らせ

「Nostalgia」「Little-thing」「Mocha」メンテナンスのお知らせ

以下の3テンプレートのメンテナンスを行いました。...

更新履歴 2016.9.9
  • リストマーカーの位置を調整しました
更新履歴 2016.7.31
  • 関連記事サムネイルリストの整形を行いました
  • RSSによる関連記事表示を削除しました

本ページの内容は2023年7月4日メンテナンス以降のバージョンが対象です。

カニエ・ウエストが大嫌いなあきらでございます (o'д`o)ゝ
(嫁も嫌い)

もか
メイソンリーレイアウト。承認されました。ありがとうございます。
夏場に暑苦しい色合いですみません(笑)

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事、タイトル下の管理人アイコン をクリックすると別タブで開きます。

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

Related post

Comments  168

きろろ
2016/07/06 (Wed) 00:46

おぉぉぉ~~~

データ、復旧できたんですねぇ~
公開されるのが楽しみです!(^^)!
明日、申請ですね!

暑苦しい?
そうかな?
真っ黒な背景じゃないところが、おしゃれではありませんか!
はやく、申請通らないかなぁ(*^_^*)

vanillaice (Akira)
Akira
2016/07/06 (Wed) 21:09

To きろろさん

これから最終チェックして申請しますー。
チェックしても何故かしらどこかしらミスるんですよね。
何かお気づきの点があればみなさん教えてくださいね ( ̄∀ ̄;)

-
2016/07/08 (Fri) 07:20

初めまして、とても素敵なデザインですね。FC2での公開はいつ頃になりますでしょうか?楽しみに待ってます(^ ^)

sakura
2016/07/08 (Fri) 20:45

突然失礼します

テンプレートを探してこちらにたどり着きました。
早速質問ですが、このテンプレートは有料ですか?
どこからダウンロードできるか教えてください。
一目惚れして有料でもお借りしたいと思っています。
よろしくお願い致します。

きろろ
2016/07/09 (Sat) 00:09

早速お借りしました~~~~

やっぱり、これ素敵です!
思っていた以上に早く公開されて、嬉しいですよぉ。

3箇所ですよね? 削るところは?
今のところ、不具合は見当たりませんね。

素敵なテンプレートをありがとうございます<(_ _)>

きろろ
2016/07/09 (Sat) 00:50

連投ですみません

フォントサイズの変更についてうかがいたいのですが……。

CSSのbodyからフォントサイズを変更すると、すべてに反映されちゃいますよね?
すべてとは、サイドメニューのことです。

記事のテキストだけ、フォントサイズを大きくすることは可能ですか?
無理ならいいのですが、もし可能でしたらお願いいたします<(_ _)>

vanillaice (Akira)
Akira
2016/07/09 (Sat) 00:52

To Mochaの件 匿名さんとsakuraさん

ありがとうございます (o'д`o)ゝ

審査通過しておりましたので、記事中にDLリンクを追加しておきました。
今回早かった (´・ω・`)
よろしくお願いします :)

sakuraさん

FC2ブログを開設されている方でしたらどなたでも無料でお使い頂けます。
(暴力的な内容・バイラルやまとめ等他人の著作を侵害する内容 を除く)
重ねてありがとうございます :)

Akira
2016/07/09 (Sat) 00:54

To きろろさん

早かったですね。今回は(笑)
審査の曜日ぐらいは決めて頂けると助かるんだけどもね ( ̄∀ ̄;)

はい。きろろさんの場合は3箇所の削除です。
何か不備がありましたら教えてくださいね ^^;

vanillaice (Akira)
Akira
2016/07/09 (Sat) 01:16

To きろろさん

サイドメニューの方は切り分けしてあるので大きくなりませんです。
その部分を変更して影響が出るのは、サイドメニュー以外の部分。
トップページ含む。

個別記事の文章だけ大きさを変えるには、

.inner-contents {
color: white;
}

というのがありますので、以下の通り追加修正。

.inner-contents {
color: white;
font-size: 数値px;
}

で、このままだと後付要素(タグや関連記事リストなど、ブログ設定から描画するもの)も連動して大きくなってしまいます。
Ctrl+Fキー検索。

.relate_ul, .tb_ul

この括りの「下」に以下を追加。

.relate_ul {
font-size: 数値px;
}

上記が関連記事の文字大きさ。
続きまして検索。

.tags

この括りの内容を追加修正して以下の通り。

.tags {
margin: 70px auto 30px;
position: relative;
z-index: 1;
font-size: 数値px;
}

もちろん両方とも記事内テキストと同じで良ければ修正の必要なしです。
よろしくお願いします ( ノ゚Д゚)

きろろ
2016/07/10 (Sun) 00:30

To Akiraさん

早速のレクチャーありがとうございます!(^^)!

即行で直せました。
いつもいつも、わがままばかり言って申し訳ありません<(_ _)>

なんせ、年寄りが集うブログなので
老眼で……
字が小さいと見えないの……

って、人ばかり(爆)

いつもbodyで直していたのですが、
今回、bodyのサイズ表記が変わっていたの、教えていただいた方が
確実かなと思いまして。

ありがとうございました<(_ _)>

ねこみ
2016/07/10 (Sun) 06:19

匿名でコメントした者です。早速お借りして使わせて頂いてます(^^)ほんと素敵なテンプレートです。探し求めていた物!という感じです。ありがとうございます。

ひとつ質問宜しいでしょうか?当方の端末の問題かもしれませんが、トップページの表示がどうも重いので、トップページのスライド画像を消してみようかと思うのですが、どこを削除すればいいのか分かりません(゚o゚;;もし宜しければご教授下さい。

vanillaice (Akira)
Akira
2016/07/10 (Sun) 08:07

To きろろさん

できたようで安心しました。
今回はショートハンド(一括指定)で書いてます。
難しいかもしれないのでなるべくショートハンドは避けてましたけども、最近はみなさんとてもお勉強してらっしゃるから良いかな、と思って ^^;

作業お疲れ様でした :)

vanillaice (Akira)
Akira
2016/07/10 (Sun) 08:25

To ねこみさん

ありがとうございます :)

スライダー削除手順

① htmlソース内 Ctrl+Fキー検索

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

この「下」にある該当部分を削除します(上記スクリプト含まず)
わかりにくいかもなのでスクショでご確認ください ↓

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

ここまでの作業で「スライド」の機能はなくなり、最初に指定した画像だけが静止画で表示されます。
続きまして静止画も削除して綺麗に失くす場合。

② CSSソース内 Ctrl+Fキー検索

<div id="header-image-container">

上記を目印にスクショの通り該当箇所を削除。

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

これで表には出てこなくなりますが、CSSソースに余分な指定が残ります。
気になるようでしたら以下の手順をどうぞ。

③ CSSソース内 Ctrl+Fキー検索

#header-image-container

上記を目印にスクショの通り。

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

お手数おかけします。
よろしくお願いします。

ねこみ
2016/07/10 (Sun) 09:12

To Akiraさん

早速の対応ありがとうございます!うまく削除する事が出来ました。やはりスライドが重かったようで、さくさく表示されるようになりました。ご丁寧に説明頂きありがとうございました(*^_^*)とても分かりやすかったです。

vanillaice (Akira)
Akira
2016/07/11 (Mon) 21:29

To ねこみさん

上手くいったようで良かったです。
こちらこそありがとうございます :)

sakura
2016/07/11 (Mon) 22:07

お返事ありがとうございます

ダウンロードさせて頂きました。
このハイレベルで無料なんて信じられないi-1
良いテンプレートをありがとうございます!

vanillaice (Akira)
Akira
2016/07/12 (Tue) 01:37

To sakuraさん

ありがとうございます :)
励みになりますですー ╭( ・ㅂ・)و ̑̑

hige
2016/07/13 (Wed) 21:43

おぉっ

おっしゃれなデザインですねぇ。
右端の Next Belong もいいですねぇ。

Akira 先生のテンプレートはとても洒脱で、びっくりしてます。

でも、私には似合わない。ので、色々質問して技術を教えて戴いているだけで、申し訳ありません。

vanillaice (Akira)
Akira
2016/07/14 (Thu) 06:55

To higeさん

おはおーございます (´ぅω・`)

ご自分で気にいったのをお使いになるのが一番でございます。
どうぞお気になさらず :)

さき
2016/08/06 (Sat) 19:03

記事の並び方が

こんばんは^^いつもお世話になっております。
実は、今日の17時過ぎだと思うのですが、記事がタイルを散りばめたように、
表示されなくなってしまいました。
現在は、左一列に縦に日付順に並んで、表示されている状態です。
この現象が起きているのは、私だけでしょうか?(汗)

追加したスプリクトなども、確認しながら行いました。
今日の15時半ころまでは、記事も普通にタイル状に表示されていました。
その他、HTMLも、CSSも何も変更しておりません。
休日なのに、すみませんです。

vanillaice (Akira)
Akira
2016/08/07 (Sun) 00:56

To さきさん

いつもありがとうございます :)

Mac/ Windows環境 双方
(OSは共に最新, WindowsはAnniversary update「前」)
・Microsoft Edge
・IE11
・Google Chrome
・Firefox
・Opera
・Safari
・Vivaldi
で確認しましたが、特に問題なくレイアウトされているようです。
FC2サーバーの一時的な不調か、あるいは個人環境に起因しているかもしれません。
現在も続いているようであれば、

① パソコンのクリーニング及び再起動
② ブラウザのクッキーやキャッシュのクリア

をお試しください。
それでも改善が見られないようであれば、お使いのOS名とバージョン、ブラウザ名とバージョンを併せてお伝えくださいませ。
お手数おかけします。
よろしくお願いします。

さき
2016/08/07 (Sun) 01:36

原因が判明いたしました

Akiraさん、大変お忙しいのに、お騒がせいたしました。
原因が分かりました!
私がブラウザを、いつも中型表示にしているのですが、
誤って、「横幅をドラックして、縮め過ぎていた」のが原因でした。
最大化表示にしたら、通常どおりに戻りました(^^ゞ
とんでもなく、お騒がせしてしまって、
大変、申し訳ございませんでしたm(__)m
ごめんなさいです。

因みに、私はWindowsで、Firefoxの最新Verで、
いつも利用させていただいております^^

vanillaice (Akira)
Akira
2016/08/07 (Sun) 01:48

To さきさん

縦並びになるブレイクポイントのサイズまで画面縮小されていた、ということでしょうか。
良かったですー(笑)
レスポンシブですので画面幅に最適なレイアウトに並び替わります(笑)

いずれにしろ大事なくて安心しました。
お疲れ様でした :)

ぬこぬこ
2016/08/13 (Sat) 17:53

No title

こんにちわ。
お世話になります。

・記事本文の内側の部分を(カラム?)、
スマホで表示した場合に、横幅が狭いので幅一杯にしたいんですがどこをいじればよいのでしょうか?

・日付けなどの手書きフォントをすべて手書きでないフォントに戻したいのですがどこをどういじればよいのでしょうか?

・ヘッダーの画像が変わっていく機能をまるごと外すにはhtmlとcssのどこを削れば良いのでしょうか?

・上の部分と記事最後部にあるSNS共有ボタンを消すにはhtml内で解説されている行を消せば良いのだと思いますがなるべくタグを減らしたいので下記をザックリと削って大丈夫でしょうか?

上部のSNSボタンhtml

<div id="sns-navi"><!-- SNSリンク # をアドレスに置き換え 不要行は削除 -->
<ul>
<li><a href="#" target="_blank" class="c-facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
<li><a href="#" target="_blank" class="c-twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
<li><a href="#" target="_blank" class="c-pinterest"><span class="fa fa-pinterest-p" aria-hidden="true"></span></a>
<li><a href="#" target="_blank" class="c-google-plus"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
<li class="sp-hide"><a href="<%url>?xml" target="_blank" class="c-rss"><span class="fa fa-rss" aria-hidden="true"></span></a>
</ul>
</div>

上部のSNSボタンcss

/* SNS on header */
#sns-navi {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}

#sns-navi ul {
display: inline-block;
}

#sns-navi ul li {
display: inline-block;
margin-left: 8px;
text-align: center;
}

#sns-navi ul li a {
display: block;
width: 25px;
height: 25px;
line-height: 25px;
background-color: rgb(209,161,98); /* 注)ヘッダー内SNSアイコン背景色 (approx)Apache */
border-radius: 50%;
color: white;
}




下部のSNSボタンhtml

<footer class="entry-footer">
<ul class="inner-footer-sns">
<li><a href="//www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" target="_blank" title="Share on Facebook" class="c-facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
<li><a href="//twitter.com/intent/tweet?url=<%topentry_link>&text=<%topentry_title>" target="_blank" title="Tweet on Twitter" class="c-twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
<li><a href="//jp.pinterest.com/pin/create/button/?url=<%topentry_link>&description=<%topentry_title>" target="_blank" title="Pin it on Pinterest" class="c-pinterest"><span class="fa fa-pinterest-p" aria-hidden="true"></span></a>
<li><a href="//plus.google.com/share?url=<%topentry_link>" target="_blank" title="Share on Google+" class="c-google-plus"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
<li><a href="//admin.blog.fc2.com/control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" title="Only for admin" class="c-pencil"><span class="fa fa-pencil" aria-hidden="true"></span></a>
</ul>
</footer>



下部のSNSボタンのcssについてはどこからどこまで削れば良いのかよくわかりませんので教えて頂けると幸いです。

よろしくお願い致します。

vanillaice (Akira)
Akira
2016/08/16 (Tue) 16:35

To ぬこぬこさん

ありがとうございます (o'д`o)ゝ
そしてお返事大変遅くなりました (*_ _)

① 記事内側の余白を無くしたい

記事アウトラインとテキスト(記事本文)の間の余白を失くす、ということで合ってますでしょうか。
アウトラインの「内側」か「外側」かによって処理が違ってきます。
内側である、と仮定して進めますね。

● トップページメイソンリーのpadding調整
Ctrl+Fキー検索

.context {
padding: 20px 30px;
}

20pxが上下余白、赤字の30pxが左右余白です。
30の数字を小さくするとアウトライン〜テキスト間の距離が小さくなります。
0で余白なし。
余白なしにされますとアウトラインとテキスト(特に左側)がぴったりくっつきますので非常に読みづらくなります。
適度な調整をお願いします。

● 個別記事のpadding調整
検索

.main-body

2箇所ヒットします。
最初のものが基本設定で、パソコンなど比較的大きな画面の時の設定です。

padding: 30px 40px;

同じく40pxが左右余白です。

2箇所目は

padding: 30px 20px;

こちらは一般的なスマートフォンの画面サイズの時の設定です。
20pxをお好みの数値へ変更。
スマホのみ調整される場合にはこの2箇所目だけを調整してください。

==========

② 手書きフォント削除

Ctrl+Fキー検索

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Give+You+Glory%7CRoboto:400,700">

htmlソースの<head>内に1箇所あります。
赤字部分を削除。
続きまして検索

'Give You Glory'

CSSソース内に14箇所あります。
まず一番最初に出てくるものに対して修正

font: bolder 24px/1.3 'Give You Glory', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif'; text-align: center;

赤字部分を

Roboto

に変更。
残りの13箇所は font-family あるいは font の行ごと削除。

例)
font-family: 'Give You Glory';

末尾のセミコロンまで削除です。
他の文字列を巻き込んだり、記号を残したりされませんようご注意ください。
そして恐らく文字を変更されますと、大きさが気になるかもしれません(大きいと思います)
その場合には各々対象箇所に

font-size: 数値px;

を追加してください。

==========

③ スライド削除

こちらについては当該ページのコメント欄をご参照ください。
2016/07/10 (Sun) 08:25 の私のコメント、ねこみさんへの返信です。
(ぬこぬこさんのコメントの11個上です)

===========

④ SNSボタン削除

SNS関連は全て削除、ということでよろしいでしょうか。
スクショでご確認ください。

★ ヘッダーSNSリンク

Ctrl+Fキー検索。htmlソース内

<div id="sns-navi">

該当部分スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/298rdfuaath__zpswxkrpvok.jpg

★ 記事下SNSリンク

検索。htmlソース内

<footer class="entry-footer">

該当部分スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a9refaowfoth__zpsz4vlfq9i.jpg

★ 共通CSS

検索

/* SNS on header */

スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/w934r8fapth__zpsa1oa2xne.jpg

検索

.entry-footer

スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/ca9rawoth__zps58z8ofz4.jpg

===========

以上です。
よろしくお願いします。

注) 記事下のSNS関連を削除されますと、記事編集のボタンも失われますのでご了承くださいね。
(もちろん管理画面からは編集可能です)

ぬこぬこ
2016/08/25 (Thu) 17:34

To Akiraさん

お忙しい中、どうもありがとうございます!

① 記事内側の余白を無くしたい

記事アウトラインとテキスト(記事本文)の間の余白を失くす、ということで合ってますでしょうか。
アウトラインの「内側」か「外側」かによって処理が違ってきます。
内側である、と仮定して進めますね。

内側は無事にできました、ありがとうございます!

① 外側のやり方も教えてほしいです!

他にも教えていただきたいことはいろいろとあるのですが、
一度にお聞きするとややこしくなってしまいますので、今最優先で直したことがいくつかあるのでそれを教えて欲しいです。

②トップページなどの記事一覧のカラム内で、
上から画像→タイトル→本文概要の順となっていますが、それを

タイトル
 ↓
画像
 ↓
本文概要
にしたいのですが、ここはどうも複雑なシステムのようで変数を移動させてみても位置を変えることができませんでしたのでやり方を教えてほしいです。

③記事本文の左右に発生する半透明・半円状の(次ページ、前ページ)リンクを消したいのですが、どこをいじれば良いのか教えて下さい。

今日は以上3点教えて頂けると助かります。
よろしくお願い致します。

ぬこぬこ
2016/08/25 (Thu) 17:40

To Akiraさん 追記

追記

①と③に関してはスマホ画面を前提としての話です。
書き忘れていました。申し訳ございません。

Akira
2016/08/26 (Fri) 10:06

To ぬこぬこさん

お疲れ様です ( ゚Д゚)ノ

① アウトライン外側の余白
Ctrl+Fキー検索

@media screen and (max-width: 568px) {

このすぐ「下」に以下を追加

#primary {
width: 100%;
}

.element-item {
padding: 0 0 20px;
}

先回のカスタマイズで内側のpaddingをどうされたか、私ではわかりませんので、
調整の具合は自己責任でお願いします。

=======

② トップページの記述順変更
Ctrl+Fキー検索

<div class="context">

このすぐ下の

<h2 class="element-title">
から
</h2>
までをカット(Ctrl+X)

カット作業を行なった箇所の上の方、近接にあります

<div class="element-wrapper">

のすぐ「下」にペースト(Ctrl+V)
このままだとタイトル上に余白なしですので、それが気になるようでしたら
先ほどペーストした
<h2 class="element-title">
に対し
<h2 class="element-title adjust-class">
と修正を加え、
CSSソースの末尾に

.adjust-class {
padding-top: 数値px;
}

追加してください。
で、タイトルと画像も近いと感じて画像とタイトルの間に余白が欲しくなるかもしれませんが、これ以上なにか加えると全体レイアウトがおかしくなって負のスパイラルに突入します(笑)
なのでこの部分はご自身の責任でお願いしますね。
(というか基本的に全て自己責任ですが(笑))

========

③ 半透明ページ送りなし

これは「スマートフォンでは無し、PCでは有り」ということでしょうか。
このページ送りは『カテゴリ間移動』であることをご理解頂いた上で
Ctrl+Fキー検索

★ スマホのみカテゴリ間移動ページ送りなし
Ctrl+Fキー検索

if(_ua.Mobile){

このすぐ「後」に続けて(改行は絶対入れないでください)以下を追加。

$('.side-pager-left,.side-pager-right').css('display','none');


以上です。
よろしくお願いします。

-
2016/09/01 (Thu) 04:26

失礼します。
カテゴリ親や子をクリックすると上部へ強制移動するのは仕様でしょうか?
親をクリックした際には移動せずそのまま、子をクリックするとTOP画の見えない記事一覧
もしくは、そのカテゴリの新しい記事へ直接移動するようにしたいのです。

理由としては、
・画像が場所を大きく取っている為、移動した際に記事一覧が見えない。
・子を折り畳むので、親をクリックして移動するのは不味い。
とりあえず以上ですかね。
このサイトのカテゴリのようにするのも良い手だと思いますが、直感的な操作でとなると
やはり無い方が良いのではないかなという判断に至りました。
ご指導のほど、よろしくお願いします。こちらでも分かる範囲で調べてみますが、分からない確率が高いと思うのでorz

Akira
2016/09/01 (Thu) 10:22

To -さん

ちょっとよくわからないのですが、
① ページ遷移+オブジェクト移動
のことでしょうか。それとも
② ページ内移動
のことでしょうか。

> カテゴリ親や子をクリックすると上部へ強制移動

該当ページ(カテゴリ一覧)への遷移が行われますので、移動した先で表示されるのは画面最上部です。

> 子をクリックするとTOP画の見えない記事一覧
もしくは、そのカテゴリの新しい記事へ直接移動

FC2ではそういった仕様は用意されていません。

====

もしかして、カテゴリのプラグインを「展開型」にしたい、ということなんでしょうか。
テンプレートとプラグインとは無関係で、私ができることは
公式プラグインを問題なく表示・動作させる」ことだけです。
共有プラグイン・外部サービスプラグイン・ユーザーさん自作プラグインなど、公式以外のサポートは致しかねます。
そしてプラグイン改造のお手伝いもできません。

現在使用されているプラグインがどういったものかは分かりかねます(URLを頂いていないので目視確認もできません)が、
仮に「展開するはずの動作がページ内移動(画面上部)になってしまう」
ということならば、恐らくそのプラグインは展開動作に
<a>
というタグを割り当てているかと思います。
テンプレート内にページ内スムーススクロールが導入されている場合(ページtop, bottomなどのボタン)はどのテンプレートであっても衝突が起こります。
展開を<a>で行わないタイプの共有プラグインをお選びになると良いと思います。
特定プラグインにテンプレートの仕様を合わせる、といったことは致しかねますので、その節はプラグインの製作者様へ直接お尋ねくださいね。
よろしくお願いします。

-
2016/09/01 (Thu) 16:33

何度も失礼します。
自分でもよく分からないのですが、他サイトで同様に試してみました。仕様のようですね。すみません。

展開の件は、やはり競合していたんですね。勉強になりました。
となるとTOP画像の表示を変更するか、言われるように他テンプレートを使うしかないようです。
少し考えてから決めようと思います。丁寧に対応していただき、ありがとうございました。

Akira
2016/09/01 (Thu) 16:48

To -さん

お役に立てず申し訳ございません。
はい。比較的早い時期(2013年あたり)にリリースされているhtml4テンプレートだと干渉しないものもあるかと思います。
(<a>のrel属性によるトリガー操作はhtml5では廃止です。というかrelの値が固定化されています)
あるいはJS及びJquery自体が導入されていないか、
スムーススクロールが導入されていないものなど。

よろしくお願いします。

ぬこぬこ
2016/10/06 (Thu) 16:00

To Akiraさん

どうもありがとうございます^^

ご無沙汰しておりますが、放置していたわけではなく、一ヶ月半もテンプレをいじくり回していました。

①②については無事に修正できました。どうもありがとうございます!
③については、あれはカテゴリのページ送りだったのですね。。

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

今回お聞きしたいことなのですが。。

・ブログタイトルは「文字が下から上に上がって来るアニメーション」になっているんだと思いますが、

この機能の削除+そのアニメーションの為に作られている、「ブログタイトル下の、空白スペース」の削除がしたい
 

のですが、特殊な設定なので断念しました。

・それに付随して、フォントもデフォルトにしたいのですが、
自分でcssをいじってみたのですがこれも難しすぎて調整を断念しましたので、ご教示願いたいです。

お手数掛けますがよろしくお願い致します。

P.S. そういえば…
先程INDEX見たら20文字ぐらいしか本文が表示されないんですがなぜですかね?
表示文字増やせないんですか?

vanillaice (Akira)
Akira
2016/10/06 (Thu) 17:30

To ぬこぬこさん

こんにちは ( ゚Д゚)ノ

① アニメーション削除
Ctrl+F(Windows)/ Command+F(Mac) キー検索

#blog-title

この項目の以下の部分を削除。

-webkit-animation: slideInUp 1.5s;
animation: slideInUp 1.5s;


② ブログタイトルとサイト説明との距離調整

同じく#blog-title の項目

margin: 0 auto 30px;

赤字部分の数字を小さく、あるいは 0 に変更。

=======
③ フォントをデフォルトに

ブログタイトルが日本語であるのか英語であるのか、あるいは混合であるのかによって指定の仕方は変わります。
デフォルトフォントというのが記事内で使われるフォントと同じであるならば
#blog-title の項目

font: bolder 24px/1.3 'Give You Glory', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif';

赤字の部分を

'Roboto', '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';

に変更。
Robotoは欧文フォントですので不要ならば削除 ('Roboto', 後ろのカンマも消してください)
日本語フォントはデバイス依存ですので必ずMac・Windows双方のフォント指定が必要です(該当が無い場合はOSかブラウザのデフォルトになります)
また、OSのバージョンによってバンドルされるフォントが異なりますので、ぬこぬこさんが見ている「デフォルトフォント」が指定第一候補のものであるのか、第二・第三…であるのかにもよります。
初期設定の日本語フォントは記事内のフォントとは異なります。
ブログタイトル --- 明朝
記事内 --- ゴシック

以上です。
よろしくお願いします。

ぬこぬこ
2016/10/06 (Thu) 18:59

To Akiraさん

どうもありがとうございます。

後日試してみますね。

お忙しいところありがとうございます!

vanillaice (Akira)
Akira
2016/10/06 (Thu) 19:09

To ぬこぬこさん

はい。ちょっとフォントまわりややこしいですがガンバです :)

あと、ごめんなさい。
INDEXの文字数のこと伝え忘れました。
全記事リストで本文を出力する変数があるのですが、文字数は20文字までと決まっています。
40バイト、と考えた方が良いかもしれません。
日本語=2バイト
欧文=1バイト

riz-papa
2016/10/07 (Fri) 18:23

モカのスライド画像の変更をしたいのですが…

はじめまして
一目で気に入って一度アップしたのですが、スライド画像だけ差し替えたいと思ったのですが、知識が乏しくどこをどう変更したらいいか解らずにいます!

お時間ある時でかまいませんのでアドバイスよろしくお願いしますm(_ _)m

vanillaice (Akira)
Akira
2016/10/08 (Sat) 15:13

To riz-papaさん

ありがとうございます :)

スライド画像の変更については記事に記してある通りなのですが、わかりづらい点がございましたでしょうか。

注)スライド最初の画像

でCtrl+F(Windows)/ Command+F(Mac) キー検索されまして、該当箇所のガイダンスに従って画像アドレスを差し替えるだけです。
そしてガイドにあります通り、CSS内容も修正をお願いします。

注)スライド最初の1枚

がCSSの対象箇所です。
よろしくお願いします。

ぬこぬこ
2016/10/10 (Mon) 16:06

To Akiraさん

毎度お世話になります。

ブログタイトルとサブタイトルのスペース調整でバランスが良くなったのでアニメーションとフォントは今のところそのままでやってみています。

今回はh2をh1に変更したいのですが、
変更してしまっても大丈夫でしょうか?
プログラム的に。(SEOについては大丈夫です)

というのもインデックスやらサーチがh2になっているようですのでいじったらおかしくなるかなと。。

h2を全て変えるとh1が4つになってしまうのでそれはまずいと思いますので
ブログタイトルと記事タイトルをh1にしたいのですが。。。。。

プログラム的に問題ないですか?

それともインデックスとかサーチでおかしくなるんでしょうか?

よろしくお願いします。

Akira
2016/10/10 (Mon) 17:34

To ぬこぬこさん

要素名にダイレクトにCSSを振っていることはありませんので大丈夫のはずです。
id, class名は触らないようにお願いします。

私のテンプレではarticle, section などのhtml5新要素を利用しています。
これらは見出しが必ず必要ですので、ページによってはindexやsearchを大見出しのアウトラインにし、中にh1が入ってしまうカタチになりますのでご了承くださいね。
(validateでは減点対象かと思います)

-
2016/10/10 (Mon) 17:47

管理人のみ閲覧できます

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

-
2016/10/10 (Mon) 17:52

管理人のみ閲覧できます

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

Akira
2016/10/10 (Mon) 20:43

To 見出しの件 内緒さん

まず、有償サポートの件、そしてメールでのご相談の件は忘れてくださいね。
私はプロではありませんので有料で請け負うことはありません。
金銭授受はプロとアマの大きな一つの線引きです。
メールについてはどなたとも等しくEメールでの書簡を交わすことはありません。

=====

> 自動的に見出し番号を振れるcss

「見出し番号」というのはcounter-incrementプロパティのことでしょうか。
このプロパティは見出しにしか使えないという性質のものではありません。
見出しで全て行おうと思うと全体の定義がおかしくなってしまいます。
適宜ulあるいはol要素で補うのが通常の使い方です。

h要素には1〜6しかありませんし、記事の中が見出しだらけではGoogle botも意味を拾うことができなくなってしまいます。
見出しはページの一部分だけに係る要素ではなく、ページ全体の構成に影響します。

また、CSS装飾の中でもとりわけ「独自クラス」と呼ばれるものは、別のテンプレートに変更すると全て無効化されます。
該当CSSをしっかり管理し、その都度移植するというメンテナンスの手間も発生します。
現在取り組んでおられる:before, :after 両疑似要素による装飾は「独自クラス」の性質と同じものです。
実際にはクラス名ではありませんが、h2やh3といった要素自体に装飾を施そうとしているわけです。
要素名は装飾のためにあるわけではなく、ページ内の構造として最適と思われるものをコーダーが記述していくことになりますので、全てがご自分の都合に合わせてコード組みが為されるわけではありません。
個人の使い勝手や装飾ではなく、構造を司るのがhtml要素の役割です。
つまり「要素名に直接装飾を振るのはよろしくない」ということです。
強いて言えば引用を意味する blockquote ぐらいでしょうか。
要素に直接CSSを与えても問題がなさそうなのは。

自動連番で混乱するようであれば記事を書かれる際にご自分で番号を記入した方が遥かに合理的にも思います。
「自動」の利点は「作業効率」にもあるわけですが、扱う人間自体が混乱すれば作業効率は逆に大きく落ちてしまいます。
ともかく装飾に操られないことです。

一旦投稿します。

Akira
2016/10/10 (Mon) 20:53

To 見出しの件 内緒さん②

counter-incrementを操るには入れ子の状態なども把握しなければいけません。
要素が一旦結ばれると次からはまた初期化(また1からカウント)される点などなど。

記事を書かれる際に例えば

<h2 class="renban">見出しテキスト</h2>

このようにクラスを振るのが面倒で嫌だ、という解釈でお間違いないでしょうか。
装飾というのは基本的に「ID名」「Class名」で以って行うものです。
簡単だからという理由で<hx>に直接装飾をしてしまうために現段階での問題が出ています。

<h2>見出し</h2>

<h2 class="renban">見出し</h2>

クラス名無しの<h2>とクラス名ありの<h2>
両者とも同じ定義を持つものですが、class名にrenbanを持つものだけがCSS装飾を受ける。
これがCSSの正しい使い方です。
要素にダイレクトに装飾を行なってしまっては、その要素を使っただけで当然全て同じ見た目になってしまいます。

まずはこのあたりの考え方を改められるか、あるいは要素名だけで装飾を行うことが最優先であれば、テンプレート構造自体を見直す、という作業が必要かと思います。

ここまでよくお読み頂いた上で。
せっかく書いたCSSをそのままお使いになるには

.inner contents h2:before

に修正されることです。
書いた記事は
.inner contentsというブロックの中に収納されます。
.inner contentsの中にあるh2に装飾、という指定の仕方をすれば、そのブロック以外の箇所に存在するh2は装飾の影響を受けません。
これも1つのやり方です。

==========

別件です。
現在の状態ですと、スマホからの閲覧が困難に思います。
画面両端に空白がありませんのでボタン類も操作しにくいですし、なによりテキストが読みづらいです。
画面幅いっぱい使いたいお気持ちもわかりますが、多少の余白はやはり必要だと思います。
これはアドバイスとして。

ぬこぬこ
2016/10/11 (Tue) 11:56

To Akiraさん

いろいろとありがとうございます。
何度も読み、いろいろ考えましたが…、cssの知識が0なのもあって
ずっと考えても頭の中がぐちゃぐちゃであまり理解できていないですが…

もちろんcssは都度移植するつもりではいました。
もし次に変えるとしたらワードプレスなどになるでしょうし…

それも見越した上でh2などの要素自体に直接装飾しておけば、
例えば修正が必要になったときにcssだけいじれば全ての修正が完了すると考えていたのですが…
やはりそれでは、その要素を使っただけで全てのその要素に装飾がかかってしまうという問題が出てきたりしますよね…
他にも後々問題が出て来る可能性があるってことですよね。(推測するに)


別にhtmlで記述するのは問題ないんです。
コピペツールに登録して都度タグを貼り付けることができるので。

では<h2 class="midasi">見出しテキスト</h2> とクラスを振って、
cssにて.misasiで装飾をして、

そして、上記の<h2 class="midasi">が存在する場合に、
そこにcssで連番を振っていく様にはできないんでしょうか?

しかし、もし振れたとしても、
.midasiにビフォーとアフターを使用している問題で
簡単には行かないような気がします。

もしできるのなら教えて頂きたいですし、
できないのならば、番号振りは諦めます。

よろしくおねがいします。

ぬこぬこ
2016/10/11 (Tue) 13:23

To Akiraさん

お手数をおかけしますし、諦めることにします。
コメントは無視して下さって結構ですよ。

Akira
2016/10/11 (Tue) 14:12

To ぬこぬこさん

諦める、というのが最終的なご決断ということでよろしいでしょうか。
そうですね。counter-incrementは「使い方が難しいプロパティ」と言えると思います。
htmlとCSSは切り分けて考えるべきもので、
まずは見出しやリストのhtmlがどういう約割でどんな初期値になるのかを把握。
続いてCSSのcounter-incrementがどういう役割でどんな初期値になるのかを把握。
それからさらに:before, :after疑似要素CSSで装飾、という三段階が必要です。
初期値を知らずして装飾はできませんし、見出しはhtmlだけでも見た目が変化する要素の代表です。(位が下がると文字も小さくなります)
中に収まるであろうulやolなどのリストも同様。(リスト系htmlは特に難しいです)
見た目だけを整えたい時に気軽に使えるhtmlタグではないということです (´・ω・`)
理想と現実との折り合いがなかなか難しいかもしれませんが、頑張ってくださいね ^^;

ぬこぬこ
2016/10/11 (Tue) 18:09

To Akiraさん

そうですね、あまり複雑な仕組みにしてもわけがわからなくなってしまいますからね…

身の丈に合ったカスタマイズやるしかないということですね。

お手数かけまして申し訳ないです。

ありがとうございます^^

Akira
2016/10/12 (Wed) 16:34

To ぬこぬこさん

はい。大事なのは記事の内容ですから、あまりカスタマイズに時間をかけるのももったいないような気がします。
お疲れ様でした (●'0'●)/

vanillaice (Akira)
Akira
2016/10/19 (Wed) 15:25

To きろろさん

> トップページ文字数を制限したい件

htmlソース </body> の直前に以下を追加。

<!--not_permanent_area--><!--not_edit_area--><!--not_titlelist_area--><!--not_search_area-->
<script>$(function(){var e=40;$('.context p').each(function(){var a=$(this).text();var b=a.length;if(b>e){var c=a.substring(0,e);var d=c;d+='<span class="omit">…</span>';$(this).html(d)}})});</script>
<!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area--><!--/not_permanent_area-->

赤字の箇所で文字数を指定してください。
よろしくお願いします。

きろろ
2016/10/20 (Thu) 01:36

To Akiraさん

ありがとうございます<(_ _)>
無事、できましたw
これで、手抜き記事が書ける! ゲホッゲホッ

-
2016/10/30 (Sun) 20:45

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/10/30 (Sun) 22:03

To Mochaの件 内緒さん

ありがとうございます :)

まず、お互いの用語の認識に食い違いがあるようなので統一しましょうか。
「折りたたみ」という表現ですが、私の認識では
クリックしたらその場で展開する要素」だと捉えています。
内緒さんの言われる「折りたたみ展開」というのは、クリックしたらページ遷移が行われて個別記事へ移動することを指しておられますでしょうか。
いわゆる「追記」「read more」「続きを読む」ですかね (´・ω・`)
そして恐らく「全文表示」が好ましい(好みである)、とおしゃっているのではないかと推測しております。
Mochaは「要約表示」、記事本文がそのままの形ではなく最大200文字(全角)の抽出文です。
私のテンプレで言うと、
全文表示 --- Arrival, Belong, GirlOnWire, Valparaiso など
要約表示 --- Mocha, Colony, Corridor など

=======

Mochaは要約表示で「メイソンリーレイアウト」です。
メイソンリーというのは各記事をレンガ状に配置するデザインのことです。
記事内の以下の項目
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
こちらについては総じてお断りしています。
なぜならhtmlソースをまるごと書き換えるぐらい大変な作業になるからです。

記事の折りたたみ = 追記以降はページ遷移で個別記事へ誘導
折り畳まずに全面表示 = 要約表示ではなく全文表示に変更

という意味であるのならお断りせざるを得ません。
個人カスタマイズされるとしても相当大変だと思いますー (´・ω・`)
申し訳ございません (_ _;)

-
2016/10/31 (Mon) 03:08

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/10/31 (Mon) 17:55

To Mochaの件 内緒さん

恐れ入ります。
お気遣いもありがとうございます :)

-
2017/03/23 (Thu) 19:50

管理人のみ閲覧できます

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

Akira
2017/03/23 (Thu) 21:22

To Mocha search consoleの件 内緒さん

こんばんは (o'ω')ノ

> ①リストタグを使うとスマホでリストの・や番号が表示されません

当該記事内の更新履歴の通り、2016.9.9にリストアイテムを調整しています。
できれば最新版へのアップデートをお願いします。
再DLが困難な場合にはCSSソース末尾に以下を追加。
初期値への引き戻しを行ってください。

/* back to default */
.inner-contents ul {
margin: 1em 0;
padding-left: 40px;
list-style-type: disc;
}

.inner-contents ol {
margin: 1em 0;
padding-left: 40px;
list-style-type: decimal;
}

ご指摘の entry-content というクラス名を私は用いていませんので、inner-contents の間違いでしょうかしら。
現在のページ中にも見つかりませんのでhtml要素を内緒さんが追加したということでもなさそうです。
それとも単に「記事のコンテンツ部分」を表現するために用いた語句でしょうか。
ちょっとよくわからない。ごめんなさい ^^;


> コンテンツの幅が画面の幅を超えています〜

search consoleのモバイルフレンドリーの査定はページ単位ですので、そのページURLを教えて頂かないことには私にできる対処はありません。
デフォルトの状態で何かがはみ出しているといったことはありませんし、正規アドレス(トップページ)が「モバイルフレンドリーです」と認められているのであれば、記事単位で発生している警告のはずです。
なのでどのページで出るのかを教えてください。
この警告は一度出ると修正しても出たままですので、再度Google側に申請を行って解除してもらうことになります。
(クリック送信するだけです)

> クリック可能な要素同士が近すぎます〜

こちらはCtrl+F(Windows)/ Command+F(Mac)キー検索

.dropmenu > li > a

この中の
display: block;

height: 100%;
を削除してください。
その代わりパソコンのマウスによるクリックはちょっとやりづらくなるかもです。

========

search consoleを管理されているようなので、私のカスタマイズカテゴリの一連の記事をお読みいただいた方が良いと思います。

● ブログタイトルに <h1>が指定されていない
● ブログロゴにalt属性が無い
● レスポンシブではみ出す原因とその対処法
● html5テンプレに於いて廃止タグの利用(centerなど)

などが該当です。
SEOは気にしない、ということであればスルーで良いんだけれども、内緒さんの場合は違いますよね ^^;
ブログロゴについては、大抵の場合閲覧者は直感的に「ブログタイトル」をクリックしますので、そこへリンクが付いていないというのはちょっと問題かもしれません (´・ω・`)
いずれにしてもh1, alt属性などがありませんから修正必須です。
記事タイトルにh1を用いたので外した、ということであれば、ページ共通でのh1は評価対象から除外されますので問題にはなりません。
(寧ろブログタイトルにh1指定が無い方が問題)

で、コンテンツ超過のページについては恐らく記事内の「何か」が悪さをしているはずですが、ご自身で導入されたものについては私の方でお手伝いは致しません。
なのでヒントというか原因特定だけになるかと思います。
よろしくお願いします。

-
2017/03/24 (Fri) 18:01

管理人のみ閲覧できます

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

Akira
2017/03/24 (Fri) 20:03

To Mocha Search consoleの件 内緒さん②

お疲れ様です (o'ω')ノ

> さきほどサーチコンソールにて「今でもそのページに問題が存在しているかモバイルフレンドリーで調査」というリンクがあったので調査し、モバイルフレンドリーだと表示されました〜

これは既にお伝えしたように、一時的にでもコンテンツ超過があり、その間にインデックスされてしまったものについては継続して警告が出されます。
現在の状態を確認して「モバイルフレンドリーである」という評価が出されたのであれば、その結果をGoogleに送信して評価の再訂を待ちます。
つまり現時点では「問題はない」ということです。
過去にあったよ、ってことですね。

> ブログタイトルをh1にした方がいい理由

ブログタイトルはいわば「看板」です。
お店を出す際にスポットライトを照らすのはどこでしょうか。
そしてこちらも先に述べましたが、共通で設けられているh1については評価対象になりません。
このサイトさんがわかりやすいです ↓

検索サポーター様
http://s-supporter.hatenablog.jp/entry/seo-h1-after-main-contents

そもそも論になりますが、現在ではh1は大きな評価対象というわけではないです。
ユーザーの「読みやすさ」にとって必要である、と考えた方が良いと思います。
Googleのマット・カッツさんなど複数設置どころか順番でさえ「そんなに気にしなくて良い」って言ってます(笑)
でもそれってGoogle botがいかに優れているかってアピールでもあるような気がする(笑)

結局のところhタグの使い方などは情報が錯綜していて、それぞれが独自の判断を下している場合が多いです。
私は私で「納得できる」と思ったものを選んでいるわけで。
だからどうしても演繹法になってしまいがちです。

Wikipediaの例が出ましたので、ちなみにGoogleのofficialページは<h1>なし<h2>から、というものが多いです。
Google Ad関連のページはサイト名が<h1>になってます。
Googleはたぶんですね、画像(ロゴ)に対してh1は使わないという方針みたい。
Wikipediaもそれに倣ってるんじゃないかと思ってみたり。
参考までに。

最後に持論です。
私いつも思ってるんですが、視聴覚障害をお持ちの方の「音声読み上げ機能」ってあるじゃないですか。
たぶんアレとGoogleの bot って同じ感覚だと思うんです。
例えば、「見だしジャンプ機能」
見だしだけを読み上げて、気になるものだけを聞く。
その時にブログタイトルってやっぱ必要じゃないですか?
どのブログを読んでるのか、という情報は。
あとやっぱりhtml構造もそうです。
左にあるものから順番にコーディングしていくのがhtmlの「書き順」としては正しいのですけれど。
左サイドメニューのテンプレートをhtmlで左から書いてしまうと、音声読み上げではメインのコンテンツよりもサイドメニューの方を最初に読むわけです。
いつまで経ってもメインを読んでくれない、そしてページを変えてもまた「コメント」やら「最新記事はこれとこれで…」というところから始まる。
だから「サイドメニューを先に書いてはいけない」という理屈にもなるのではないかと。
Google botは
「htmlの前の方にあるものをより重要視する」= 「サイドメニューから先に書いたらアカン」
というのはこの感覚かと思うんです。
行き詰まったら音声読み上げをイメージしてみると良いのかもしれません。
これあくまでも自論・持論です。

-
2017/03/24 (Fri) 22:02

管理人のみ閲覧できます

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

-
2017/03/24 (Fri) 22:21

管理人のみ閲覧できます

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

-
2017/03/24 (Fri) 22:34

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/03/24 (Fri) 22:42

To Mocha Search consoleの件 内緒さん③

大変でしたね ^^;

> それとも完全に戻したほうが良いのですか

いえ。そのままでも良いと思います。
私なら直しません(笑)
ここはGoogleの中の人、カッツ氏を信じましょう ╭( ・ㅂ・)و
修正に時間をかけるならばコンテンツの充実に力を注いだほうが有益とも思います。

> リストのマークの左側の余白に押されまくって文章が右によっている

これが一般的なブラウザの初期値なんです。
でも初期値にしなければいけないわけではありませんので、左の余白を調整するのであればul, ol各々

margin: 1em 0;
padding-left: 40px;

この数字を調整してください。
ちなみにpadding-leftは指定せず(削除)に、margin: 1em 0; を

margin-left: 1.5em;

にすると大体記事の左辺と同じ位置にリストマーカーが出ますね。
そして上下の余白も出ません。
上下空白が出ないのはテンプレートのリセットCSSの効力です。
心配であれば

margin: 0 0 0 1.5em;

にされたほうが良いかもしれません。
初期値は上下余白が1em(文字一つ分)、0が左右余白無しを意味しています。
ここはお好みで調整してください。

> PCのクロームで見た場合、アイキャッチ画像の隅に黒線が出る画像がちらほら

こちらは一言で言うと、Chromeのグリッチです。
奇数widthでabsolute要素との位置が1pxずれます。
長く引きずっているものですが、直らないね ^^;

音声読み上げ説に賛同していただいて嬉しいです(笑)
誰もそんなこと言ってないし書いてないのであくまでも自説ですけれど。
感覚的にはそんなところじゃないかと思うんです(笑)

vanillaice (Akira)
Akira
2017/03/24 (Fri) 22:45

To Mocha Search consoleの件 内緒さん④

> 今では見出しの重要性はほとんど無くなってるって解釈でいいんですかね~?

そうかもしれないですね。
ただGoogle様本人のページなんだからどうとでもなるだろう、ってのもあります(笑)
私的には「同一アウトライン内では入れ子構造に準ずる」というのが一番良いのではないかと思います。

多少の溜飲は下がりましたでしょうか。
こちらこそお世話になります。
作業お疲れ様です :)

-
2017/03/25 (Sat) 00:55

管理人のみ閲覧できます

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

Akira
2017/03/25 (Sat) 14:34

To Mocha リストの件など 内緒さん

こんにちは (●'0'●)/

> リスト行の下が、一行分? 開いてるようなのですが〜

旧投稿画面をお使いでしょうか。
旧投稿画面ではdisplayの初期値がblockのものを改行して書くと一行空いてしまいます。
(div, table などが 代表的なblock で、リストの ul, ol その子要素にあたる li もブロックです)

<ul>
<li>リスト1
<li>リスト2
<li>リスト3
</ul>

(liの終了タグは省略しています)
こういう書き方だとダメなんですね。
blockは前後に改行を含んでいるので行が空いてしまうんです。

<ul><li>リスト1<li>リスト2<li>リスト3</ul>

こうして横繋ぎで書くと空白行はできません。
リスト内容が多いと記事のメンテナンス性は落ちます。
それがお困りの場合には、
① 新投稿画面のHTMLモードを使う(ソース内改行しても空白行ができません)
② 改行の扱いを「HTMLタグのみ」に変更する。
このいずれかが対策です。
②を選択された場合には、通常の文章の末尾にも任意改行の
<br>
を記す必要が生じます。
一長一短(笑)

=======

語彙のことはわかりませんが、私に文才は無いですよ ^^;

-
2017/03/25 (Sat) 14:54

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/03/27 (Mon) 20:54

To Mochaの件 内緒さん

お返事遅くなりました (*_ _)

いやいや。買いかぶりです ^^;
私はテンプレートにしてもブログにしても、収益を… という頭は全く無いんですよ (´・ω・`)
テンプレについてはお金を頂けるレベルだと思っていない。
自分で言うのも残念だけど(笑)

はい。こちらこそお世話になります。
作業お疲れ様でした :)

-
2017/04/09 (Sun) 13:37

管理人のみ閲覧できます

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

-
2017/04/09 (Sun) 14:00

管理人のみ閲覧できます

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

-
2017/04/09 (Sun) 14:04

管理人のみ閲覧できます

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

Akira
2017/04/09 (Sun) 14:10

To CSSファイルの件 内緒さん

あらら。お困りですよね。
ちょっとごめんなさい。
私これから外出しなくちゃなので、しばらくお待ちください。
ホントごめんね (´・ω・`)
1〜2時間かかるかも。
相方の用事だから車中からなんとかお返事できるかもだけど。
申し訳ないです。しばしの辛抱を (*>д<)

-
2017/04/09 (Sun) 14:23

管理人のみ閲覧できます

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

-
2017/04/09 (Sun) 14:36

管理人のみ閲覧できます

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

Akira
2017/04/09 (Sun) 16:14

To CSSファイルの件 内緒さん②

遅くなりましたー (*_ _)

キャッシュから内容が取得できた、ということで大丈夫でしょうかね。
セーフ(笑)

robots.txt をユーザーが編集することはできないですよ。
disallowはルートディレクトリに置かなければいけないので、FC2ブログ運営にしか許可されていません。
そして noindex などとバッティングさせてはいけませんので、かなり特殊な場合でなければ使えません。


ごめんなさい。これは既にご存知のようでした。
失礼致しました。

常に最新のhtmlとCSSのファイルをお取り置きしておくか、複製を取っておきましょう (●'0'●)/

-
2017/04/09 (Sun) 17:03

管理人のみ閲覧できます

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

Akira
2017/04/09 (Sun) 18:48

To シェアボタンバルーンの件 内緒さん

この件については私がお手伝いすることはできませんので、ヒントだけ。

tableというのはセルの垂直位置合わせが middle になるのが初期値です。
ですから、ボタンの高さ・ボタンとバルーンとの距離(空白)・バルーンの高さ
この全てが全く同じでないと絶対に揃いません。
現在では(TweetとLinked in)のボタンの高さが1px違います。
まだ加える予定であれば、その全てのボタンの高さを揃える必要があります。
が、それは難しいでしょうからバルーンとの距離で調整されると良いと思います。

シェアボタンを全て純正のものにしようと思うので苦労します。
何故なら各社の純正ボタンはそれぞれ得手勝手なサイズや形状です。
得手勝手という表現はおかしいかもしれんけど(笑)
バナーなんかは国際規格がありますので簡単に揃えられますが、SNSシェア純正ボタンというのはそうはいきません。
上の内容と同じになりますが、揃えるのならば「高さ」の方を揃えます。
そしてセル(td)のvertical-alignにtopかbottomを指定。
私なら bottom にします。

個人的にはシェア数はそのうちどこも提供しなくなる気がしています。
FBもいつまで表示できるか (´・ω・`)
そしてFC2ブログがSSL化した際には全てリセットされますので最優先事項では無いのではないかなぁ、と。

-
2017/04/09 (Sun) 19:09

管理人のみ閲覧できます

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

Akira
2017/04/09 (Sun) 20:02

To シェアボタンバルーンの件 内緒さん②

> SSL化した際には全てリセットになるんですか(;´д`) 〜

はい。残念ながら (´・ω・`)
SNSシェアに用いるOGPってご存知ですよね。
このOGPは絶対パスが必須なんです。
//vanillaice000.blog.fc2.com/ --- 相対パス
http://vanillaice000.blog.fc2.com/ --- 絶対パス
http: か https: かのスキーム指定が必ず要りますので、ここが変更された際には別のカウントになります。

> そういえばfc2ブログ、ssl化ってされるんですかね?〜

こればっかりはわかりませんが、「やらないとマズいだろう」という感じですね。
ブラウザ警告も厳しくなっていくようですし。
これまではChromeだけが「保護されていない通信」という警告を表示していましたが、
Firefoxでもそれが実装されました。
Firefoxはhttpスキームのサイトに対して機能を削減するとまで発表しています。
んでもって、閲覧者もこの警告が出るページは徐々に開かなくなると思います。
となるとサービス存亡に関わる事態ですので、半年かかるか1年かはわかりませんが「せざるを得まい」という感じでしょうか。
遅くとも年内には切り替えないとマズいと思うなぁ (´・ω・`)
はてなブログさんの動向も気になるところですね。
たぶんかなり厳しい状況になっていると思うので。
(はてブ連携の点で難しそう)
できればはてなさんに先んじてFC2ブログ頑張れ (=`ェ´=;)

ただなんか見てるとですね、一般ブログでは
「Ameba, Yahoo!, FC2はAOSSL化をするらしいので〜」
ってことになってるんですよ。
たぶんFC2オフィシャルのお知らせを見てのことだと思うのだけれど。
でもFC2ブロガーはその意識が無いですよね(笑)
えー。アクセス解析とかだけ? (´・ω・`)
と思ってる。
でも他サービスの方はそう思ってない。
格差の不思議(笑)

-
2017/04/10 (Mon) 04:59

管理人のみ閲覧できます

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

-
2017/04/10 (Mon) 17:11

承認待ちコメント

このコメントは管理者の承認待ちです

-
2017/04/10 (Mon) 17:11

承認待ちコメント

このコメントは管理者の承認待ちです

-
2017/04/10 (Mon) 17:12

承認待ちコメント

このコメントは管理者の承認待ちです

Akira
2017/04/10 (Mon) 17:12

To FC2ブログSSLの動向の件 内緒さん

ごめんなさい。私内緒さんのコメント見落としてました。
あっぶねー (´・ω・`)

> fc2も収益源のアダルト分野を断たれて存続が危ぶまれるのではないかと心配〜

ですよねー(笑)
なんかもうポリスメンの威信をかけて「お前ら常に監視してるからな。」って感じ。
既に3度のタイーホですか。FC2さん (´・ω・`)
カリビアンなんとかも、なるほどの「共犯タイーホ」ですよね。
もう国外から一歩も出るなよって思う(笑)

もし断たれたら…。
今のFC2ブログは良い感じに「放任」だと思うんですよ。
アダルトの管理についてじゃなくて、一般ブログについて。
稼ぎどころは大人向けコンテンツ、みたいな確たる指針があるじゃないですか(笑)
それが断たれたら、他サービスみたいに
「稼ぎどころはページビュー稼げるやつに便乗」商法に切り替えるかもしれないですね。
エグい引き抜きやってるLivedoorとか、ユーザーの差別化に必死なAmebaみたいに。
ってゆーかさ。一般ブロガーさんを「オフィシャル」「公認」とか仕分けしすぎだよ。
FC2ブログは今のところそういった差別化はやってないですよね。
ボチボチ更新、ゆっくり更新のブロガーさんが蔑ろにされるのは嫌だなぁ (´・ω・`)

人間のそっち系の欲ってキリがないので、FC2はそのあたりを上手く利用して、かつ合法に、上手に運営されることを願う(笑)


* 不適切投稿をくぐり抜けてようやく投稿できた(笑)

-
2017/04/11 (Tue) 06:32

管理人のみ閲覧できます

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

Akira
2017/04/11 (Tue) 12:55

To FC2の件 内緒さん

トラフィック自体はマンモス級だと思います(笑)
サーバーの保持は巨額だと思いますが、広告料はそれを上回る巨額かと。
相当稼いでいると思われ (´・ω・`)

ある日突然ブツっと消滅というのは無いと思います。
身売りは無いとは言い切れませんよね。
FC2のシステム全般、喉から手が出るほど欲しいでしょう。
LI○Eとか。
引き抜いて潰しにかかるか吸収するか。
LI○EとLi○○do○○と2つ抱えてますが、LI○Eが発展途上なので吸収できたら超美味しいと思います。
身売りされたら現在のような放任の心地よさは無くなると思います。
そんなのやだー (´・ω・`)

-
2017/04/11 (Tue) 22:14

管理人のみ閲覧できます

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

-
2017/04/12 (Wed) 08:28

承認待ちコメント

このコメントは管理者の承認待ちです

ぬこぬこ
2017/04/12 (Wed) 08:30

To Akiraさん

そもそもあれがマ ○ コだってわかるかな…(;´д`)
不正なキーワードで弾かれたからスペース入れて投稿しなおし笑

-
2017/04/12 (Wed) 08:33

管理人のみ閲覧できます

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

Akira
2017/04/12 (Wed) 22:39

To 吹き出しの件 内緒さん

> 画面幅が広いと、〜なんか気持ち悪いです〜

そうですね。ちょっと見辛いかなぁ、という印象です (´・ω・`)
文字数に関わらず吹き出しが常に横100%になっているのも一因だと思います。
ヒント

方法①
width: 100%;
max-width: 600px;

上記のようにブラウザ幅が広い時の横幅を制限。
19%取っているmarginも不要だと思います。

方法②
display: inline-block;
を指定。

こちらにされる場合には外回りにもう一つアウトラインが必要です。
例)
<div style="text-align: left;">
<div style="display: inline-block;">吹き出し内容</div>
</div>

上記を採用される場合には吹き出しは文章内容量に左右されるようになります。

=====

マツコだってことはわかりますよ(笑)

-
2017/04/13 (Thu) 08:04

管理人のみ閲覧できます

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

Akira
2017/04/13 (Thu) 13:27

To 吹き出しの件 内緒さん②

> 以前リストマークが画面外にはみ出していたように、はみ出してしまう〜
> リストみたいに勝手に空白ができてしまっているんでしょうか〜

勝手に空白、ということはないです。
marginへの19%というのは絶対値ではありませんので、画面幅やブラウザ幅を関連とした相対値です。
画面320pxでの19%と画面1400pxでの19%では全く違いますよね?

アイコンのサイズは80px固定ですので、marginを19%取らずとも100〜120px程度あれば十分かと思います。
100pxならば80pxがアイコン、残り20pxが吹き出しの出っ張り部分及びアイコンとの距離です。
まずは吹き出しの左辺の位置を確定し、そこから何px左 or 右に移動させるかを決めますので、100pxのmarginであれば左側アイコンならばafter疑似要素への位置指定は

left: -100px;

という指定になります。
marginで取った100pxとabsoluteでの左移動で差し引き0、つまり記事アウトラインの左辺とアイコンの左辺が同じになります。

=====

得意というよりも、入ってます。
いわゆる1/4というやつです (´・ω・`)

-
2017/04/15 (Sat) 16:16

管理人のみ閲覧できます

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

-
2017/04/15 (Sat) 16:28

管理人のみ閲覧できます

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

-
2017/04/15 (Sat) 16:33

管理人のみ閲覧できます

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

Akira
2017/04/15 (Sat) 16:40

To Pタグの件 内緒さん

こんにちは ( ゚Д゚)ノ

> 何かfc2側で変更が行われたとしか考えられない〜

FC2の仕様変更は何も無いですよ。
そもそもFC2がpタグに何かしらの指定をしたところで各テンプレートに反映させることはできません。
FC2が操作できるのはブログ個人設定で表示させる一部の要素に対するスタイル程度です。

内緒さんの過去の書き方と現在とでは書き方が変わってますよ。
2件目(古い方)はp同士の間に<br>が入っていますのでかろうじて重なってはいませんが、基本的に<br>での空白調整は完璧なものになり得ません。
ですからmargin-bottomで取っておくか、padding-bottomで取るか。
after疑似要素で顔アイコンを配置していますが、これはabsoluteという絶対配置を用いてます。
absolute子要素というのは親がその子の高さの認識を行いません。
なので重なります。

参考
http://vanillaice000.blog.fc2.com/blog-entry-500.html

参考(こちらは<br>での空白調整に対する啓蒙)
http://vanillaice000.blog.fc2.com/blog-entry-502.html

参考記事は主に「横」について書いていますが、「縦」も同じことです。
例えば親の高さが50pxだとします。内緒さんの内容だと吹き出しの中身を含んだものが親です。
子のアイコンはabsolute配置で高さが80px固定ですので、次の要素(次の吹き出し全体像)は80pxの直後から配置して欲しいところですが、absolute子要素は高さが出ませんので実際には親要素の高さであるところの50pxの直後からの配置になります。
なので重なってます。
これはabsoluteの特性ですので、ある意味「正しい表示」ですよ。
正しくCSS解釈が行われれば現状のように重なった状態になります。

ソース内容を拝見して。
やっぱり根本的にスタイリングができていないように感じる ^^;
widthの80%も修正が入ってないのでアイコンは右に寄りますよね。
そして相対指定ですから画面幅に左右されます。
そして今回のような要素同士の重なりを避けるためには、現状のソースを利用するのであればmin-heightの指定が必須です。
そして<br>を用いた空白調整は行わないことです。
あとはrelativeとabsoluteの関係も危ういなぁ、と。
時間があればこのタイプのソース組みを記事にしますが、時間が取れるかどうかはわかりません (▪⌔▪)

-------- 追記

独自クラスのセレクタ指定ですが、現在だと

.entry-content .r-fuki {
内容
}

のような形になってますよね。
これやらない方が良いですよ。

.r-fuki {
内容
}

だけで十分です。
CSSにはspecificityという概念がありますが、クラス名が他要素と被っていないのならば段階を踏んだ指定はなるべくしない方が良いです。
管理が大変になりますし読み込みが遅くなります。
たぶん段階的セレクタ指定(specificityが高い・強制力が強い)を用いているので文字列が長くなってますよね。
それが混乱する一因にもなっていると思います。
クラス名は被りがなければダイレクト指定で十分です。

box-sizing: border-box;
-webkit-box-sizing: border-box;
も既にテンプレート全体で指定済みなので不要ですが、指定をしておきたいのであれば順序が逆です。

-webkit-box-sizing: border-box;
box-sizing: border-box;

ベンダープレフィックスの付いたものを「先」に書きます。
優位プロパティは最後に書かないと、CSSの基本は「上書き」です。

-
2017/04/15 (Sat) 18:30

管理人のみ閲覧できます

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

-
2017/04/15 (Sat) 18:36

管理人のみ閲覧できます

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

Akira
2017/04/16 (Sun) 00:37

To 吹き出しの件 内緒さん

記事を書きましたのでそちらをご参照ください。

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

ちょっとやっつけ感がありますけれども (´・ω・`)
急いでやったのでお許しを(笑)

変更点
・ widthが常に100%取らないように
・ transformのrotate数値を変更(135°も傾けずとも45°でOKです)
・ 全体像が記事幅と同等になるように
・ 後続要素(次の吹き出し)と重ならないようにmin-heightを設定
・ htmlのアウトラインを追加(ご希望を叶えるためには外回りにひとつ追加した方が良いと思います)

などなどです。
あとは変更すべき点があればコメントを見ながら頑張ってください。

======

ベンダープレフィックスの件ですが、

-webkit-
-moz-
などが前にくっついているもの、これがベンダープレフィックスです。
製品リリースメーカー = ベンダー
プレフィックス = 前置詞
これらはCSSの正規実装よりも「以前」に各ベンダーが独自にというか先んじて導入していたもので、いずれは正規のものに統合されます。
現在では統合がかなり進んでいますので、ベンダープレフィックス無しで動作する場合がほとんどです。
border-radiusやbox-sizingなどがそうです。
その場合、古いバージョンのブラウザ向けにベンダープレフィックスを保険として書いても良いのですが、CSSは上書きが基本ですので、
正規が先に書いてある = 正しく描画される
ベンダープレフィックス付きが後に書いてある = 描画し直し
ということになりますので、無駄です。
この辺のことはデザイナー分野ですので、内緒さんはともかく記事を書かれることに専念された方が良いと思う ^^;
あまりスタイルにこだわり過ぎても、結局一番大切なのは「記事内容」ですから、見た目に専念しすぎて息切れするようなことになりませんよう。

-
2017/04/16 (Sun) 08:22

管理人のみ閲覧できます

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

Akira
2017/04/16 (Sun) 08:45

To 吹き出しの件 内緒さん

何故Pタグひとつで出来るかと言うと、それは「横幅に緻密な制御をかけないから」です。
でも現状内緒さんの問題点はこの「横幅の制御ができない」点にあるわけですよね?
横に80%を指定したら常に80%です。
また、%を取りやめてpx指定してしまえばレスポンシブですからどこかポイントではみ出します。
それを解消したいのならば制御用アウトラインの追加は必須です。
ですから元のソースが「画期的」なわけではないんです。
可能なことが削られているから簡素なだけで。
「用法・目的が違う」だけですよ。投稿時の面倒は辞書登録を利用すればそれほど苦にならないと思うのですが。
そしてpタグにこだわる必要もありません。
pタグはテンプレートによっては初期値適用になって(公式テンプレなんかはそうかもしれない)、上下に大きくmarginが付いてたりします。
ですから汎用性の高いdivを利用しています。
元の内容が

<div><p>内容<p>
<p>内容</p></div>

ですよね。
それが

<div><div>内容</div></div>
<div><div>内容</div></div>

になっただけなのですが、そんなに難しいことでしょうか。
そしてそれぞれの記事内容とアウトラインの数を計算してください。
1会話
元のソース
1+1 = 2
私のソース
2
貼り付けられている記事内容
3+1=4

2会話
元ソース
1+1+1 = 3
私のソース
2+2 = 4
貼り付け記事
3+3+1 = 7

3会話

1+1+1+1 = 4

2+2+2 = 6
記事
3+3+3+1 = 10

簡素なhtmlで行いたい --- 横幅制限は諦めてこれまでのソース利用
横幅を制限したい --- 外回りに一つアウトラインを追加

元ソース・今回貼り付けた記事内容 = 横幅に制限はかけられません(おおまかな制限はOK、ただしスマホの狭い画面でもその制限が適用される。widthが80%ならば記事幅から20%削られる。)
私のソース = 横幅に制限をかけられます (スマホでは記事幅いっぱいまで広げられる)
3者のソースコードはそれぞれ視点が違います。
relative, absoluteを利用しているところは共通ですが、着地点が違います。
私のソースの目的は最初に書いてある通り「横幅が『常に100%(あるいは90%や80%』にならない」ことですので、当然お二方のソース内容とは異なります。
目的が違うのですから。

お話の発端が「記事幅が広いと全部横いっぱいになって気持ち悪い。」
だったと思うのですけれど。
元のソースが画期的なのでそのまま使いたい、そしてスマホ画面で狭いのが困るのでなんとかしたい場合の別の方法は
ブレイクポイントをご自分で設定してください。

@media screen and (max-width: ●●px) {
.セレクタ {
width: 100%;
など
}
}

画面幅に応じてwidthを変更します。
ブラウザ幅が広い時・中間(タブレットなど)・スマホ、といった感じで。
これはこれでかなり面倒かつ詳細な設定が必要ですが。

貼り付け記事の主さんが仰ってますよね。
「極限まで簡単に作りました。」と。
この3コードそれぞれがユーザーの利便性を考慮して極限まで簡単に考えてあります。
これ以上簡単・簡素にするには「機能の削減」しかありません。
そもそもhtmlやCSSは難しいものです。
アウトラインの特徴やルールもあります。
簡単にしたいからなんとかしろと言われても限度ある。
目的・行動・結果のバランスをお考え頂ければと思います。

あとは内緒さんご自身の「簡単なことにこだわるか」「デザインにこだわるか」の選択次第です。
ってゆーかさ。基本、定形で貼り付けるだけじゃないですか(笑)
特に何も考えずに貼り付けるだけ。
考えたのはソース提供してくださっている方々であって、しかもすごく親切に作られていると思いますよ。
お二方共。
ただ「視点」が違うので、内緒さんの視点にかなったものを探す必要は出てきますよ。
で、無理なものは無理なんです。
例えばテキストの位置合わせにしても

<span style="text-align: center;">あいうえお</span>

これなら簡単ですよね?
でもこれはhtml的に無理なんです。効きません。
嫌でも

<div style="text-align: center;"><span>あいうえお</span></div>

こうしないと。
内緒さんが仰っているのはこれと同じです。
それがhtml構文ルールであり、CSSボックスモデルのルールです。
使う・使わないは内緒さんの自由ですので、私としてはこれ以上のサポートはできません。
よろしくお願いします。

-
2017/04/16 (Sun) 09:41

管理人のみ閲覧できます

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

Akira
2017/04/16 (Sun) 16:24

To 吹き出しの件 内緒さん

見辛いのはまぁ、しょうがないですね (´・ω・`)
細かなことをするにはどうしたってhtmlの入れ子も複雑になりますし、CSSも難しくなります。
入れ子が複雑なhtmlを扱うには改行の扱いをhtmlのみにしておくのはもちろんのこと、インデントなども使いこなしてなるべく自分がわかりやすいような内容にしておくことも大事です。
それはユーザーさん自身の仕事です。

clibor便利ですよね。
私は使ってませんが、長男はよく使ってるみたい。

-
2017/04/19 (Wed) 00:42

管理人のみ閲覧できます

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

Akira
2017/04/19 (Wed) 18:21

To 吹き出しの件 内緒さん

既にこのテンプレートの内容から大きく逸脱していますので、以下の記事への移動をお願いします。

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

-
2017/04/22 (Sat) 15:17

管理人のみ閲覧できます

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

Akira
2017/04/22 (Sat) 15:36

To Mochaの件 内緒さん

> Mochaテンプレってhtml5とか、今までとは違うテンプレなんですよね?

今までとは違う、というのは「何と比べて」でしょうか (´・ω・`)
htmlのバージョンが4でなく5ってことですか?
それともFC2ブログで共有されている一般的なテンプレートと比べて特殊かってことですか?

> 自動目次作成機能を実装というのを以前にやってみた〜略〜うまく動作しなかったのです〜

この手のJSで最も気をつけるべき点は
● 対象となるクラス名あるいはID名が合致しているか
● JSに含まれる要素(この場合は hタグ)が指定する側とされる側とで合致しているか
● Jqueryライブラリが重複していないか (記事内コードをコピペするとJqueryが重複します。私のテンプレには既にJqueryを導入済みです)

記事に記載されている注意事項がそのままMochaで導入される際の注意事項ですので、よくお読みになって内容に沿ったJSコードに変更する必要はありますよ。
そして内緒さんが独自に行ったカスタマイズとの照らし合わせも当然必要です。
例えば内緒さんのカスタマイズ後のhは

ブログタイトル = h1
記事タイトル = h1

が確定していますので、単純にJSコードの指定を h1 としてしまえばブログタイトルも記事タイトルも含まれることになります。

どんなコードを記載し、どんな結果になったのか実証サンプルもありませんし、そもそもテンプレートとは全く無関係な内容ですのでこれ以上のアドバイスのしようがありません。
よろしくお願いします。

それより木を見て森を見ずというか。
カスタマイズばかりを気にされているようですが、記事書かなくて大丈夫なんですか?

-
2017/04/22 (Sat) 19:28

管理人のみ閲覧できます

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

-
2017/04/24 (Mon) 14:10

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/04/24 (Mon) 19:27

To Mocha要素位置変更の件 内緒さん

こんばんは (●'0'●)/
以前に運営ブログでご活躍の記事を拝見しました。
お使い頂き光栄です :)

> カテゴリとタグを
①FC2公式のツイートボタン、いいね!ボタンの上に表示させる
②関連記事リストの上に表示させる

SNS公式ボタンはブログ個人設定で表示させていらっしゃるかと思います。
FC2ブログの仕様上、個人設定でのSNSボタン表示は「追記」に書かれた文章の「直後」と決まっています。

本文

追記

SNSボタン

関連記事リスト

タグ(テンプレートに記載がある場合のみ)

この順序で固定なんですね。
テンプレートのソース内で「追記」を意味する箇所の直後にカテゴリやタグに係るhtmlを書いたとしても、追記とそれらの間にSNSボタンが必ず割り込みます。
なので簡単にできるわけではありません。

対処法はいくつかありますが…
① SNSボタンのJSを個人設定を利用せずに直接テンプレートに書く + 関連記事リストも個人設定でなくテンプレートに直接書く
② JSを用いて本来は挿入できない位置(今回の場合はSNSボタンの「上」にカテゴリとタグを強制移動させる)

②がおすすめですが、描画自体は遅くなります。
①の場合はかなり大掛かりなカスタマイズになりますので、ここでのご説明は不可とさせてください。
申し訳ないです (*_ _)

======= ②の手順

カテゴリとタグのソースコードはご自分で準備されたものだと思いますので、まずそのhtml内容に改行が含まれないようにしておいてください。

例)

X
<div class="cate">
<span>あいうえお<br>
かきくけこ</span>
</div>


<div class="cete"><span>あいうえお<br>かきくけこ</span></div>

htmlの整理ができましたら、以下の通りJSコードを書きます。

<!--permanent_area-->
<script>
$(function() {
$('ここにhtml内容').insertBefore('.fc2_footer');
});
</script>
<!--/permanent_area-->

上記コードをテンプレートhtmlソースの </body> の直前に記載してください。
くれぐれも該当htmlソース内に改行が含まれないようご注意ください(<br>の記載はOK。キーボード改行のことです。)
SNSボタンの上ならば赤字部分はBeforeのままで。
SNSボタンと関連記事リストの間にするならば赤字部分をAfterに変更します。
一度お試しください。
よろしくお願いします。

-
2017/04/24 (Mon) 21:26

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/04/25 (Tue) 15:43

To Mocha要素位置変更の件 内緒さん②

大変失礼しました。
FC2独自変数をご利用でしたよね。
こちらでお試しください ↓

<!--permanent_area-->
<!--topentry-->
<script>
$(function() {
$('ここにhtml内容').insertBefore('.fc2_footer');
});
</script>
<!--/topentry-->
<!--/permanent_area-->

変数が含まれる場合には <!--topentry-->〜<!--/topentry-->が必要です。
で、もしこれで上手く行かないようでしたら
貼り付けた該当ソース内容をコピペ
でお伝えください。
独自変数は一旦描画されてしまうと第三者からは目視確認が叶いません。
なので実際に記載した内容を教えてくださいね。
よろしくお願いします。

-
2017/04/25 (Tue) 20:22

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/04/25 (Tue) 23:44

To Mocha要素位置変更の件 内緒さん(完了のご報告)

お出来になったということで安心しました。
すぐに気づけば良いものを、二度手間になりましてごめんなさいね。
こちらこそありがとうございます :)

初心者
2017/07/31 (Mon) 18:30

トップページ画像

つまらない質問ですみません!
トップページ画像の

縦横比不問 最適サイズは 長辺1500px以上が望ましいです
画像の容量削減は事前に行ってください

画像サイズを下げても
そまま使おうとしても
トップページの画像がズームアップされた画像で
貼り付けられてしまいます。
適応サイズか何かあるのでしょうか?

Akira
2017/08/01 (Tue) 20:27

To 初心者さん

テンプレートに関するご質問の際はどなた様にも「ブログアドレス記載必須」をお約束にさせて頂いてます。
ご理解をお願いします。

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

-
2017/08/03 (Thu) 22:50

管理人のみ閲覧できます

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

Akira
2017/08/04 (Fri) 00:34

To Mochaの件 内緒さん

こんばんは。アドレスの件、お手数おかけします。

> 一瞬だけ元々の女性の画像の後

こちらは当記事内の注意書きにある通り、最初の一枚目だけはCSS側の指定も必須です。
「スライド画像変更」の見出し内容を御覧頂き、説明に従って修正してください。

> サイズを直してみても引き伸ばされる

スライド部位の縦横比は「横長」です。
内緒さんが設定しようとしている画像は真逆の「縦長」です。
ですから最適画像は「横長画像」なんですね。
で、使用する画像の最適サイズについては長辺1500pxと書いてある通りです。
ですから内緒さんの場合は縦に長いわけですから、縦が1500px以上が望ましいですよ、ということになります。
現在の画像は800pxしかありません。
ですが拡大は免れません。
最適長辺サイズ1500px、というのはあくまでも「解像度」を保つためのものです。

横長の範囲に縦長を入れ込んで寸足らずを防ごうと思えば、横を拡大しなければ物理的に不可能だからです。
表示範囲が横長のところで縦長の画像を放り込んだ場合、以下の2通りになります。

スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/af9weuifhjscreenth.jpg

現在の画像で「拡大しない」ことを前提にすると、スクショの「上」の状態を選ぶことになります。
どちらがマシか、ってことですよね。
上は拡大されませんが横の寸が全く足りていませんので、ポカーンと画面右側が空いている状態になります。
(赤い背景はわかりやすく付けただけなので実際には背景色である茶色です)
下は横の寸足らずを埋めるために横幅を拡大せざるを得ないので見切れも多くなり、解像度も落ちます。

画像の縦横比というのは本当にまちまちです。
私がいくらここで「画像の縦横比は 横:縦 = 3 : 2.5 にしてください」と言ったところでそれを徹底するのは無理です。
そして一番避けたいのはスクショで言う「上」の状態、つまり「寸足らず」です。
「見切れ」というのは元画像の状態を知らなければ見切れ部位があることすら気づきませんが、寸足らずというのはそうはいかない。
誰が見ても「足りていない」のが寸足らずです。

対処法
・使用画像は表示範囲に沿った「横長」に変更
・長辺(変更した場合は「横」が対象になります)は1500px程度

これはもうhtmlが〜CSSが〜ということではなく物理的な法則ですので、使用画像を厳選してください、としか言えません。

ちなみに以下のスクショがデフォルトで使用している画像です。
全て横長ですが縦横比はそれぞれ。
それぞれを表示範囲に最も適した状態にCSSで自動補正して埋め込んでいます。
結果どの画像も表示時には見切れが発生していますが、それは元画像を見て初めてわかることであって、寸足らずのようにすぐ気づかれるものではありません。

http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/screen0wfieowth.jpg

よろしくお願いします。

-----------

もう一点修正した方が良いと思われるところがありますのでお伝えします。
こちらは任意でお願いします。

ブログタイトルを大きくしすぎたため、スマホから閲覧した際に単語の折り返しが効かずに画面超過が起こっています。
画面超過の問題
・画面が左右にブレる(閲覧困難)
・検索で不利になる(= NOT mobile friendlyの評価)

通常、英単語というのは半角スペースを基準として自動で折り返しますが、半角スペースが現れる前に画面の超過が先に起こってしまっています。
原因は「文字サイズが大きすぎるから」
スマホというのは全体像を目に入れる範囲が限られます。
大きすぎる文字というのは閲覧者の理解力を低下させますので、このままにしておくと恐らく、せっかく閲覧してくれた方が居たとしても、彼らは内緒さんのブログタイトルを覚えられません。
頭に入ってこないからです。
スマホサイズになった際にはスマホ画面に適したサイズに変更されることをおすすめします。
画面超過の様子はブラウザ横幅を狭めていくだけでもわかりますので、一度ご自分でお試しくださいね。
よろしくお願いします。

-
2017/08/06 (Sun) 02:55

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/08/06 (Sun) 11:49

To Mochaの件 内緒さん

ありがとうございます :)

まず語句の訂正と統一をお願いします。
・ スマホ版
レスポンシブデザインは決して「スマホ版」ではありません
スマホ版というのはスマートフォン専用のhtml, CSSのセットを指します。
レスポンシブデザインはワンセットのhtml, CSSで全デバイスをサポートするのが目的のレイアウトで、「スマホ版」と言った時にはレスポンシブテンプレートのことを指しません。
話しの方向がおかしくなりますので、ここは解釈の訂正と語句の訂正をお願いします。
これは私のテンプレに限らずweb一般です。
Q&Aサイトで尋ねる際にも「スマホ版」と表現してしまうと正しい回答が得られません。

・ ハンバーグメニュー
ハンバーガー(ハンバーグでなく「バーガー」)というのは

このマークあるいはアイコンのことです。
形がハンバーガーに似ているのでそう呼ばれます。
ただのアイコンの「形状」のことです。
で、Mochaにはこのハンバーガーアイコンがスマホでは2つ表示されます。
上からスライドするものは「ナビゲーション(ナビゲーションメニュー)」
横からスライドするものは「ドロワー(ドロワーメニュー)」
今回のご質問は「ドロワー」の件かと思います。
こちらも正しい語句を用いないと回答する側が困惑します。

批判ではないのでどうぞお気に病まれませんよう。
円滑な質疑応答のためにも正しい用語を覚え、間違いがあれば修正をする、というだけです。
寧ろ知らなくて当たり前で、恐縮されると逆に困っちゃうのでお願いします ^^;

で、ご質問の件ですが、いずれも原因は「flash」です。

> Amazonアソシエイトの方でブログに広告を貼っているのですが、スマホ版のみ表示されません〜

スマホからの閲覧時に表示されないのは、このパーツがflash(フラッシュ)だからです。
参考記事
http://vanillaice000.blog.fc2.com/blog-entry-451.html
http://vanillaice000.blog.fc2.com/blog-entry-552.html

> 指をハンバーグメニュー表示してる時スワイプをすると横にずれてしまいます〜

これもこのamozonパーツのwidth指定が原因。
参考記事
http://vanillaice000.blog.fc2.com/blog-entry-492.html

具体的に言うと、flashというのはスマホでは見ることができません。
ですが場所は取ります。
対象のflashは横幅に600pxの指定があります。
スマホの画面は320px程度しかありません。さらにMochaは仕様表にある通り、サイドメニュー(スマホではドロワーに切り替わります)に許可される横幅は最大260pxです。
260pxしかない場所に600pxのものを貼り付ければ340pxの超過。
その超過分がレイアウトを壊しています。

参考記事の内容をお読み頂けばflashを用いては「いけない」理由がおわかり頂けると思います。
amazonにしろどこにしろ、昨今のweb事情を鑑みて「レスポンシブ用」を必ず準備しているはずですので、そちらへの切り替えをおすすめします。
ましてflashコンテンツはもう使える代物ではないので、是非切り替えを。

よろしくお願いします。

-------

ところで、とても志が高くてらして感動しました。
息子と娘に見習わせたい(笑)
本当に素晴らしいです。
陰ながら応援します :)

-
2017/08/08 (Tue) 22:22

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/08/18 (Fri) 13:04

To Mochaの件 内緒さん

お返事大変遅くなりました (*_ _)

はい。対象要素を変更するだけで直ると思いますのでご確認ください。
って、もう終わってると思うけど(笑)

初心を忘れること無く今後も頑張ってくださいね。
貴方のような方にご利用頂けることをとても光栄に思います :)

べえ
2017/10/03 (Tue) 02:41

ブログカードのブックマークレットが

こんにちは。いつもお世話になっています。

さて、ハロウィン用のテンプレートとして、このテンプレートを
改造していたのですが、深夜にテストをしてみるとブログカードの
ブックマークレットが上手く表示されません。表題と、画像は表示
されるのですが、本文だけが消えています。ソースを見ると本文は
あるのですが表示されていません。
ちなみに、何も加工されていないMochaテンプレートにブログ
カードのCSSだけを追加しても同様でした。

Akira
2017/10/03 (Tue) 02:46

To べえさん

こんばんは。
該当ページのURLを教えて頂けませんでしょうか。
明日改めて拝見します。
よろしくお願いします。
たぶんですが、mochaは黒背景ですので基本文字色が白です。
.blogcardに

color: rgb(51,51,51);

を追加すれば出てくると思います。
背景の白と文字色の白と同化しているはずなので。
一度ご確認ください。

べえ
2017/10/03 (Tue) 03:18

こんにちは。

確かにそのようですね。選択したら文字が出てきました。
今からしばらくだけですが、テンプレートを変更しました。

たとえばこのページはブログカードが張ってあります。
https://beebaku.blog.fc2.com/blog-entry-2095.html

べえ
2017/10/03 (Tue) 03:25

見えるようになりました

ありがとうございます。

color: rgb(51,51,51); を付け加えたら、見えるようになりました。

Akira
2017/10/03 (Tue) 17:22

To べえさん

複雑なことでなくて良かったです。
背景色を付けたら文字色も設定する、を徹底すべきでした。
なので私の手落ちです。お手数おかけしてごめんなさいね。

ぬこぬこ
2017/12/12 (Tue) 21:44

右クリ禁止

お世話になります。
以前、右クリ禁止などの方法をどこかに書かれていたような気がするのですが、そんな記事ってありました?
記憶が曖昧でブログ内検索しても出てこなかったのですみませんが質問させて下さい。

Akira
2017/12/12 (Tue) 21:59

To ぬこぬこさん

こんばんは (o'ω')ノ

ココです ↓
https://vanillaice000.blog.fc2.com/blog-entry-220.html

* 既存テンプレートの修正作業中なので閲覧に支障があるかもしれません。ごめんなさいね。
ちなみにMochaも近日中にアップデート予定です。カスタマイズの予定があるようでしたら少しお待ち頂いた方が良いかもです。

ぬこぬこ
2017/12/12 (Tue) 22:31

To Akiraさん

了解です。お手数おかけしました。
ありがとうございました(^^)

-
2018/03/05 (Mon) 00:00

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/05 (Mon) 00:51

To Mochaアップデートの件 内緒さん

お話をまとめると、今の状態を維持してアップデートされた内容を部分的に移植するということですかね。
それはかなり難しいと思います。
テンプレートの内容というのは長大ですよね。カスタマイズの量がそれを超えることは無いはずです。
今回のアップデートはこれまでの中でも大きな変更ですので相当苦労されると思いますよ (´・ω・`)

テンプレートはカスタマイズせずともそのまま使える状態で提供していますので、変更を加える場合には各個人でその内容を把握・管理して頂かないことには、どうしようもないです。
そして現状で何も問題が無いのであれば無理にアップデートする必要もありません。
Githabのように元ソースと追加ソースを比較して変更箇所のみを適用するやり方もありますが、そうなると全ソースを公開することに。
じゃあそれをどこでやるの?それこそGithab的なところでやるの?って話しになってくるので(笑)
そこまで求める人の絶対数は少ないと思います。

--------
Feed APIについてはガイダンスがついているはずですので
(たぶん「RSS新着サムネイル〜」とかなんとか)該当箇所を削除して頂くだけです。

--------
> 構造化マークアップ(これはパンくずリストの事?)〜

パン屑リストも含みます。
構造化マークアップは目に見えるデータではありませんので、内緒さんがおっしゃる「パン屑リストを追加した」という内容とは異なります。
内緒さんのそれはhtmlによる可視表示ですよね。

構造化マークアップはGoogleへデータを渡しますが、現状では大きなメリットを受けられるわけではありません。
(レシピブログや口コミ系などのランク表示がメインのサイトは恩恵があるかも。検索結果の見栄え的に)

-
2018/03/05 (Mon) 02:04

管理人のみ閲覧できます

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

LOVE
2018/07/31 (Tue) 16:37

テンプレートの件

はじめまして。
テンプレート、お借りしました。
ありがとうごさいましたm(_ _)m

あちらの、コメント欄に、コメント出来なくて、
こちらにさせて頂きました。

vanillaice (Akira)
Akira
2018/07/31 (Tue) 17:50

To LOVEさん

こんにちは ('0')/

ご丁寧にありがとうございます。
コメント書き込めないんですね。何か不具合かしら (´・ω・`)
わざわざお越しいただきまして感謝です。とても励みになります :)

-
2019/04/30 (Tue) 16:26

管理人のみ閲覧できます

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

-
2019/04/30 (Tue) 17:22

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/04/30 (Tue) 17:38

To Mochaカスタマイズの件 内緒さん

ありがとうございます :)

-----
> ヘッダー画像の縦幅を少し狭くしたい〜

考え方はいくつかあります。
【横幅について】
・後続のコンテツと横幅を揃える
・後続のコンテツと横幅を揃えなくても良い

【縦幅について】
・縦横比を固定する(デフォルト)
・縦横比を固定しなくても良い

横幅を後続コンテンツ(メインとサイド)と等しくする場合はhtml, CSS共に修正が必要です。揃えない場合はCSSを1つ追加するだけです。

縦幅の縦横比固定を維持する場合はCSS追加の必要はありません。解除する場合はブレイクポイント毎に調整が必要です。
パソコンでの見た目縦幅を小さくしすぎるとスマホから閲覧した際にひどく横長になり見栄えが悪くなることがあります。その場合には固定解除をおすすめします。

上記の方針をお決め頂いた上で選択作業をお願いします。今回は「横」と「縦」を切り離して考えてください。


1. 横幅『後続コンテンツと横幅を揃えない』

#header-image-container {
で検索するとスタイルシート内に1箇所あります。その括りの中の
margin-bottom: 40px;


margin: 0 auto 40px;

に変更。そしてそのすぐ上に以下を追加。

max-width: 数値px;

max-widthで横幅の最大値に制限をかけるだけです。指定数値を下回った場合は画面幅と同等(100%)になります。スライダー周りに余白を設けたい場合はこの方法は向きません。特にスマホ表示時の余白の有無をどうするか熟考してください。

===
2. 横幅『後続コンテンツと横幅を揃える』

<div id="header-image-container">
で検索するとhtml内に1箇所あります。

<div id="header-image-container">
<div id="header-image"></div>
</div>

となっているはずなので、この部位を

<div id="header-control">
<div id="header-image-container">
<div id="header-image"></div>
</div>
</div>


に変更してください。文頭を揃える(インデントを行う)必要はありません。コピペでそのまま貼り付けてください(スペース使用のミスを防ぐための処置です)

続いて
#header-image-container {
で検索。そのすぐ上に以下の内容を追加。

#header-control {
max-width: 1500px;
margin: auto;
padding: 0 60px;
}
@media screen and (max-width: 768px) {
#header-control {
padding: 0 30px;
}
}
@media screen and (max-width: 540px) {
#header-control {
padding: 0 15px;
}
}


赤字の部位はスマホで余白です。スマホでスライダー周りに余白が不要であれば padding: 0 15px; を
padding: 0;
に変更してください。

ここまでが横幅の処理です。作業がややこしくなるので一旦投稿しますね。

vanillaice (Akira)
Akira
2019/04/30 (Tue) 17:48

To Mochaカスタマイズの件 内緒さん②

続いて縦幅調整です。この作業に入る前に横幅調整を済ませるようにしてください。そして見た目の確認を行います。横幅調整だけで希望に近くなることがありますので場合によっては以降の作業が不要かもしれません。そのために見た目の確認を。

1『縦横比固定を維持したまま調整』

#header-image-container:before {
で検索するとスタイルシート内に1箇所あります。この括りの
padding-top: 35%;
が縦幅指定です。横幅に対し縦幅がその35%、という意味です。縦を小さくするには35%を30%や25%など小さい数値に変更します。
ただし小さくしすぎると最初に言ったようにスマホでの見た目がよろしくないかもしれません。その場合は固定解除を。

1『縦横比固定を解除して調整』

#header-image-container:before {
content: "";
display: block;
padding-top: 35%;
}

を削除。すぐ上にある
#header-image-container {
に直接heightを指定してください。



#header-image-container {
max-width: 1300px;
margin-bottom: 40px;
position: relative;
height: 数値px;
}

全デバイス共通ではスマホでスライダー部位が大きくなりすぎますので、上記内容のすぐ下に

@media screen and (max-width: 768px) {
#header-image-container {
height: 数値px;/* タブレット */
}
}
@media screen and (max-width: 540px) {
#header-image-container {
height: 数値px;/* スマホ */
}
}


を追加。それぞれの数値はコメントにあるように「タブレット」と「スマホ」の縦幅切り替えです。
header(スライダー)の調整は以上です。

vanillaice (Akira)
Akira
2019/04/30 (Tue) 17:52

To Mochaカスタマイズの件 内緒さん③

> 関連記事リストの表示デザイン〜

こちらについてまず確認なんですが、テンプレート変数のみに変更する理由は何でしょうか。
「テンプレート変数のみ」に指定した場合、テンプレート内に追加したhtml内容と整合性のある CSSの追加 が必要です。
追加されるhtml内容は内緒さんが作成するわけですからCSSも内緒さんが充てなければいけません。私がhtmlを推測するわけにはいきません。

デフォルトで書かれているCSSを流用するならば、それはつまりテンプレート変数を利用しない場合と同じhtmlを用いるということですから、「テンプレート変数のみ」に変更する理由がありません。

まず設定を変更する理由を教えてくださいね。そしてテンプレート変数のみにされる場合は原則内緒さんご自身が行う作業です。
よろしくお願いします。

----
別件です。何らかの理由でスムーススクロールが効いていません。JSの衝突だと思いますが、ブログが非公開状態だとバリデート(検証)できませんので、ご自身でチェックするか、公開状態で私の方にお申し出ください。

----- 追記
2つ目のコメントを見落としておりました。上で私が指摘した件と同じですよね。
恐らく開閉スクリプト内で
href="#"
これを使ってませんでしょうか。html5では開閉にaタグは用いません。特に # (ハッシュ, パウンド)はスムーススクロールの位置指定に用いられますから使用しない方が良いですね。

参考記事: サイト改装 脱jQueryなど
https://vanillaice000.blog.fc2.com/blog-entry-724.html

見出しの8番にJSを使わない開閉について書いてあります。参考までに。

-
2019/04/30 (Tue) 22:11

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/01 (Wed) 00:48

To Mochaカスタマイズの件 内緒さん④

なるほど。表示位置の問題だったんですね。

でしたらhtmlは創作するのではなくサムネイル付きで出力される内容と同一のものを記せばテンプレートデフォルトのCSSにいくつか足すだけでできますよ。
設定で「個別記事下」にしておくと全ユーザー共通の関連記事用スタイルシートが出力されます。名称はユーザー毎に異なりますのでここでお伝えはできませんが、.css でファイルを調べればすぐにわかります。
その中身を全てテンプレートスタイルシートに記せばOKです。記載位置は related post, trackback list で検索するとありますので(コメント内容です)その内容よりも「前」に記してください。

よろしくお願いします。

-
2019/05/01 (Wed) 10:18

管理人のみ閲覧できます

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

-
2019/05/01 (Wed) 21:30

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/01 (Wed) 21:49

To Mochaカスタマイズの件 内緒さん⑤

こんばんは。

> スライダー画像がかなり左にずれた状態になる〜

#header-control

margin: auto;
が足りないので追加してください。それで中央になります。

縦幅については縦横比を固定すればPC・タブレット・スマホ全て同じ見た目になりますが、縦幅指定の方法を取ると画像内オブジェクトの表示範囲が変わりますので画像によっては問題が生じることもあるかもしれません。縦横比を固定しないというのはそういうことです。

-----
関連記事の方も頑張ってくださいね。
お疲れ様です :)

-
2019/05/02 (Thu) 21:33

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/03 (Fri) 02:21

To Mochaカスタマイズの件 内緒さん(完了のご報告)

上手くいったということで安心しました。
励みになるお言葉もありがとうございます。お疲れ様でした :)

-
2019/11/02 (Sat) 02:46

管理人のみ閲覧できます

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

-
2019/11/02 (Sat) 04:46

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/02 (Sat) 10:39

To Mochaの件 内緒さん

こんにちは。

> デモ画面に出ているように、メイソンリーに写真付きで記事が表示されるようにするには〜

トップページのサムネイルやOGP画像の選定には条件があり、第一は FC2ブログサーバーにアップロードされたもの です。
他サービスの画像は対象にできませんので、面倒でもFC2ブログの方へアップロードしてくださいね。

参考記事: FC2ブログ「サムネイル」「アイキャッチ」のおさらい
https://vanillaice000.blog.fc2.com/blog-entry-900.html

-----
> 日付を出さないようにしたい〜

以下の内容を削除してください。テキストエディターでの作業なのかブラウザ上でなのかわかりませんので、ブラウザ上での作業と仮定して説明します。


<span class="month<%topentry_month>"></span> <%topentry_day>, <%topentry_year>&nbsp;&nbsp;

* 上記は実態変換を避けるために後方の n を2箇所大文字にしていますのでこのままでは検索できません。小文字に直してから検索してください。


<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_day> <span class="month<%topentry_month>"></span> <%topentry_youbi> <%topentry_year> <%topentry_hour>:<%topentry_minute>:<%topentry_second></time>


<div class="list-entry-date">
<%topentry_year>/<%topentry_month>/<%topentry_day> (<%topentry_youbi>) <%topentry_hour>:<%topentry_minute>
</div>

* 改行を含む文字列は検索できませんので一行目の <div class="list-entry-date"> を目印にするなどの対処を行ってください。


<div class="list-entry-date">
<%titlelist_year>/<%titlelist_month>/<%titlelist_day> (<%titlelist_youbi>) <%titlelist_hour>:<%titlelist_minute>
</div>

最初のコメントの要件については以上です。

vanillaice (Akira)
Akira
2019/11/02 (Sat) 10:44

To Mochaの件 内緒さん

> ファビコンを設置しようとして〜ドロワーが表示されなくなってしまいました。〜

現時点でファビコンの内容が設定されていませんのでなんとも言えませんが、大抵の場合は以下の記事内容が原因です。

参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

一度ご確認くださいね。よろしくお願いします。

-
2019/11/02 (Sat) 19:33

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/03 (Sun) 15:53

To mochaの件 内緒さん

こんにちは。

> ナビのカテゴリに階層を作ることは可能でしょうか?〜

「階層」というのはこういうのでしょうか ↓ (ナビ内「About」の部分)
https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/promise-memin01_top.html

大掛かりな個人カスタマイズのお手伝いは致しませんので、自力で移植して頂く形になります(難易度はかなり高いと思います)
で、スマホ閲覧時、折りたたみの中にさらに折りたたみ、というのはほとんどクリックしてもらえなくなりますのでその点も考慮してくださいね。

あと、スタイルシート内の
*テンプレデフォルト最新ポスト削除〜〜〜省略
などご自身で追加されたコメント(覚書)がありますが、これはいけません。コメントアウトはルールがありますので

/* ここにコメント内容 */

必ずこの形で記してください。

/* 1つめのコメント */
/* 2つめのコメント */
/* 3つ目のコメント */

とこんな感じです。このエラーのためにレイアウトに影響が出ています(サイドメニュー部の写真のはみ出しなど)
参考記事: ソースの不要部分をコメント化する
https://vanillaice000.blog.fc2.com/blog-entry-383.html

-
2019/11/03 (Sun) 23:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/04 (Mon) 12:51

To mochaの件 内緒さん(終了のご報告)

こんにちは。

はい。また何かあればお尋ねください。
お疲れ様でした :)

-
2020/06/07 (Sun) 01:01

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/06/07 (Sun) 01:41

To Mochaをご利用中の内緒さん

こんばんは。
* ページ送りの件

> ページが1と最終番号しか出ないのでおかしいなーとは思っていましたが〜

こちらは「出ていない」わけではなくちゃんと出ています。カスタマイズで暗色から明色へ変更されていますが、ページ送りの部位を明色のままにしているため背景と同化して見えなくなっているだけです。

> 再ダウンロードができなかった〜

再DLの方法は、お手元のMochaの名称を「Mocha1」などに変更し、その上でDLページで入手してくださいね。
同じ名称のものはDLできませんので、名称変更の必要があります。

> 可能ならばタイルに出る写真を選べるようにできれば助かる〜

アイキャッチ画像機能をご利用ください。
参考記事: FC2ブログ「アイキャッチ画像」機能を利用する際の注意点
https://vanillaice000.blog.fc2.com/blog-entry-420.html

よろしくお願いします。
* ご質問継続の場合は私が数日多忙でして、お返事が遅くなると思います。申し訳ないです (*_ _)

-
2020/06/07 (Sun) 11:23

管理人のみ閲覧できます

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

-
2020/06/08 (Mon) 08:36

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/06/10 (Wed) 17:11

To 「ページ送りJS」修正の件などについて内緒さん

こんにちは。お返事遅くなりました (*_ _)

リダイレクト処理を挟んでいる、ということですよね。そしてレイアウトが崩れる、と。
私の方から目視確認ができませんので(iPhone)、恐らくドメイン変更による一時的なスタイルシート切り替えのタイムラグだと思います。
CSSファイルの取得にタイムラグが発生することはドメイン変更時によくありますので、時間の経過で収まることが多いです。

ハンバーガーメニューの操作も特に問題ないようです。ただし右側のハンバーガー(グローバルナビゲーションが上からスライドするもの)はタップした際のバーのスタイルにミスがあるようなのでお伝えしますが、再DLしたMochaに切り替えて頂くのが最善策です。

> これは再ダウンロードしなくても大丈夫ということでしょうか?〜

の回答になりますが、これは今お手元にあるMochaの「名称」が変わっただけで、新しいMochaを入手したわけではありません。名称を変更したらテンプレートDLページへ行き、

https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45365

MochaをDLできましたら、今設定している「Mocha100」から「Mocha」に変更してください。それが最新バージョンのMochaです。
カスタマイズの関係でどうしても今のMocha(名称はMocha100)を維持したい場合は以下の手順で修正してくださいね。
いずれもスタイルシート修正です。

【ハンバーガーメニュー】
いずれもタイプミスによるものです。

.open-navi span:nth-oof-type(1)
で検索し、
.open-navi span:nth-of-type(1)
に修正(oofではなくofです)

.pen-navi span:nth-of-type(2)
で検索し、
.open-navi span:nth-of-type(2)
に修正(penではなくopenです)

【ページ送り背景色】
.light-theme a,
で検索すると1箇所ありますので、このルールセット内
color: white;
を白「以外」の色に変更。例えば
rgb(51,51,51)
など(この指定をおすすめ)

以上です。

-
2020/06/10 (Wed) 20:50

管理人のみ閲覧できます

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

-
2020/06/10 (Wed) 21:14

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/06/10 (Wed) 21:59

To リダイレクトの件 内緒さん

こんばんは。

移管を「まだしていない」のではなく「しない」のですね。となると表示がPCのまま(レスポンシブにならない)件が解決することはありません。

まず現時点で新規ドメインへのリダイレクトは行われていないですよね。リダイレクトは旧FC2アドレス「から」新アドレス(独自ドメイン)「へ」向けて行う必要がありますので、そこをまず確認してください。
そしてFC2へ移管しないとFC2の変数など正しく利用できませんし、ページのシステムなども踏襲できないのではないかと思います。全く無関係なドメインに対してシステムを無償で貸し出すような奇特なサービスはまずありませんので、FC2ブログの既存システムを正しく利用したいのであればきちんとFC2へ移管するようにしてくださいね。

target属性というのは「ページを滞在ページでそのまま表示させるのか(_self)、それとも別のタブを開いてそちらに表示させるのか(_blank)」というだけで、それが本来なのですが、現在.comドメインの方では滞在ページのまま開くとリダイレクトがかかりますのでページ自体は表示されますがhtml内容が実際には変わりませんので、シェアもできませんしOGPも機能しません。それでお困りで「別タブで」ということですよね。

全てのページを別タブで開く、というのはちょっと強引というか、やたらに新規タブを作成されると閲覧者が困らないでしょうか。別タブ指定はせいぜい「外部サイトへの移動」「滞在ページを保持する必要がある場合(参照や比較など)」に利用する程度です。
根本的な問題は「FC2ブログのシステムとして使いたいのかどうか」であって、レスポンシブ設定も含めそれらはFC2ブログのシステムで動いているものですから、外部ドメインでは何もできることがありません。申し訳ないです (∵`)

-----
本件については私ではできることがありません(テンプレートの内容だけではどうしようもないです)し、活動停止期間に入ってしまいますので直接FC2ブログ運営に問い合わせて頂いた方が良いと思います。よろしくお願いします。

-
2020/06/10 (Wed) 22:13

管理人のみ閲覧できます

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

瀬戸
2022/11/17 (Thu) 12:00

とても素敵なテンプレートをありがとうございます…!!

はじめまして、こちらのテンプレに一目惚れして初めての個人サイトを作りたいと思っております。素敵なデザインを本当にありがとうございます!!
初歩的な質問で大変恐縮なのですが、トップページや各記事の上部にあるTwitter等snsシェアアイコンが、クリックしても反応しません…。どのようにすれば正しく反応するようになりますでしょうか。お手数をおかけし申し訳ありませんがよろしくお願いいたします。

vanillaice (Akira)
vanillaice (Akira)
2022/11/20 (Sun) 18:10

To 瀬戸さん

こんばんは。

テンプレートに関するご質問についてはご自身のブログURL記載を必須とさせて頂いていますので、URLを記載の上再度ご質問願います。

参考記事: テンプレートに関するご質問時のお願い
https://vanillaice000.blog.fc2.com/blog-entry-26.html

瀬戸
2022/11/29 (Tue) 06:46

To vanillaice (Akira)さん

ご確認ありがとうございます。こちら自身で解決することができましたのでご放念いただけますと幸いです。お手数をおかけし失礼いたしました。素敵なテンプレートをありがとうございました!引き続きお借りいたします。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)