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

Swollenテンプレート

Swollenテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
Swollen
すぉーれん
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Open Sans
Prata
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.18 2024.2.28
  • リスト型ページネーションの複製を可能に
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.17
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2023.7.20
  • IE用対応終了
  • Font Awesomeの利用を停止
  • jQueryの利用を停止
  • スクロールアンカーJSの利用を停止
  • カスタムプロパティ導入
  • SNSリンク追加
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

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

カテゴリ階層表示と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.29
  • ページ送りのJSを修正
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.25
  • 個別記事ページ送りの複製を可能にしました

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

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.3
  • コメント主のリンク表示用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> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<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> から <div class="contents"> までを 削除

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

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

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

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

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

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

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

<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要素を利用している方向けなので必要がある方だけどうぞ。

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

更新履歴 2018.12.23
  • Font Awesome(JS)を廃しインラインSVGに変更
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

更新履歴 2018.2.28

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

  • jQueryのバージョンを3.3.1にUPしました
  • Font Awesomeのバージョンを5にUPしました(CSSリンク+アイコンフォントからJS+SVGに変更になります)
  • スマホでのグリッドレイアウトを一列から二列に再調整しました(320pxデバイスは一列のままです)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • floatレイアウトをflexレイアウトに変更しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました
  • コメント欄で管理人プロフィールアイコンをデフォルト表示できるようになりました(FC2独自変数の追加)

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

更新履歴 2017.4.17
  • iPhoneでfixedされたinputが固定されないバグのApple修正に伴いhackを削除
【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

ナビゲーションが固定されており そのナビゲーションの中にサイト内検索が含まれているテンプレート全般に関係しています。 これまでiPhoneでは固定ナビゲーション内のinput要素をクリックすると、滞在中の位置から強制的にページ最上部まで引き戻される、というバグがありましたが、こちらが解消されています。 (iOS10.3.1)...

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

柔軟剤詰め替え時にひっくり返すとその日一日ブルー

すうぉーれん
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

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

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

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'●)/

-
2017/02/26 (Sun) 01:51

管理人のみ閲覧できます

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

相槌
2017/02/26 (Sun) 12:06

