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

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

テンプレート 配布中テンプレート
2016/04/10
94
vanillaice (Akira)
vanillaice (Akira)
LivingStandardRWD
Alternativeテンプレート

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

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

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

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

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

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

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

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

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

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

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

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

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート
  • スマートフォンでコメント送信ボタンのテキストが見づらい件修正

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

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

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

【コメント送信ボタン修正】
#sendbtn, で検索し、このルールセットの transition: .3s ease-in-out; の直下に color: rgb(51,51,51); を追加。インデントにタブや全角スペースを利用しないよう注意。

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

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

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

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

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

①について

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

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

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

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

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

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

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

#community" で検索するとhtml内に1箇所ありますので #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: 50px;
}
③について

<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
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • はてなブックマーク, Pinterestのシェアアイコンを追加
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 全記事リストと検索結果にコメント数とトラックバック数表示を追加

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

更新履歴 2018.2.10

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

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

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

更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2017.1.13
  • RSS新着サムネイルをFC2独自変数での表示に切り替えました
更新履歴 2016.10.9
  • FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
  • 関連記事サムネイルの整形
  • ベンダープレフィックスの整理
  • その他微調整

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

こんにちは へくせんびーすとです(ニコ)
海外ドラマGRIMMがおもしろすぎ 続き気になりすぎでハゲそう (´ぅω・`)

おるたなてぃぶ
互い違いタイルレイアウト。承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

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

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

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

Cautions before asking for something.

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

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

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

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

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

Related post

Comments  94

ちこりん
2016/04/10 (Sun) 15:54

No title

楽しみです!
いつも素敵なテンプレートありがとうございます!(^ ^)

yousinkai
2016/04/10 (Sun) 17:32

ブログの名前の位置移動について

心眼流 空手道 桜神会館 の名前の位置を左側にずらしたいのですが移動方法を教えていただけないでしょうか?

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

Akira
2016/04/11 (Mon) 09:43

To ちこりんさん

こちらこそありがとうございますー ∩(●'ᴗ'●)∩

vanillaice (Akira)
Akira
2016/04/11 (Mon) 09:58

To yousinkaiさん

ありがとうございます。
テンプレートはSakura_Nightglow(夜桜背景)でお間違いないでしょうか。
Ctrl+Fキー検索

p.ttl

詳細は以下の通り
p.ttl {
margin: 0 auto;
max-width: 600px;
font-family: 'Great Vibes', cursive, georgia;
font-size: 35px;
padding: 65px 0 10px;
text-align: center;
}

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

p.ttl {
margin: 0 auto;
width: 80%;
max-width: 1200px;

font-family: 'Great Vibes', cursive, georgia;
font-size: 35px;
padding: 65px 0 10px;
}


続きまして検索。

p.ttl a

詳細は以下の通り。
p.ttl a {
padding: 0 1em;
}

上記を削除

続きまして検索

.sub

詳細
.sub {
margin: 0 auto;
max-width: 650px;
padding: 0 8px;
font-family: 'Great Vibes', cursive, georgia;
font-size: 15px;
color: rgb(150, 6, 74);
text-align: center;
}

赤字部分修正で以下の通り。

.sub {
margin: 0 auto;
width: 80%;
max-width: 1200px;

font-family: 'Great Vibes', cursive, georgia;
font-size: 15px;
color: rgb(150, 6, 74);
}



--------

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

いちご
2016/04/14 (Thu) 22:15

はじめまして

.
スマホ表示(トップページ)の画像に個別記事へのリンクは、付けられませんか?

教えてください。

お願い致します。

きろろ
2016/04/15 (Fri) 00:25

タグクラウドについて

こんばんは、きろろです<(_ _)>

Alternative、DLさせていただきました!(^^)!
これ、待っていたんですよねw

で、さっそく本題に……

ユーザタグ、TagCloudなんですが、
なぜか一個ずつ縦に表示されてしまいます。

以前、AkiraさんのところでTagCloudをこうすればいいよ、的な記事を読んで、
プラグインの書き直した記憶があるんですよね。

それからずっといじってないのですが、
なぜ今回、このテンプレートだけTagがずらっと縦に一個ずつ表示されてしまうのでしょうか?

ちなみに3カラム目にTagを、持って来ました。
Akiraさんの配置と一緒にしてみたんですが、やはり縦に表示されてしまいます。

お暇な時に、レクチャーをお願いします<(_ _)>

きろろ
2016/04/15 (Fri) 03:44

TagCloudについて

連投で申し訳ございません。

ご報告までに。
プラグインを入れ直したら、ちゃんと表示されました<(_ _)>
Alternativeでも、問題なく表示されてます。

お騒がせしました<(_ _)>

vanillaice (Akira)
Akira
2016/04/15 (Fri) 08:48

To いちごさん

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

結論から言うと、付けられます。
これちょっと不親切だったかもですね。ごめんなさい。
他にも付けたい方がいらっしゃるかもしれませんので、後ほど記事の方に手順を掲載しておきますね。

Akira
2016/04/15 (Fri) 08:50

To きろろさん

きろろさんこれね、理由があるんです。
公式のプラグインについては縦にならないような装飾を私の方で組んでます。
以前ご紹介したタグクラウドのパターンだと一手間必要。
その件に関連して記事を出そう出そうと思いながら半年ほど過ぎてしまいました(笑)
お題目としては
「プラグインにはclassまたはid名をつけておきましょう のススメ」
今日書けたら書きますね。
申し訳ないです。

いちご
2016/04/15 (Fri) 18:36

こんばんは

.
返信&回答ありがとうございます。

挑戦してみます。

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


Akira
2016/04/16 (Sat) 11:44

To いちごさん

お手数おかけします。
よろしくお願いします (*_ _)

-
2016/04/17 (Sun) 21:23

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/04/17 (Sun) 23:18

To Alternative 過去記事のfloatが解除された件 内緒さん

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

過去記事でフロートされていたものが全て無効に、ということですが、
ソース内にfloatの文字を見つけることができませんでした。
で、推測なのですが
クラス名にpull-leftというのがありますよね。
これはもしかしたら以前お使いになっていたテンプレートの「独自クラス」ではないでしょうか。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-289.html

恐らく間違いないと思います。
独自クラスの問題というのは、テンプレートを変更してしまったら全て無効化されてしまう点にあります。
同じ製作者のテンプレであればたぶん同じクラスが使われていると思いますが、
別の製作者が全く同じソース内容を記載していることの方が稀というか奇跡(笑)

対処法
・以前と同じ製作者様のテンプレートで選びなおす
(絶対とは言い切れませんが)

・独自クラスの該当内容を当該テンプレに移植する
(これは内緒さんとその製作者様との間のことですので私はどうこう言えません)

・記事内でfloat処理できるように書き直しをする(独自クラスに頼らない)

このいずれかでしょうかね (´・ω・`)
以前のテンプレからの移植のお手伝いやソース内容への言及は致しかねますのでごめんなさい (*_ _)
おすすめは最後の「書き直す」なんだけども(笑)
結構大変な作業ですよね。
移植については私はなんとも言えませんですー (´・ω・`)
(心象が良くないのは確かです。や、どうだろう。わからん(笑))

みなみ
2016/05/06 (Fri) 15:58

No title

トップページで表示される
サムネイル画像サイズと文字数の変更は可能なのでしょうか?
宜しくお願いいたします。

Akira
2016/05/07 (Sat) 02:02

To みなみさん

こんばんは。

できるにはできますが、
・画像サイズを大きく? or 小さく?
・縦横比を変更?
・文字数は増やす? or 減らす?

この如何によってお伝えする内容が異なります。
画像に関しては、レスポンシブデザインですから画面サイズが変われば画像のサイズも変わりますので、どこを基準にされるかというのがまず一つ。
文字数の方は、このテンプレについては「文字数」での制御ではなく「高さ」で制御しています。
(ちなみにFC2要約記事で抽出できる文字数は最大200文字までです。)
でないと左右(画像とコンテンツ内容)とのバランスを取ることができません。
いずれにしてもかなり苦労すると思われます。

みなみ
2016/05/09 (Mon) 02:56

ありがとうございます

トップページサムネイル画像サイズを小さくし文字数を減らせたらと思いまして・・・

いずれにしてもかなり苦労するとありましたので、

その知識がありませんので諦めこのままご使用させていただきます。

ご丁寧にお教えいただき有難うございました。

Akira
2016/05/09 (Mon) 14:30

To みなみさん

こんにちは (・ω・)ゞ

共に縮小の方向なんですね。
一応手順をお伝えしておきます。

① サムネイルを小さく

こちらはサムネイル自体を小さくするということよりも、全体のコンテンツ幅を縮小という形が一番良いと思います。
Ctrl+Fキー検索

#container

4つマッチしますが一番最初のものが対象です。
CSSソース内の上の方にあります。
この項目の
width: 80%;


width: 70%;

に変更。
ブラウザの中央にギュっと凝縮されたような見た目にはなりますけれど。
続いて検索

#wrapper

この項目の
min-width: 80%;
の80を変更した数字と同じものに。

-------
② 文字数を減らす

こちらも文字数を減らすというよりも高さを減らします。
Ctrl+Fキー検索

.topentry-description

2つマッチしますので最初のものを。
項目
height: 7.5em;


height: 6em;

あるいは 4.5em あたりに変更します。

-------

以上ですが、いずれにしてもおすすめではありませんし、画面幅との兼ね合いもありますのでブラウザを大きくしたり小さくしたり、という確認をされながら進めてくださいませ。

みなみ
2016/05/10 (Tue) 10:59

ご丁寧にありがとうございます。

一度挑戦してみます、多分元に戻しそのまま

使用させていただくと思います(笑)

vanillaice (Akira)
Akira
2016/05/12 (Thu) 00:15

To みなみさん

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

はい。その方が良いと思います(笑)
お時間のあるときにでもお試しください :)

みなみ
2016/05/12 (Thu) 14:47

<table width="600" border="0" cellpadding="0" cellspacing="0">
に横幅600の画像と改行し文章を入力した場合、パソコンで見る分には
問題ないのですがスマホで見るとずれているのですが表がダメなのでしょうか?

Akira
2016/05/12 (Thu) 16:03

To みなみさん

表が「ずれる」というのはどういった意味合いでしょうか。
画面からはみ出す、ということかしら (´・ω・`)
tableはそうですね。それがtable(表)の特徴です。

