attention admin about comments trackbacks you may also like

Promise-Me - FC2ブログテンプレート

2016年04月24日
テンプレート
122
HTML5 CSS3 RWD
Promise-Meテンプレート

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

最終更新 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
名称 Promise-Me
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大910px
サイド --- 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 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右(デバイス幅依存) サイドメニュー --- 下
更新履歴 2019.11.7
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
更新履歴 2019.8.2
  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> のすぐ下にある </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 .5em 0 .3em;
}
②について

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

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

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

上記のような形になっていれば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.8
  • lazyloadingの導入(グリッドページ及びカルーセルスライダー)
  • lazyloading導入に伴うトップページサムネイルのアニメーション調整
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマーク, Pinterestのシェアアイコンを追加
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • コメント投稿フォームを広くしました

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

更新履歴 2018.3.5

大規模なメンテナンスを行いました。

  • 画像の遅延読み込みを導入(グリッド系ページと個別記事の一部)
  • リセットCSSを最小限にして圧縮
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示
  • floatレイアウトからflexレイアウトに変更
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)にアップグレード
  • その他調整多数
更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2017.1.13

・RSS新着サムネイルを削除しました

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.9.27

モバイル版誘導ボタンのURL記載ミスを訂正

ミスが多いですね ホントにね
申し訳ないことであります (*_ _)
カスタマイズ済みで再DLが困難な方は以下の手順で修正をお願いします
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<%server_url>?sp

上記緑の部分を削除して以下の通り

<%url>?sp

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

更新履歴 2016.9.19

スマホでのナビゲーション展開ハンバーガーにミスがありました
申し訳ないですー
今回の上書き前はクリック時のボタン形状がこんななってます ↓

正しいのはコチラ ↓

ごめんなさい… ( ̄∀ ̄;)
公式は上書き修正を済ませました
カスタマイズ済みで再DLが困難な方はお手数ですが以下の手順でハンバーガーボタンの修正をお願いします

Ctrl+F(Windows)/ Command+F(Mac) キー検索

