attention admin about comments trackbacks you may also like

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

2017年02月25日
テンプレート
39
HTML5 CSS3 RWD
Swollenテンプレート

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

最終更新 2019.11.3
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
名称 Swollen
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大820px
サイド --- 270px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり (v3.3.1)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 画像ドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
1カラム 1カラム 1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

【重要】テンプレートの変更点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が固定されないバグが解消されました

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

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

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

サンプル

Samples

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

カスタマイズのコツ

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

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

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

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

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

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

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

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

Font Awesomeについて

About Font Awesome

リリース直後は Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。

FAがどうしても必要、という方はhtml内に

注)Font Awesome(JS)必要な方この一行削除

という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。

CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome

JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。

ヘッダー画像変更

How to change your header image

この部位は トップページの最初の1ページ目だけ で表示されます。
くれぐれも この部位へブログタイトルリンクを移動されませんよう お願いします。2ページ目以降や個別記事(パーマリンク)でブログタイトルが出てこなくなってしまいますのでご注意ください。
ブログタイトルリンクの複製・画像変更・テキスト内容変更は可能です。

● 画像変更

注)ヘッダー下左側ボックス背景

CSSソース内に1箇所ありますので、上記を目印にURLを差し替えてください。
縦横比は不問ですが、解像度を考えて横 1000px 以上が妥当だと思います。
事前に画像容量の削減をお願いします。

● テキスト内容変更

<p id="welcome">Welcome to my blog</p>

こちらが大きめフォントの方。

<p id="proverb">The only way to have a friend is to be one.</p>

こちらが小さめフォントの方です。
意図的な改行は文末に <br> と記してください。

ヘッダー右側のプロフィール写真設定

How to change your profile pic

htmlソース該当箇所は

url(<%image>)

です。デフォルトでは 環境設定 > プロフィール で設定した写真が表示されます。
この部分が No image と表示される方は、プロフィール画面での個人設定をお願いします。
プロフィール画像から別の画像へ変更されます方は

url(ここに画像アドレス)

上記の通り修正してください。

ナビゲーション内「About」について

Important thing to be careful when adding links to navigation

こちらは予備リンクです。
誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください。
不要であれば削除。

該当部位検索

注)予備リンク

カスタマイズ

<li><a href="ここにリンクアドレス">テキスト</a>

デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。

ドミナントカラー

Dominant colors

以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51

white トップページグリッド背景色
rgb(250,250,250) 全体背景色, 個別記事背景色
rgb(245,245,245) サイドメニュー背景色
rgb(150,150,150) 基本リンク色
rgb(197,159,123) 記事内リンク色, ページ送り背景色 など

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

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

Cautions before asking for something.

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

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

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

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

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

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

コメント(39)

There are no comments yet.

-

2017/02/26 (Sun) 01:51

管理人のみ閲覧できます

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

相槌

2017/02/26 (Sun) 12:06

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

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

Akira

2017/02/26 (Sun) 15:54

To コメントの件 内緒さん

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

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

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{ ”の箇所を弄ったら、うまくいきました!

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

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時位からスマホでも表示されるようになりました。

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

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


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週間近く経っても一度も連絡がありません。


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

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の評価に影響を与える可能性はあるとお考えでしょうか?

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

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

管理人のみ閲覧できます

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

Akira

2017/04/12 (Wed) 19:15

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

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

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

管理人のみ閲覧できます

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

Akira

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

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

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

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

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

-

2019/01/22 (Tue) 14:40

管理人のみ閲覧できます

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

Akira

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

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

管理人のみ閲覧できます

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

Akira

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

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

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

-

2019/07/03 (Wed) 00:25

管理人のみ閲覧できます

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

Akira

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

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

管理人のみ閲覧できます

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

Akira

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

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

こんにちは。

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

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

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

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

kuneko123

2019/09/06 (Fri) 08:59

ヘッダー画像

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

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

Akira

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

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

ありがとうございます

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

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

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

Akira

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

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



Akira

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

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

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

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

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