うう〜リリース心待ちにしておりました!
PC環境が整ってないもので不具合確認も出来ず、変にコメントするのもどうかと思いこっそり静観しておりました…お力になれず申し訳ありません( ; ; )
運営さんへ報告して下さったり、現状を的確に伝えて頂けて、とっても頼もしかったです(*´︶`*)♡
というのも虫がいいような…!でも本当の気持ちです

こちらもカスタマイズして大切に使わせて頂きますね♡
いつも素敵なテンプレートありがとうございます!

vanillaice (Akira)
Akira
2017/02/26 (Sun) 15:54

To コメントの件 内緒さん

まず、使用報告の義務は一切ありませんのでお気になさらず。
私のテンプレートに限らず、その時その時で使いたいと思ったものを自由にお選びくださいね :)
そしてわざわざお越しいただきましてありがとうございます。

私、あなたのような方が幸せで居られないなんて納得できないので、
どうか笑顔になれることがたくさん起こりますように。
あなたの優しさは文章からも伝わってきます。
自信持って行きましょう ╭( ・ㅂ・)و

vanillaice (Akira)
Akira
2017/02/26 (Sun) 15:57

To 相槌さん

なんか…。不具合じゃないって言い切られ(笑)
し、仕様?!(汗) みたいな(笑)
「こちらの環境では起こりません。」とか言われたらもうどうしようも… ない ( ̄∀ ̄;)
結局あまりお役に立てず申し訳ないです (*_ _)

こちらこそありがとうございます。
励みになりますー :)

かめ太郎
2017/03/06 (Mon) 17:14

ヘッダー画像のリンク化他

HTML/CSSの初心者講座のような記事で勉強させてもらっています。いつもありがとうございます。
なんとなーくこんな感じ?で済ませていることがほとんどなので、毎回ギクツ!としてます(゚_゚i)
SSL化もHTML5化もできてませんし、フォントは”メイリオ”をとりあえず先頭に!といじったばかりでした(泣)。


Swollenがとても素敵だったので、お借りします<(_ _*)>
ただでさえ、多忙なakiraさんに質問して時間を取らして申し訳ないのですが、カスタマイズについて2点ほど、教えて頂けないでしょうか?

①トップページの最初の1ページ目に入るヘッダー画像をクリックすると、特定のページへの飛ばしたいのですが、可能でしょうか?

②記事のタイトルの文字サイズを大きくしたいのですが、どこを修正すれば宜しいでしょうか?(思い当たる箇所を弄ってみたのですが、うまくいかなくて)


お忙しいところ申し訳ありませんが、教えていただけると助かります。

かめ太郎
2017/03/06 (Mon) 19:17

ヘッダー画像のリンク化他

②については解決できました。” あれこれ試した時に漏れていたようで、#entry-title{ ”の箇所を弄ったら、うまくいきました!

お聞きしておいて申し訳ないです<(_ _*)>

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

To かめ太郎さん

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

① ヘッダー画像クリックでページ遷移〜

可能ですがhtml構造が複雑になります。
全画面リンクをご希望、という仮定で進めます。
htmlソース内
Ctrl+F(Windows)/ Command+F(Mac) キー検索。

<!-- ヘッダー下welcomeここから -->

上記を目印に <!-- ヘッダー下welcomeここまで --> に挟まれた内容を以下の通り変更

<div id="lower-left">
<a href="アドレス">
<div id="left-inner-cell">
<p id="welcome">大きめテキスト内容</p>
<p id="proverb">小さめテキスト内容</p>
</div>
</a>
</div>


続きましてCSSソース。

#lower-left

3箇所ヒットしますが、まず一番目のものが対象です。
この項目の

padding: 30px 50px;

上記を削除

続きまして同じく #lower-left の三番目。
以下のような内容になっています。

#lower-left {
padding: 60px 20px;
}

赤字を変更して以下の通り。

#lower-left a {
padding: 60px 20px;
}

続きまして検索。

#welcome

先程の一番目の #lower-left のすぐ下にあります。
この #welcome のすぐ「上」に以下を追加

#lower-left a {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
color: カラーコード;
padding: 30px 50px;
}

#left-inner-cell {
display: table-cell;
vertical-align: middle;
}


赤字部分は、中のテキストが全てリンクテキストになりますので適切な色を指定してください。
白にされるならば white と記載します。
その他の色はカラーコードをお調べになって記載してください。
また、マウスホバーの際にもしかしたらie系はテキストの色がおかしなことになるかもしれません。
その場合には
#lower-left a のまとまりの下に

#lower-left a:hover {
color: カラーコード;
}


を追加してください。
あまりゴチャゴチャしてもアレなんで、同じ色を指定しておかれると良いと思います。

リンクへの text-decoration: none; を削除しておられますので、今回のかめ太郎さんの場合はテキスト下に下線が置かれます。
見た目に煩いと感じられる場合には #lower-left a への指定内容の padding: 30px 50px; の下で良いので

text-decoration: none;

を追加してください。

=======

② 記事タイトルのフォント大きさ変更〜

検索。

.element-title

CSSソース内に1箇所あります。
こちらはトップページの記事タイトルです(個別記事のタイトルとは連動していません)
この項目の font-size を調整してください。

個別記事のタイトルは

.entry-title

のfont-sizeを変更してください。
既に全体の文字も大きくされていますので、トップページの記事タイトルを大きくされますと、要約記事の表示がかなり縦長の不格好になるかもしれません。
その点を予めご了承くださいね。

==========

③ フォント指定について

同じ名称のフォントが離れ離れになっていますのと、Mac 新OSではフォント名が変更になった関係上、やはり今のままではあまりよろしくありません。
丸みを帯びたフォントを第一指定にされるのであれば以下の通り修正してください。
その前に、記事内テキストで欧文のものは現状だとWindowsではメイリオ、Macでは游ゴシック体になっており、欧文フォントの指定は無効化されています。
それで良いのかどうかも併せてお考えください。
以下はフォント部分だけの書き出しです。
(行の最終に ; を付けるのは忘れないでくださいね)

'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'sans-serif'

Windowsはメイリオ、第二が游ゴシック。
Macはヒラギノ角ゴシック(ヒラギノサンズという英字名に変わりました)、第二がヒラギノ角ゴ ProN W3。
Macの方も上記が丸みのあるフォントです。

欧文フォントの Open Sans が必要な場合には 'メイリオ' の「前」に記述してください。

'Open Sans', 'メイリオ', 'Meiryo',.....省略.....,'sans-serif';
よろしくお願いします。

======

すぐ上でコメント頂いていたことにあとで気づきました(笑)
フォントサイズについては修正済み、ということですね。
あとはリンクとフォント名の方を頑張ってくださいませ。

かめ太郎
2017/03/07 (Tue) 20:02

ヘッダー画像のリンク化他

akiraさん

想像していたものよりいじる箇所が多くて、お手間を取らしてしまってすいません。
とても分かりやすく書いて下さいましたので、躓くことなく修正完了できました。

修正は今朝行ったのですが、途中でiPhone、Androidスマホ共にヘッダー画像やプロフィール等が表示されなくなったことに気付き、四苦八苦してました(泣)

PCやAndoroidタブレットでは問題なく表示できるし、テンプレートを再ダウンロード&適用しても改善せず、プラグインもいじっていたので、すべてチェックを外しても変わらず。
FC2ブログ側の一時的な不具合か何かかなと思い、一日様子を見ていましたら16時位からスマホでも表示されるようになりました。

そんなわけで、返事が遅くなり失礼しました。

フォントのアドバイスも頂き、ありがとうございます!こちらも修正完了しました。
重ね重ね、有難うございました。


vanillaice (Akira)
Akira
2017/03/07 (Tue) 22:38

To かめ太郎さん

お出来になったようで良かったですー。
修正中に不具合食らうとパニクりますよね ^^;

作業お疲れ様でした :)

かめ太郎
2017/03/29 (Wed) 11:44

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

テンプレートのカスタマイズミスの類いではないのでは?と思っているので、akiraさんにお聞きするのは申し訳なく思っております。ですが、これ以上どうすれば良いか検討がつかず困っております。どの辺りが怪しいのか思い当たることだけでも教えて頂けないでしょうか?


困っていることとは、実際の記事を遥かに超えるページがGoogleにインデックスされていることです。

記事の数はおよそ100ですが、3,000程度インデックスされています。

site:http://kametarobochibochi.blog.fc2.com

これを見ていただければお分かりの通り、1947年や2028年などのアーカイブ記事が大量に作成されています。

FC2ブログの設定などを確認致しましたがが、このような状態になる設定は見つからず、FC2ブログにも問い合せしていますが、3週間近く経っても一度も連絡がありません。


どの辺りをミスしている可能性があるのか思い当たることがあれば、お教え頂けないでしょうか?

vanillaice (Akira)
Akira
2017/03/29 (Wed) 17:10

To かめ太郎さん

こんにちは。
こちらこそお世話になります :)

> 実際の記事を遥かに超えるページがGoogleにインデックスされている〜

まず、FC2ではページ種がいくつかありますので、記事数 = インデックス数 というわけではない、というのを大前提に。
(ご存知かとは思いますが念のため)

そのインデックスがある時期を境に一気に増えたのであればスパムを疑った方が良いと思います。
そこで確認です。

① 現在のテンプレートをご利用頂く前に、別のテンプレートを利用していた時期があったかどうか YES/ NO

② ①でYESの場合、テンプレートに横置きカレンダーが付いていた、あるいは任意でカレンダーを利用していたかどうか YES/ NO

③ Noの場合も同様に、過去にカレンダーを設置したことがあったかどうか(現在は見当たりません) YES/ NO

=======

Search consoleの方はご確認頂きまして、一気に増えているものであればスパム投下を疑っても良いと思います。
過去には中華系のサイトの検索クエリによる「サイト内検索スパム」なんかがあったもんですから、検索結果については noindex, nofollow を指定しています。
アーカイブについてはクロール・インデックス共に制御をしていません。
かめ太郎さんにとって特に問題が無いのであれば、<head>〜</head>内の

<!--date_area-->
<meta name="robots" content="noindex, follow">
<title><%now_year>年<%now_month>月の記事 - <%current_page_num>ページ目<%cno> - <%blog_name></title>
<link rel="canonical" href="<%url>blog-date-<%now_year><%now_month>.html">
<!--/date_area-->

太字部分を追加しても良いかもしれません。
それかこのパターンだと noindex, nofollow の方が良いかもしれない。
で、FC2に問い合わせてもこういった問題にFC2は対処しません。
それが公式テンプレであってもです。
まずは質問へのご回答をお待ちします。
よろしくお願いします。

かめ太郎
2017/03/30 (Thu) 06:15

No title

ご連絡ありがとうございます。
スパムの可能性が高いとはびっくりしてしまいました。教えていただきありがとうございます。

質問された内容を回答しますと、
① 現在のテンプレートをご利用頂く前に、別のテンプレートを利用していた時期があったかどうか YES/ NO
→YES

② ①でYESの場合、テンプレートに横置きカレンダーが付いていた、あるいは任意でカレンダーを利用していたかどうか YES/ NO
→2016年3月~7月 公式テンプレート「basic_white」 横置きカレンダーなし。任意のカレンダーはどうだったか記憶があやふやです。
→7月下旬以降 promise-me サイドメニューでカレンダーを利用

補足
ブログ開設の2016年3月~7月下旬までは公式テンプレートを利用していましたが、記事の数はテスト記事が2、3くらいの状態でした。7月下旬からは「Promise-me」を使わせて頂き、本格的に利用していました。
インデックス結果のグラフを見ると、8月から急激に増加しているためpromise-meの時期だと思いますが、念のためそれ以前の情報も記載しました。
〇log-imgs-102.fc2.com/k/a/m/kametarobochibochi/2017-03-30_05h37_46.png
(bを〇に変えています)


③ Noの場合も同様に、過去にカレンダーを設置したことがあったかどうか(現在は見当たりません) YES/ NO
②の回答の通りです。


教えて頂いたnoindex, nofollowについて調べているところですが、nofollowで止めてしまおうかと思っています。毎度毎度お世話になります゜(´□`。)