Alternativeはレスポンシブデザインですので、タブレットやスマホではコンテンツの幅をリサイズする設定になってます。
tableへの横幅設定に600pxという具体的数値を用いられますと、スマホの横幅は600pxありませんので当然はみ出します。
tableはdivと異なり、自身の外側のサイズを重視しません。
tableは外ではなく内側のサイズ(セル内容)によって横幅が決定します。
例えば600pxと指定していても、仮にセル内容が改行なしで600pxの幅を超えた場合
全体幅は指定の600を無視してどんどん大きくなります。
(このソース内容では、という意味です。回避する方法はあります。)
ですからtable自体がレスポンシブに向いていないというのは事実です。

回避策
① max-width: 100%;
を指定

これはブラウザ依存です。
600pxの指定だけれども、画面の100%が600pxに満たない場合にはそこで広がりをストップ。
という指定。
正確なCSS解釈としては
「tableにmax-width」は効かない」
というのが正しいですが、iPhoneのSafariなどでは効きます(笑)
パソコンでもChromeやFirefoxでは効きません。
で、今「パソコンでは大丈夫」とのことですが、ブラウザがChromeやFirefoxであれば画面縮小ではみ出すはずです。
tableへのmax-width, min-widthはたぶんie11では効くかも(確認してません)
でもまあ、とりあえずiPhoneでは(今のところ)効きます。
この方法を用いるのならばCSSソースをCtrl+Fキー検索されますと

table {
word-break: break-all;
}

という項目がありますので、一部追加で以下の通り。

table {
word-break: break-all;
max-width: 100%;
}

この方法の利点 = 作業が簡単(笑)
デメリット = 本来は正しくない挙動

② tableへの横幅指定に%を使う

これが一番良い方法です。
テンプレートのソースを編集するのではなく、記事内ソース(今みなみさんが掲載されている内容)を修正します。

width="600"



width="100%"

あるいはそれ以下に設定します。
100%にしておくとスマホ画面で横幅いっぱいになり、画面幅を超過することはありません。
デメリット = 600px指定がなくなるので当初の見た目が思い通りにならない。
あるいは①の内容を踏襲して以下の修正も可能(正確なCSSでないというデメリットも受け継ぎます)

<table style="width: 100%; max-width: 600px; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="padding: 0;">

ちょっと難しいかもしれませんが ^^;
掲載されているソース内容自体がhtml4の古い記述方式です。
html5に則した内容は上記です。
cellspacingやcellpadding, border という属性は既に廃止されています。

③ オーバーフローでスクロール

こちらはtableが超過してしまったら横スクロールバーを出してテンプレ全体の横幅が崩れないようにする方法です。
テンプレではなく記事内ソース修正。

<div style="width: 100%; overflow-x: auto;">
ここにtable内容
</div>

こうしてdivで囲います。
今は改行してわかりやすく書いていますが、実際の記述時は
<div><table>〜〜〜</table></div>
と横繋ぎで書いてください。
(FC2エディターの表作成ツールを利用している・改行をhtmlタグに限定していない、というのを前提に)
デメリット = スマホだとスクロールバーが出ていることに気がつきにくい。

---------