.open-navi span:nth-of-type(3) {

CSSソース内に1箇所あります
この項目の
transform: translateY(8px) rotate(45deg);
に一部追加で以下の通り

transform: translateY(-8px) rotate(45deg);

マイナスを付け忘れておりました (/_;)
ご面倒おけけします よろしくお願い致します

更新履歴 2016.9.9

リストマーカーの位置を調整しました

参考記事
list-item横の隙間について

テンプレ内カレンダーの月表示 SEPTEMBER のRだけが下に繰り越す件を修正しました
申し訳ございません

本記事内容は2019年1月8日メンテナンス以降のバージョンが対象です。

未だにiPhone6S未購入のあきらでございま (´・ω・`)
ショップ行くのめんどっちい リリースされたら自動で送ってほしい ←

ぷろみす みー
グリッドレイアウト。承認されました。ありがとうございます。

サンプル

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のファイルと干渉しないはずです。

注意

The important thing!

本テンプレートは以下の記事内容に該当しています(トップページ最初の1ページ目の「ヘッダー画像」)
リンク先をよくお読み頂いた上で利用のご検討をお願いします。

FC2ブログ独自変数 index_area はログオフ + モバイル環境では効かない - FC2ブログのあれこれ

結論。 効かない でいいです。もう(笑) FC2ブログの独自変数に <!--index_area--> <!--/index_area--> というのがあります。 インデックスエリア というのは トップページ種に分類されるページの一番最初のページのみ を指します。 ...

全体幅調整の仕方

How to increase or decrease width of container

1300 で検索されますとCSS内に2箇所ヒットします。
2箇所共同数値に置き換えてください。

ヘッダー画像変更

How to change your header image

注)ヘッダー画像

を目印に画像のURLを差し替えてください。

縦横比不問とはいえ横に長いですから横長画像で。横1200px以上が望ましいです。
サイズが大きいので事前に容量は削減しておいてください。ヘッダー画像の容量が1MBあってページ表示がめちゃくちゃ遅い... なんてことにならないよう注意です。

デフォルト画像 (縮尺掲載/ 1500✕937/ 50KB/ Public domain)

トップページ円形日付背景色について

About monthly background color

月毎に色が変わるようになっています。以下が各月の対応色です。色を変更する場合は月単位になります。また、リンク色もこの背景色に倣い、同じく月単位。変更は月名の下にある数字をコピーして変更対象箇所を特定してください。各月 2箇所 づつ変更します。

January180,122,90
February182,158,200
March0,115,168
April201,91,92
May107,127,187
June243,152,29
July223,187,194
August227,136,78
September83,108,170
October157,181,209
November178,89,104
December147,170,0

削除可能な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はサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(122)

There are no comments yet.

きろろ

2016/04/26 (Tue) 16:17

管理人コメントの画像について

こんにちは<(_ _)>

プロフで使用している画像を管理人コメントで使いたいのですが、
前回のソースの書き方でいいのでしょうか?

それにしても、急に暑くなったと思ったら
もう4月も終わりなんですねw

-

2016/04/27 (Wed) 05:46

管理人のみ閲覧できます

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

Akira

2016/04/28 (Thu) 22:35

To きろろさん

お返事遅くなりましたー!

はい。Alternativeテンプレと同じ要領でOKです。
私また書いてなかったですね。ごめんなさいね ^^;

Akira

2016/04/28 (Thu) 22:38

To Promise-Meドロワーサイドバーの件さん

ありがとうございます
今回はナビゲーションを固定にしていますので、サイドメニューはドロワーにしていません。
申し訳無いですー。
ちょっとこの辺り好き嫌いありますよね (´・ω・`)
アフィリエイトされている方から好まれないドロワー(笑)

きろろ

2016/05/03 (Tue) 00:54

テンプレート

お借りしました<(_ _)>

新着サムネイルは、鍵付き表示ができないので、
ソースは削除したほうがいいですか?
あってもなくてもあまり代わらない気もするのですがw

Akira

2016/05/03 (Tue) 14:17

To きろろさん

ありがとうございます

削除しなくても構いませんが、<h4>の「What's New?」が出てしまいますね。
そして読み込みができないスクリプトというのはページ表示に負担をかけます。
なので削除するか、あるいはコメントで囲うか。

<!--
内容
-->

これのこと。
コメントにしておけばレンダリング時に無視されます (・ω・)

きろろ

2016/05/04 (Wed) 02:45

ありがとうございます。
でも、何もしなくてもWhat'Newは出ないんですけどねw
ページに負担がかかるのであれば、削除します。

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

Akira

2016/05/04 (Wed) 18:29

To きろろさん

フッター上に出ませんか (´・ω・`)
え。なんでやろ(笑)

読み込みできないものというのはなるべく無い方が良いですね。
なるべく(笑)

さといも

2016/05/07 (Sat) 12:19

初めまして

こちらのPromise-Meを使わせて頂きたいと思っておりますが、記事の(LATEST ARTICLE)上部にお知らせスペース(プラグイン的なものが設置できれば良いのですが、単に内容だけでも)を設ける事が出来ないでしょうか…

お忙しい所申し訳ありません。もし可能でしたら(HTMLの知識はありませんので分かりやすくご教示頂ければ幸いです。

Akira

2016/05/07 (Sat) 13:52

To さといもさん

ありがとうございます ( ゚Д゚)ノ

プラグイン的なもの、ということですので、プラグイン登録されるのが一番良いかと思います(笑)
管理画面左の「プラグインの設定」をクリック。
遷移先ページの上部タブ「公式プラグイン追加」をクリック。
そのページ内『拡張プラグイン』の項目に「フリーエリア」というのがありますので追加します。
追加する際には『プラグイン3』にしておくとLatestと同じ場所に追加されます。
続きまして再度画面左の「プラグインの設定」をクリック。
登録プラグインの一覧が出てきますので、フリーエリアの「詳細」をクリック。
すると下にテキストエリアが出現しますので、そこへ直接文字を打ち込んでください。
普通に文章を打つだけですが、改行したい文章末尾には
<br>
と入れます。

------

Latestの「上」という配置にはなりません。
横並びになります。
あるいはこういう方法もあります ↓(スクショ)

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/aw9rfaaf.jpg_zpsu4wkvepr.png

こちらはプラグイン登録ではなくテンプレートのhtmlソース内へ直接書き込みます。
前者の方法(プラグイン登録)はテンプレを変更されましても使うことができますが、
後者の場合にはテンプレ変更で無効化されます。
後者を選択されます時には改めてソース内容をお伝えしますね。
よろしくお願いします

さといも

2016/05/07 (Sat) 17:59

早速のご回答ありがとうございます。

まさに、この画像(インフォメーションの通りなのですが、私の説明不足ですみません。(;^_^A アセアセ・・・
位置は、1ページ目トップ画像の下、最新記事の上で、丁度Follow meボタンの左側へ出来れば個別記事表示
などでも常時表示しておきたいのですが、可能であれば…宜しくお願い致します。

waterlily

2016/05/08 (Sun) 05:21

アイキャッチ画像について

初めまして。
こちらの「Promise-Me」を使わせて頂きたいと思っておりますが
各記事のアイキャッチ画像(no-imageでコーヒーカップが表示される場所)を無くして
文章だけの記事(TOP画面上で)にする変更は可能でしょうか?

お忙しいところ大変恐縮ですが
可能であればやり方をお教え頂ければ幸いです。
よろしくお願い致します。

Akira

2016/05/08 (Sun) 15:21

To さといもさん

スクショのような恰好で良いんですね。
失礼致しました。

・トップページ、個別記事で表示する
・検索結果、コメント編集、全記事リストでは表示しない

という条件で良いでしょうか。
(条件によって記述箇所、記述内容、記述数が異なります)
手順数2です。
Ctrl+Fキー検索

<div id="grid-container" class="cf">

htmlソース内に一箇所あります。
この直下に以下を追加

<!-- お知らせ ここから -->
<!--not_titlelist_area--><!--not_edit_area--><!--not_search_area-->
<article class="main-body">
<h3 class="another-title"><span>Information</span></h3>
<div class="contents">
ここに内容を直接書きます<br>
ここはお知らせです<br>
ここはお知らせです<br>
</div>
</article>
<!--/not_search_area--><!--/not_edit_area--><!--/not_titlelist_area-->
<!-- お知らせ ここまで -->

続きまして検索

<!--permanent_area--><!-- 個別記事 -->

こちらもhtmlソース内に1箇所あります。
この直下に以下を追加。

<!-- お知らせ ここから -->
<article class="main-body">
<h3 class="another-title"><span>Information</span></h3>
<div class="contents">
ここに内容を直接書きます<br>
ここはお知らせです<br>
ここはお知らせです<br>
</div>
</article>
<!-- お知らせ ここまで -->

----

コンテンツ上にボックスを確保する、という簡単なものですので、
CSS整形の方はご自身の理想でお願い致します (*_ _)

Akira

2016/05/08 (Sun) 15:43

To waterlilyさん

こんにちは。

・隣同士の記事の高さが同じになる
・画像なし記事の場合にはタイトルの長さによって右側に円形の日付が被る

上記2点をご了承頂いた上でお願い致します。
Ctrl+Fキー検索

<div class="inner-image-parent">

こちらをまず目印にして頂きますと、こういった内容になってます ↓

<div class="inner-image-parent">
<a href="<%topentry_link>">
<div class="imgLiquidFill">
<!--body_img--><%topentry_image><!--/body_img-->
<!--body_img_none--><img src="http://blog-imgs-84.fc2.com/v/a/n/vanillaice000/998977_8f83l5u_l1.jpg" alt="No image"><!--/body_img_none-->
</div>
<!--body_img_none-->
<div class="no-image-mask">
<div class="no-image-text">No image</div>
</div><!--/body_img_none-->
</a>
</div>

(この箇所のすぐ下には<div class="context">がありますのでご確認ください。)
上記内容を以下の通り修正

<!--body_img-->
<div class="inner-image-parent">
<!--/body_img-->
<!--body_img-->
<a href="<%topentry_link>">
<div class="imgLiquidFill">
<%topentry_image>
</div>
</a>
<!--/body_img-->
<!--body_img-->
</div>
<!--/body_img-->

修正箇所をしっかり確認されまして、他の文字列を巻き込まないよう重々ご注意の上作業してください。
よろしくお願いします。

さといも

2016/05/08 (Sun) 20:21

To Akiraさん

無事に設置する事ができました。ありがとうございました。m(_ _)m
あと気になる点があるのですが、テスト的に、管理画面内からコメントへ返信
という形で、(管理人)の名前に◎で色を付けて返信投稿してみると名前部分が

管理人">
管理人
Re: 初めまして

となって…2016/05/08 (Sun) 18:55 | EDIT | 管理人さん">REPLY | の…
REPLY部分をクリックすると、コメント投稿TITLE欄に…To <span class=
と入りますが、私がどこかいじってしまったのでしょうか(汗

Akira

2016/05/08 (Sun) 22:31

To さといもさん

お手数おかけしております (*_ _)
端的に言うと、管理画面からの入力を想定していません。
テンプレート内受信コメント欄一覧のREPLYをクリックすると、タイトルに自動で返信先名が入るようにJSを組んでます。
コメントを「する方(管理人ではなく閲覧者・訪問者)」の使い勝手を優先しています。
そしてそれがFC2のJSと衝突します。

管理画面からのコメント返信を優先されます場合には手順に従って該当箇所の修正をお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object23

よろしくお願いします。

waterlily

2016/05/09 (Mon) 01:33

ご回答ありがとうございます。

無事、変更できました。
お手数お掛けいたしまして、また、
わがままな注文をお聞き下さり、ありがとうございました。
m(_ _)m

Akira

2016/05/09 (Mon) 01:44

To waterlilyさん

いえいえ。
できたようで良かったです。
お疲れ様でした

さといも

2016/05/09 (Mon) 21:30

To Akiraさん

そういう事だったんですね、何も知らず失礼致しました。このまま使わせていただきます。
お忙しい所、解りやすくご丁寧に説明いただきありがとうございました。m(_ _)m

Akira

2016/05/10 (Tue) 00:56

To さといもさん

申し訳ないですー (´・ω・`)
ご理解ご協力ありがとうございます (*_ _)

ukipon

2016/07/03 (Sun) 08:23

強めのドロップシャドウ

Promise-Meを利用させて頂いております。
画像表示に class="shadow-attachment" を追加しているのですが、もう少しシャドウを聞かせたいのですが、どのように修正すればできますでしょうか?

この記事のページの画像くらいシャドウを掛けたいのですが↓
デフォルト画像 (縮尺掲載/ 1500✕937/ 50KB/ Public domain)

お忙しいところ恐縮ですが、回答お待ちしています。

Akira

2016/07/03 (Sun) 10:56

To ukiponさん

ありがとうございます ( ノ゚Д゚)

ご指摘のものと同じで良いのであれば
Ctrl+Fキー検索(CSSソース内)

.shadow-attachment



box-shadow: 0 1px 4px rgba(0,0,0,.4);

赤字部分を修正して以下の通り。

box-shadow: 6px 6px 6px rgba(0,0,0,.2);

よろしくお願いします (o'д`o)ゝ

ukipon

2016/07/03 (Sun) 15:00

強めのドロップシャドウ

もう回答いただきびっくりです。
希望通りのシャドウになりました。

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

Akira

2016/07/03 (Sun) 18:24

To ukiponさん

できたようでよかったです。
作業お疲れ様です

かめ太郎

2016/08/29 (Mon) 09:26

No title

先月FC2フォーラムの方でping送信先について助けて頂きましたものです。その際ありがとうございました。

只今オーバーレイ広告について悩んでおり、お知恵をお借り出来ないかとコメント致しました。

小平のiPhoneで見ると画面下部にオーバーレイ広告が出て、フッダーに飛ぶボタンと干渉して非常に鬱陶しいことになっています。

ブログの設定では『スマートフォン版表示』は無効、『画像高速表示の設定』は利用しないにしています。
昨日忍者アドmaxの広告は削除したため、自分で載せた広告はありません。

よく分からないのは、家族のiPhoneやタブレットで見るとオーバーレイ広告が出ないのです。私のiPhoneでも時々出ません。

これはFC2側のバグが考えられますでしょうか?

Akira

2016/08/29 (Mon) 09:56

To かめ太郎さん

その節はどうもですー

> スマホフッター広告とbottomボタンの干渉

お使いのiPhoneのバージョンはいくつでしょうか。
完全に被ってますかね?
一応iPhone6を目安に広告と被らない位置に設定はしてあります。
iPhone5系だと6系より多少余裕があると思います(画面が大きくなるにつれ、広告も大きくなります)

現行のフッター広告はいくつか種類がありまして
・素早く上からスライドインしてくるもの
・のろのろと上からスライドインしてくるもの
・画面最下部に行くと上に位置を切り替えるもの
・テンプレートのフッターを上に押し上げて自身の場所を確保するもの(このタイプの場合はフッターと被りません)
・フッター上に完全に被さるもの

これだけ多種多様なんです。
ひとつひとつを見分けて振り分けるというのは至難の業というか、できない ( ̄∀ ̄;)
そしてまた仕様もコロコロと変わるんですよねぇ (´・ω・`)
困ったもんだ (´・ω・`)

画像高速表示を捨てることで削除される広告は
各個別記事下のテキスト広告のみです。
スマホ広告は対象外です。
かめ太郎さんが有料アカウントでないならば、スマホ広告を削除する方法はありません。
テンプレートソースで強制非表示にすると規約違反ですので、アカウント削除が待っています。

ページ内移動のボタンが現在の位置のままですと、のろのろスライドイン系広告が鬱陶しいですね。
ユーザーが広告に対して例えばスライドをストップさせるだとか、スライド速度を速くする、といったことは技術的には可能でも規約的に違反にあたります。
できることはページ内移動ボタンの表示位置の調整のみ。

ご家族のデバイスで広告が出ない時がある、というのは恐らくFC2のシステムが不安定だからです。
たまにありますよ (´・ω・`)
出るべき広告が出ないとき = 運営が広告表示に対し仕様を変更、または修正している
ことが多いです。
いずれにしろ有料会員以外は必ず広告が出るようになってます。
タブレットはスマホよりもさらに大きく、しかも解像度の狂ったボケボケの広告が出ます(笑)

ページ内移動ボタンの位置を全体的に上に上げる、という対処ぐらいしか有りませんが、
そうなると今度は画面中央付近に位置しますのでメインコンテンツの邪魔になるかもしれません。
特に個別記事に設けているカテゴリ間移動のページ送りとは完全にバッティング。
その辺りをお考えあわせ頂きまして、最終的な決断をお聞かせくださいね。

まとめ
・広告は不可侵ですので操作することはできない
・ページ内移動ボタンの位置を上に上げる = 広告被りは防げても視覚的に邪魔かもしれない
・我慢する ←

よろしくご検討をお願いします。

* かめ太郎さんがもし有料会員登録をされていて、現状のように広告が出ているのあれば、
「広告を表示する」という個人設定になっているかと思います。
有料会員はスマホフッター広告の表示有無を切り替えることができます。

かめ太郎

2016/08/29 (Mon) 10:48

こんなに丁寧に回答頂き恐縮です。良く分かりました。
てっきり自分のiPhoneだけ広告が出ていると思ってました。

自分の無知ぶりに驚いたのと、今まで読者の方にこんなに鬱陶しい思いをさせていたのかと思うと申し訳なくて申し訳なくて、、、
開設2ヶ月で教えて頂き助かりました。

今後の対応ですが、年間費払って有料会員になります!
悔しいi-238


それにしても、FC2さんには怒りを覚えます。無料版に固定広告を入れられるのは当然だと思いますが、オーバーレイを強制するなんてv-42




Akira

2016/08/29 (Mon) 10:52

To かめ太郎さん

悔しいねー。悔しい ( ̄∀ ̄;)
私も悔しいです(笑)

でも広告無しはやはり快適です。
年間3000円程度で済むのならアリだと思います。
Livedoorなんてお金払ってもスマホ広告外してもらえないんですよ。
その代わりパソコンでの広告表示は一切無いようですが。
FC2だってパソコンなんてほとんど広告無いですしね (´・ω・`)
今スマホアクセスが主流ですので、きったねー!Livedoorやり方きったねー!
みたいな((((笑)
FC2はかなり良心的な方だと思います ^^;

かめ太郎

2016/08/29 (Mon) 11:30

そうですね!
上をみたらムカつくので、Livedoorさんを見て気分を落ち着かせます(笑)

ありがとうございました。v-436

Akira

2016/08/29 (Mon) 17:13

To かめ太郎さん

Livedoorはなかなかあくどいですよ (´・ω・`)
FC2の人気ブロガーさんに直接メール送って引き抜きしてます(笑)
そうですね。
ムカついたらLivedoorを思い出す、ってことで(笑)
お疲れ様でした

けんた

2016/09/26 (Mon) 21:58

テンプレートの分け方について

スマホ版は別のテンプレートを使いたいのですが、PC用テンプレートをこちらのテンプレートにしてからスマホで開くと以前使っていたものではなく、こちらのテンプレートになってしまいました…PCはこちらで、スマホ版は別のテンプレートを使うことは可能でしょうか?

Akira

2016/09/26 (Mon) 22:34

To けんたさん

こんばんは。

> こちらのテンプレートにしてからスマホで開くと以前使っていたものではなく、こちらのテンプレートになってしまいました

私のPCテンプレが勝手にスマホテンプレ設定を変更してしまう、といったことはありませんので、ご自身のブログ個人設定をご確認ください。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object16

上記ページにある内容の逆を行えば「スマホ版表示」になります。
また、スマホから閲覧しても必ずスマホ版が表示されるとは限りません
FC2でスマホ版が存在しないページ(PC版のみ)を閲覧した後に自ブログへ移動するとPC版で表示されますし、その他スマホブラウザの仕様も絡みます。
どなたかのページで「PCビュー」を押した後そのまま自ブログへ、というパターンでもそうです。
いずれにしろ私のテンプレートが原因、というのはシステム上あり得ませんのでまずは個人設定の確認からご自分でお願い致します。
URLを頂いておりませんので私の方で検証が叶いません(スマホ版設定がどうなっているかはURLがあればすぐわかります)

けんた

2016/09/27 (Tue) 01:21

ご返信ありがとうございます

Akira 様

大変失礼いたしました。URLを載せさせていただきました。

fc2のスマホ用テンプレートは[ sp02_chic ] を使用しているのですが、スマホで開いた際に、[ Promise-Me ] のデザインで表示されてしまいます。

環境設定に関してはご指示をいただいた通りにしたのですがやはりPC、スマホとも[ Promise-Me ] のデザインでした。

PCは[ Promise-Me ] 、スマホは[ sp02_chic ]を使用することは可能でしょうか?

Akira

2016/09/27 (Tue) 02:07

To けんたさん

スマホ版は正しく設定されています。
上記に記した内容にお心当たりはありませんでしょうか。

・どなたかのブログ(あるいは自分のブログ)で「PC版で表示(あるいはそれに準ずる言葉」を押して、そのままご自分のブログに戻った。

・スマホブラウザで「PCサイトモード」を選択している。

・FC2の「リクエスト」など、PCページを開いた。

など。
これらはPCテンプレートが原因ではなく、FC2のリダイレクトの仕組みです。
一度ご自分のページ(スマホのPromise-me)から「mobile」に切り替えをしてください。

そしてこれらのシステムはけんたさんがどんな対策を講じようと避けることはできません。
スマホ版表示はそういうシステムですので、閲覧者が上記のような動きをした場合にはスマホ版を例え設定していてもPC版表示になります。
それはどのPCテンプレートを使用しても同じです。
スマホでレスポンシブ表示が困る、ということであればレスポンシブデザインを選ぶ意味はあまり無いと思います ^^;
よろしくお願いします。

Akira

2016/09/27 (Tue) 02:15

To けんたさん

もう一点。
申し訳ございません。
初期の私のミスがそのまま残っています。

<%server_url>?sp

という箇所が1つありますので、

<%url>?sp

へ書き換えをお願いします。
またはこのままお使い頂くのであれば公式から再DLしてください。
ここを修正されてから「mobile」を押してくださいね。
(ここで切り替わらないから悩んでおられたのかなー? 申し訳ないです(汗))
お手数おかけします。ごめんなさいね。

けんた

2016/09/27 (Tue) 18:50

書き換えを行なったところ、無事に解決いたしました!

ご丁寧なご回答誠にありがとうございます。

けんた

2016/09/27 (Tue) 20:08

再度の質問申し訳ありません

再度の質問申し訳ありません。

スマホで開いた際に、「スマートフォン版で表示」のボタンが、「HOME ABOUT INDEX ADMIN」のバーと被ってしまい隠れてしまうのですが対処法はありますでしょうか?

Akira

2016/09/27 (Tue) 22:22

To けんたさん

うーん。
レスポンシブデザインは「スマホでもPC版と同じものを使いたい」という方へ向けて製作をしています。
ですからスマホで同デザインをご利用頂く際の利便のみを考慮しています。
そういった製作理念上、固定ナビゲーションの仕様を「スマートフォン版で表示」のボタンのほうに合わせる(こちらを優先させる)、といったことはできません。

そこをご理解頂いた上での対策です。
CSSソース末尾に

#change_mobile {
position: relative;
z-index: 10000010;
}

追加
固定ナビゲーションよりも誘導バナーが上位設定( = 上に被さる)になりますので、
画面最上部に居るときはナビゲーションの操作は不能になります。
よろしくお願いします。

ひろ

2016/11/12 (Sat) 12:03

Promise-Me スマホでのナビゲーション展開について

はじめまして。
FC2でPromise-Meを利用させていただいております。

Promise-Meのスマホでの表示時のナビゲーションについての質問です。

FC2のサンプル画面で言った場合、画面最上部のナビゲーションの「ABOUT」にあたる
「マウスオーバーで下部にサブメニューが表示されるパターン」は複数設置できるのでしょうか?

例えばサンプル画面上の「ABOUT」に加え、「INDEX」もサブメニューが表示されるようにする
イメージとなります。

上記、PCではうまく表示できたのですが、スマホで見た場合に最初のメニューは表示されるのですが
2つ目以降のメニューについては、サブメニューが表示されません。

基本的な質問で大変恐縮なのですが、ご教授いただけると幸いです。
よろしくお願い致します。



Akira

2016/11/12 (Sat) 12:49

To ひろさん

ありがとうございます (o'ω')ノ

> ドロップダウンメニューを増やしたい件

上記の解釈で合ってますでしょうか。
で、デフォルトソース内にあるドロップダウンの部分を複製しただけではできません。
既にカスタマイズをされており、それに対する修正についてはブログアドレスをお伝え頂けると助かります。
でないと私が推測だけで作業しなければいけなくなります。
次回からはご配慮をお願い致します。

=====
ここから推測

恐らく

<li class="marking">
<label for="open-box">ABOUT  <span class="fa fa-angle-down"></span></label><input type="checkbox" id="open-box" class="on-off">
<ul>
<!-- 注)リンク先の追加はここに 同じclass名(class="submenu-anchor")を必ずつける -->
<li><a href="#" class="submenu-anchor">About Me</a>
<li><a href="#l" class="submenu-anchor">Contact</a>
<!-- 注)リンク先ここまで -->
</ul>

上記内容を複製されたのだと思いますが、これではデフォルトのドロップダウンが開閉してしまうと思います
それはパソコンでも同じはずです。
マウスオーバーの時は表示されますけれど、ナビゲーションが折りたたまれた際にはマウスオーバーではなくクリック開閉に切り替わります。
(パソコンでも画面幅768pxを下回ると折りたたみに変更になります)
現状の問題は<label>と<input>の関連付けが正しく行われていないために起こります。
私の推測が正しければ、の話しです。

修正
・複製したものの中にある

open-box

という文字列を

open-box2

に変更してください。
label for="open-box2"
id="open-box2"

この2箇所です。
複製が2つ以上であるならば、全て修正です。
デフォルトは open-box
二つ目(複製一つ目)は open-box2
三つ目(複製二つ目)は open-box3
といった具合です。
そして各々2箇所あります

これで動作するはずですが、ご質問内容と異なるようでしたらお知らせください。
よろしくお願いします。

ひろ

2016/11/14 (Mon) 19:14

To Akiraさん

早々のご回答、ありがとうございます!!

まさにご解釈いたただいた通りのことで悩んでいました。

回答いただいた形に改修しましたところ
無事にドロップダウンメニューが表示され、リンクも
正常に機能するようになりました。

本当にありがとうございましたm(__)m

Akira

2016/11/15 (Tue) 16:53

To ひろさん

合ってましたか。
良かったです(笑)

作業お疲れ様でした

KRIK

2017/02/02 (Thu) 23:42

はじめまして。

自分のブログを買えたくてAkira様のテンプレートに行き着きました。
テンプレートを導入しただけで見違えるほどのブログに生まれ変わりとても満足しています。

自分で細かい所などをカスタムしているのですが、1点お聞きしたいことがあります
ブログタイトル、記事タイトル部分の欧文書体を変更したいのですが、なにか方法があるのでしょうか

差し支えなければ教えていただけたら幸いです。

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

Akira

2017/02/04 (Sat) 10:51

To KRIKさん

ありがとうございます。
お返事遅くなりました (*_ _)

> 記事タイトル部分の欧文書体を変更したい〜

既に作業が進んでいるようですので、方針と現状を確認しながら説明を行いたいと思います。

====

● 希望フォントはPadauk? --- YES/ NO

htmlソース内にあった Courgette を削除し、Padauk に変更した、ということでよろしいでしょうか。
ブログタイトル・記事タイトル・No imageテキストなどが対象となります。

● 現在の状態

Padaukへのリンクは完了していますがCSSでの指定が済んでいませんので、今どうなってるかと言うと

・ブログタイトル --- 游明朝(Mac)/ HG明朝E(Windows)
・記事タイトル --- 游ゴシック(あるいはWindowsならメイリオの可能性もあり)
・No imageテキスト --- 同上

Ctrl+F(Windows)/ Command+F(Mac)キー検索

Courgette

CSSソース内に8箇所あります。
こちらを全て

Padauk

に書き換えてください。
よろしくお願いします ( ゚Д゚)ノ

Akira

2017/02/28 (Tue) 20:46

To 彩羽さん(移動先)

> about me のページを書きたいのですが、編集の仕方がわからず〜

これはabout meのリンク設定の仕方のことではなく、「about meをクリックして辿り着くページを作成したい」
という解釈で合ってますでしょうか。
FC2ブログは「About me」あるいは「プロフィール」といったような専用用途のページを有していません。
有るのは
・トップページ
・個別記事(パーマリンク)
・全記事リスト
・検索結果
・タグ
・カテゴリ
・月・日別
・コメント編集ページ
の8種です。(厳密には9種ありますがややこしいので今は除外します)

彩羽さんのブログを拝見しますと、記念すべき最初の記事として「はじめまして」というのがありますよね。
こちらへ誘導されてはいかがでしょうか。
About me 本来の内容とも合致しています。
About me をまた新たなページとして作成したい場合には、通常時の記事作成と同じように「記事」として作ってください。
あるいは、外部サイトなどをお持ちでしたらそちらへ誘導しても良いと思います。
既に「はじめまして」の記事がありますので、そちらが良いのではないかと個人的には思います。

リンク設定の手順はCtrl+F(Windows)/ Command+F(Mac)キー検索

注)リンク先の追加はここに

上記を目印にガイダンスに従い以下の通り

<li><a href="ここに個別記事ページのURL" class="submenu-anchor">About Me</a>

「はじめまして」の記事にされるのであれば
ブログアドレスblog-entry-1.html
が該当URLです。
よろしくお願いします。

彩羽

2017/03/01 (Wed) 12:37

To Akiraさん

丁寧な回答、本当にありがとうございます!
教えていただいた通りに行ったところ無事にリンク先へ追加することができました。
これからもこちらのテンプレート、愛用させていただきます(﹡ˆoˆ﹡)

本当にありがとうございました。

Akira

2017/03/01 (Wed) 14:53

To 彩羽さん

良かったですー。
お疲れ様でした

もりぞー

2017/04/06 (Thu) 20:06

Promise-Meを利用させて頂いております。
最新の記事(トップページ1P目の一番上の記事)の画像が大きめ表示ですが、サイズを変更するにはどうすればよろしいでしょうか?
また、ブログタイトルが表示されている箇所(背景が白の箇所)の高さの変更方法も教えて頂けないでしょうか?
よろしくお願い致します。

Akira

2017/04/06 (Thu) 22:50

To もりぞーさん

ありがとうございます

> サイズを変更するにはどうすれば〜

どのように変更したいんでしょうか。
他の(2件目以降の)サイズと等しくして区分しないようにされるのでしょうか。
それとも少し小さめに、あるいはさらに大きく、ということでしょうか。
この件はお返事待ちにしますね。

> ブログタイトルが表示されている箇所(背景が白の箇所)の高さの変更方法〜

Ctrl+F(Windows)/ Command+F(Mac)キー検索

.blog-name-container

この括りの

padding: 100px 8px 50px;

100がブログタイトルとヘッダー上辺との距離、
50がブログ説明文とヘッダー下辺との距離ですので各々数値を変更して調整してください。
よろしくお願いします。

もりぞー

2017/04/06 (Thu) 23:42

早速の回答ありがとうございます。

少し小さめ、例えば800pxとか700pxにしたいと言う感じです。
画像の元サイズよりも表示サイズが大きいので、拡大されてぼやけてしまうのを避けたいのです。

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

Akira

2017/04/07 (Fri) 13:52

To もりぞーさん

了解です (o'ω')ノ
Ctrl+F(Windows)/ Command+F(Mac)キー検索

.index-element-item:first-of-type {

CSSソース内に1箇所あります。
この括りの width: 100%; の「下」に以下を追加

max-width: 数値px;
float: none;

数値の部分が「最大でも何px」という指定ですので、希望の数字を設定してください。
ブラウザ幅縮小時に指定px数を下回った場合にはwidth: 100%; になります。
レスポンシブデザインですので、ソースの上書きをされましたらブラウザ幅をマウスで拡大・縮小して体裁を確認してくださいね。
よろしくお願いします。

もりぞー

2017/04/07 (Fri) 21:03

丁寧なアドバイスありがとうございます!
思い切って質問してよかったです。

これから、愛用させて頂きます。

Akira

2017/04/08 (Sat) 15:10

To もりぞーさん

ご要望通りになりましたでしょうか。
安心しました。
作業お疲れ様でした

たくあん

2017/11/14 (Tue) 12:07

記事本文の文字の大きさの変更について


はじめまして!
ブログ開設当初から、Promise‐Meのテンプレートを利用させていただいています。
「見やすく、おしゃれなブログだ」と、周囲からも大好評です。

しかし、年配の方に見てもらうブログのため、「記事本文の文字が小さくて、少し読みづらい。」という意見をもらい、フォントのサイズを変更しようとしました。
こちらのブログを読み、CSSで「フォント大きさ」や「font-size」と検索して変更を試みたのですが、記事本文に関するフォントサイズの変更を、どこから行うのかがわかりませんでした。
(タイトルのフォントサイズを変更することはできたのですが…)

お手数をおかけしますが、方法を教えていだたけませんか。

Akira

2017/11/14 (Tue) 15:46

To たくあんさん

ありがとうございます

> フォントを大きくしたい件〜

/* 注)全体背景色 (approx)White Smoke */
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂きますと、CSSソース内(管理画面下段)に1箇所ヒットします。
その直近の

font: 13px/1.7 'Roboto', '游ゴシック'〜省略

赤字部分が記事内のフォントサイズ指定ですので、大きい数字に変更してください。
よろしくお願いします。

たくあん

2017/11/14 (Tue) 16:38

To Akiraさん

ありがとうございます!
フォントサイズを大きくすることができました!

これからも細かいところをカスタマイズしながら、Akiraさんのテンプレートを使わせていただきたいと思います。

Akira

2017/11/14 (Tue) 23:21

To たくあんさん(完了のご報告)

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

-

2018/04/08 (Sun) 15:28

管理人のみ閲覧できます

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

Akira

2018/04/08 (Sun) 17:46
vanillaice (Akira)

To Promise-Me全体幅調整の件など 内緒さん

ありがとうございます (o'ω')ノ

記事内容の修正を怠っておりましたので今書き直しました。
お尋ねの件
1. 2 共に答えを記してありますのでお読みください。

個別記事の幅調整ですが、トップページや個別記事など、全ページ種で全体幅は共通ですので個別記事のみサイズを小さくするというのは容易にはできません。
それでも行うということであれば、個別記事のアウトラインにセレクタを追加し、paddingを利用して記事の左右の空白を設けるぐらいでしょうか。
ただ、このテンプレートは個別記事と背景色が同一なので恐らく「ひどく右に寄ったレイアウト」に見えてしまうと思います。
この点をまずご一考ください。
その際に必要な手順などお伝えしますね。
私からは全体幅の調整(全ページ適用)をおすすめします。
こちらを先に一度試されましてお返事をお願いします。
よろしくお願いします。

hiroko

2018/04/08 (Sun) 20:28

To Akira様

早速のご回答ありがとうございました。

個別記事調整幅
→全体幅で調整するという事で考えてみます。

スマホからヘッダー画像が見れない件
→記事内容でリンクして頂いている記事を読ませて頂きました。
スマホのブラウザ設定の初期化をするとヘッダー画像が表示されるようになりました!
スマホからPCとして見る設定になってしまっていた様です。

お手数をおかけして申し訳ありませんでした。
今後も素敵なテンプレートを楽しみにしています。
ありがとうございました。

Akira

2018/04/08 (Sun) 23:53
vanillaice (Akira)

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

はい。了解です。
こちらこそありがとうございます。
お疲れ様でした

-

2018/12/03 (Mon) 16:28

管理人のみ閲覧できます

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

-

2018/12/03 (Mon) 17:12

管理人のみ閲覧できます

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

Akira

2018/12/03 (Mon) 17:12
vanillaice (Akira)

To Promise-Me SSL化の件 内緒さん

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

2017年の9月に私が制作した全テンプレートのSSL対応を済ませていますが、内緒さんのバージョンはそれ以前のものなんですね。
SSL化以外にもいろいろな修正(軽量化や画像遅延読み込みの導入など)が入っていますので、一番良いのはアップデート(再DL)して頂くことです。
ただカスタマイズの再適用が困難ということであれば、以下の文字列をCtrl+Fキーで検索されまして、httpをhttpsに変更してください。動かないJSについてはそれで動くようになるはずです。

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

ただ再DLが最も良い方法ですのでご一考くださいね。よろしくお願いします。

Akira

2018/12/03 (Mon) 17:15
vanillaice (Akira)

To Promise-Me SSL化の件 内緒さん(完了のご報告)

お返事が行き違いになってしまいました。
修正されたようで安心しました。

ただ再DLもご検討ください(笑)
お疲れ様でした :)

-

2019/02/17 (Sun) 15:06

管理人のみ閲覧できます

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

Akira

2019/02/17 (Sun) 16:50
vanillaice (Akira)

To Promise-Me No image画像変更の件 内緒さん

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

変更するのは
https://blog-imgs-84.fc2.com/v/a/n/vanillaice000/998977_8f83l5u_l1.jpg
であってます。html内に1箇所、スタイルシート内に2箇所、計3箇所あります。
変更後に「更新」はされましたでしょうか。プレビューでは修正後の様子を確認することはできませんので「更新」を押してくださいね。

-----
html構文エラーがあります。
<!-- 注)SNSリンク不要の方ここまで削除 -->
を目印に、すぐ上に </section> というのがあります。そのすぐ上に
</ul>
があったはずなんですが、SNSアイコンを減らす際に巻き込んで削除されてしまったのだと思いますので追加してくださいね。
よろしくお願いします。

-

2019/02/17 (Sun) 20:48

管理人のみ閲覧できます

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

Akira

2019/02/19 (Tue) 15:09
vanillaice (Akira)

To Promise-Me No image画像変更の件 内緒さん(完了のご報告)

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

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

-

2019/02/20 (Wed) 10:09

管理人のみ閲覧できます

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

Akira

2019/02/20 (Wed) 16:57
vanillaice (Akira)

To Promise-Me FBシェアの件 内緒さん

こんにちは。

内緒さんはOGP設定を行っていませんので個人設定で有効化してください。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#meta_tag

参考記事: OGP設定は大事です
https://vanillaice000.blog.fc2.com/blog-entry-819.html

-----
大きなエラーが一つあります。
apple-mobile-web-app-capable
で検索するとhtml内の上方に1箇所あります。

×
<meta name="apple-mobile-web-app-capable">


<meta name="apple-mobile-web-app-capable" content="yes">

カスタマイズ時に消してしまったのではないかと思いますので修正してください。
また、ページ上部に固定されているFC2検索バーは非表示をおすすめします。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar

表示するとテンプレートヘッダーの位置が下がりますし、タブレットではこの検索バーがはみ出して閲覧に支障をきたします。強制ではありませんのでご一考ください。
よろしくお願いします。

-

2019/02/20 (Wed) 19:12

管理人のみ閲覧できます

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

Akira

2019/02/21 (Thu) 00:26
vanillaice (Akira)

To Promise-Me FBシェアの件 内緒さん(完了のご報告)

ご報告ありがとうございます。
OGPなんて言われても意味わかんないですよね (´・ω・`)
メタタグなんてさらに意味不明ですし(笑)

お疲れ様でした :)

TOSH

2019/04/22 (Mon) 11:45

はじめまして、SNSリンクのことで

はじめまして、TOSHと申します。
最近こちらのテンプレートが気に入って使わせていただき、なんとか必死でHTMLでカスタマイズしています。
そこでご相談なのですが、サイドメニューのトップにあるSNSのリンクについて。
いまツイッターとインスタグラムを入れていますが、YOU TUBEのリンクは入れられないものでしょうか?
当方HTMLはド素人ですがよろしくお願いいたします。

Akira

2019/04/22 (Mon) 18:28
vanillaice (Akira)

To TOSHさん

こんにちは ('0')/

> YOU TUBEのリンク〜

<defs>
で検索するとhtmlソース内に1箇所あります。その直下に以下の内容を追加。

<symbol id="inline-youtube">
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
</symbol>

コピペする際には 前後の要素と文頭を揃える必要はありません。
つまり、インデントを行わないようにしてください。
<defs>の末尾で改行したらスペースなどは入れずにそのまますぐにペーストしてください(全角スペース使用によるエラーを防ぐため初心者の方へはこの方法を推奨しています)

-----
続いて
<ul id="side-sns">
で検索するとhtml内に1箇所ありますので、直下に

<li><a id="s-youtube" href="#" target="_blank" rel="noopener noreferrer"><svg class="svg-inline svg-inline-youtube" viewBox="0 0 576 512" role="img"><use xlink:href="#inline-youtube"></use></svg></a>

を追加。こちらも同様にインデント不要です。
赤字になっているhrefの値の # はリンク先ページアドレスに置き換えてください。

-----
続いて
#s-facebook
で検索するとスタイルシート内に1箇所あります。
#s-facebook {
background-color: rgb(59,89,152);
color: white;
}
となっているはずなので、その直下に以下を追加。

#s-youtube {
background-color: rgb(255,1,0);
color: white;
}

以上です。

-----
別件ですが、画面上部にあるFC2検索バーはタブレットで画面からはみ出しますので非表示をおすすめしています。
また、こちらはレスポンシブデザインなので特別な理由がなければスマホ版の非表示をおすすめします。

参考記事: FC2ブログにお引越しされた方向け「最低でもこれはやっとけ」6選
https://vanillaice000.blog.fc2.com/blog-entry-860.html

よろしくお願いします。

TOSH

2019/04/22 (Mon) 19:42

To Akiraさん

早速丁寧な返信ありがとうございます。
なかなか大変そうで不安ですがやってみます。取り急ぎお礼まで・・・

TOSH

2019/04/22 (Mon) 20:02

To Akiraさん

指示の通りにやってみるとsnsのアイコンが表示されました。
またご指摘の検索バーもなくなって、すっきりしました。
どうもありがとうございました!!m(_ _)m

Akira

2019/04/23 (Tue) 01:18
vanillaice (Akira)

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

上手く行ったようで良かったです。
お疲れ様でした :)

TOSH

2019/04/27 (Sat) 10:15

サファリの検索欄の不具合

こんにちは
ブラウザのサファリの問題なので、サポートされてないかもしれませんが、、、
トップページの一番上にある虫メガネマークの検索のアイコンをクリックすると、グーグル・クロームでは問題ないのですが、普段使っているサファリだとうまく表示されません。クロムだと黒バックにEnter your textの白文字ですが、サファリだと入力欄が白なので文字が見えません。それでも文字を入力してみると文字は見えませんが、リターンキーを押すと検索結果が出ます。
サファリで検索欄を黒バックにすることはできないでしょうか?

Akira

2019/04/27 (Sat) 17:03
vanillaice (Akira)

To TOSHさん

こんにちは。

それは大変失礼しました。スタイルシートの末尾に

#modal-input {
-webkit-appearance: button;
}