Akira
2017/03/30 (Thu) 06:51

To かめ太郎さん

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

これね、FC2のカレンダーというのは無限に繰ることができるんですよ。
何故「横置き」と訪ねたかと言うと、通常の表カレンダーは更新日がわかりやすくなってるのと、基本的にはサイドメニュー内の設置なんですよね。
ところが横置きというのはテンプレートソース内にhtmlが書かれていて、しかもhtmlぜんたいの前の方に書いてあるんです。
botはhtmlの前方をより重要視するようになっているので横置きはおすすめしません。

私も公式プラグインのカレンダーを利用していますが、前月・後月のリンクは rel=nofollow を指定しています。
でもこれ、私がソース書いてるわけじゃなくて私は公式プラグインをCSSで整えてるだけなんですね。
なのでみなさんの場合、カレンダーのhtmlをカスタマイズされていなければ無限状態になってるんです。
つまり第三者が意図的にでも意図しなくても、存在しない月までクリックを繰り返してしまうと今回のようにインデックスされてしまう可能性は十分あるんです。
私、自分だけちゃっかり対策して申し訳ない感じ ( ̄∀ ̄;)
でも公式プラグインなもので、基本的にはテンプレートにしろプラグインにしろ、自分以外のソース内容には触れないようにしてるんです。
トラブルの元になるし (´・ω・`)

で、かめ太郎さんのインデックスがどうなってるかというと、404 not found です。
これが200だとアカンのですよ。
404なのでセーフというか、Search consoleでせっせと一つづつ削除依頼を出す必要性は薄いかな、と思います。
あと、アーカイブのインデックスは個人的には必要無いと思います。
だけどもかめ太郎さんのようにnoindexを避けたい方が多いもんですから、私としては最初からnoindexというのは控えてます。
でも要らんと思う(笑)
どこかで誰かが窓口を作ることがまず無いですよね。アーカイブは。
それよりbotがどこまでもどこまでもカレンダーリンクを追いかけてしまう方が問題 ('ω')
そこはお任せしますが、既にこういった事態になっていますので公式カレンダーのhtmlにはnofollow追加をしておくと良いと思います。
あと考えられるのは意図的なクエリ操作ですね。
要するにスパムです。
404なので追求しようがないですけどねぇ (´・ω・`)