tableはちょっと難しいですよね (´・ω・`)
新エディターから表作成が削除されているのも無理からんことです。
こちら当ブログ内参考記事です。

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

みなみ
2016/05/12 (Thu) 18:43

度々申し訳ありません

何度も申し訳ありませんm(_ _)m
こんな感じでしょうか?


<table style="width: 100%; max-width: 600px; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="padding: 0;">見出し</td>

</tr>

<tr>
<td style="padding: 0;">画像</td>

</tr>

<tr>
<td style="padding: 0;">本文</td>

</tr>

</table>

Akira
2016/05/12 (Thu) 19:49

To みなみさん

もしかしてなさりたいことは、
「画像の横に文章を並べる」
ということでしょうか。
それならばtableを使うよりもfloatをお使いになってはいかがでしょう。
ちょっとお待ちくださいね。
実際の画像を見ていただいた方がわかりやすいと思いますので準備します。

みなみ
2016/05/12 (Thu) 21:40

http://yazaemon23.blog45.fc2.com/blog-entry-2623.html
このような感じで縦並びで画像size統一でと考えてまして・・・
1記事に付き画像6枚で
本文で画像1枚と詳細
追記で画像5枚と詳細
と思っております。
その為雛形のような表があると記事がばらつかず
書きやすいかと思いまして。

vanillaice (Akira)
Akira
2016/05/12 (Thu) 22:06

To みなみさん

画像と文章を横並びにしないのですね。
ということはtableを利用する必要は全くないです。
単にclassを指定してサイズ制御すれば良い話し。
文章は画像横からの改行でそのすぐ下に書くと良いですね。

img に
class="image-size"
を追加(名前はこれでなくてもOKです)
こんな感じ ↓

<img src="画像アドレス" alt="" class="image-size">

これは記事を書く時に毎回記述します。
そしてテンプレートの方へはCSSソース内に

.image-size {
width: ●●px;
height: auto;
}

と入れておきます。
CSSソース末尾で構いません。
こうしておけばimage-sizeというクラスを持つ画像は全て同じ横幅での掲載になります。
tableは本当に必要な時以外極力お使いにならないことをおすすめ(笑)
ですが上で掲載して頂いたtableタグでも大丈夫ですよ。
ただしmax-widthは基本的に「効かない」というのをご理解頂いた上で、ということになります。

みなみ
2016/05/12 (Thu) 22:43

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

Akira
2016/05/13 (Fri) 16:41

To みなみさん

いえいえ。
お役に立てたなら良いんだけど ^^;

-
2016/08/15 (Mon) 19:08

管理人のみ閲覧できます

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

タケタケ
2016/08/15 (Mon) 19:11

食彩夜話  さんのテンプレート

お世話になります。
追伸ですが、FC2を利用していますが
食彩夜話さんのテンプレートは配布されていますか?

もし配布されているなら
どこにあるのでしょうか?
FC2で探しても見つかりません。
また、もし配布されていない場合
食彩夜話さんのような白基調の
しんぷるなテンプレートを利用したいのですが
どうすればよろしでしょうか?

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

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

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

> カスタマイズを簡単に〜

どんなカスタマイズをされるかによって難易度に大きな開きがありますので、「簡単にできる方法」というのはちょっと厳しいです ^^;
現在のところ私のテンプレートに有料のものはありません(全て無料でご利用頂けます)。
そして有料サポートも行っておりません。
なので気軽にその都度お尋ねください(笑)

> 背景を白に

Ctrl+Fキー検索

/* 注)全体背景色 White Smoke(nearly) */

上記コメントのある行が対象です。

background-color: rgb(245,245,245);



background-color: white;

に変更してくださいね。

Akira
2016/08/16 (Tue) 16:57

To タケタケさん

食彩夜話さん
はtakさんのことですかね (´・ω・`)
彼の方はBeHappyをご利用頂いていると記憶していますが、変更していなければ、です。
BeHappyのページ(DLリンクは記事内にあります) ↓

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

このテンプレでない場合は食彩夜話さんのアドレスを鍵付きでお知らせください。
私のテンプレートではない場合もあるかと思います(笑)
よろしくお願いします。

いますず
2016/10/25 (Tue) 15:39

初めまして

こちらのテンプレートをDLさせていただきました。
質問なのですが、サイドバーにある「Follow Me」のアイコンを変更したいというのはサイドバーの形状変更にあたりますか?
facebookを削除してmixiを追加したいといったことは可能ですか?
色々タグ内を探したのですがどこをどのようにいじればいいのかがわからず…
よろしければ教えてください。
よろしくお願いします。

vanillaice (Akira)
Akira
2016/10/25 (Tue) 18:59

To いますずさん

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

> 「Follow Me」のアイコンを変更したいというのはサイドバーの形状変更にあたりますか?

いえ。大丈夫ですー。
Follow Meのアイコンの仕組みをご説明しますと、
「Font Awesome」という海外のサイトから各社のブランドアイコンを表示させており、これらは画像とはいえ「SVG」という特殊なものです。
SVGの特徴
・ フォントと同じ感覚でサイズや色の指定ができる
・ 拡大しても解像度にほとんど影響が出ない
ですから通常のJPGなどの画像とは一線を画するものです。
そして海外のサイトですので、日本のカルチャーとは縁がありません。
つまりミクシィのアイコンがありません (´・ω・`;)

何が言いたいかというと
「Follow Me内にある他のブランドアイコンと形状を揃えたい かつ 実物のロゴにこだわるのであれば」という前提で
・ 画像をご自分で用意して頂く必要あり(背景透過PNG, 60px四方, 色は「白」が妥当)
これですね (´・ω・`)

http://developer.mixi.co.jp/about-platform/policies/image_guidelines/

上記ページにミクシィのブランドロゴが掲載されていますが、
ミクシィのロゴは

ですので、テキストで代替にするという手もあります。
「m」という表記で「ミクシィ」だと理解してもらえる、という判断をいますずさんが出来るのであればそちらがおすすめです。
こちらを採用される場合は
Ctrl+F(Windows)/ Command+F(Mac) キー検索

fbへのリンク不要な方この一行削除

この1行を

<li><a href="#" target="_blank" class="sns-a"><span class="fa mixi">m</span></a>

と修正してください。
リンクの設定は # の部分をリンクアドレスに置き換えます。
これだけですとmのフォントが細いので、気になる場合は上記の

<span class="fa">

の部分を

<span class="fa mixi" style="font-weight: bold;">

にしてみてください。

=======

まとめ
方法二択

① 画像を用意する(この方法を取られる場合はご連絡ください。その後に設定の仕方をお伝えします)
② mのテキストを利用する(おすすめ)

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

----------- 追記

ごめんなさい。追加です。
マウスホバーの際に背景色を変えたい場合には ミクシィのブランドカラーをお使いになると良いと思います。
CSSソースの末尾で構いませんので

#sns-ul a:hover .mixi {
background-color: rgb(209,173,89);
}

を追加してください。

いますず
2016/10/25 (Tue) 19:20

ありがとうございます!

丁寧にありがとうございました!
ちょっと検討してみます。
もし方法1を使うとなったらまた書き込ませていただくと思います。
よろしくお願いします。

Akira
2016/10/25 (Tue) 19:36