を追加してください。よろしくお願いします。
* お知らせ頂いた要件に加えSafariで色々問題がありそうなので修正しますね。ありがとうございます。
(Promise-Meについてはこの修正のみです)

TOSH

2019/04/27 (Sat) 17:32

To Akiraさん

早速ありがとうございました!
ちゃんと表示されました。
いつも早いご対応、とても助かりますm(_ _)m

Akira

2019/04/28 (Sun) 00:36
vanillaice (Akira)

To TOSHさん

こちらこそ助かりました。今修正を済ませたところです。
ありがとうございます :)

TOSH

2019/05/27 (Mon) 21:14

度々すみませんが、トラックバックについてです。
食べログとリンクしようと思いトラックバックが必要になってきましたが
コメント欄の下にあるトラックバック先の入力画面には、
すでに自分のURLが自動的に入っていて、トラックバック先が入力でないために
トラックバックできません。

念のために元のYahoo!ブログでトラックバックしようとすると
「トラックバック先を追加」という欄に入力可能です。

いままでトラックバックを使っていなかったので
トラックバックに関しては初心者ですみません・・・

Akira

2019/05/28 (Tue) 01:52
vanillaice (Akira)

To TOSHさん

こんばんは ('0')/

トラックバックというのは相手先のページで行いますので、ご自身のページにあるものは他者がTOSHさんの記事に対して行うトラックバック用URLです。相手方がトラックバックを許可している場合は専用URLが表示されているはずです。無ければ受け付けていないということになります。