カレンダーについては記事を書こうと思いますー (´・ω・`)

Akira
2017/03/30 (Thu) 07:09

To かめ太郎さん

ごめんなさい。
聞こうと思って忘れた。
インデックスが始まった当時って、スマホ版はどうされてました?
ちょっと気になるもので。
設定されていて、もし公式のものであるならば名称も差し支えなければ教えてください。
共有ならすみません、スルーで(笑)
よろしくお願いします。

追記
あまりにも数が多いのでスパムを疑いましたが、FC2ブログのカレンダーで3000記事インデックスとか割とザラだって気づきました ( ̄∀ ̄;)

かめ太郎
2017/03/30 (Thu) 12:09

回答ありがとうございます。
毎回私が理解できる様に書いてくださるのでよーくわかりました。
akiraさんがプラグインのソースに触れないのは至極もっともだと思います。

はじめに,お聞きになられたスマホ版についてですが,大量インデックスが始まった当時は,非表示設定にしていました。


今回の原因としては,botが無限にカレンダーを辿っていったか,スパムか。

今は404ですが、前は誘導されていたのか今となっては不明ですし,スパムはなかったとしてもなぜ私のブログだけひたすら追いかけているのか謎ですが、、
ここまでわかっただけで充分です。助かりました。
この1ヶ月ずっともやもやしていたもので,本当にありがとうございます。

また,先の私の回答のせいでakiraさんを誤解させてしましました。
私もアーカイブのインデックスは不要と思いますのでnoindexも追加します。

最後にお聞きしたいのですが,中身のないインデックスがこれだけあると,Googleの評価に影響を与える可能性はあるとお考えでしょうか?

vanillaice (Akira)
Akira
2017/03/30 (Thu) 12:50

To かめ太郎さん

スマホ版の件ですが、Googleの有名人というかエンジニアチーフ(スパム対策チーム責任者)にマット・カッツさんという方がいらっしゃるんだけれど。
「元」Googleの顔ですかね。退職されて現在は米国政府機関に在籍しているようなので。
その彼が何かのイベントだかなんだかで話してたのをYoutubeで見た覚えがあって。
「無限スクロールはカレンダーと同じで延々とリンクを辿って〜云々〜正しくやらないと空インデックスが〜云々」
って聞いた記憶があるんですよね。
でも定かじゃないんです。おぼろにしか覚えていない(笑)
検索してみたけれどヒットしないので勘違い… ではないと思うんだけれど。
自分の記憶に自信がない(笑)
でも「カレンダーが厄介」みたいなことは絶対耳にしたはずなんですよね。
で、FC2ブログのスマホ版デフォルトって無限スクロール風じゃないですか(笑)
それで記憶を辿ろうとした ^^;
すみません。変なこと聞いちゃって ^^;

> Googleの評価に影響を与える可能性はあるとお考えでしょうか

無いと思います。
これもカッツ氏の意見で、こちらははっきり覚えてます。
「404 not foundなんていくらでもあるんだし、404が大量にあるからといってサイト評価を下げたりはしない
寧ろ『ページ自体がありません』と伝わることが大事。
下手に削除対策を打ったり、リダイレクトで代替ページを設けたりはしないほうが良い」
って言ってた (´・ω・`)
これは自信ある(笑)
要するに閲覧者にステイタスがどうなっていて、現実(現状のページ)がどうなのかを伝えるほうが大事、ってことだと思います。
404ステイタス、ということで、かめ太郎さんが今すぐ何かしなければいけない対策は無いと思います。
自然と消滅していくでしょうし。
カレンダーにrel="nofollow"を追加して今後の対策とする、ということで締めて良いんじゃないでしょうか。
心配でしたら他の方にお尋ねになるのもアリですよ。
Q&Aサイトとか。
その上でかめ太郎さんが「自身の選択」とされるのが一番かと思います。