To いますずさん

はい。了解です ( ゚Д゚)ノ

-
2016/11/02 (Wed) 22:05

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/11/03 (Thu) 00:41

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

ご事情理解致しました。
ご丁寧にありがとうございます :)

> ヘッダー画像設定

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

.header-banner

CSSソース内に上下並んで2箇所見つかりますが、上の方が対象です。
この項目を以下の通り修正。
(コピペで差し替えてください)

.header-banner {
margin: 0 auto 60px;
background: url(画像アドレス) center center /cover no-repeat;
opacity: 1;
padding: 110px 0 90px;
-webkit-transition: all .7s ease;
transition: all .7s ease;
}


① 60pxの数字はヘッダーとコンテンツとの空白指定ですので、ご希望の数値に変更可です。

② ヘッダーの上下幅はあまり大きく作っていませんので、画像はかなり横長になります。
設定する画像の縦横比は不問(サイズは横1000px以上が理想です)。
不問とはいえ横長の方が望ましいです。
縦が短すぎると感じられる場合には

padding: px 0 px;

上記で調整してください。
デフォルトは 上110px、下90pxですので、それぞれ数字を大きくするとヘッダー自体の縦幅も大きくなります。
(間に挟まれた 0 は変更や削除しないようご注意ください)

③ 赤字の center は画像の左右合わせ位置、ピンクの方の center は上下合わせ位置の指定です。
画像のメインオブジェクトが左寄り、上寄りなど、中央基準では表示の具合がよろしくない場合には、どこに画像のメインがあるかをお考えになられまして適宜修正してください。
例えば
「左右は右寄り、上下は下寄り」
right bottom

「左右は中央、上下は上寄り」
center top

左右で可能な値 --- left, center, right
上下で可能な値 --- top, center, bottom

④ 設定画像によっては文字が見辛くなります。
その場合の修正箇所は

#blog-name-container

text-align: center; の下に
color: 色コード;
を「追加」

#blog-title a

color: rgb(51,51,51); を
color: 色コード;
に「修正」

サンプル
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/adeaowth_zpsfaulmbfk.jpg

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

-
2016/11/04 (Fri) 14:52

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/11/05 (Sat) 14:14

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

お出来になったようで良かったですー。
作業お疲れ様でした :)
お気遣いもありがとうございます (●'0'●)/

-
2016/11/26 (Sat) 19:28

管理人のみ閲覧できます

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

Akira
2016/11/28 (Mon) 15:43

To Alternative スマホ表示の件 内緒さん

現在他所から投稿しておりますー。
帰宅してから改めますね。
取り急ぎ「拝見しました。」というお知らせです。
お手数おかけします。
よろしくお願いします。

vanillaice (Akira)
Akira
2016/11/28 (Mon) 16:48

To Alternative スマホ表示の件 内緒さん

① スマホでのトップページサムネイル画像の高さをiPhone縦画面サイズ見切れなしで表示したい

上記の解釈で合ってますでしょうか。
かなりの縦長になりますのでPC表示で採用してしまってはこのテンプレでは体裁が取れません。
ですからスマホ限定、ということでお願いします。
スマホとPCのユーザーエージェントを判別して切り替えるのではなく、
「画面サイズが小さくなって縦一列のレイアウト(シングルレイアウト)になった時に」
という方式でお願いします。
(UA判別の場合はJSコードを組む必要が生じます)

お写真の見切れを無くしたい、というのがご希望の主旨だと思うのですが、
一口に「iPhoneで撮った〜」と言っても、バージョンのよって縦横比が異なります。
整数比で言うと
iPhone4は2:3
iPhone5は40:71
iPhone6は375:667
iPhone6plusは9:16
全ての画像のサイズを揃えようと思った場合に最も大切なのは「縦横比」です。
あるいは
画像のサイズがまちまちで構わない、ということであれば、
元画像を単純に表示させれば良いだけですが、このテンプレではhtmlを大きく書き直すことになりますので今回後者についてはお断りさせてください。

---------

どのバージョンに合わせるかが不明ですが、現況で最もユーザー数が多いであろうiPhone6を基準にします。
Ctrl+F(Windows)/ Command+F(Mac)キー検索

@media screen and (max-width: 767px)