Yahoo!の「トラックバックを追加」も同様に相手方のURLを記入します。自分が「どこにトラックバックをしたか」の一覧は出ません。あくまでも相手方のトラックバック欄に「誰からトラックバックされたのか」の一覧が表示されます。

参考: https://vanillaice000.blog.fc2.com/blog-entry-583.html
上記記事の「この記事へのトラックバック」を参照

お尋ねなのは「相手方のトラックバックURLをどこに入れるかわからない」という意味でしたら、恐らく新投稿画面をご利用だと思いますので、画面右下「サイドメニューの追加」をクリックし「トラックバック」にチェックを入れることで記載欄が出てきます。

TOSH

2019/05/28 (Tue) 10:09

早速ありがとうございます
初歩的なミスですみません。
すぐにサイドメニューに追加で解決しました。
m(_ _)m

Akira

2019/05/29 (Wed) 14:04
vanillaice (Akira)

To TOSHさん

こんにちは。

新投稿画面のサイドメニュー指定は発見しづらいしわかりづらいですよね。
解決したということでお疲れ様でした :)

-

2019/07/31 (Wed) 13:35

管理人のみ閲覧できます

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

Akira

2019/07/31 (Wed) 13:59
vanillaice (Akira)

To Promise-Meでお問い合わせの内緒さん