私のアンサーとしては
サイト評価に影響は無い
ということで。

とりあえず、ご心労だったかと思います(笑)
お疲れ様です :)

かめ太郎
2017/03/30 (Thu) 13:46

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

なるほど、スマホ版デフォルトを使ってると同じようになるかもしれないのですね(笑)


Google評価の件については、教えて頂いた内容に納得していますし、akiraさんのご意見をお聞きしたかっただけですので、これ以上の対処については、考えていません^_^

ありがとうございましたm(._.)m

vanillaice (Akira)
Akira
2017/03/30 (Thu) 22:55

To かめ太郎さん

こちらこそ勉強させて頂きました。
ありがとうございます。
お疲れ様でした :)

Akira
2017/04/11 (Tue) 14:54

To Swollenヘッダー画像の件 内緒さん(移動先)

> ヘッダー画像を変更したい件〜

記事の中ほどに「ヘッダー画像変更」という見だしがありますので、そちらをご参照ください。
その他のカスタマイズされる際には
注)
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂くことでガイダンスがでてきます。
よろしくお願いします。

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

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/04/12 (Wed) 19:15

To Swollenヘッダー画像の件 内緒さん②

ご報告ありがとうございます。
はい。またご不明な点があればお気軽にどうぞ。
作業お疲れ様でした :)

vanillaice (Akira)
Akira
2017/04/13 (Thu) 14:20

To Swollenフォント変更の件 内緒さん(移動先)

> blogを普通のMSゴシックかMS Pゴシックで黒字にしたい〜

まず注意点と、現在までの作業にあたっての疑問点の答えです。