5つヒットしますが、一番最初のもので直下に
.liquid-wrapper:before {
と記されているものが対象です。
この項目を以下の通り修正

@media screen and (max-width: 767px) {
.liquid-wrapper:before {
padding-top: 177.9%;
}
}

赤字部分が修正箇所です。
これで縦長にはなりますが、仮に横長画像がサムネイルになった際にはかなりぼやけるであろうことをご承知おきくださいね。
(寸足らずは起こりません)

-----------

② スマホのトップページサムネイル文字数を少なくしたい

こちらは行数でheightを計算してください。
1行のみなら 1.5em
2行なら 3em
3行なら 4.5em
....
と、1.5の倍々で計算します。
修正箇所は

@media screen and (max-width: 767px)

同じく5箇所出ますが今度は5つ目の、直下に
.topentry-description {
と表記されているものが対象です。
この項目を

@media screen and (max-width: 767px) {
.topentry-description {
height: auto;
max-height: 数値em;
}
}

上記の通り修正。
以上です。よろしくお願いします。

-
2016/11/29 (Tue) 17:02

管理人のみ閲覧できます

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

Akira
2016/12/02 (Fri) 12:38

To Alternative画像縦サイズの件 内緒さん

お返事大変遅れております (*_ _)
時間が取れず申し訳ありません。
近日中に改めて回答させてくださいね。
よろしくお願いします。

-
2016/12/03 (Sat) 14:00

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/12/04 (Sun) 13:58

To Alternativeサムネイル高さの件 内緒さん

お返事大変遅れてしまいました。
申し訳ないです (*_ _)

> 元のサムネイル画像の高さサイズをもう一個分増やした高さに変更〜

これはデフォルトデザインの2倍の高さにしたい、という解釈で合ってますでしょうか。
デフォルトの縱橫比率は横を100%とし、それに対する高さが102%です。
若干縦長のデザインになってます。
先回お伝えしたカスタマイズ数値が177.9%で、iPhone6系列の画像をほぼそのまま踏襲するサイズ設定です。
で、今回「デフォルトの2倍」をご希望ということですが、つまり200%になりますから先回のものよりもさらに縦長になってしまいます。

● 先回数値設定を変更した同じ箇所(177.9%)をご希望に沿うようにご自分で目視確認されながら調整されると良いかな、と思います。
このパーセンテージ指定は「横を100%と換算した場合の縦の比率」を表します。
つまり50%ならば縦サイズは横サイズの半分に。
100%ならば横と縦は同等のサイズになります。

● デフォルトの画像の「位置合わせ」について
位置合わせというのは、画像は正方形であることの方が稀ですから、ほぼ正方形に近いマスの中に収めようと思った時には横・縦のいずれかが見切れることになります。
デザインとしては「寸足らず」が最も見苦しいので、寸足らずを起こさないためにはどちらかを見切れさせることに。
例えば横200px縦200pxのマスに、横200px縦100pxの画像を横を基準に入れてしまうと、縦が100px足りません。
逆に縦の方を200pxに(拡大することになります)指定すると、横は拡大率に従って400pxになり、200px分は収まりませんので見切れることになります。
ここで大事なのは「どこを表示して」「どこを見切れさせるのか」です。
内緒さんの場合はお顔が左右軸ではほぼ中央、上下軸では上の方に配されていることが多いので、
左右中央・上下中央というデフォルトの指定を変更されても良いかと思います。
Ctrl+F(Windows)/ Command+F(Mac)キー検索
(htmlソース内です)

img-liquid-fill

くれぐれも、htmlソース内です。CSSソースでなく。
この近接を以下の通り修正。

center top /cover no-repeat

デフォルトで赤字の部分は center になっていますので、ここを top に変更。
すると画像の左右軸は中央、上下軸は上を基準にして表示しますので、この部位にあたる画像オブジェクトは見切れることがありません。

* オブジェクト = 画像内に写っている人・物(人物の顔などメインになるもの)

これが画像内でどこに配置されているかを確認。

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

まとめ

① %の設定を目視確認しながら再調整(150%ぐらいが妥当な気がします)
② htmlソースの画像オブジェクト表示位置を変更


以上です。
返信が遅れましたことを再度お詫びします。
ごめんなさいね。

-
2016/12/05 (Mon) 18:17

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/12/08 (Thu) 16:32

To Alternativeサムネイルの件(解決) 内緒さん

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

上手く行ったようで安心しました。
中学生の息子さんがいらっしゃるんですね。
お母様がお綺麗でいらっしゃるから、きっとイケメン。
うちも長女が今中学2年生です ( ゚Д゚)ノ

こちらこそご不便をおかけしました。
ありがとうございます :)

-
2017/03/30 (Thu) 17:20

管理人のみ閲覧できます

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

Akira
2017/03/30 (Thu) 23:12

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

お世話になっております (●'0'●)/

> ヘッダー画像を数枚増やしページが切り替わると違う画像に〜

これは
① ヘッダーをスライドにする、という意味でしょうか。
それとも、
② 各ページ種毎に異なるヘッダー画像を表示したい、という意味でしょうか。
それとも、
③ ヘッダー画像をランダム表示にしたい(スライドするわけではなく、どのヘッダー画像になるかランダムに決定)、でしょうか。

①は複雑なJS及び多くのhtml,CSSの追加が必要ですのでお断りさせてくださいね。
そして内緒さんご自身や記事の著作主さんがおっしゃる通り、その方法だとSEO的な問題はありますね (´・ω・`)
その方法にあたるのは①です。

基本的にテンプレートにJaueryプラグインの「追加」をするお手伝いはお断りしています。
②のような「ページ別でヘッダー画像を分ける」程度、あるいは
③のような簡素なJSであれば良いのですが。

こちらお返事待ちにしますね。
よろしくお願いします。

-
2017/03/31 (Fri) 03:22

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/04/01 (Sat) 13:25

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

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

ちょっとですね、私のお返事内容がひどい ( ̄∀ ̄;)
誤字と間違いだらけ ><

X その方法だとSEO的な問題はありますね
✔ 「問題があったので修正しました」という「修正前の内容」だとSEO的な問題はありますね

新しい方法(つまり該当ページに掲載されている内容)では問題ありません。

X その方法にあたるのは①です
✔ その方法にあたるのは③です

番号間違えました。ごめんなさい ( ̄∀ ̄;)

=========

ランダム表示という結論で大丈夫でしょうかね。
で、これからお伝えする方法は内緒さんがお調べになったものと大差ありません。
(記事主さんのコード内容とは異なりますが理屈は同じです)
いずれもSEO的な問題は生じません。

① </body>の直前に以下を追加

<script>
RANDOMimageURL = new Array();
RANDOMimageURL[0]="画像アドレス";
RANDOMimageURL[1]="画像アドレス";
Rndm = Math.floor(Math.random()*RANDOMimageURL.length);
document.getElementById("banner-bg").style.background="url("+RANDOMimageURL[Rndm]+") center center /cover no-repeat";
</script>

3枚目以降の追加は
RANDOMimageURL[2]="画像アドレス";
RANDOMimageURL[3]="画像アドレス";

上記のように[数字]
数字をひとつづつ増やして記載してください。

② html修正
Ctrl+F(Windows)/ Command+F(Mac)キー検索

<header class="header-banner">

上記を以下の通り追加修正

<header class="header-banner" id="banner-bg">

③ CSS修正
検索

.header-banner

こちらの background の一行を削除
続いて

-webkit-transition: all .7s ease;
transition: all .7s ease;


この2行を削除
以上です。

あくまでもランダムですので、同じ画像が立て続けに表示されることもあります。
全ページにランダム表示が適用されます。
また、別ページへ移動した際の表示画像をコントロールすることはできません(ランダムです。必ず遷移前のページと別にする、などの操作はできません。)
これらについては事前にご了承くださいね。
よろしくお願いします。

-
2017/04/03 (Mon) 00:54

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/04/03 (Mon) 13:39

To Alternative ランダムヘッダーが上手くいかない件 内緒さん

scriptコードを書く場所は
</body>
直前です。
今書いてあるのは <body>の直前ですよね。
<body> ではなく </body> です。
htmlソースの最後方にあります。

それから[0]に指定している画像がNot foundということで、URLが消失しています。
画像のアドレスと併せ、今一度ご確認くださいね。
よろしくお願いします (o'ω')ノ

-
2017/04/04 (Tue) 18:51

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/04/05 (Wed) 10:50

To Alternative ランダムヘッダーの件 内緒さん

出来ましたね。安心しました :)

はい。受験生でございます(笑)
息子さんとお花見楽しんでくださいね。
ありがとうございます :)

-
2017/04/30 (Sun) 21:27

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/05/01 (Mon) 20:23

To Alternative文字大きさの件 内緒さん

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

> ①トップページの記事要約の文字サイズと ②各記事本文の文字サイズを大きくしたい件

① トップページ
Ctrl+F(Windows)/ Command+F(Mac)キー検索

.topentry-description {

CSSソース内に1箇所あります。
この括りの

overflow: hidden;

の直下に以下を追加。

font-size: 数値px;

デフォルトは13pxですので、それ以上の数字でお願いします。

====

② 各記事本文
検索。

.inner-contents {

こちらも1箇所あります。

font-family: 省略;

の直下に以下を追加。

font-size: 数値px;

こちらも同じく13pxがデフォルトです。
ここで数値を変更しても
・関連記事リスト
・タグ
の文字はそのままの大きさで残ります。
上記2要素の変更も必要なようでしたら、
検索

.relate_dl,

この括りの

font-size: 13px;

赤字の数値を変更。こちらが関連記事リスト。
タグは

.tags {

の同じくfont-size: 13px; の数値を調整してください。
よろしくお願いします。

-
2017/05/01 (Mon) 22:06

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/05/01 (Mon) 23:18

To Alternative文字大きさの件 内緒さん②

> ②の件
.inner-contents の内容は以下のようになっているはすですので ↓

.inner-contents {
font-family: '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';
}

これをこう追加修正です ↓

.inner-contents {
font-family: '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';
font-size: 数値px;
}

よろしくお願いします (o'ω')ノ

-
2017/05/02 (Tue) 12:09

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/05/02 (Tue) 21:49

To Alternative文字大きさの件(完了のご報告) 内緒さん

良かったです。
作業お疲れ様でした :)

ヴィオラ
2018/01/13 (Sat) 20:02

テンプレートのカラムについての質問

はじめまして。
先ほどはよく分からず、別のカテゴリにコメントしてしまい申し訳ありませんでした。m(._.)m
それでは改めてお願いいたします。
今現在「Alternative」を使っているんですが、
今まで2カラムで右側にプラグイン画面があったんですが、
昨日からプラグイン画面が下になってしまいました。
もちろん何も触ってはいません。
これはテンプレの仕様が変わったのでしょうか?
もし元に戻せるなら戻したいと思うのですが、可能でしょうか?
お忙しい中、申し訳ありません。どうぞよろしくお願いいたします。

ブログ名「人形ときどき犬猫」http://masachi999.blog.fc2.com/

Akira
2018/01/13 (Sat) 21:46

To ヴィオラさん

ご協力ありがとうございます。
スマホからの返信だと専用記事への誘導もめんどうになってしまって。
怠惰ですみません ^^;
(今はパソコンからです)

-------
> プラグイン画面が下になってしまいました〜テンプレの仕様が変わったのでしょうか?〜

外的な要因で既存のテンプレート内容が勝手に変わってしまうことはありません。
何もカスタマイズせずにレイアウトが崩れた場合は
・ブラウザやOSのアップデート(バグ)
・FC2の一時的不具合
・記事内で利用したhtmlに起因
大抵はこのいずれかです。最も多いのが最後の「記事内容に起因」です。

------
トップページと個別記事を5ページづつ確認しましたが、「カラム落ち」しているというページを確認できませんでした。
特定のページで起こっているのであればそのページの該当URLをお知らせください。

もしかしたら「レスポンシブテンプレート」の意味をご理解頂いていないのかもしれません。
その場合は「カラム落ち」ではなく「画面幅に応じたカラムの並べ替え」であり、カラム落ちや不具合ではありません。(カラム落ちの場合は落ちたカラムが左に寄せられ、綺麗に整列することはありません)

2カラムを常に維持したい場合には固定幅テンプレートに変更されることをおすすめします。
また、レスポンシブはスマホ版を必要としませんので、パソコン・タブレット・スマートフォン等全てのデバイス間共通でお使い頂けます。
レスポンシブの利点を活かすにはスマホ版の非表示設定をお願いしたいところですが強制は致しません。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-491.html
https://vanillaice000.blog.fc2.com/blog-entry-220.html#object26
https://vanillaice000.blog.fc2.com/blog-entry-605.html

ヴィオラ
2018/01/13 (Sat) 22:42

ありがとうございました!

直りました!
PCにかなり疎いため、
このようなことに貴重なお時間を取らせてしまって、申し訳ない限りです。
ブログをやるにあたって、少しくらいの勉強は必要なのだとつくづく身に沁みました。
このたびは、本当にありがとうございました。

vanillaice (Akira)
Akira
2018/01/13 (Sat) 23:31

To ヴィオラさん

後者の方でしたか。
後々の管理も楽ですのでこの機会に是非スマートフォン版の非表示を。
ただしつこいですが強制ではありません。
レスポンシブの利点などお読み頂きましてご自身で選択をお願いします。
お疲れ様でした :)

ヴィオラ
2018/01/14 (Sun) 12:02

Akiraさま

何度もすみません。
今一度教えてください。
その「スマートフォン版の非表示」というのは、
「環境設定」→「スマホ版の表示設定」→「無効にする」
の変更のことでいいのでしょうか?
スマートフォン版の非表示というのは、
スマホで当ブログが閲覧できなくなるという意味ではないんですよね?
(ホント無知ですみません)

Akira
2018/01/14 (Sun) 14:37

To ヴィオラさん

こんにちは (o'ω')ノ

> 「環境設定」→「スマホ版の表示設定」→「無効にする」〜

はい。その設定のことです。

-------
> スマホで当ブログが閲覧できなくなるという意味ではないんですよね?〜

そうではありません。
スマートフォンからのアクセス時にもAlternativeテンプレートで表示させる、ということです。
パソコンとスマートフォンのテンプレートを共通化できるのが「レスポンシブデザイン」です。
レスポンシブの利点につていは先日お伝えしたリンク先の記事の通りです。
こちらの記事も参考になると思います ↓

FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか?/ ぼっちん様
https://oops0011.blog.fc2.com/blog-entry-167.html

よろしくお願いします。

ヴィオラ
2018/01/14 (Sun) 17:31

Akiraさま

たびたびありがとうございました!
そちらもアドバイスいただきましたとおり設定いたしました。
丁寧に色々教えてくださって、本当に感謝です。
また初歩的な質問をしてしまうかもしれませんが、
今後ともどうぞよろしくお願いいたします。m(_ _)m

vanillaice (Akira)
Akira
2018/01/15 (Mon) 11:16

To ヴィオラさん(完了のご報告)

いえいえ。こちらこそお手数おかけします。
お疲れ様でした :)

-
2018/01/15 (Mon) 12:21

管理人のみ閲覧できます

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

Akira
2018/01/15 (Mon) 13:34

To Chromeエラー警告の件 内緒さん

コメント投稿欄に明記してあるお約束事をお守り頂いてから再度ご質問ください。
よろしくお願いします。

------- 追記
本来は「該当テンプレートへのコメント」をして頂いた方以外は返答しませんが、今回はテンプレートに直接関わりがありませんのでこのままここでお返事しますね。

------ ①
> The SSL certificate used to load resources from https://analyzer5.fc2.com will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. 〜

アクセス解析の証明書がシマンテックから発行されています。
この件については記事を書きましたので御覧ください。
https://vanillaice000.blog.fc2.com/blog-entry-657.html

------ ②
> analyzer.php Failed to load resource: the server responded with a status of 400 (Bad Request)〜

こちらも同じくテンプレートは無関係でアクセス解析のphp内容に問題があります。

------ ③
> Mixed Content: The page at 'https://***/blog-entry-577.html' was loaded over HTTPS, but requested an insecure image 'http://blogranking.fc2.com/ranking_banner/***'. 〜

これはもう警告本文に答えが書いてありますけれども。
ご自身が</body>の直前に記載したスマートフォン解析のバナーがhttpです。
! が出たり出なかったりするのはコード内容自体が間違っているからです。
blog-entry-576.html
のフッターの横を見ると文字列がそのままテキストとして表示されているのが確認できます。
これはコード内容に誤りがあった際に起こります。

------ ④
> Mixed Content: The page at 'https://***/blog-entry-577.html' was loaded over HTTPS, but requested an insecure image 'http://eco.blogmura.com/***/img/***.gif'.

こちらも同様。
ご自身が掲載したブログ村のバナーがhttpです。
blog-entry-551.html
のバナーの修正が必要です。
ページ送りのサムネイルを表示させるため、該当ページだけでなく関連記事に掲載されている画像の内容も取得されます。
これはそういったシステムです。

まとめ
① FC2の問題
② アクセス解析の問題(あるいはコードの取得ミス)
③ 同上
④ ご自身で掲載された画像に問題

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

-
2018/01/15 (Mon) 14:27

管理人のみ閲覧できます

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

-
2018/01/15 (Mon) 14:30

管理人のみ閲覧できます

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

Akira
2018/01/15 (Mon) 14:36

To Chromeエラー警告の件 内緒さん②

えと。もう原因は全て記しましたが、わかりにくかったでしょうか (´・ω・`)
証明書の件はどうにもできません
テンプレートの問題ではなくFC2と証明書発行機関の問題です。

アクセス解析については

456789'.split(''),s='';for(var i=0;i<n;i++) s+=a[Math.floor(Math.random() * a.length)];return s;};
})();
//-->