こんにちは。ありがとうございます :)

> スマートフォン表示の時にだけ特定の一つの広告だけ〜

内緒さんの設定は「スマートフォンではスマートフォン専用版で表示」を行うようになっており、Promise-Meは適用されていません。
なのでスマートフォン版の製作者さんに直接お尋ねください。

パソコンとスマホのテンプレートを共通化するには当ページ内にある通りレスポンシブ設定(「スマートフォン版の表示設定」を「無効にする」)を行ってください。これをしない限り閲覧者にはスマホ版が表示されます。

内緒さんがお尋ねなのが「スマホ専用版」のことなのか、「スマホでPC表示に切り替えた時に表示されるPromise-Me」のことなのかはっきりしないのと「人気記事ランキング」がどれのことなのかわかりません(正式名称あるいは記載されているタイトルで示すようにしてください)

-----
> 一番下の新しい記事と古い記事に行くリンクを写真つきとかには〜

ページ送りのサムネイルを実装する際にはhtml, CSSの大幅な書き換えと複雑なJSが必要になりますのでお手伝いできませんが、他のテンプレートで導入していますのでそちらをご自身で移設して頂くのは構いません。
よろしくお願いします。

hoppy

2019/07/31 (Wed) 14:38

To Akiraさん

さっそくのお返事ありがとうございました。
ページ送りのサムネイルの件は了解しました。
このままで使って行こうと思います!