MacにはMSゴシックやMS Pゴシックはバンドルされていません。
なのでWindowsユーザーとMacユーザーとではフォントが大きく変わることになります。

WindowsユーザーでMSゴシックを好ましいと思う方はかなり少数派だと思います。
本当に変更して良いのかを作業前にもう一度お考えください。


MSゴシック系を選択される場合には、プロポーショナル(MS Pゴシック)にするのか等幅(MSゴシック)にするのかをご自身でお決めください。
欧文を多く扱う場合にはプロポーショナルをおすすめします。

--------

> font-familyを変えてみたりしましたが〜

現状では何も変更されていないように思います。

> Chromeの表示の設定の問題かと確認しましたが、こちらは「MSゴシック」で 表示するになっています。 しかし、明朝体で見えます〜

テンプレートでの指定(ユーザースタイルシート)が最優先です。
ブラウザでのフォント指定はテンプレートにフォント種の指定が無い場合や指定フォントがPC内に存在しない場合に適用されます。

=======

内緒さんのOSはWindows8.1ということですので、今目にしているフォントは「游ゴシック体」です。
Swollenのデフォルトでは

欧文 = 3種
和文 = 2種

のフォントが指定してあります。
その振り分けをどうするかをまずお考えください。
全てをMSゴシックにするのか、それとも欧文はそのまま残すのか。
とりあえず欧文含むという前提での作業説明です。
指定フォントは仮に「MS Pゴシック」とします。

●ブログタイトルフォントなど
デフォルトはPrataです。
こちらも変更されるのであれば
Ctrl+F(Windows)/ Command+F(Mac)キー検索

Prata

数カ所あります。

MS Pゴシック

に変更。
日本語フォントが残っていますが、内緒さんのブログタイトルは英単語のみですのでそのまま残してOKです。

● 基本フォント
検索

Open Sans

こちらはたくさんあります。
全てを

MS Pゴシック

に変更。

● ナビゲーションなど
検索

Montserrat



MS Pゴシック

に変更。


ともかく全てのフォント指定を変更します。
MacにはMS Pゴシックはありませんが、Microsoft officeの利用など任意でMS Pゴシックをインストールしている方もいらっしゃいますので、そういった方々はMacでもMS Pゴシック表示になります。
任意インストールをしていない方は游ゴシック体での表示です。

黒字にするには
(完全白背景に完全黒文字もあまり好ましくありませんので自己責任でお願いします)
検索