という意味不明な文字列がありますので一旦削除してコードを再発行してもらうなりしてください。

ブログ村のhttp画像については該当URLも載せましたのでそのページを開かれましてhttpsに修正をしてください。

よろしくお願いします。
証明書の方は1月末で変更があるかもしれませんね。
とりあえずそれに期待(笑)

Akira
2018/01/15 (Mon) 14:39

To Chromeエラー警告の件 内緒さん(終了のご報告)

あらら。行き違いになってしまいました ^^;

証明書の方はどうにもできませんが、他の要件は一度修正してみてそれでもまだ問題が残るようでしたらお知らせください。

ページ送りの仕組み上、登録カテゴリの前後記事の影響も受けますので、ページ内にhttp画像が無いのに ! が出る時にはブラウザの左右についているカテゴリ間ページ移動を利用して前後ページ内容を確認してください。
よろしくお願いします。

ほんたべ
2018/01/16 (Tue) 12:23

To Akiraさん

Akiraさま
こんにちは。いつもありがとうございます。
教えていただいたとおりに修正しまして、エラー警告は出なくなりました。
ていねいにわかりやすいお返事をいただきまして、とても助かりました。
ありがとうございましたm(_ _)m

vanillaice (Akira)
Akira
2018/01/16 (Tue) 15:56