スマホ版の件ですが
今無効にしたのでスマホでもPromise-Meで表示されてるかと思います。
広告が縦にでてしまうので有効に一時していました。
すいませんでしたm(_ _;)m
スマホでPC表示に切り替えた時に表示されるPromise-Meで表示される広告についてです。
特定の広告の一つをスマホでPC表示した時に表示させないという意味でした。


もう一つ今タブレットでPromise-Meで表示されてるのを見ていました。
TOPページのフッター部分の
Designed BY Akira
お留守番犬・ホッピーの日々 All Rights Reserved

まで下がると画面が花の画像がでて止まるはずなのですが
それ以降も白い画面が続く感じなのですが
もしかしたら自分でなにかを消してしまったのかもしれませんが・・・・

カテゴリ、カレンダー(月別)などの表示の時も
花画像の後に白い画面が続きます。

個別記事では花画像がでてちゃんと止まって表示されます。

本当にお手間取らせてしまってすいません。

Akira

2019/07/31 (Wed) 15:11
vanillaice (Akira)

To hoppyさん

表示の件は了解です。

> スマホでPC表示に切り替えた時に表示される〜

レスポンシブ設定を済ませた場合「PC表示に切り替え」を行うことはないんですが、その「特定の広告」というのは具体的にどれのことなんでしょう。

例)
個別記事下のSNSシェアボタンの上にある広告

などできるだけ具体的にお願いします。その前に広告の並びや表示を操作するのはテンプレートではなくその広告配信各社(ASP)の仕様であって、特に主要ASPはJavaScriptで掲載するので規定や規約があるのではないでしょうか。

------
> タブレットで〜花の画像がでて止まるはずなのですがそれ以降も白い画面が続く〜

adsbygoogleだと思うんですがスクリプトエラーで表示されていません。警告内容は以下のようなものです。

adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.
ページごとで表示が許可される自動広告は1件のみです

規約に沿っていないという意味だと思いますので自動広告の規約再確認を行ってくださいね。
いずれにしろ自主掲載の広告についてはテンプレートで操作するものではありませんので、利用中のASPの仕様と相談、ということでお願いします。

-

2019/07/31 (Wed) 15:29

管理人のみ閲覧できます

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

Akira

2019/07/31 (Wed) 15:43
vanillaice (Akira)

To Promise-Meでお問い合わせの内緒さん

> 広告は自分で入れたい場所に入れてる広告なので表示されるされないは本人で決められるので大丈夫です。〜

えと。真意が伝わっていないようなのでもう一度。
まず先程の自動広告の警告は「自動広告掲載の上限を超えています」という意味なので掲載数を確認してください。
そしてレスポンシブデザインというのはPCとスマホで内容が全て共通になりますので、PCで表示、スマホで非表示を行ってしまうと恐らく規約違反です(display: noneによる広告強制非表示にあたります)
これを避けるにはアクセスデバイスがPCなのかスマホなのかタブレットなのかを全て見分けて表示・非表示を切り替える必要があり、それを行うのはテンプレートではなくASPのガジェット設定ですよ、という意味です。

根本的に「自動広告」というのは 掲載の位置を選べません
好き勝手な位置に表示されるのが自動広告で、実際スマホ, PC, タブレットそれぞれ表示位置が違いますよね。
つまり「位置の対策」というのはできないんです。
ですから本件では「デバイス別での表示・非表示」を考えるのではなく、「自動広告の利用」それ自体を検討すべき場面です。
スクリプトエラーを別件と捉えているようですが全て関連があり同じ案件です。

-

2019/07/31 (Wed) 15:46

管理人のみ閲覧できます

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

Akira

2019/07/31 (Wed) 15:50
vanillaice (Akira)

To Promise-Meでお問い合わせの内緒さん(終了のご報告)

いえいえ。広告掲載は難しいですよね。
原則、広告についてはテンプレートは関与しない、という点をご理解頂けると幸いです。
お疲れ様です :)

あと、Googleの広告(自動広告含む)を利用する際はサイドメニューのスクロールアンカー(サイドメニューがスクロールで画面外に流れていかないもの)への掲載は規約違反にあたるはずなので、スクロールアンカー用JSの削除を行うようにしてください。
通常の広告はこの位置への掲載を避けられるんですが、自動広告の場合は避けようがありませんのでアンカー削除しかありません。

<!-- 注)スクロールアンカー不要の方ここから削除 -->

で検索すると出てきますのでガイダンスに従ってくださいね。
よろしくお願いします。

-

2019/08/19 (Mon) 17:38

管理人のみ閲覧できます

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

Akira

2019/08/20 (Tue) 01:19
vanillaice (Akira)

To Promise-Meでお問い合わせの内緒さん

こんばんは。

> 日付部分(August 19 2019)の背景色〜

この部位は 月毎に背景色が変わります。当記事本文にサンプルを掲載しましたのでご確認をお願いします。
変更するには月単位で(下記の例は1月)

.color01 {
background: カラーコード;
}

.colorlink01,
.colorhover01:hover {
color: カラーコード;
}

赤字部位を変更。各月ごとに2箇所づつ変更してください。

-----
> 記事内上部のコメントの吹き出しマークの色〜
> 記事内上部のカテゴリテキストの色〜

同じく月単位です。リンク色(コメントアイコン(吹き出し)とフォルダアイコン(カテゴリ))も日付の月背景に倣います。
よろしくお願いします。

-

2019/08/20 (Tue) 13:19

管理人のみ閲覧できます

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

Akira

2019/08/20 (Tue) 16:24
vanillaice (Akira)

To Promise-Meでお問い合わせの内緒さん(完了のご報告)

こんにちは。

修正完了ということで、お疲れ様でした :)

-

2019/08/24 (Sat) 15:09

管理人のみ閲覧できます

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

Akira

2019/08/26 (Mon) 14:22
vanillaice (Akira)

To Promise-Meの件 内緒さん

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

> Noimageに当たる部分〜

① Noimageの場合とサムネイルありの場合とで画像表示サイズを変える、
という意味でしょうか。それとも
② 全て(サムネイルあり・なしに関わらず)画像表示部位のサイズを変えたいのか、
あるいは
③ 最初の1記事だけが大きいのをすべて同じサイズ(画像 + コンテンツ)で揃えたいのか

上記について具体的にお知らせください。それぞれ作業内容が異なります。
(構造を考えれば②かなぁ、と思うのですが)

② の場合は
.element-image::before

padding-top: 60%;
赤字部位を変更してください。100%で正方形になります。

ちょっとお返事遅れるかもしれません。よろしくお願いします。

-

2019/08/27 (Tue) 15:24

管理人のみ閲覧できます

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

Akira

2019/08/28 (Wed) 00:09
vanillaice (Akira)

To Promise-Meの件 内緒さん②

こんばんは。

URLをご提示頂いた方は同じPromise-Meですが、全体幅を1300pxから1000pxに変更して小さくしています。
画像のアスペクト比については変更はなく60%(横幅に対し縦幅がその60%という意味です, つまり5:3)のままです。
そして最初のコンテンツにも変更はなく、横100%表示です(2つ目以降は横50%づつ)

ここで確認ですが、

1. 全体幅を縮小したいのですか?
2. 画像のアスペクト比は変更したいのですか?
3. 最初のコンテンツはどうするのですか?横100% or 横50%

方針が明確にならないと指南ができませんのでご回答をお願いします。
3については「元々やりたかったのは③」ということなので、

.index-element-item:first-of-type
で検索し、ルールセットを削除してください。

ルールセットとは

.xxx {
内容
}

この形を指し、{ から } までの範囲のことです。このまとまりを削除、という意味です。今回は

.index-element-item:first-of-type {
margin-bottom: 50px;
width: 100%;
}

上記です。

-

2019/08/29 (Thu) 00:35

管理人のみ閲覧できます

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

Akira

2019/08/30 (Fri) 01:45
vanillaice (Akira)

To Promise-Meの件 内緒さん③

こんばんは。

> 最初の1記事を同じ大きさで揃える〜

index-element-item
を目印に検索すると
<section class="element-item<!--index_area--> index-element-item<!--/index_area-->">
というのがhtml内に1箇所あります。これを

<section class="element-item">

上記の通り変更してくださいね。よろしくお願いします。

-

2019/08/31 (Sat) 12:52

管理人のみ閲覧できます

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

-

2019/08/31 (Sat) 13:11

管理人のみ閲覧できます

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

Akira

2019/08/31 (Sat) 23:58
vanillaice (Akira)

To Promise-Me 日付削除の件 内緒さん

こんばんは。

> 円形の日付部分ですが、削除することは可能でしょうか?〜

<time class="element-datetime
を目印に検索するとhtml内に1箇所ありますのでそこから
</time>
までを削除してください。よろしくお願いします。

-

2019/09/01 (Sun) 15:59

管理人のみ閲覧できます

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

Akira

2019/09/01 (Sun) 23:03
vanillaice (Akira)

To Promise-Me 日付削除の件 内緒さん(完了のご報告)

こんばんは。

完了ということで、お疲れ様でした :)

tosh