/* 注)テキスト基本色

ここを
color: black;

に変更してください。
よろしくお願いします。

-
2017/04/13 (Thu) 14:47

管理人のみ閲覧できます

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

-
2018/11/22 (Thu) 22:09

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/22 (Thu) 22:47

To Swollenスマホ下部広告について 内緒さん

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

はい。おっしゃる通りスマホの下部に固定されている広告は有料アカウントに切り替えない限り表示を避けることはできません。それはどのテンプレートでも同じで、仮に広告が表示されなかったりなにかしらの要素で広告が隠れてしまうと規約違反にあたりますのでアカウント抹消の危険もあります。

広告掲載については各ブラウザのポリシーがまちまちですから、ブラウザがデフォルトでトラッキング(情報追尾)系広告を表示させないなどの処理を行うことがあります。
このあたりはブラウザによってまちまちです。
Chromeは比較的厳しいので、Chromeがデフォルトブラウザに指定されているAndroidでは表示されないことも多いようですね。

-
2019/01/22 (Tue) 14:40

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/01/22 (Tue) 16:22

To Swollen投稿時間の件 内緒さん

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

> 投稿時間も出る様にしたい〜

</time>
で検索するとhtml内に2箇所あります。2つ目が対象です。
この直前(上の行)の最終、つまり <%topentry_day> の後ろに

<%topentry_hour>:<%topentry_minute>:<%topentry_second>

を追加してください(コピペでどうぞ)
ペーストする前に <%topentry_day> の後ろに半角スペースを一つ入れておくと良いと思います。というか入れないと日にちとくっついてしまいます。全角スペースと間違えないよう注意してください。
また、コピーすると末尾に余分なスペースがくっついてきますのでペーストしたら削除してくださいね。それかコピー時に末尾に気をつけてスペースを拾わないようにするか。
よろしくお願いします。

-----
トップページの概要文のフォントを大きくされていますのでテキスト下が見切れています。
.element-desc {
で検索すると2箇所ありますので、最初の

.element-desc {
margin: 15px 0;
max-height: 6.3rem;
overflow: hidden;
}



.element-desc {
margin: 15px 0;
overflow: hidden;
max-height: calc(1.7rem * 1.5 * 2);
}

に書き換え。元有った max-height: 6.3rem; は忘れずに削除。
最後の 2 は表示したい行数です。3行にするならば 3 に変更。

2つ目はスマホ表示の指定なので触らない方が良いと思います。
念の為ブラウザ幅を狭くして表示の状態を確認してください。

-
2019/01/23 (Wed) 03:38

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/01/23 (Wed) 14:15

To Swollen投稿時間の件 内緒さん(完了のご報告)

ご報告ありがとうございます。
お疲れ様でした :)

-
2019/07/03 (Wed) 00:25

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/03 (Wed) 01:49

To コメント非表示の件 内緒さん

そうなんです。現在FC2ブログのコメントは
① 受け付ける
② 受け付けない(既存コメント含め非表示)
③ 受け付けない(既存コメント表示)
の3種が選べます。そして③は新しく実装された機能です。

参考記事: FC2ブログ【コメントを受け付けない】設定の選択肢が増えました
https://vanillaice000.blog.fc2.com/blog-entry-635.html

で、お知らせ頂いた方は設定が
・受け付けない(既存コメント表示) --- つまり新規実装の③のパターン
・非公開コメントを非表示
この組み合わせだとそうなります。受信コメント欄にコメントは表示されていませんが、実際には非公開コメントが存在していますので「(見えているコメントは) 0 comment」という表示です。

あと、③を選ぶとコメント投稿用ブロック(html要素)と受信コメント一覧ブロックの双方がもろとも非表示になるんですが、③だとコメント投稿のブロックではなくformだけを非表示にするため「leave a comment」「post a comment」などの見出しが残ってしまうんですよね (´・ω・`)
なので受信コメント一覧とコメント投稿は同じコンテナ内に入れた方が良いんだろうなぁ、と思います。次回作からはそうしようかと。

-
2019/07/03 (Wed) 14:31

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/03 (Wed) 18:45

To テンプレ制作の件 内緒さん

こんにちは。

そうですね。製作者サイドは常にジレンマがあると思います(笑)
どこで折り合いをつけるかですよねぇ ( ̄∀ ̄;)

テンプレートの仕様、FC2のシステム上の仕様、そして個人設定、これらが絡むと先回お話したような、ちょっと見ると「???」という状態を避けられなくなったり。
だからといってこちらが「xxxの設定は選ばないでください」とは言えませんしね。
個人的には「レスポンシブ設定(スマホ非表示)」と「OGP設定」以外は指図できないと思っています。この2つにしても、OGPならソーシャルに絡んでいるわけだから、ご本人がNOと言えばそれはやはりNOですよね。レスポンシブ設定も同じです。

-----
指摘を嫌がる人は多いですね。それが如何に正当であっても。
私は自分のテンプレートを使ってくださる方に明らかな不具合(終了タグ欠損によるカラム落ちなど)が発生しており、それに気づいているとしてもお伝えしません。意地悪なようですが、必要ならば本人が自主的に訪ねて来るのが一番だと思うから ^^;
こちらがあれこれ言うと嫌がる人が多いですし、もちろんその方はすごく良い方で「ありがとう」が返ってくる可能性もありますが、それは事前にはわからないですよね。
なのでトラブルを避ける意味で指摘はしないようにしています。
あと私が誰のブログにも訪問しない(実際は閲覧することは有りますがコメントは残さないという意味)のは、やっぱり良い方ほど気を使ってしまうんですね。
他の方のテンプレートに変更したくとも、私(Akira)が見ているのではないか… と思ったら躊躇したり断念してしまうこともあるだろうな、と。

個人的に「あの人が私のから他の人のに切り替えた…」「DL数が少ない…」といったことが気になりだしたら辞め時だと思っています。性格的にほぼそれは無いんですが(笑)
とはいえ自分のことであっても「絶対」は存在しないので、他の方のブログは極力訪問しませんし、DL数は確認すらしていない(笑)

kuneko123
2019/09/06 (Fri) 08:59

ヘッダー画像

fc2ブログ初心者で何も分からない状況す。

ヘッダー画像の変更の操作が分かりません。
スタイリスト編集からheaderまでは見つかったのですが、どの部分を削除してファイル画像を入力して良いのか教えてください。
宜しくお願いします。

vanillaice (Akira)
Akira
2019/09/06 (Fri) 14:18

To kuneko123さん

こんにちは。

> fc2ブログ初心者で何も分からない〜

初心者の方は
・記事をちゃんと読むこと
・指南が有る場合はそれに従うこと
を心がけるようにして頂くと良いですね。
今回の件も記事内に既に書いてあります。
カスタマイズで大事なのは「どこのwhere」「どれを・何をwhat」「どのように・どうするhow」です。今回の場合は

どこの --- Ctrl+Fキー検索「注)ヘッダー下左側ボックス背景」で出てくる部位の
どれを・何を --- URL(今回の場合は https://blog-imgs-100.fc2.com/v/a/n/vanillaice000/7exe0w0bcdk-andrew-branchth.jpg ) を
どうする --- 差し替える

です。URLとはhttps:(あるいはhttp:)から始まって .xxx の拡張子までの文字列を指します。

---
会話で言う「ヘッダー」は「ブログタイトルが書いてあったり画像が入れてある部位」で間違いではありませんが、html用語の<header> というのは「見出しやリンクなど記事へのナビゲーションヘルプ」なのでhtmlソース内に1箇所だけとは限りません。本テンプレートの場合もheader要素はたくさんありますので、「header」を目印にしてしまうと対象部位を探せません。そのためのカスタマイズ指南でありガイダンスです。

よろしくお願いします。

kuneko123
2019/09/06 (Fri) 16:20

ありがとうございます

初心者で全く右も左も分から無い状態で
基本的な操作のご指導ありがとうございます。

はじめてヘッダー画像を変更しました。
これだけ詳しく書いて頂きやっと分かる状況です。
今まで呑気なブログから移行して
何事もやった事の無い事ばかりで
一つの道しるべを見つけた思いです。

助けて頂き本当にありがとうございました。

vanillaice (Akira)
Akira
2019/09/06 (Fri) 21:29

To kuneko123さん(重要)

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

最初は慣れないと思いますが今後少しづつ理解できてくると思います。
機会と尋ねる勇気があれば知識は広がりますので、また何かありましたらお気軽にどうぞ。
お疲れ様でした :)

----- 追記
今気づいたんですが、head要素内
<link rel="canonical" href="<%url>">
の直下に

f

という文字が含まれており、これは不正な文字ですからhtml構造が壊れています。
SEOにも影響します(head要素のクリティカルエラー)ので削除してくださいね。

kuneko123
2019/09/09 (Mon) 12:25

To Akiraさん

スタイルシート内の検索を掛けた時にfが入りました。
f気になっていたのですが
何処にこのfが存在しているのか分からないままでした。

検索を掛けたら場所分かり変更しました。

Akiraさん、ブログの確認ありがとうございました。
また色々と教えてくださいm(__)m



vanillaice (Akira)
Akira
2019/09/09 (Mon) 17:48

To kuneko123さん(完了のご報告)

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

修正確認できました。お疲れ様でした :)

Chicaco
2021/06/25 (Fri) 18:14

全体幅の調整について質問です(navi breakpoint)

Akiraさん

はじめまして。以前からテンプレートを愛用、また記事を拝読し勉強させていただき、ありがとうございます。
今回、こちらのテンプレートをダウンロードさせていただきカスタマイズをしているのですが、グローバルナビゲーション幅のカスタマイズが上手くゆかず相談に参りました。
navi breakpoint 1/2 の数字を大きくしましたが、他にも数字を書き換えるべき場所がありますか?
navi breakpoint で、検索したところ、一か所しか見つけられません。
横幅を完全に狭めるとハンバーガーボタンが正常に動作してくれますが、中途半端な幅だと、ハンバーガーボタンを開いても何も表示されない状態です。
よろしくお願いいたします。

Chicaco

vanillaice (Akira)
vanillaice (Akira)
2021/06/27 (Sun) 01:19

To Chicacoさん

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

767px
で検索するとhtml内に1箇所ありますので、その数字(767)もスタイルシートに記したものと同じ数値に変更してください。ガイダンスが不足していてごめんなさいね。お手数おかけします。
よろしくお願いします。

Chicaco
2021/06/27 (Sun) 11:34

To Akiraさん

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

無事に解決することが出来たと思います。また、ひとつ勉強になりました。勇気を出して質問してみて良かったです。
新しいテンプレートのリリース予定があるということで、そちらもワクワク楽しみです。
今回はお世話になり、ありがとうございます。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)