To ほんたべさん

こんにちは。
良かったです。安心しました(笑)
現況で私のテンプレート全般ではJSエラー・SSL関連エラーなどは無いはずですので、Chromeから何かしらの警告が出た際には記事内容やサイドメニューの任意プラグインなどを調べてみてくださいね。
お疲れ様でした :)

2018/02/11 (Sun) 11:36

グローバルナビの内容

メンテほやほやのテンプレをお借りしました。

グローバルナビの内のABOUTが不要だったので、ドロップダウンが不要な方は~の箇所を削除したら、ハンバーガーボタンのみが残りナビの中味が表示されなくなりました。

なので、元に戻してABOUTが記載されている部分のみを削除したところ表示されるようになりましたが、カスタマイズの方法が正しかったのか自分では解っておりません。合ってるんでしょうか?

カスタマイズに問題が無ければSSL化させようと思っております。



vanillaice (Akira)
Akira
2018/02/11 (Sun) 11:45

To 幸さん

こんにちは (ノ゚ェ゚)

今拝見しましたが、消去すべきものがまだ残っています。
消去の対象箇所は

<!-- 注)ドロップダウンここから 不要な方ここから削除 -->
内容
<!-- 注)ドロップダウンここから 不要な方ここまで削除 -->

上下のコメントを含み中の内容も全てです。
今一度ご確認ください。よろしくお願いします。

2018/02/11 (Sun) 18:00

To Akiraさん

ご確認ありがとうございました。

ご指摘の通りに残りの部分を削除した処、ナビの内容が正常に表示されました。
どうやら、1度目のカスタマイズの時には、誤って違う箇所まで削除していたみたいです。