2020/01/31 (Fri) 00:21

タイトル文字のフォントについて

ヤフーからFC2に引っ越して以来、いままで何度か質問させていただき感謝してます。
最近、他のブログを見ていて個々の記事のタイトルについて若干弱く感じています。
それはタイトルは読んでもらうため重要かと工夫してるからなのですが、
最近、若干大きさなど記事全体に対して弱く感じています。
個々の記事の画面のタイトルのフォントについて、大きく、太くする方法を教えていただけませんか?
初歩的なことですが当方HTMLに関しては初心者なので
どうぞよろしくお願いします。m(_ _)m

Akira

2020/02/02 (Sun) 20:45
vanillaice (Akira)

To toshさん

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

フォントの見え方はOSによって違いますので、まずその点を確認したいと思います。
Promise-Meのデフォルトフォントは「游ゴシック」というフォントですが、以下のような形です(日本語のみ, 欧文及び数字・記号除く)

Mac --- 游ゴシックで綺麗に表示されます
Windows 8.1以降 --- 游ゴシックですがMacよりも細くかすれ気味です
Windows 8.1以前 --- 游ゴシックはプリインストールされていませんので第二フォント指定の「メイリオ」で表示されます
iOS(iPhone) --- 游ゴシックはプリインストールされていませんのでiOSシステムフォントの「apple-system」で表示されます
Android --- 游ゴシックはプリインストールされていませんので「Noto Sans CJK JP」で表示されます。OSのバージョン古い場合「マルベリ」で表示されます

toshさんがどのデバイスで「弱い」と感じるかによるんですね。toshさんが「游ゴシック」で見ていると仮定して進めます。
「太さ」に関しては各フォントの作りに依存し、游ゴシックについては「bold」までです。
Promise-Meのデフォルト指定は「bolder」ですが「bold」に変更しても恐らく変化はありません。なので太さではなく大きさの変更で見た目を確認し、それでも「弱い」と感じる場合は第一優先を「游ゴシック」から「メイリオ」に変更されると良いとかもしれません。メイリオの方が全体的にずんぐりして太く感じると思います。游ゴシックは繊細なフォントなので元々あまり太く見えないんです。
ただし先にお伝えしたようにスマホOSでは各システムフォントで表示される点はご理解くださいね。
そしてもしtoshさんが「メイリオ」で見ているのであればもうどうしようもない ^^;

あと考えられるのはtoshさんが「Macで游ゴシックを見ている」場合です。その場合は以下の記事をご参照ください。
参考記事: 弊テンプレートスタイルシート内にある font-smoothing の指定について
https://vanillaice000.blog.fc2.com/blog-entry-958.html

----- ① フォント指定を変更する場合(全体適用)

フォントを游ゴシックからメイリオに変更する場合です。
body {
で検索するとスタイルシート内に4箇所ヒットしますが最初のものが対象です。

font: 1.4rem/1.9 'Roboto', YuGothic, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
となっているのを以下の通り変更

font: 1.4rem/1.9 'Roboto', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, Meiryo, 'Yu Gothic', sans-serif;

Macでの游ゴシックも優先度を下げてOS間差異を少なくした方が良いと思うのでこの指定です。
フォント変更しない場合この手順は不要です。

----- ② トップページタイトル
.element-title {
で検索するとスタイルシート内に3箇所あります。最初の1つ目がパソコンでの見た目、2つ目がタブレット、3つ目がスマホです。
まず最初(1つ目)の内容

font: bolder 1.6rem/1.4 YuGothic, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

赤字部位 bolder を bold に変更。ただし見た目は変化しないと思います。ここが太さの指定です。
次の 1.6 が大きさなのでお好みの数字に変更してください。

2つ目以降は大きさの調整のみで太さは1つ目で行った指定に倣います。調整が必要であれば2, 3つ目の数値も変更してください。

第一優先フォントをメイリオにした場合は

font: bold 1.6rem/1.4 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, Meiryo, 'Yu Gothic', sans-serif;

に変更(1.6は任意変更)

----- ③ 個別記事タイトル
#entry-title
で検索するとスタイルシート内に1箇所あります。こちらは大きさ指定のみです。
font-size: 1.7rem;
赤字部位を好みの数値に変更。

フォントを変更の手順①を行うかどうかを決めてから順に進めてください。

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

tosh

2020/02/03 (Mon) 20:05

To Akiraさん

ご丁寧なアドバイスをありがとうございます。
私が気になっているのはMacでの個々の記事のタイトルだったので
指示に沿ってまずはサイズを少し大きくしてみました。
太さに関しての修正はこれからいろいろと試してみたいと思います。

昨年ヤフーから引っ越しの際、アメブロも並行して試してみましたが、
アメブロはフォロワーさんからのレスポンスがよく、わかりやすくていいのですが
FC2のデザインの自由度とAkiraさんのテンプレートが気に入っているので
メインをFC2にしてアメブロはFC2への誘導のお知らせにしています。

今度ともよろしくお願いします。ありがとうございました。

Akira

2020/02/03 (Mon) 22:05
vanillaice (Akira)

To toshさん

こんばんは ('0')/

Macでしたか。となると実証の内容が少し変わりますね。
そしてtoshさんはテンプレートのアップデートをされていませんのでフォント指定が最新版と若干違います。

Chromeをご利用だと仮定し、ページの余白部位で右クリック、「検証」というのがありますのでそれをクリック。
するとページ右側にソース内容が出てきます。これが「開発者ツール(dev tool)」です。
ページ内に表示されるとブログ自体の横幅が狭くなり見づらいので、出てきたポップアップのellipsisマーク(右上にある点が縦に3つ並んでいるマーク)をクリックし、「Dock side」の項目の4つのアイコン並び一番左を長押しします。するとウィンドウが切り離されます。

dev toolの左側がhtml、右がCSS内容です。左の上方に「body」の文字列を探してクリックするとbody部に指定されているCSS内容が右側で見られるようになります。スクショを参考にあとはガイダンスに従って目視確認を行い、何をすれば希望に叶うのか検証してください。

① font-smoothing指定を消してみる
② フォント指定を変更してみる(カーソルを合わせて対象をdeleteするだけです)

https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user2020-2-3----1200.png

仮想ツールですから実際の内容が書き換わることはありません。混乱したときは一旦リロードして最初からやり直せます。
①を試してみてOKならテンプレートのスタイルシート内にある

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

の2行を削除してください。
②の作業は「游ゴシックの優先度を下げる」処理です。で、ややこしい話ですが、toshさんのスタイルシート内のフォント指定は

font: 1.4rem/1.9 'Roboto', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', sans-serif;

上記のようになっているはずです。Mac最新OSのcatalinaには第2優先の「ヒラギノ角ゴシック」がもう存在しませんので、第三優先の「ヒラギノサンズ」の見え方を確認してください。フォント変更したい場合は先回お伝えした変更手順を採用してください。

catalinaにアップグレードしていない場合(toshさんだけでなく第三者含む)、ヒラギノ角ゴがありますので角ゴで閲覧されています。アップグレード済の方は角ゴが無いのでヒラギノサンズで閲覧されています。
フォント変更が不要な場合はそのまま触らなくてOKです。OSのバージョンによってちゃんと対応フォント(catalina以前はヒラギノ角ゴシック、catalina以降はヒラギノサンズ)で表示されます。今回書き直す場合はcatalina以前・以後共通でヒラギノサンズ表示です。

テンプレートの修正を始める前に仮想で目視確認を行う方法をお伝えしました。
ご自分のペースで行ってくださいね。よろしくお願いします。

-----
アメブロも開設されてるんですね。Yahoo!ブログの使い勝手や雰囲気に近い既存サービスはやはりアメブロではないかと思います。それぞれのサービスの良さがありますので上手に使い分けるのも良いですよね。
同一内容の記事をUPしない、という点だけ注意して楽しんでくださいね。同一記事はインデックス時に非常に不利になります。
(同じコンテンツ(重複コンテンツ)の場合通常は最も古い日付で公開されたものがオリジナルとみなされ、その他は「コピーコンテンツ」と判断されて検索結果から除外処分を受けてしまうことがあり、サイト自体の価値が下落します)

参考記事: 引っ越しを繰り返すことはコピーコンテンツを量産することです
https://vanillaice000.blog.fc2.com/blog-entry-846.html

お疲れ様です :)

tosh

2020/02/10 (Mon) 19:59

追記ありがとうございます。
返事が遅くなりすみませんm(_ _)m

当方htmlに関しては素人なので(笑)
よくわからないままdev toolまでなんとか行けましたが
①font-smoothingの行以降はわからずできませんでした。

当方最近catalinaにしました。メールや写真のアプリにいろいろと不具合が起こり
何度かサポートでなんとかやってますが・・・

ブログに関してはメインはfc2にしていますが、アメブロから誘導するために
アメブロに同じ記事の短いイントロを3回に2回くらいのペースでアップしています。
検索のことは気になっていたのでfc2に遅れてアップしていますが、タイトルはほぼ同じにしています。

反応がいまいち不明なfc2に不満を感じながら、アメブロも当初よりアクセスが減ってきて
ヤフーはよかったなと感じながら自分記録として割り切って続けています。

Akira

2020/02/10 (Mon) 21:32
vanillaice (Akira)

To toshさん

こんばんは ('0')/

② もfont-smoothingと同じ箇所ですよ。すぐ上にあります。

-----
dev toolを使うのは「スタイルシートの元のデータ内容を修正してしまう前に仮想で確認をする」ためなので、やりづらければいきなりスタイルシートを修正しても良いですよ。その代わり無駄な作業になる可能性もあります。作業の前に必ずテンプレートの複製を取るようにしてください。
以下がdev toolを利用して確認できるスクショです。見出しはこの部位では変更(仮想の変更です)できませんので見出しでなく本文の方を見てください。

----- 仮想ツールで確認
【1】現在の状態
(font-smoothing指定「あり」第一優先フォント「游ゴシック」)
https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user-20200210-1----1200.png

【2】font-smoothing指定をなくした場合 + 第一優先「游ゴシック」
https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user-20200210-2----1200.png

【3】font-smoothing指定あり + 第一優先「游ゴシック」から「ヒラギノサンズ」に変更した場合
https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user-20200210-3----1200.png

【4】font-smoothing指定をなくした場合 + 第一優先「ヒラギノサンズ」
https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user-20200210-4----1200.png

【5】全4パターンの比較用スクショ
https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user-20200210-5----1200.png

------
スクショを見て決めることは
① font-smoothingをどうするか
② フォント指定を変更する必要があるかどうか
です。2つを組み合わせる場合、いずれか単独の場合、あるいはフォントのサイズだけを変更する場合などいくつかのパターンに分岐します。決定するのはtoshさんなので最適と思われるものを選択してください。

------
> アメブロから誘導するために
アメブロに同じ記事の短いイントロを3回に2回くらいのペースでアップしています。
検索のことは気になっていたのでfc2に遅れてアップしていますが、タイトルはほぼ同じにしています。〜

タイトルと記事冒頭200文字というのは非常に重要です。冒頭文は「meta description」といって記事の概要とみなされ検索結果に掲載されることになります。当然タイトルもそのまま検索結果に反映されます。
仮に同じタイトル + 同じ冒頭文であった場合、この2つの記事(アメブロとFC2)はGoogleから見れば「限りなく同一に近い記事」になります。
そしてアメブロの方を先にUPしているのであればオリジナルはアメブロとみなされる可能性が高いです。

ただしGoogleには「短文より長文の方が内容が濃い」と判断するアルゴリズムも持っていますので、必ずしも日付だけでオリジナルを判定しているとは限りません。

「テスト」「反応を見るため」などの理由で複数のサービスにほぼ同一の記事を上げてしまうといった負のスパイラルに陥る方がよくいらっしゃるんですが、それを続けている限りこのスパイラルから抜け出すことはありません。
各サービスに全く別の内容を書く、というのは妥当であり、それぞれ専門性の高いブログになると思うんですが、書きたいことが同じであるならばどちらかに本腰を入れた方が良いですよ。

アクセス数についてはアメブロは自社bot(アメブロ内部のクローラー)を除外しないなどの理由から、本来のユニークアクセスの3〜5倍の数字で表示されます。以前は30〜50倍といった水増しがありましたので現在では改善されているといえますが「水増しがある」という状況自体は変わっていません。そして「ユニークアクセス(AさんとBさんが訪問したら2カウント)」と「ページビュー, PV(Aさんが3ページ閲覧したら3カウント)」の別もあります。アメブロは「PV」の方なのでカウントが6とあっても訪問者が6人とは限りません。
ユニークとPV、toshさんがどちらを重視するかによっても判断は変わってきます。

Yahoo!については検索自体は非常に弱く、そのほとんどは「Yahoo!ブログをやっている人」からの訪問であったはずです。ですが一般のブログ、特にFC2やはてななどは検索流入が重視されるサービスです。つまり「閲覧者がブログを開設しているかどうかは関係ない」ということですね。
なので元より体制が違うというか。
結局は「良い記事を書けば結果が伴う」といえます。Yahoo!はランキングの操作なども可能(いいねや大量コメントによる独自アルゴリズム攻略)でしたがFC2では通じません。
そして検索から訪れる人のほとんどはコメントを残しません。コメント数を重視するのであればやはりアメブロに軍配ではないかと思います。

サービスによって特徴がありますのでご自分に合うものを選択されるとストレスも軽減されるのではないでしょうか。
なかなか大変ですが頑張ってください ('0')/

tosh

2020/02/11 (Tue) 20:36

こんばんは
いつも本当にありがとうございます。
スクショがスクリーンショットだとやっとわかりました(笑)
そのお陰でいろいろと試行錯誤の上、最初のご指摘のとおりに
スタイルシートでのフォントの游ゴシックの順番を変えて問題は解決しました!

ヤフーではお付き合いのあったブロガーさんも何人かいましたが
fc2になってからはコメントや拍手いいねなどのコミュニケーション機能を期待せず
「良い記事で結果を出す」そのとおりですね。そのために文体を変えたりもしましたが
やはり基本は素材となる生活の質と表現力ですね・・・


ユニークとPV、勉強になります。やはりユニーク重視でしょうか?
ところでアメブロについてはGoogle Search Consoleからときどきレポートが届きますが
fc2では登録できなかったので、理由が登録はひとつだけしかできないからなのか、
アメブロよりも設定が難しく挫折したかはわかりませんが、
同じメアドでいくつもブログの登録が可能ならばもう一度試してみたいと思っています。

Akira

2020/02/12 (Wed) 02:48
vanillaice (Akira)

To toshさん

こんばんは ('0')/

search consoleはsearch console側にブログを登録した後(複数サイトの登録可です)コードを取得して、それをテンプレートhtmlの
</head>
のすぐ上に記載するだけでできますよ。
お時間があればやってみてくださいね。お疲れ様です :)

-----
作業漏れでトップページの見出しフォントが変更されていないようです(以下は過去コメントのコピペです)

>
.element-title {
で検索するとスタイルシート内に3箇所あります。最初の1つ目がパソコンでの見た目、2つ目がタブレット、3つ目がスマホです。
まず最初(1つ目)の内容

font: bolder 1.6rem/1.4 YuGothic, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

----- コピペここまで

現在トップページの記事タイトルだけが游ゴシックのまま残っています。変更の必要がなければそのままでもOKです。

tosh

2020/02/12 (Wed) 21:32

こんばんは

ありがとうございます。
サーチコンソールはご指摘のようにしてみましたがうまくいきませんでした。
以下のスクショの通り
https://blog-imgs-133.fc2.com/t/e/a/teastwest/screenshot.png

トップページの見出しフォントはご指摘の通りの配列だったのですが
念の為にコピペしてみましたが変わりませんでした。
でもサイズは前よりも大きくなったのでこれでいいかとも思ってます。

Akira

2020/02/13 (Thu) 19:59
vanillaice (Akira)

To toshさん

所有権の確認コードは

<meta name="google-site-verification" content="ここにユーザー固有の文字列">

この形です。今一度ご確認くださいね。
* 不正文字列なのでhtml的にはクリティカルエラー(致命的エラー)です。早急に修正してくださいね。

-----
フォントの書き換えは「過去コメントを参照してください」という意味で目印の意味で一部コピペしました。なので最初のガイダンスに戻って内容を再確認してくださいね、という意味であってコピペした内容に変更するという意味ではありませんでした。誤解を招く表現でごめんなさい。

.element-title
のフォント指定は現在
font: bolder 1.6rem/1.4 YuGothic, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif
になっていますので
font: bold 1.6rem/1.4 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, Meiryo, 'Yu Gothic', sans-serif;

今回は現在の内容を太字内容に変更、という意味です。今回は過去コメントの参照は不要です。
そのままでも良いということなので任意でお願いします。

----- 追記
ユニークアクセス数(UU)とページアクセス数(PV)の件の返答を失念しました。
例えばアメブロやライブドアなどでは一部ブロガーさんが「公式ブロガー」「トップブロガー」として優遇されています。アメブロの方はちょっとわかりませんが、ライブドアの方は運営算出で収益化されているはずです。その場合の基礎になるのは「PV」の方です。PV数が高ければ高いほど見返りが大きくなります。

で、元よりユニークが大きくならなければPVが増えるはずがないので両方大事といえば大事です。
検索流入の場合は基本はユニークですが、ブックマークやRSSなど「再訪」があればPVも自然と増える、という感じでしょうか。

個人のアフィリエイトの場合は「クリック型」「成功報酬型(クリック + 購入)」などの方式がありますので一概ユニーク・PVどちらが…とは言えません。
結局サイト自体の価値があがればその価値に見合った広告代になります。例えば有名ブログになって個人で広告主を募る場合などはPV数が重視されます。この場合クリックや成功報酬ではなく「このブログに広告を掲載するにはいくら」という形に変わってきます。まぁかなり有名にならないとなかなか無いですけども (´・ω・`)
各ブログサービスが有名ブロガーの引き抜きをするのは、PVを稼ぐ人・そうでない人が入り混じっていて、一部の「稼ぐ人」によってサービス全体のPVというのは上がりますよね。するとそのサービスに対する広告料が高くなる、という仕組みです。
Yahoo!閉鎖については分母は大きいけれど「稼ぐ人」というのが少なすぎた、つまり運営費と広告収入との折り合いがつかなくなった、というのが敗因だと思います。

なので基本は双方がセットですね。ただ感覚的に旧Yahoo!ブロガーさんだと「ユニーク」を重視している人が多いような。あくまでも個人感です。どこのサービスでもよくあるんですが「マイページのアクセス数とxxxで見たアクセス数が違う」みたいな。
ユニークかPVか、クローラーを弾いているか、などが誤差です。

tosh

2020/02/13 (Thu) 23:48

ありがとうございます。
フロントページのフォントは変更できました!
サーチコンソールについてはもう少し時間がかかりそうです。
頑張ります・・・

tosh

2020/02/15 (Sat) 11:06

To Akiraさん

ご丁寧な追記をありがとうございます。
よくわかりましたが、なかなか奥が深いですね・・
ヤフブロの敗因というのもなるほどです
使い勝手が良いから誰でも入りやすい分、発信力のある稼げる人が少なかった。
お友達感覚で日記的にアップされている方が多かったように思います。

Akira

2020/02/15 (Sat) 21:02
vanillaice (Akira)

To toshさん

こんばんは ('0')/

FC2はYahoo!と比べてかなり間口が広く、特に検索流入は重要ですね。
お疲れ様です :)

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

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