お手数をお掛けしました。(`・ω・´)ゞ

vanillaice (Akira)
Akira
2018/02/12 (Mon) 13:24

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

良かったですー。
いつもありがとうございます。お疲れ様でした :)

madameゆか
2018/02/15 (Thu) 20:53

初めての。。。

StoicBrownのテンプレートをお借りし設定時にさんざんAkiraさまのお手を煩わせておきながら・・・
要約タイプのテンプレートにあこがれ
メンテナンスほやほやのこちらのテンプレートをお借りいたしました

一度も要約タイプを使ったことがなかったので
新鮮でワクワクしています(*^^*)
ありがとうございます

vanillaice (Akira)
Akira
2018/02/16 (Fri) 01:35

To madameゆかさん

せっかくコメント頂いたのにごめんなさいね。明日改めて返信致します!

------
改めまして。
要約タイプは初めてでしたか。たぶん今後は全文よりも要約が増えていくように思いますので悪い選択ではないと思います。
いつもありがとうございます :)

vanillaice (Akira)
Akira
2018/02/17 (Sat) 15:20

To madameゆかさん(スピードスコアに関して)

こんにちは。記事を拝見しましたので書きますね。

Googleの速度テストやGTmetrixのテストというのは単純にページ表示にかかった秒数を目安にしているわけではありません
これらのテスト結果というのは「ページボリューム(コンテンツ内容)に対し適切な対策が取られているか」でスコアが大きく変わります。

例)Aランク
ページ表示秒数 --- 3秒
対策あり

例)Cランク
ページ表示秒数 --- 1秒
対策なし

こういう結果も大いに有りえます。
ただ「対策がある」場合には表示秒数も比例して速くなりますので、全く別のカウントというわけでもありません。両者間には密接な関係があります。

例えば私のブログトップページは8ミリ秒台で体感としては非常に速いですが、それでもスコアはBランクです。
理由は「まだできる対策が残っているから」です(gzip圧縮を指摘されますがFC2ブログではできません)

madameゆかさんのスコアを落としている原因を挙げておきます。
・絵文字及び画像 --- サイドメニュー部に含まれる全画像が対象
・ランキング関連CSS全て
・gzip圧縮が行われていないスクリプトファイル及びCSSファイル --- これはFC2サーバーへのアクセス権限がありませんので対処不可能

比較的大きくスコアに影響しているのは上記です。
対策というのは

「絵文字などの小さいものはスプライトを使いなさい」
これは画像の容量が仮に小さくとも、連続で使われている画像はスプライト化の対策をしろ、という減点対象です。ページのスピード自体にはさほど影響はありませんがスコア(評価)には影響します。

「スクリプトにはdefer属性を設けろ」
こちらはランキング関連です。でもユーザーが勝手にJSを変更することはたぶんできないですよね。

--------
ほとんどの方があまり注意を払いませんが、ランキングバナー・絵文字などは全て画像です。
その「画像」に適切な対策が取られていない場合にはスコアを大幅に削られます。

madameゆかさんが思う「スピード」が単にページ表示が完了するまでの速度なのであればスコア測定ではなく以下の記事を参照してください。

ページ表示スピードを教えてくれるブックマークレットの紹介
https://vanillaice000.blog.fc2.com/blog-entry-667.html

また、テンプレート内容で出来うる対策は既に最大限行なったと思っております。
あとはご自身で追加されている内容に対しどうするか、です。
一つの方法が以下の記事。

Lazyloadを使ってみる【初級編】
https://vanillaice000.blog.fc2.com/blog-entry-672.html

まとめますが、スピードスコア判定サイトの目的は「対策の指摘」ですので、イコール表示速度の遅い・速いを単純に計測しているわけではない、というのを知ってくださいね。
よろしくお願いします。

yksb
2019/03/07 (Thu) 18:49

フォントの変更

初めまして。
テンプレート有難く使わせて頂いております。

質問ですが、windows7から10にアップグレードし、ブログを見たところ游ゴシック体?のフォントが優先になっているようで、見辛く感じております。
これを以前のようにメイリオのフォントにしたいのですが、どのようにCSSを変更したら宜しいのでしょうか?
あと、トップページの記事タイトルを太字で強調したいです。質問は以上2点です。
使用しているブラウザはGooglechromeとOperaです。宜しくお願いします。

vanillaice (Akira)
Akira
2019/03/07 (Thu) 21:15

To yksbさん

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

まず、ご利用中のAlternativeは4つ前のバージョンなので、可能であれば最新のものにアップデートをお願いします(任意ですがSSL化の際に問題が生じます, 注意事項を読まれた上でご検討ください)

第一優先フォントをメイリオに
注)記事内基本フォント関連
で検索するとCSS(スタイルシート)内に1箇所あります。
bodyに指定されている

font: 14px/1.7 'Lato', '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';



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

に変更。

-----
トップページ記事タイトルを太字に
.entry-title
で検索するとCSS内に4箇所ヒット、最初のものを対象とし

font: 18px/1.5em 〜省略



font: bold 18px/1.5em 〜省略

太字部位を追加。
以上です。旧バージョンの修正手順です。テンプレートを再DLされた場合は
.entry-title
ではなく
.grid-title
で検索し、同じ作業を行ってください。よろしくお願いします。

yksb
2019/03/08 (Fri) 01:57

無事に設定出来たと思います。
丁寧な説明と素早い返答、ありがとうございました!
アップデートはやってみようと思うのですが、今まで変更したHTMLやCSSの設定をそのままにアップデートするのは無理でしょうか?
再DL後、また変更するのは面倒と思いまして…すみません。


vanillaice (Akira)
Akira
2019/03/08 (Fri) 02:21

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

修正できたということでお疲れさまでした。

FC2ブログのシステム上、個人カスタマイズを残したままのアップデーとは不可能です。
そもそもアップデートといってもユーザーさんが実際に行う作業は再DLです。

web事情に合わせて今後もアップデートは行いますので、個人カスタマイズについてはすぐに再適用できるよう管理して頂くしかありません。

とりあえず現時点ですぐに再DLを行う必要はありませんが、FC2ブログ強制SSL化が始まれば確実に影響は出ますのでお伝えしておきます。
といっても一部のURLスキームを変更するだけですが。

またその時にでも再度お尋ねください。
よろしくお願いします。

NORA
2019/03/11 (Mon) 00:58

スマホでの画像表示をPCと同じ正方形にしたいです

はじめまして。
お忙しいところ非常に恐縮なのですが、教えていただきたいのです。
Alternativeのテンプレートをお借りしているのですが、
スマホでブログを表示させると、PCとは違って写真が横長の長方形になりますよね?
あれをPCと同じように正方形で表示できるようにしたいのですが可能でしょうか?
可能であればその際のカスタマイズ方法を教えていただきたいです。
一昔前のCSSの知識はありますが、レスポンシブデザインのCSSやhtmlなどはあまりよくわかっておらず、自力では無理でした(;ω;)。
お暇な時で結構ですので、ご回答いただけるとありがたいです。よろしくお願いいたします。

*以下、このテンプレートへの質問ではないのですがお礼を言わせて下さい。
最近スマホで読み込みが止まってしまって自分のブログが閲覧出来ずに困っておりましたら、Akiraさんの最新記事で原因が解り、大変に助かりました。ありがとうございました。
(FC2プラグインのアルバムを非表示にしたら解決しました!)

長文失礼いたしました。

NORA
2019/03/11 (Mon) 01:42

補足です

何度も申し訳ありません、補足です。

>スマホでブログを表示させると、PCとは違って写真が横長の長方形になりますよね?
>あれをPCと同じように正方形で表示できるようにしたいのですが可能でしょうか?

と質問しましたが、個別記事の各写真のことではなくて、Topページに表示される写真のことです。
きっとお解りかとは思いましたが念のため補足しておきますね。

vanillaice (Akira)
Akira
2019/03/11 (Mon) 02:26

To NORAさん

ありがとうございます :)
まず、スクリプトの件、お役に立てたなら幸いです。

-----
> スマホでのサムネイルを正方形に〜

実際にはパソコンでも正方形ではなく若干縦長なんですが、それと同じでよろしいでしょうか。
.liquid-wrapper:before
で検索するとCSS(スタイルシート)内に2箇所あり、2つ目の方が対象です。

@media screen and (max-width: 767px) {
.liquid-wrapper:before {
padding-top: 60%;
}
}

と書いてあると思いますので、上記内容を 削除 してください。
よろしくお願いします。
(補足情報もありがとうございました。助かります)

-----
別件です。
FC2検索バーをページ上部に表示されていますが、こちらはレスポンシブではないのでタブレットの画面ではみ出してしまいます。
できれば非表示をおすすめします
設定画面
https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar

NORA
2019/03/11 (Mon) 13:43

出来ました~!

Akiraさんへ

素早い応対ありがとうございました。
おかげさまで望み通りにほぼ正方形の画像で見れるようになりました!
ですので、無事解決!です。
それと、上部のFC2検索バーの件も教えてくださってありがとうございます。助かりました。
今までもAkiraさんのテンプレートの大ファンで、いくつかお借りしていますが、
いつもステキなテンプレートと為になる情報、とてもありがたいです。
本当にありがとうございましたm(_ _)m

vanillaice (Akira)
Akira
2019/03/11 (Mon) 21:19

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

修正できたということで安心しました。
励みになるお言葉もありがとうございます。
お疲れ様でした :)

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