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

Belongテンプレート

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

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

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

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

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

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

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

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

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

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

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

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート
  • 個別記事ページナビセレクタ記載ミス修正

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

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

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

【セレクタ修正】
#posted-pager.posted-pager に修正。

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

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

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.6
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
更新履歴 2019.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> から <h3 class="another-title"><span>Leave a reply</span></h3> までを 削除

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

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

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

#comment_form {
  padding-top: 44px;
}
④について

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

.contents {
  padding: 20px 0;
}

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

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

.inner-contents p {
  margin: 1.9em 0;
}

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

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
履歴履歴 2019.2.12
  • スマートフォンで個別記事ページ送りが崩れる件を修正
「Belong」テンプレートページ送り修正のお知らせ

「Belong」テンプレートページ送り修正のお知らせ

Belongテンプレートの個別記事ページ送りがスマートフォンで崩れる件を修正しました。 【現象】 スマートフォン閲覧時にページ送りが右に寄った状態になる 【原因】 CSSのセレクタ指定ミス...

更新履歴 2018.12.28
  • Font Awesomeを廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 全記事リストと検索結果にコメント数とトラックバック数表示を追加

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

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

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

更新履歴 2018.1.3
  • 全記事リスト(Index)にもnewマークが表示されるようにしました
更新履歴 2017.12.29

大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。

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

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

Belongテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2017.1.13
  • RSS新着サムネイルを削除しました
更新履歴 2016.11.7
  • トップページ・個別記事の月(month)が表示されない件を修正
更新履歴 2016.10.6
  • Microsoft10 の IE11及びMicrosoft Edgeのバグ用ハックJSを削除
  • ベンダープレフィックスの整理
  • その他微調整
「Sweetie」不具合修正と「Belong」「All-about-us」メンテナンスのお知らせ

「Sweetie」不具合修正と「Belong」「All-about-us」メンテナンスのお知らせ

以下の3テンプレートのメンテナンスを行いました。うち一つ「Sweetie」については動作不全があり修正致しました 申し訳ございません。...

更新履歴 2016.9.9
  • リストマーカーの位置を調整しました

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

ブリュンヒルデが当たらないよぅ 。゚(´。∩ω∩`。)゚。
ぶりゅんひるでさん ↓

------ 追記 6.24

当たったし((((笑)

え どうでもいい?!
まあ そうおっしゃらず (´・ω・`)

--------- 以下本文

びろんぐ o<。・ω・。>o
クリーンレイアウト
(クリーン = 日本語で言うところの『シンプル』)
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

ご質問・ご相談の前に

Please read the document before posting your issue.

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

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

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

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

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

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

Common customization.

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

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

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

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

記事編集リンクについて

The position of edit link.

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

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

Cautions before asking for something.

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

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

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

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

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

きろろ
2016/06/26 (Sun) 00:25

こんばんは~。
暑いですね(ё_ё)

クリーンレイアウト=シンプル。なるほどw
夏だし、涼しげでいいですね。

でもぉ……
何気に、今ホームで使っている背景濃~~いのが好きですねw
これも申請する予定なんでしょうか?
フォントがお洒落ですし、なんと言ってもサムネイル表示はありがたいですよ!
期待しております。

ちなみにブリュンヒルデってゲームなんですか?
こういうのって疎くてすみません(>_<)

Akira
2016/06/26 (Sun) 01:04

To きろろさん

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

日本人が思う「シンプル」は英語圏だとちょっとニュアンス違いますー。

このブリュンヒルデは「Cooking Dash 2016」というiPhoneゲームのキャラクターです (・ω・)
私、このスクショでチートしてるのバレバレでした((((笑)
(チート = 不正)
不正ったって、意図してやったわけでなく向こうから勝手に飛び込んできたんですよぅ。
システムの穴をつついたら課金アイテムがアホほど増えました (o'д`o)

こちらのテンプレートはBelongの次か、次の次に申請します。
パソコンがお亡くなりになったのでデータ無いなった…。
なので記憶を頼りに復旧作業中(笑)

きろろ
2016/06/27 (Mon) 00:49

おおー、そう言えばパソコンが故障したって……
お亡くなりなってしまったんですか(>_<)
それは大変だぁ。

記憶を頼りに……って
それでできちゃうんだから、やっぱりすごいな~

このブリュンヒルデは「Cooking Dash 2016」というiPhoneゲームのキャラクターです (・ω・)
私、このスクショでチートしてるのバレバレでした((((笑)


私のほうはスマホがちょっと危なくなってきてw
ずっとAndroidを使ってきたんですよ。
周囲はiPhon派ばかりなんですけど。
SDカードが使えないって言うのが、ちょっと不安。
PCでバックアップを取ればよいのでしょうけど、
うちのPC……
AndroidをUSBを使って、同期させようとしても受け付けてくれないんです。
なので、iPhonを買ってもPCでのバックアップはできそうもないので
またAndroidかな……。
iPhonとか憧れちゃうんですけどねw

Akira
2016/06/27 (Mon) 15:56

To きろろさん

Androidのシステムはわかりませんが、
iPhoneの場合はパソコンと接続することは滅多にないですよ。
データは全てiCloudというAppleのクラウドサービスにバックアップします。
ただ容量的な問題はありますよね。
容量オーバーすれば月額いくらいくら、の世界です(笑)
昔のiPhoneは同期が大変でしたけどねー。
今はパソコンをお持ちでない方でもバックアップを含め利用できるようになってます。

AndroidはGoogle謹製なわけなので、Google Driveとか使ってないんですかね (´・ω・`)
私全然知りませんけれども。
使ってないとすると大変もったいない気が ^^;

ぼっちん
2016/06/30 (Thu) 10:51

サブタイトル表示の件

Akiraさん、はじめまして ^^
以前よりAkiraさんの大ファン(笑)でして、過去からたくさんのAkiraさんテンプレを愛用させて戴いておりまして、今回緊張しながら初コメさせていただきます。

この「Belong」なんですがサブタイトルの <%introduction> が表示されておりませんが、今回は意図的に省かれたんでしょうか?
無いと寂しい(笑)もんですから、とりあえず他のテンプレからCSS部分もコピペ挿入して使わせていただいております。

これからも素敵なデザインのテンプレートの登場を楽しみにさせていただきます ^^

Akira
2016/07/01 (Fri) 03:10

To ぼっちんさん

ありがとうございます (・ω・)ゞ

はい。意図的に外しました。
もうスッキリさせてしまえと思って ^^;
SEOへの影響はありません、という点はお伝えしておきますね。
お手数おかけしました。
コメント励みになります (^q^)

-
2016/07/02 (Sat) 01:25

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/07/02 (Sat) 18:50

To 出版の件 内緒さん

えー!マジですか!すげー!
おめでとうございますー :)

どうぞお使いください。
光栄至極でございます。
ジャンル、全く問題ないです。
私先日美容室でそのジャンルの本を読んで号泣してしまいました((((笑)
美容師さんびっくりしてた ( ̄∀ ̄;)

--------

Google DriveはGoogleが提供しているクラウドサービスですー。
(クラウド = データを外付けハードディスク等ではなく、サーバーにアップするシステム&サービス)
利点は自宅に居なくてもデータを引き出せる 等)
今チラッと見たら、Android Backup serviceというのがあって、それとはまた別でGoogle Driveも無料で使えるみたいですよ。

参考: OCTOBA様
http://octoba.net/archives/20150208-android-app-easyappbackup-407400.html

PCに繋ぐ必要が無いので便利です。
使ってこー ╭( ・ㅂ・)و ̑̑

-
2016/07/03 (Sun) 00:54

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/07/03 (Sun) 01:05

To 出版の件 内緒さん

そうだったんですね(笑)
憂さ晴らしも時には必要というか、もう全然必要。
重要事項(笑)

はい。せっかくですから広くお読み頂いた方が良いですよね。
鍵をつけてはもったいないと思います :)

きろろ
2016/07/14 (Thu) 00:40

すごい便利です!

こんばんは、きろろです。

このページで紹介してもらった、Android Backup service!
DLして使ってみたんですが、すごい便利ですよ!

Androidは、SDにバックアップを取っていると、すぐにいっぱいになってしまうんです。
だから、基本SDでバックアップは取らない。

とは言え、クラウドとか知識がないからわからない(ё_ё)

でも、教えてもらったAndroid Backup serviceは表示は英語なんですが、
すぐに使い方がわかり、ゲームとかのバックアップがGoogleさんで管理できるんですねぇ~
すっごい良い物を紹介してもらいました。

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

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

To きろろさん

おはようごじゃりますー (・ω・)ゞ

スマホ連携のクラウドは便利ですよね。
なにせ設定丸ごと保存してくれるわけなので。
お役に立てたなら幸いです :)
ってゆーか、お礼頂くほどのことなんもしてないけどね私 ^^;

一之瀬
2016/07/14 (Thu) 23:03

教えてください。

初めまして。一之瀬と申します。

FC2にて最近ブログを始めました。
素敵なテンプレートですね。使わせて頂いています。ありがとうございます。

さて、ご質問ですが

サンプルを見ると記事中の表題前に、「縦で太めの赤いライン」がありますが
どうしたらこのラインが付けられるのでしょうか。

初心者ですが、色々と自分なりに調べましたがわかりません。

お手間掛けますがどうかよろしくお願いします。

vanillaice (Akira)
Akira
2016/07/15 (Fri) 09:40

To 一之瀬さん

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

このページでも使われている、見出し左横のボーダーのことですかね。
こちらはテンプレート内容とは無関係ですので、以下の内容を保存されましてその都度記事画面(FC2エディター)に貼り付けてお使いください。

<div style="border-left: 太さpx solid カラーコード; padding: .3em 0 .3em 1em;">文章</div>

ちなみにこの記事と全く同じボーダーの形状であれば

border-left: 5px solid red;

です。太さは5px 色は赤 という意味ですね。
paddingの部分は

padding: 上em 右em 下em 左em;

これは空白の処理です。
見出し文字周りの空白、と思えば良いです
borderと文頭(最初の一文字目)をもっと近くしたいのならば 1em の部分を小さく(例) .5em)、
もっと離したいのであれば 1em の数字を大きく (例) 1.5em) 変更してください。
.3em は上下空白です。
文字よりもちょっとボーダーが上下に大きく出てる感じですかね。
文字と同じ大きさ(高さ)にしたい場合は 0 を指定してください。
「上 右 下 左」という時計回りの指定です。

みだし
などで辞書登録しておくと便利かと思います。
ちょっと文字数多いけどなんとかいけるんじゃないかな。たぶん ^^;

一之瀬
2016/07/15 (Fri) 16:46

To Akiraさん

一之瀬です。

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

おっしゃる通り、見出し横のボーダーです。
このワンポイントや新しく記事をアップした際の「New」の赤が
シンプルなテンプレートにすごく映えて素晴らしいと思います。

私にとってチョット難しい宇宙語が並んでいますが
指示通りトライしてみます。

一之瀬
2016/07/15 (Fri) 22:14

Akiraさんご丁寧にありがとうございました。

少し勉強になるかと思い、教えて頂いた「CCS」?「HTML」?を
コピぺせずに打ち込んでみました。

すると見出し横に見事表示されました。

実際にやってみて初めてコメント頂いた内容の丁寧さに気付かされました。
少し理解できた気がします。

嬉しいです。

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

vanillaice (Akira)
Akira
2016/07/16 (Sat) 10:07

To 一之瀬さん

おできになったようで安心しました :)
htmlのstyle属性にCSS内容を直接記載する、という
「インラインスタイル」という方法です。
html5では非推奨ではありますが、分離させてしまうとテンプレ変更した時に無効化されてしまいますので、直接記事内に打ち込んだほうが良いと思います。

お渡ししたソースコードで応用が効きますので、いろいろお試しになってくださいね。
お疲れ様でした ( ゚Д゚)ノ

一之瀬
2016/07/25 (Mon) 23:29

先般お世話になりました。以下可能でしょうか。

先般お世話になった、一之瀬です。
その節はありがとうございました。

さて、先日自身のブログを確認していて気付いたのですが
新しく記事を公開した時の「NEW」の文字寿命がすごく短命な気がします。

何とか自分でできないか、見てみましたが分かりません。

例えば記事を公開後、10日間表示等に変更は可能でしょうか。

お手間かけますがどうかよろしくお願いします。

vanillaice (Akira)
Akira
2016/07/26 (Tue) 00:01

To 一之瀬さん

ありがとうございます :)
Newの表示時間を引き伸ばしたい、ということでお間違いないでしょうか。
Ctrl+Fキー検索

s=24

htmlソースの上のほうに1箇所あります。
赤字部分が表示時間の指定で、時間単位です
24で24時間表示。
10日に設定されるのであれば 240 に変更してください。
よろしくお願いします :)

一之瀬
2016/07/26 (Tue) 01:34

ありがとうございます。

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

質問の内容が分かりにくく申し訳ありません。

おっしゃる通りです。

2日ほど、テンプレートのところをじーっと見ていましたが
分かりませんでした。

教えて頂いた通り検索してみると
そこの数字は「24」になっていました。

一瞬でそこの場所を表示したので驚きましたが
とりあえず「0」をおしりに追加し、無事終了しました。

お手間かけました。ありがとうございます。

Akira
2016/07/26 (Tue) 09:56

To 一之瀬さん

いえいえ。わかりにくくなどないですよ。
確認の意味で復唱しているだけでございます ^^;

修正お疲れ様でした (*・v・*)/

Akira
2016/07/28 (Thu) 20:55

To マタタビさん ②

> mobileを押してスマホ仕様にすると

mobileを押しているということは、スマホ専用版に移動しているということですので、遷移先ページの表示というのはBelongテンプレとは全く関わりのないものです。
FC2さんが作成されたスマホ版の仕様に沿った表示になります。

======

> 公式のレスポンシブ仕様のものを使うと、スマホで見たときに写真はきれいに収まっています

こちらも同様、FC2のPC用テンプレートとスマホ用テンプレートの間に関連はありません。
PCに私のテンプレートを適用するとスマホ版ではみ出すということなんでしょうか。
ちょっと考えにくいですけれども (´・ω・`)
FC2のnew_basic_white〜 も少しソース内容を見てみましたが、画像は記事内に収まる仕様になっているはずです。
状況が見えてきませんので、できましたらスクリーンショットをお見せ頂くか、あるいはブログのアドレスをお伝えください。
鍵付きで構いません。

いずれにしてもスマホ版での表示内容は私とは無関係ですのでサポートはできません。
ごめんなさいね。

=======

> 公式のPCテンプレではなくPC用にBelongを使い続けたい

これはスマホ版を設定する、というのが条件なんでしょうか。
Belongはレスポンシブですのでスマホでも閲覧できるようになっておりますけれど。
それともレスポンシブでお使いになりたいというご希望でしょうか。

PC版テンプレ内容がスマホ版に影響を及ぼすといったことはありませんので、記しましたお願いごとにお返事を頂ければ幸いです。

まとめ
① スマートフォンではスマートフォン専用版を使いたい、というご希望 (Yes/ No)
② スクリーンショットが撮れるようならお見せください

お手数おかけします (*_ _)

マタタビ
2016/07/28 (Thu) 20:56

移動しました、勝手がわからずスミマセン…。

追加なのですが、Belongでmobileを押してスマホ画面を見ると、枠が大きさに合わせて自動でフィットしないようです(一定サイズに固定されてしまっている)。

スマホ内で「プロフィール」「カテゴリ」などを押しても反応せず、PCサイト(Belongサイト)に戻ってしまいます。

これはPCとスマホテンプレが整合されてないということでしょうか?

お手上げです…。

Akira
2016/07/28 (Thu) 21:01

To マタタビさん

お使いのスマートフォンの機種名とOSのバージョン、そしてお使いのブラウザ名を教えてくださいね。
PCとスマホの整合というのはもともと存在しません。
あくまでもPCテンプレとスマホ用テンプレとは全く異なるhtml内容で表示されています。

スマホ版が縮小されたように表示されているのならば、スマホ版の方に
shrink-to-fit=no
が記載されていないのではないかと推測しますけれど…。
拝見しないことにはなんとも言えないですー (´・ω・`)

マタタビ
2016/07/28 (Thu) 21:02

リロードしてませんでした、すみません。

>Belongはレスポンシブですのでスマホでも閲覧できるようになっておりますけれど。

これは、PC用のBelongのテンプレをスマホ用の管理画面でコピペすればそのまま使えるということでしょうか??

Akira
2016/07/28 (Thu) 21:09

To マタタビさん

いえ。違います。
ブログ個人設定から簡単に切り替えができますので手間にはならないと思います。
ご説明しますね。

●レスポンシブデザインとは
ひとつのhtmlでPC, タブレット, スマートフォンなど、主要なデバイスの全てで表示できるようなデザインを組むこと

●レスポンシブデザインの利点
スマートフォン版を別で準備する必要がない
= 管理が楽
= PCとほぼ同じ使い勝手
= SEO対策に有効(URLの統一など, seo=検索結果にきちんと出てくるようにすること)

スマホでもBelongをそのまま表示したい、というご希望であれば、
記事内の仕様表の中の

任意個人設定 レスポンシブ利用

という項目にリンク設定があります。
遷移先ページにブログ個人設定の仕方が書いてありますのでご参照くださいね。

マタタビ
2016/07/28 (Thu) 21:19

レスポンシブの説明ありがとうございます、たびたびスミマセン(_ _)

任意個人設定 レスポンシブ利用 とは、このページでしょうか?
http://vanillaice000.blog.fc2.com/blog-entry-377.html?q=任意個人設定+レスポンシブ利用+

リンクがたくさんあってよくわからず…。

Akira
2016/07/28 (Thu) 21:25

To マタタビさん

こちらでございますー ↓

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

マタタビ
2016/07/28 (Thu) 21:26

スマホ版非表示を押してもPC版と変わらず、「RSS」の部分が「mobile」になっているのですが、これがつまりレスポンシブな状態になっている(スマホ仕様になっている)ということでしょうか?

Akira
2016/07/28 (Thu) 21:32

To マタタビさん

はい。そういうことです ( ゚Д゚)ノ
スマホ版は「非表示」= 適用されていない = スマホ専用ページはない
という設定になっています。

RSSはスマホではリーダーが別途必要ですので(ブラウザによる)、スマホではボタンを表示させないようにしています(私のテンプレ設定です)。
そしてスマホ版を非表示に設定してレスポンシブでお使いになる方には mobile ボタンも削除して頂くようお願いしています。
閲覧される方が混乱されるといけませんものね。
mobleを押しても同じ画面に戻ってくるだけなので(笑)

Ctrl+Fキー検索

<!-- 注)スマホ版非表示の方この行削除 -->

htmlソース内に2箇所ありますので、ガイドに従って削除してください。
スマホのナビゲーションからmobileのボタン表示がなくなります。

マタタビ
2016/07/28 (Thu) 21:43

mobileのボタン消えました!

レスポンシブはスマホのテンプレ設定自体が必要なかったんですね、
(最初の質問に混乱するはずだ…ほんとスミマセンでした)

Akiraさんは対応も早く親切で助かりました。
Belongテンプレ、大切に使わせていただきます、ありがとうございました!

vanillaice (Akira)
Akira
2016/07/28 (Thu) 21:44

To マタタビさん

ご要望通りになりましたでしょうか。

こちらこそありがとうございます :)

一之瀬
2016/07/28 (Thu) 22:26

フォントに関して。

お世話になってます。一之瀬です。
何度も申し訳ありません。

Akiraさんとマタタビさんの白熱したコメントのやり取りの後で
初心者な質問になってしまうのですが、どうしたら良いか分からず
教えて下さい。

ちょっと説明が不十分になってしまうかもしれませんが…。

私の持っているiPad AIRでブログの確認をすると文字は綺麗に表示されているのですが、Windows8のパソコンでブログを見ると文字が、ギザギザというかにじんだ感じというか、ハッキリしません。

自分なりにあれこれやっているうちに

FC2ブログ管理画面

記事の管理

本文の編集のアイコンの中の「W」をクリックしたら
フォントとサイズが選べるようになって、試しにその中から
ヒラギノ角ゴpro W3を選んでmediumにしてみると綺麗に表示しました。
毎回記事を追加するたびにこれを各文面にしていくのが大変なのと
記事以外の文字は変わらず見にくいままなのですが、どうしたら良いでしょうか。

申し訳ありませんがお願いします。

Akira
2016/07/28 (Thu) 22:56

To 一之瀬さん

結論から言いますと、
「フォント指定を変更する」
しかないです (´・ω・`)

Belongの優先フォント指定は「游ゴシック体」ですが、
Windowsだと綺麗に表示されません。
というか、Windowsはそもそもフォントがとても汚いです(笑)

アンチエイリアス
ってわかりますか (´・ω・`)
文字のふちがギザギザにならないように少しだけ「ぼかす」と言えば良いでしょうかね。
Windowsはそれをしないんですね。昔から頑なに(笑)
Macはアンチエイリアスを使って大変美麗なフォントを表現しています。
これもう長年議論されてるんですけどね。
Microsoftはフォントを改善するつもりはないようです ^^;

参考記事: Cherry Pie Web 様
http://www.cherrypieweb.com/weblog/technical/20160629025615.php

特にWindows8での游ゴシック体について書かれています。
議論はされてますが、私から言わせて頂くと
「Microsoftのフォントレンダラーがそもそもおかしいだろ。」
ですかね((((笑)
ってゆーか、もうすぐ無償ダウンロード期間が終了しますがWindows10に変更されなくてよろしいんでしょうか ( ̄∀ ̄;)
これは余談です。

=======

で、ですね。
記事内で「ヒラギノ〜」に変更されたということですが、Windowsにヒラギノフォントは入っていませんので、ご覧になっているのはヒラギノではありません。
ブラウザのデフォルトフォントに変換されているはずです。
恐らくメイリオです。

対処① --- フォントを変更する

Ctrl+Fキー検索

/* 注)記事内基本フォント関連 */

上記を目印にして頂くと

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

という部分があります。
それを以下の通り差し替えてください。

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

末尾の ; を消さないようご注意ください。
上記の通り変更して頂きますとメイリオフォントが適用されます。
Windowsで綺麗なフォントというとメイリオぐらいですかねぇ (´・ω・`)

対処② --- Chrome(Opera等 Chromiumベースブラウザ含む)とFirefox以外のブラウザは無関係だけど…

上記目印と同じ <body>への指定に

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

この2行がありますので2行とも削除。
若干文字が太くなりますが、こちらはブラウザ単位ですので根本的な解決ではありません。
こっち先に試されても良いかもです。

一之瀬
2016/07/29 (Fri) 11:04

フォントに関して。

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

回答を頂いてからすぐに入替作業をしてみました。

使うbrowserによってもフォントの表示に違いがある事。
Windowsはappleよりフォントに関して良くない事。
Windows8から10にしないといけない事。

がわかりました。いろいろと教えて頂きありがとうございます。

私が普段使用しているweb browserは「chrome」です。
特に設定など見たこともなく何となく使用していましたが
昨日、設定を見たところ

・標準フォント MSPゴシック
・Serifフォント MSP明朝
・Sans Serifフォント MSPゴシック
・固定幅フォント MSゴシック

と、なっていました。
入替作業をしてから再度自身のページを確認したのですが
前より良くなった感じですが、browserのデフォルトフォント?の方が読みやすいです。

そしてWindows10に入替ました。
IE?(Windows10のweb browserはIEって名前ではない???)で確認したところ、iPad程ではないですが、記事のフォント以外の、題名やカラムの文字もchromeよりきれいに表示されています。



Akira
2016/07/29 (Fri) 14:23

To 一之瀬さん

お疲れ様ですー。

ひとつづつ整理していきましょうか。
●まず、Windows10の標準ブラウザはIEではなくなりました。
IEは11を以って開発終了です。
新ブラウザであり、デフォルトになっているのは「Microsoft Edge」というものです。
レンダリングエンジン(htmlなどの解釈及び描写を行う)が違いますのでIEの名前が変わっただけ、といったものではありません。

●iPadのフォント表示
iPhone・iPad等のiOSには「游ゴシック体」というフォントはバンドル(標準搭載)されていません。
iPhone/ iPadの日本語標準フォントは
「ヒラギノ角ゴ ProN W3」
欧文フォントは
「Helvetica」(ヘルベティカ)
GoogleのAndroid OSも同じく游ゴシック体はバンドルなし
日本語フォントは
「モトヤフォント」
欧文は
「Roboto」(ロボト)

パソコンの方で游ゴシック体がバンドルされているOSは
Mac --- OS X Marverics以降
Windows --- Windows8.1以降

一之瀬さんはWindows8ということで、Windowsには毎週定例のアップデートがありますよね。
あちらをしっかり適用されている、という判断でOSは
8.○○ であろうと解釈しておりますが、仮に8から一度も更新をしていないということになると、
もしかしたら游ゴシック体が無かったかもしれません。
ただ今回Windows10に変更されて、さらに書体を変更された状態で「書体が変わった」とお感じになったということは、游ゴシック体をご覧になっていたのだろうと思います。
書体を変更して「前と同じフォントに見える」のであれば、アップグレード前も「メイリオ」でご覧になっていた、という理屈になります。

一旦投稿します。

Akira
2016/07/29 (Fri) 14:31

To 一之瀬さん

それでですね、混乱しないようついてきてくださいね(笑)

●Windows10標準フォント
こちら「游ゴシック体」です。
わざわざテンプレートのフォント指定を「メイリオ」に変更しましたが、一之瀬さんが「見やすい」とおっしゃっている「Edgeのデフォルトフォントが見やすい」=「Edgeの標準フォントである游ゴシック体が見やすい」
ということです。
結局のところ「游ゴシック体」の方が良いんじゃないか、ってことに(笑)

●ブラウザのフォント指定
こちらはテンプレート内にフォントの指定が「無い」場合に適用されるだけですので、テンプレート内でご覧になっているフォントは一之瀬さんが変更されました「メイリオ」です。

これまでの経緯をまとめますと

★ Windows8で游ゴシック体が見づらい

★ テンプレートのフォントを游ゴシック体からメイリオに変更

★ Windows10にアップグレード

★ 変更した「メイリオ」よりも「游ゴシック体」の方が見やすい

こういうことになりますかね(笑)
二度手間になりますが、フォント指定を元に戻されると良いと思います ( ̄∀ ̄;)

んで、Chromeの表示フォント指定ですが、個人的にWindowsのフォントで一番汚い(ごめんなさい)のはMS ゴシック 及び MS Pゴシック だと思います。
ギザギザ嫌いの私にとって、という意味ですけれど ^^;

一之瀬
2016/07/29 (Fri) 22:11

フォントに関して。ありがとうございます。

Akiraさん、お忙しいところご丁寧にありがとうございます。
いろいろな事を教えて頂き非常にうれしいのですが
必要以上にご迷惑お掛けしまっているようで申し訳なく思います。

おかげさまでMicrosoft Edgeでは、入替後きれいに表示してくれました。
嬉しいです。ありがとうございます。

入替作業中、ふとしたことでキーボードのどこかを触ったらしく
一時ブログのレイアウトがぐちゃぐちゃになり
パニックとなりましたが、何とか元に?戻りました。
1箇所はスペースが余分に入っていて
もう1箇所は1字消えていました。(なんの文字かは忘れました)

たったそれだけなのに、とんでもない事に・・・。
こういった言語を扱える、また、センス良くページを作れるAkiraさんに
改めて感心しました。ホントすごいです。

そして実はWindows10の無償アップグレード期日が本日(7/29)まででした。
昨日教えて頂かなかったら・・・でした。
偶然?とも思いますが、「知っていてさりげなく教えてくれた」という感じかなと。

フォントが良いとページがきれいに見えてホント良いですね。

vanillaice (Akira)
Akira
2016/07/30 (Sat) 01:12

To 一之瀬さん

こんばんは ( ゚Д゚)ノ

> 必要以上にご迷惑〜

それはないですよ。
どうぞお気になさらず。
知的探究心なわけですから良いことでございます :)

Windows10アップグレードは、あんまり執拗に言うと強制になりますし、ご事情があってされない方もいらっしゃるのでサラリと(笑)
ハワイ時間の23時59分59秒までだそうなので、ハワイと日本だと19間差ですかね。
あと少しで終了です。
まさに駆け込みアップグレードでしたね。
思い切りよくなさったので逆にびっくりしました(笑)
問題など生じなかったようで良かったです(笑)

一之瀬
2016/07/30 (Sat) 10:24

「知的探究心」良い言葉ですね。

Akiraさんありがとうございます。
Windows10、問題なく稼働しています。

Akiraさんとのやりとりで
インターネットの先に居るのは、「同じ人間」である。
これを教えて頂いた気がします。

始めて間も無いですがブログ運営の参考にさせて頂き、
血の通った、自身の心の声を文字に出来るよう心がけます。

マタタビ
2016/07/30 (Sat) 12:56

「関連記事」をコメントの上に追加したい

Akiraさん、先日はお世話になりました、マタタビです。
何度もすみません、また質問、大丈夫でしょうか?

FBやツイッターのマークの列があり、その下に「COMMENTS」「LEAVE A COMMENT」と続くと思うのですが、
FBマーク列と「COMMENTS」の間に「関連記事」というコーナーを設けたいと思っています。
(つまり「COMMENTS」「LEAVE A COMMENT」が一番下に来るようにする)

「What's new?」と同じ形式で構わないので、写真入りのコーナーがほしいと思っています。
自分でテンプレをいじってみたのですが、どうもよくわかりませんでした。

HTMLのどこに何を入れればいいのか、アドバイスいただけないでしょうか?
今日中には必ずコメント返します。

すみませんが、よろしくお願いしますQQ

vanillaice (Akira)
Akira
2016/07/30 (Sat) 14:44

To マタタビさん

こんにちは :)

まず関連記事リストの仕様をご確認ください ↓

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

====

マタタビさんのご希望がどの設定に該当するかというと
「テンプレート変数のみ」
にあたります。
ブログ個人設定での出力先(表示場所)は決まっていますので、ユーザーの任意というわけにはいきません。
それ故に「テンプレート変数のみ」に指定するわけですが、
テンプレートに関連記事リストのhtml及びCSSを別途追加する必要が出てきます。

本来「テンプレート内容に何かを追加する」カスタマイズのお手伝いはお断りしています。
ですから今回はあくまでも「公式のスタイリング(CSSでの見た目)に準ずる形で」という条件つきでお願いします。
細かいスタイリング(横に並べる 等)は今回はごめんなさい (*_ _)

で、Belongはまたちょっと特殊なレイアウトですよね (´・ω・`)
現在表示されているものをそのまま移動するとデザインがおかしくなります。

参考スクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/9wrfalf%201_zpsmxtrjtx2.png

上記はただ単純にコメント欄の上に移動させただけですが…
ここから選択肢

① Commentと同じように見出しを設置するのかどうか or ただ移動させるだけなのか
② サムネイル画像の表示をさせるのかさせないのか(こちらは最初に選ぶ必要があります)

上記2点ご回答お願いします。

======

> RSS新着サムネイルと同じ〜

こちらはhtml, CSSに加えJSも組む必要がありますので、今回はお手伝いできませんですー (´・ω・`)
ごめんなさいね (*_ _)
そしてこちらを採用してしまうとコメント欄へ移動した際のページ遷移+オブジェクト移動の位置も大きくズレるのと、画面がガクっと下がる現象も起こりますので、スマホから閲覧される方のストレスになると思います。
コメント欄の「下」なら問題ないですけれどもね。

======

FC2の公式サポートとしてサムネイル画像の表示ができるようになりましたので、既存テンプレートの関連記事リストのスタイリングを順次行おうと思っています。
ですがいかんせん今は時間が捻出できず(笑)
お盆明けに着手できるかな、という感じなのですが、アップデートの際には記事でお知らせ致します。
マタタビさんが今回カスタマイズをされるようであれば、しばらくはちょっと淋しい見た目になりますが辛抱して頂くとして。
アップデート後のCSS内容と組み合わせて頂くことで綺麗な表示にできるかと思います。

とりあえず、選択肢2点についてお考え頂きお返事くださいね。
よろしくお願いします。

vanillaice (Akira)
Akira
2016/07/30 (Sat) 14:52

To 一之瀬さん

こちらこそ勉強になります。
ありがとうございます。良いブログライフを :)

マタタビ
2016/07/30 (Sat) 15:15

No title

Akiraさん、お忙しいところ感謝です!

① Commentと同じように見出しを設置するのかどうか or ただ移動させるだけなのか

見出しもできればほしいです

② サムネイル画像の表示をさせるのかさせないのか(こちらは最初に選ぶ必要があります)

画像もできれば表示させたいです



関連記事をコメントの上に持ってくるというのは、ひょっとして、かなり厄介な作業なのでしょうか?
(素人なのでよくわからず… お返事いただいた書き込みも、半分「???」状態です…)

お盆明けに関連記事のアップデートに着手していただけるなら、今回はあきらめて、根気づよく待ちます。

アップデートの告知はこちらのHPとFC2、どちらでされるのでしょうか?
常にチェックしておきたいので、URLを教えていただけると嬉しいです。


Akira
2016/07/30 (Sat) 16:33

To マタタビさん

見出しあり、サムネイルあり。
ということでよろしいでしょうか。

はい。若干厄介です(笑)
サムネイル導入前はどうってことなかったんですけどもね。
FC2の新規実装で多少厄介なことに(笑)

「テンプレート変数のみ」を利用しない方はアップデートするだけで切り替わりますが、マタタビさんの場合はいずれにしろhtml, CSS編集は必要です。

====== 手順

① ブログ管理画面 > 環境設定 > 「ブログの設定」プルダウンメニュー「記事の設定」 > 関連記事リスト
●表示場所 「テンプレート変数のみ」に設定
●関連記事リスト アイキャッチ画像「リストにアイキャッチ画像を表示する」に設定
表示件数と日付表示の有無も設定を済ませてください。

③ Ctrl+Fキー検索

<!--コメント-->

上記を目印に、スクショの場所が貼り付け位置です
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/awrfhaio_zps1iu6s7yh.jpg

もともとのソース内に場所は確保してありませんので、間違いのないようよくよく確認されまして、2・3回改行して貼り付ける場所を作ってください。

③ 下記のファイルを別タブで開き Ctrl+Aで全選択, Ctrl+Cでコピー, 貼り付け場所を確認しCtrl+Vでペースト。

http://blog-imgs-93.fc2.com/v/a/n/vanillaice000/fc2related.txt

ここまでがhtmlソース編集です
続きましてCSS

Ctrl+Fキー検索

related post, trackback list

上記を目印に、このまとまりの中にある

.relate_dl,
.tb_dl

上記を

.tb_dl

に修正。続いて

.relate_dt,
.tb_dt



.tb_dt

に修正。続いて

.relate_ul, .tb_ul



.tb_ul

に修正。


=======

ここまでの作業で体裁はとれますが、記事内に画像が存在しない場合には空洞で表示されます。
それだけご了承くださいね。
これはアップデート後でも同様です。
(テンプレカスタマイズなし、デフォルト利用の方はNo image画像が表示されます)

で、このソース内容ですとトップページにも関連記事が表示されます。
それを避けて個別記事のみにする場合には、ソース内容の最初に
<!--permanent_area-->
を追加。
ソース内容の最後に
<!--/permanent_area-->
を追加してください。

一度お試しくださいませ。

マタタビ
2016/07/30 (Sat) 17:27

すごい!!できました!!関連記事表示された!!

すごく丁寧に手順を教えていただけたので、素人でもすぐに設置できました、
ほんとうにありがとうございます!!

念のため、Akiraさんの書き込みをコピペして保存しておきます。

お忙しいところ、お手間を取らせてすみませんでした。
ファンになりました、これからも応援します!!

vanillaice (Akira)
Akira
2016/07/30 (Sat) 21:19

To マタタビさん

今公式のものを上書き登録しました。
最新記事をご覧くださいね。

マタタビさんの場合には

① 現在所有しているテンプレート名を変更する
・今「Belong」という名称になっていますので、こちらの文頭や末尾に何かくっつけて名称を変更してください。
同じ名前のテンプレートは追加DLできないためです。

② 公式からBelongを再DL

③ 新しくDLしたBelongのhtmlソースを、旧Belongの内容と差し替える。

この3手順でお願いします。
適用するのは新しい方です。
ちょっと時間できたので済ませました。
時間あいてしまうと感覚が鈍りますので今のうちにどうぞ(笑)
よろしくお願いします :)

マタタビ
2016/07/30 (Sat) 22:44

作業お疲れさまでした!記事確認しました。

ええと、新しく上書き登録されたテンプレをDLしたほうがいいのでしょうか?

というのも、さきほど教えていただいた手順で関連記事をちゃんと表示できていますし、
わたしの場合アドセンスなんかも埋め込んでいるので、
以前のBelongテンプレをそのまま使いたいのですが…。

最新のものにアップした際に、関連記事以外でなにか追加した箇所はございますか?


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

To マタタビさん

記事内容をご覧頂いてご自分のテンプレートの現在の状態と照らしあわせてお決めになれば良いですよ。
あくまでも見た目の問題です。
現況で良ければそのままお使いください。

関係ないけど、一時的な不具合がありましたよねFC2 (´・ω・`)
CSS変更が反映されないし、コメント入れたのに一覧に出ててもコメント欄には出ないとか。
その間にカスタマイズされていなければ良いのですが (*_ _)
何かおかしな点がありましたらひっかかったと思ってください(笑)

マタタビ
2016/07/31 (Sun) 02:20

コメント欄が新しくなりましたね!使いやすくなりました。

テンプレは現況でも十分なので、今回はそのまま使わせていただきますね。

Belongでの不具合は、現在とくにないですー。
(FC2本体ではしょっちゅうあるけれど…)

作業お疲れさまでした。ゆっくり休んでくださいね。

vanillaice (Akira)
Akira
2016/08/01 (Mon) 01:20

To マタタビさん

了解致しました (‘v‘)ゝ”
大変お時間頂きました。
作業お疲れ様でした :)

一之瀬
2016/08/05 (Fri) 10:47

関連記事の入ったテンプレート

Akiraさん。お世話様です。一之瀬です。

早速「関連記事」が入ったテンプレートを使わせて頂きました。

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

一之瀬
2016/08/06 (Sat) 10:08

トップページ(ホーム画面)

Akiraさん。お世話様です。一之瀬です。
最近「アイコン」なるものを見つけて、教えて頂いた「表題前の赤いボーダー」と組み合わせながら使ったりしています。テンプレートのイメージに合うように(センス無いので)気を付けながらいろいろやってます。

さて、ちょっと自身のブログを見ていて気になったのですが
個々の記事では最後に「拍手」「いいね」「ツイート」のバナーが表示されるのですが
トップページ(ホーム画面)では表示されていません。
記事最後の部分にはかっこよい、facebook Twitterなどが並んでいるので
その中に拍手も組み込むことは可能でしょうか。
またはトップページでもバナー表示が出来るようにすることは可能でしょうか。

お忙しいところ恐縮ですがどうかよろしくお願いします。

vanillaice (Akira)
Akira
2016/08/06 (Sat) 16:00

To 一之瀬さん

お世話になっております :)

> 拍手ボタンをトップページに〜

これはBelongのトップページ及び個別記事の下にありますアイコン並びに加えたい、ということでしょうか。
それとも、FC2の拍手ボタンをそのままトップページにも表示させたい、ということでしょうか。

● テンプレ固有のアイコンに加える場合

まずSVG画像(wabアイコン)を指定する必要があります。
で、海外ではそういった種のボタンというのはありません。
現在既に付加されているアイコン類(FB, Twitter, Google+, Pinterest など)というのは、各社のブランドアイコンですよね。
そして海外を拠点とした有名サイトです。
拍手ボタンというのは日本独自の文化というか、海外にそういったものは見当たりません。
各社有名ブランドアイコンは「Font Awesome」というwebアイコン専用のサイトを通して表示させています。
日本の独自コンテンツのものは一切含まれておりません。
該当しそうなもの、web-clapping あるいは applause に該当しそうなものを見ると

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/Font%20Awesome%20Icons1_zpso3qqiw8w.png

こんな感じですかねー (´・ω・`)
「拍手」って見てすぐわかるものは無さそうです。
FC2が提供している拍手アイコンを、というのは画像編集の必要が出てきますので、ご自分で作成できるということならば設置可能は可能です。
その際にはhtmlとJSを追加することになります。

● 個別記事に表示されているアイコン類をトップページにも表示するだけの場合

個人設定で
「拍手ボタンの表示位置」を
「追記リンクの前」に変更してください。
FB等のアイコンも拍手の位置を基準にしていますので、全てトップページにも表示されるようになります。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-08-06%2016.03.08th__zpsjfjkhmdx.jpg

=======

関連記事サムネイルの件、お手数おかけしました :)

一之瀬
2016/08/06 (Sat) 17:21

ありがとうございます。

Akiraさん。ありがとうございます。
本当は「テンプレ固有のアイコン」に追加できれば幸せでしたが
日本固有の…ということで難しそうですね。
現状の私では今のところこれ以上理解が出来ないので(すみません)
教えて頂いた、FC2の拍手アイコンをトップに表示する方法をしてみます。
ブログを初めたばかりですが、先日どなたかが「拍手」してくれたようで
嬉しかったです。
今はまだ1つの記事をUPする迄1週間ぐらい掛かっています。
画像や動画がほぼ無いので、文章のみでどうしたら相手の為にそして
相手に伝わるように書けるだろうかとかなり苦慮しております。が
非常に楽しいです。
Akiraさんのようになにか人を惹きつける技術や魔法が欲しい。

Akira
2016/08/07 (Sun) 00:50

To 一之瀬さん

私が人を惹きつける技術や魔法を持っているかははなはだ疑問ですが ^^;
記事の最初にひとつイメージ画像を入れると良いかもしれませんね。
注意を惹く意味で。
やっぱり画像1枚あるだけで人間の目を引くと思いますので。

http://www.freeimages.co.uk/

こういったサイトを活用されると良いと思います。
パブリックドメイン(著作権なし)ですので安心して使えます。
(直リンクはNG)

一之瀬
2016/08/08 (Mon) 07:04

画像

Akiraさん、ありがとうございます。
記事の最初に画像を入れる意味が何となく解りました。
改めてその意識で他のサイトを見てみると、確かに画像があるサイトは目を引きます。
訪問者が画像にくぎ付けでも困りますが、ある方が何となく「読んでみようかな?」といった
気になるのは不思議です。
教えて頂いたサイト等利用しながら、内容に関連性のある画像を上手に利用できれば
見え方の印象がだいぶ変わってくると分かったのでトライしてみます。
ありがとうございました。

vanillaice (Akira)
Akira
2016/08/11 (Thu) 00:57

To 一之瀬さん

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

はい。画像を入れると多少インパクトもあるかと思います。
いつもありがとうございます :)

一之瀬
2016/08/18 (Thu) 15:13

ブログフッター

Akiraさん、旅行は楽しかったでしょうか。
いつもお世話になります。一之瀬です。

Akiraさんの数あるテンプレートを拝見していると
フッター部分?がカッコよく充実しているものを見かけます。
私のお借りしている「Belong」にも
フッター部分にサイトマップ?というのを
設置できるでしょうか。

自分なりに調べて、テンプレートをコピーして
トライしてみたんですが、もろくも砕け散りました。

テキストリンクで良いのですが
例えば、1 ブログ名 2 カテゴリー とかのリンク文字。
fc2のブログホームページ
http://blog.fc2.com
これのフッター部分のような感じというんでしょうか。

お忙しいところ恐縮ですがどうぞよろしくお願いします。

vanillaice (Akira)
Akira
2016/08/18 (Thu) 22:03

To 一之瀬さん

お世話になっておりますー :)
旅行、超楽しかったです(笑)

> 第3カラム(フッター上)の件

こちらについては「カラムを増やす」というカスタマイズになりますので原則としてお手伝いはお断りしています。
申し訳ございません (*_ _)

ヒントとして。
一番簡単なのは<footer>にプラグイン1, 2, 3のいずれか(あるいは複数)を移設する方法ですが、
デザイン的にはOKでもhtml構造としてはおすすめしません。
(htmlは見た目やデザインではなく文書構造の「意味」「定義」です)
Belongの大まかな構造は

・メイン(左側 コンテンツ) --- <article>や<section>を含む
・サイド(右側 サイドメニュー) --- <aside>

この2つのボックスで成り立っています。
フッター上にプラグイン、あるいはその他コンテンツを設けるには

・さらにサイドの追加(位置はフッター上) --- <aside>

が最も適しているかと思います。
一つ目のサイドメニューは右側にあり、ふたつ目のサイドメニューがフッター上にある、という構造ですね。
いずれもhtmlとして適切な要素は
aside
ですかね。

それからCSSも新たに追加する必要が出てきます。
類似テンプレートのhtml内容とCSS内容を見比べながら移設されると良いかもしれません。
私の方からのソース提供は今回はごめんなさいです (*_ _)

========

第3カラム(本来は3カラムとすべきですが、見た目上多くの方が「2カラムである」と認識するようですので便宜上2カラムとして申請しています)を私が設ける場合というのは基本的に
トップページの記事並びを『要約記事表示』で行っている時です。
Belongは『全文表示』です。
全文と違い要約の方は必然的に縦が短くなりますので、サイドメニュー(サイドバー)とのバランスが悪くなります。
サイドメニューがメインコンテンツよりも随分上下に長くなってしまいます。
バランスの観点からフッター上に第3カラムを設けてコンテンツ分量を振り分けている、という感じですかね。

一之瀬
2016/08/19 (Fri) 10:13

ごめんなさい。

Akiraさん。
お世話になります。

質問が「カラムを増やす」と言うことに当たるとは知らず
ルール違反となってしまい申し訳ありません。

テンプレートのhtmlやCSSには構造の問題等も含め
色々と深い意味があるんですね。分かってないです。

もう少し勉強します。

今回は楽しかった旅行の余韻に水を差すコメントになってしまい
申し訳ありませんでした。

今ブログを書くのが非常に楽しくなってきているので
未だ分からないことがたくさんある中で
先走ってしまった感があります。

記事もまだまだ充実してない段階なので
出来ることからコツコツとやっていきます。

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

-
2016/08/21 (Sun) 02:46

管理人のみ閲覧できます

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

-
2016/08/21 (Sun) 02:50

管理人のみ閲覧できます

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

Akira
2016/08/21 (Sun) 03:06

To 一之瀬さん

お返事大変遅くなりましたー!
ちょっとバタバタしてログインできませんでした (*_ _)

いえいえ。どうぞお気に病まれませんよう。
どこかで線引きしないと全体的なサポートが難しくなるもんですから、私のわがままとお許し頂けると幸いです。

いつもありがとうございます (。・w・。)ゝ

Akira
2016/08/21 (Sun) 03:07

To 内緒Kさん

いらっしゃいませ(笑)
伺います ( *'3`)ノ

ぱんとら
2016/08/23 (Tue) 11:29

Akiraさん、はじめまして。ぱんとらと申します。
Akiraさん制作の美しく読みやすいレイアウトテンプレートのファンで、
いろいろと試させていただいていて、今はAll-about-usを使っているのですが、
All-about-usと似たレイアウトで1アクションで本文にアクセスできる
このBelongを新たに使ってみたいと思い、ひとつご相談させてください。

もしかすると受け付けていただけない内容にあたるのかもしれませんが、
トップのブログタイトル背景に画像を敷くことは可能でしょうか。
あるいは、トップブログタイトルの下に、画像を配置することは可能でしょうか。
可能だとすると、どのように追加変更すればよろしいでしょうか。
ご教示いただけると幸いです。

当方ドシロウトなもので、もしかするととんでもなく失礼な質問を
さしあげてるかもしれませんが、何とぞご容赦ください。
何とぞよろしくお願いします。

vanillaice (Akira)
Akira
2016/08/23 (Tue) 13:13

To ぱんとらさん

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

> ワンアクションで本文にアクセス〜

というのは「全文表示」のことでしょうかね。
トップページで全文を読むことができるタイプ(追記を除く)
(All-about-usは「要約表示」です。)

> ヘッダーに背景画像

上記内容で合ってますでしょうか。
意味の取り違えがありましたらご指摘くださいね。

Belongのヘッダーですけれども、ブログタイトルのすぐ下に「ナビゲーション」が付いてます。
で、そのナビの上下にはボーダーをつけてあります。
このナビの扱いなんですけども、ナビを背景画像上に乗せる形だと修正の手数がかなり多くなります。
ですからナビは含めない = ナビの上のボーダーの位置が背景画像の下辺の位置
という形をおすすめします。
そしてナビのボーダーは左右が途中で途切れるデザインになっています。
(ブラウザ画面の左右隅まで達しない)。
ということで、画像の横幅をどうされるかです。
パターンを記しますので、スクショをご覧頂いて方針をお決めください。

① ナビのボーダーの幅と背景幅を合わせる場合
Ctrl+Fキー検索

.blog-name-container

CSSソース内に2箇所あります。
最初のものが対象です。
この括りの

max-width: 1400px;

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

background: url(画像アドレス) center center /cover no-repeat;

赤字の
center center
が画像の合わせです。
最初のcenterが左右合わせ、次のcenterが上下合わせ。
詳細はこちらでどうぞ ↓

http://vanillaice000.blog.fc2.com/blog-entry-213.html#daisy1

このままだとナビの上のボーダーが邪魔になりますので、
Ctrl+Fキー検索

.navi-menu

この括りの

border-top: 1px solid rgb(177,175,176);

上記を削除
スクショ ↓

PC, タブレット
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/The%20other%20way%20roundth__zpsee5hc6z4.jpg

スマホ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/The%20other%20way%20roundth__zps0fv4giib.jpg

========

② ナビのボーダーの幅と背景幅を合わせない(画像横幅はブラウザ画面横幅と同等にする)場合

まず①と全く同じ手順を踏んでください(修正2箇所分)
さらに追加手順、
.blog-name-container の括りから

width: 90%;
max-width: 1400px;

上記2行を削除して移動しますので『カット(Ctrl+X)』を使ってください。
カットした2行を .blog-name-container の括りの下にある

#blog-title

の括りに移動します。

margin: 0 auto;

の下へペタリ。

さらに続いてCtrl+Fキー検索

less than 768

上記を目印にされますと近接に

.blog-name-container {
width: 100%;
}

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

#blog-title {
width: 100%;
}

スクショ ↓

PC, タブレット
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/The%20other%20way%20roundth__zpsezta2sce.jpg

スマホ(①と同じです)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/The%20other%20way%20roundth__zps0fv4giib.jpg

==========

以上で画像の設置は終わりです。
画像によってはタイトルが見づらくなりますので、その際には色を変更してください。
該当箇所はCtrl+Fキー検索

#blog-title a

こちらは1項目だけです

color: ここにカラーコード;

以上です。
よろしくお願いします (●'0'●)/

一之瀬
2016/08/23 (Tue) 14:57

新着サムネイルについて

Akiraさん。いつもお世話様です。
先日はバタバタしているところ申し訳ありませんでした。

気を取り直して改めて教えてください。

記事内に表を画像にしたものをアップしましたが
新着サムネイルはNo image画像のままです。

fc2の設定も一通り見たんのですが分かりませんでした。
新着サムネイルを表示させれにはどうしたら良いでしょうか。

お忙しい所恐縮ですがよろしくお願いします。

Akira
2016/08/23 (Tue) 15:36

To 一之瀬さん

こんにちは ( ノ゚Д゚)

画像アドレスの確認が必要ですので、一之瀬さんのブログURLを教えてくださいね(鍵付きで構いません)
そしてこちらの記事を参照されまして、条件と合致しているかどうかのご確認もお願いします ↓

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

ぱんとら
2016/08/23 (Tue) 15:57

To Akiraさん

お忙しいところ早速のご指導、ありがとうございます!
ご指示通りやってみましたところ、できました〜!
って当たり前ですね、できるように教えてくださってるのだから。^^;
特に、画像の合わせについては目ウロコでした。
また、コメントへのアクセスは、記事の最後にあると便利かと思い、
とりあえず記事フッターのナビのところに入れてみました。
問題ありますでしょうか・・・

本当にわかりやすくおしみない(ここがスゴイ!)アドバイスを
ありがとうございました。

vanillaice (Akira)
Akira
2016/08/23 (Tue) 16:15

To ぱんとらさん

とりあえず、作業お疲れ様でした :)

> コメントのアクセスを移動〜

こちら今拝見しに参りましたが、テンプレートを変更されたようですのでちょっとよくわかんなかったです(笑)
現在のテンプレで何かありましたらまたお尋ねください(笑)

ぱんとら
2016/08/24 (Wed) 11:05

To Akiraさん

一瞬All-about-usのテンプレートに戻した時にご覧いただいたのかもしれません。^^;
アドバイスいただいて以降、快適にBelongテンプレートを使わせていただいてます。

FC2ブログの記事表示タイプと各々の利便性の記事も拝読、なるほどと感じつつ、
うちのような見に来てくださる方がある程度固定してるところでは、
1クリックですむ全文タイプの方が評判はよさそうです。^^;

2016/08/24 (Wed) 13:27

コンニチワ~~!(∩´∀`)∩

FC2ブログ「開設」してみた・・・

でも

背景も何も無いノッペラボウ

「スガ」さんの動画もアップしたい

出来るのかな?

背景も、何もかも全く解りません

お暇(な時は、無いか(。´・ω・)?)な、時

教えてくれますか?

Akira
2016/08/24 (Wed) 13:31

To ぱんとらさん

それもありますよね。
常連さんの場合は(笑)

ご報告含めありがとうございます (★ ̄∀ ̄)ノ

Akira
2016/08/24 (Wed) 13:33

To 金さん

マジかー(笑)
ご開設おめでとうございますー!

今ね、Wi-Fi使えない環境であります (o'ω')ノ
なのでiPhoneの4Gから。
電気工事中 ( ̄∀ ̄;)

夕方またログインできると思うので待っててね。
ヨロピコ ( *'3`)ノ

2016/08/24 (Wed) 13:42

急がんで下さいね。

例の如く金は

覚え悪いから、時間に余裕の有る時でエエです

金は、暇人やけれど

「四川省ゲーム」バッカしてるから・・・(;´∀`)

速攻のお返事アザ~~ス!m(__)m

-
2016/08/24 (Wed) 17:00

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/08/24 (Wed) 23:44

To 金さん

金さんこれね、あっちに書くわ (´・ω・`)
画像貼り付けとか個人設定とかいろいろいるよね?
まとめて向こうにUPします。
今日できれば良いんだけど。
明日ちょっと難しそう。
近いうちに、ということでお願いしますー :)

vanillaice (Akira)
Akira
2016/08/25 (Thu) 00:07

To 記事タイプ検討の件 内緒さん

今拝見しましたー。
RSSのサムネイルはちゃんと表示されてましたね。
お疲れ様でした :)
一応ご説明するとですね、今内緒さんが0✕0で貼り付けている「方法」というのは

・html

にあたるんです。
で、私の推奨としては

・html+インラインCSS

です。
ただ見た目が大きく変わることはありませんので、現在の方法をお取りになっても問題ありません。

● html記述
<img src="画像アドレス" width="横" height="縦" alt="代替テキスト">

● インラインCSS
<img src="画像アドレス" style="width: 横px; height: auto;" alt="代替テキスト">

注意点
・img要素に終了タグはありません (</img> ← これは無い・要らない)
・alt属性は必須(と思った方が良いです)
・縦横比に注意
・html記述のwidth, heightは単位をつけない
・インラインCSS記述のwidth, heightは単位必須

alt属性は画像が表示されなかった時(ローディングエラーやアドレス消失等)に表示される代替のテキストであり、画像の簡易説明でもあります。
これは入れた方が良いですね。
" と " に挟まれた内容のことを『値 (あたい)』と言いますが、この値はalt属性に関しては無記入でも良いんです(html5に限る。Belongはhtml5です。)


<img src="アドレス" style="width: ○○px; height: auto;" alt="">


<img src="アドレス" style="width: ○○px; height: auto;">

FC2のツールバーを利用して画像を貼り付ける場合はhtml記述になりますが、
画像の大きさを変更したい時ってありますよね
その時にはいずれかの幅を決めて(大抵は横幅)、heightの方は
height="auto"
にします。
具体的な数値を入れようと思うと縦横計算しないとアスペクト比が狂います。
auto の値利用を覚えておくだけで作業効率が随分違ってきますのでメモメモ φ(・ω・ )

============

0✕0掲載(あるいは 0✕auto掲載)の際には

<a><img 〜省略〜></a>

赤字を確実に消去してくださいね。
開始タグと終了タグ、両者を必ず消します。
終了タグを消し忘れる方が多いのですが、これが残るとレイアウトは崩れます。
もしかしたら内緒さんもそれが原因だった「かも」しれません。

一旦投稿します。

2016/08/25 (Thu) 00:14

急がんで下さいね。

何時もお手間掛けます

ホンマに急がんで下さい

無理はアカンですけね。

Akira
2016/08/25 (Thu) 00:37

To 記事タイプ検討の件 内緒さん②

記事タイプの件

内緒さんの場合は全文でも問題ないと思いますが「本文」と「追記」の切り分けをされると良いかもしれませんね。
例えば最新記事を例にとると、私ならば

それでは見ていきましょう

↑ ここまでを「本文」に記載し、続く内容は「追記」記載にして「続きを読む」で個別ページへ誘導します。

毎回例えばですね

それでは具体的に説明していきましょう

↑ みたいな定型文で誘導しても良いと思います。
表なんかはですね、その情報を求めている方はしっかり見ますが、不要だと思う方にとっては場所取ってるだけで邪魔に感じることもあるんですよね (´・ω・`)
大抵の場合は序文を読んで
「この情報は読んでおこう」「この情報はたぶん要らんやつや」
という判断をされると思いますので、「本文」の方には

この記事はこんな内容が載ってるねん!見たい人は「続きを読む」をクリックしてな!

という内容でOKだと思います。
トップページだけで全てが完結している、というのもちょっと考えものかなーと思います。
全部トップページで見れてしまうのならば、閲覧者はただトップページのページ送りを繰るだけで用が足りてしまいます。
個別記事に移動してもらってなんぼ (´・ω・`)
トップページは「特定情報の専用ページ」ではありませんので、SEOを考えたら
トップページにもアクセスがあり、個別記事(詳細ページ。こちらがキーワード検索で主にヒット。)にもアクセスがある、というバランスが大事だと思います。

===========

サムネイルの件

80✕80ということですと、リスト表示向けあるいはスマートフォン向けですかね (´・ω・`)
Belongは全文タイプですから、記事作成に完全依存です。
記事に載せた画像が小さければトップでも小さくなります。

スマートフォンは高解像度ディスプレイですので、小さい画像にするとしても実寸は掲載寸の「倍」で準備されると良いですね。
例)
横80pxの画像を載せたい = 横160pxで準備

<img src="アドレス" style="width: 80px; height: auto;" alt="代替テキスト">

=======

● トップには画像が載っている、個別記事では載っていない

上記の形を取るのならば「要約表示」へのテンプレ変更しかないです。
なにせ全文は「個別記事依存」ですので。

Akira
2016/08/25 (Thu) 00:43

To 金さん

了解でございま (‘v‘)ゝ”

-
2016/08/25 (Thu) 01:44

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/08/25 (Thu) 12:52

To 記事タイプの件 内緒さん

内緒さんの場合は「本文」「追記」分けでいけるような気がしますけどもね。
試行錯誤してみてください(笑)

お疲れ様です :)

-
2016/08/25 (Thu) 21:49

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/08/26 (Fri) 10:47

To Belongの件 内緒さん

記事がお役に立てましたか。
良かったです!!!(笑)
書いた甲斐がありました。

RSS件数は自己解決して頂いたんですね。
Google APIから引っ張れる最大件数は8件ですのでメモしておかれると良いと思います。
お疲れ様でした :)

一之瀬
2016/08/29 (Mon) 04:49

個別記事内にある画像について

Akiraさん。いつもお世話になります。

教えてください。
Belongの個別記事にある「ページ内画像拡大」は
どうすればこのように表示できるのでしょうか。

<img src="アドレス" style="width: ○○px; height: auto;" alt="">
の方法や
FC2のツールバーを使用して画像を挿入した場合(ブログタイトルやアルバム一覧の文字がでてきてしまう)
「ページ内画像拡大」のように表示してくれません。

多忙中のところ恐縮ですがどうぞよろしくお願いします。

<img src="アドレス" style="width: ○○px; height: auto;" alt="">
コメントにあるこの方法は非常に参考になります。
先日Googleの「PageSpeed Insights」でテストしたところ
インラインCSSの記述に「注意が必要」と指摘が出てきました。
Googleの修正方法を読んでも全部は理解できていませんが
重要な事は何となく分かりました。

またこれを使い記事幅以上で画像の横幅を設定すれば
ブラウザが大きくなっても小さくなっても
文字列とのバランスが崩れずきれいに表示してくれるので
便利に使用しています。(使い方が間違っているかもしれませんが...)

一之瀬
2016/08/29 (Mon) 05:19

個別記事内にある画像について

Akiraさん。先程のコメントですが私のミスで

テンプレート固有機能説明
http://vanillaice000.blog.fc2.com/blog-entry-306.html

上記の記事を見落としていました。

大変ご迷惑をお掛けし申し訳ありません。

説明の通り作業し、無事表示できました。
ありがとうございました。

Akira
2016/08/29 (Mon) 10:04

To 一之瀬さん

さようでしたか。
固有機能については「私が製作したテンプレートのみ有効である」というのをご理解頂いた上でご利用になってくださいね。
他のテンプレートに変更された際には全て無効化されます。
(かといってエラーやレイアウト崩れを呼ぶようなことはありませんのでご安心ください。デザインが失われるだけです。)

vanillaice (Akira)
Akira
2016/08/29 (Mon) 10:06

To 一之瀬さん

あ。ごめんなさい。
私一之瀬さんのコメント、一つしか拝読しておりませんでした((((笑)
ちょっともう一回ちゃんと見ます。すみません(笑)

========

改めまして。
使い方については解決した、という解釈でよろしいでしょうか。
お疲れ様でした :)

> インラインCSSは注意が必要

これはですね、html5に於いては
「htmlとCSSはしっかり分ける」
というのが一番の目的であり推奨です。

html = 構造・意味・定義
CSS = デザイン・装飾

htmlというのはあくまでも全体の骨組みであり、ページ全体の「意味」を司るものです。
ページデザインのためにのではありません。
だから装飾・デザインはCSSに全て託しましょう、htmlの方は定義づけに徹しましょう、ということなんです。
html4まではhtml内で装飾も行うのが当たり前でした。

例)

<div align="center">文字のセンタリング</div>

文字を「センタリングする」というのは「装飾」にあたります。
今後はこういうのはアカンよ、というのがhtml5です。

私が先日から一之瀬さんにおすすめしている
「インラインCSS」という手法は

<div style="text-align: center;">文字のセンタリング</div>

こんな風にまたちょっとまた違うんです。
htmlのstyle属性にCSSを書き込む、というやり方です。
htmlによるダイレクトな装飾は
align属性にセンタリングの値を指定。
この違いわかりますかね ^^;
あまり深く考えなくて良いです(笑)

html装飾は「廃止」なんです。
style属性によるインラインCSS装飾は「非推奨」
記事内で使ういくつかの見た目装飾は、htmlとCSSを分けてしまうと非常に困ったことになります。
一つのデザインに対し、いちいちクラス名やID名を与え、それをCSSで別管理することになります。

例えば文字の横に黒ボーダーをつけるためのデザインを一つ決めたとします。

.black-border {
内容
}

じゃあ、黒でなく赤にちょっと変更しようかなと思ったとき、またさらに一つCSSコードを追加します。
.red-border {
内容
}

さらにボーダーの太さをちょっと細めに変えようかな、となるとまたさらに一つ追加

.red-thin-border {
内容
}

なにかをチョロっと変更するだけでもういちいち、いちいちこうして増やさないといけないわけです(笑)
そうなると管理が大変難しくなります。
クラス名も覚えていかなきゃいけないし。
それはページ管理人にとって大変だろう、ということでインラインCSSをおすすめしています。
インラインCSSで記事内に記しておけば、テンプレを変更してもその装飾は生きています。
クラス・ID分けによるCSS管理の場合は、決めたデザインをその都度テンプレに移植する必要があります。
どちらが楽で便利か、ということですね。

一番最初にご質問頂いた、
「見出し横に赤いボーダー」
についても、記事内にインラインCSSで記していますので、テンプレ変更されてもちゃんと表示が行われます。
一方「固有機能」の方はCSSを分けていますので
「これこれこういった特別な書き方をしてください(クラス名の貸与)」という方法を取っています。
なので「テンプレ変更したら無効ですよ」という結果になります。
もちろん該当のCSSコードをテンプレに丸っと移植すれば引き継がれます。

ぱんとら
2016/08/29 (Mon) 14:48

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

またまた初歩的なことだと思うのですが、
以下について、お忙しいところ恐縮ですが教えていただけますでしょうか。

Belongのテンプレにサブタイトルを入れたくて、
現在、Akiraさんのサブタイトルの入ったテンプレPromise-Meから
サブタイトルの部分をコピペして入れてるんですが、
ブログタイトルとの行間がかなりあいてしまいます。
どのようにすれば行間を縮められるのか、
また、文字の大きさなど変えられるのかどうか等々、
お教えいただけますでしょうか。

急ぎませんので、お時間のある時にご教示いただけると幸いです。
よろしくお願いします。

vanillaice (Akira)
Akira
2016/08/29 (Mon) 17:18

To ぱんとらさん

お手数おかけしております (o'д`o)ゝ

既に移植は済ませておられますので、そのままで微調整の仕方を。
Ctrl+Fキー検索

#blog-title

この項目内に

padding: 30px 0;

というのがあります。
これがブログタイトル周りの空白設定で、現在
上下に 30px
左右は ゼロ
という指定になってます。
これを

padding: 30px 0 下空白px;

に変更してください。
広すぎということなので 10px程度が良いかもしれません。
その場合は

padding: 30px 0 10px;

という感じです。
よろしくお願いします。

ぱんとら
2016/08/29 (Mon) 19:16

To Akiraさん

Akiraさん。
お忙しいのに、早速とてもわかりやすくお教えくださいまして、
ありがとうございました!
うまくできました。
いつもほんとにありがとうございます。深謝!

2016/08/29 (Mon) 20:56

あきらちゃんへ・・・(´▽`*)」

今、チャレンジしてみました
何だか、出来たっぽいよ!O(≧∇≦)O イエイ!!

ホンマに、忙しい中アザマ~~ス!

テンプレあきらちゃんのを使ってみて正解でした
金の唯一、正解な判断やったね(って、あきらちゃんのアドバイスが有ったからやけれどね)
ほんでも、立派過ぎる「テンプレ」なのに
記事が他愛無い物でスンマシェン
でも、嬉しいっす!v-221

vanillaice (Akira)
Akira
2016/08/30 (Tue) 10:54

To ぱんとらさん

できましたか。良かったです。
ご面倒おかけしました。
作業お疲れ様でした :)

vanillaice (Akira)
Akira
2016/08/30 (Tue) 10:55

To 金さん

できてたね。
良かった(笑)
おっつっつ ヽ(´▽`)/

=======

ひとつ気づいたんだけども。
金さん、コメントする時に
WEBSITE
の欄に入ってるURLが

http://ブログアドレス/blog-entry-1.html

こうなってると思うんだわ。
これ特定記事へのリンクなので赤字の部分消しておくと良いと思います。

2016/08/30 (Tue) 15:17

こんちわ!

>WEBSITE
の欄に入ってるURLが

http://ブログアドレス/blog-entry-1.html

こうなってると思うんだわ。
これ特定記事へのリンクなので赤字の部分消しておくと良いと思います。


此処の、修正の仕方が解りません
此処の画面で「削除」しても
新たに開くと、又出て来ます
如何したらよいのですか?

Akira
2016/08/30 (Tue) 16:22

To 金さん

① ブラウザのキャッシュを削除

右上の 三 マークをクリック
(最新バージョンだと点が3つ縦並びのマーク)

[その他のツール] > [閲覧履歴を消去]

[Cookie などのサイトデータやプラグイン データ] と [キャッシュされた画像とファイル] のチェックボックスをオン

[すべて] を選択

[閲覧履歴データを消去する] をクリック

② このコメント欄に戻ってきて、正しいアドレスを入れてコメント(笑)

http://chibisann2.blog.fc2.com/

↑ これをWEBSITEの欄にコピペで入れてコメント投稿。
その時点でそのアドレスがクッキー保存されますでー。

2016/08/30 (Tue) 17:23

毎度お世話に成ります<(_ _*)>

出来たかな?

(人''▽`)ありがとう☆!

vanillaice (Akira)
Akira
2016/08/30 (Tue) 18:41

To 金さん

直りましたー。
クッキーは数週間保存されるので、コメント欄のハンドルネームなんかを変えた時は気をつけてね。
変えることはまず無いと思うけど(笑)
お疲れ様でした :)

2016/08/30 (Tue) 21:25

てんきゅ~~でしたm(__)m

此の次の質問も幾つかあるんやけれど
急ぐ事でも無いから
又、改めて「質問」に伺いますね。

あっちの方にも、コメありがとうでした。

Pさんが、寂しがってたけれど
(此処の事は、誰にも言ってないんや・・・今の所ね。)
ブログ削除する訳や無いし
「休止」って形で記事アップせんやけやから
ゲスブに愚痴りに来てね!・・・言うといた。

やっぱ、どんな他愛無い質問でも
「シークレット」にしちゃうと、金も読み返せんから
「公開」の方が、ホンマ便利エエね。

此処の訪問者ってさ、執っても
お行儀が良くて、丁寧言葉さんばっかやね
金みたいな風変りさんは、見当たらないね
金も御行儀よくせんとアカンのかな?(;´・ω・)

金は、ガサツやけ「お行儀良い」のは苦手やな
此の侭でもエエ????

ひろし
2016/08/30 (Tue) 22:01

金さんこんばんは

あちらであきらさんのお世話になっているぴろりんですww
ぴろりんはあきらさん命名(笑)
私もたまに訪問させてもらってますがいつもの調子でやってますw
htmlのことは全くわかりませんから、あきらさん得意の"余談"に食いつくという(苦笑)
今のところあきらさんには怒られてないんで大丈夫だと願いますw

2016/08/30 (Tue) 23:49

こんばんわ!ひろしさん・・・

ぴろりんさん、金宛て(と、勝手に理解しちゃいました(;´∀`))に
コメント(人''▽`)ありがとう☆ございました
嬉しかったです!
金(リアル生活でも、我が事を名前で呼んでしまうんです、旦那様も金を名前で呼んでくれます)は、自分の事名前で呼ぶ悪い習慣が身について居まして
エエ大人が不細工何ですがお許し下さいね
もし、お耳障りでしたら御指摘願います

で、まさか・・・
あちらでの「あきらちゃん」の御友達からコメント頂ける何て思っても居ませんでした

あきらちゃんとは、物凄く古い顔見知りで
金が、ブログ始める以前から関わりが有ったんです

でも~~
其の頃は、殆ど「あきらちゃん」の存在を知らなかったのですが
あきらちゃんが教えて呉れました
其のあきらちゃんが、こんなに凄い人やった何て夢にも思って居ませんでした
(頭が良くて・綺麗で・波乱万丈な人生の持ち主で・って、色々と・・・)

ひろしさん、之からも宜しくお願い致しますね

※。。。あきらちゃんへ
あきらちゃんの場所をお借りしての会話許してね!

あきらちゃんは、優しいけキット許してくれるよね(∩´∀`)∩

一之瀬
2016/08/31 (Wed) 08:01

個別記事内にある画像について

Akiraさん。いつもお世話になります。

コメントのお礼が遅くなり申し訳ありません。

私もブログを書いていて思うのですが
文章を書くのは時間も掛かり労力のいる作業で
「本当に大変」。

なのにコメントで詳しく説明して頂き
改めてお礼申し上げます。ありがとうございます。

Belongの個別記事にある「ページ内画像拡大」の件は
無事完了しました。
表やデーターを見てもらう際も
見やすく喜んでいます。

インラインCSS何度もコメント読み返し
掻い摘んでですが理解しました。

早いものでブログを初めて2ヶ月弱。
Akiraさんに初コメントしてから1ヶ月半が経ちました。



Akira
2016/08/31 (Wed) 09:54

To 金さん

金さん、おはおー ( ゚Д゚)ノ

誰にも言ってないんだね。
まあ、落ち着いてからで良いんじゃないかしら。
それとたぶんだけど、みなさん村内でのコミュニケーションしか取れない気がする ^^;
FC2ブロガーさんは割りと他ブログサービスの方とも交流してます、って方や
FC2開設してない方がコメント常連さんだったりすることも。
yahoo村内ルールは通用しないから、かなり頭切り替えないと厳しいと思うー (´・ω・`)

んで、どうぞ金さんはそのままで(笑)
私もまんまだよ((((笑)

Akira
2016/08/31 (Wed) 09:56

To ひろしさん

ピロリン、おは (●'0'●)/

html
が大文字なところにセンスを感じますわ(笑)
私の場合は本旨より余談のほうが長い、ってのがデフォルトなのでちゃんと付いてきてね (´・ω・`)

金さんへのお心遣いもあざす ╭( ・ㅂ・)و ̑̑

vanillaice (Akira)
Akira
2016/08/31 (Wed) 09:58

To 一之瀬さん

おはようごじゃりますー :)

一之瀬さんは文章の構成や表のまとめなんかもあって大変でしょうね。
でもやり甲斐はあるのではないかしら。
今後も良いブログライフが送れますよう :)

一之瀬
2016/08/31 (Wed) 19:36

ありがとうございます。

Akiraさん。

初ブログなのに
やり甲斐在り過ぎ完全能力オーバー。かなりショートしています。

がんばります。

2016/08/31 (Wed) 20:34

http://blogs.c.yimg.jp/res/blog-c3-fe/tarepannda_m/folder/664605/74/21028874/img_37_m?1472642361

Q1...
之見えるかな?
<http://chibisann2.blog.fc2.com/page-0.html>でヤフー検索したら
之が出たん
之は何?

Q2...
「アイキャッチ」って、金の所にも出来るの?
管理ページの此処を
【関連記事リスト アイキャッチ画像 リストにアイキャッチ画像を<表示する> 】にしてるけれど
何チヤ変わらん
他にも、難しい設定が有るの?
金にも出来るようなら、してみたい。

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

To 金さん

おはおー (●'0'●)/

まずページの移動をお願いします。
Q2 につていは記事にしているので、そちらのページへ移動。
でもたぶん記事内容は古参ユーザーさんはすぐ理解できると思うけど、
金さんを含む新規ユーザーさんはよくわからんかも (´・ω・`)
なのでいつものところで書きますわ(笑)
一応記事は見ておいてね。

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

書けたらまたお知らせしますのでお待ちあれ ∩(●'ᴗ'●)∩

========

Q1については

https://esupport.trendmicro.com/support/vb/solution/ja-jp/1303802.aspx

これはまた別の事象だけれども、こういった仕様があるようです。
これが表示された場合には、金さんのブログはまだ出来て間がないので評価結果自体がありませんよ、という意味のようです。
今回の件はこれとは別で、「応答なし」「接続が不可な場合は〜」とあるので、
なんらかの理由でWiFi接続が上手く行ってなかったんじゃないかしら (´・ω・`)
あるいはパソコンに負荷がかかって(キャッシュなどのゴミが溜まった)、動作不全があったのかも。
こういう時はまず一度ブラウザを閉じて、クリーニング。
パソコン再起動するともっと良い。
そして同じことをもう一度やってみることです。

2016/09/01 (Thu) 13:28

毎度、ありがとうです。

Q1に付いては、記事不足と言う事ですね
クリーニングは、度々(PC閉める都度)しています
今、改めてクリーニングして「再起動」しましたが変わらんでした
WiFiは、使ってません。
電話回線のみです
古~~~~!って言わんでね、お部屋狭いし光に変更も何故かメンドクて其の侭
「WiFi」1度設定したんやけれど、ルーターがメゲタのか、設定方法がアカンやったのか
使えんくなって、只今有線で利用してます

Q2の此の記事昨日読ませてもらいました
やっぱ、理解不能(>_<)でした・・・
説明、大変やったら無理せんでエエヨ!
只、此処にコメントする時「あきらちゃん」みたいに
アイキャッチ(だよね?「To 金さん」の前の写真)が有ったら
素敵やな~~!思うたん。

何時も、お手間掛けます<(_ _*)>

vanillaice (Akira)
Akira
2016/09/01 (Thu) 15:20

To 金さん

うーん。どうだろうね。
トレンドマイクロは利用したことがないからわからないわ。
そしてyahoo検索も使いません(笑)
GoogleでURL検索したらフツーに金さんのブログ出てきたけどね。
ちなみにセキュリティソフトはカペルスキーです。

========

金さんが言う「アイキャッチ」というのは、FC2に於ける本来のアイキャッチではなくて「プロフィールアイコン」のことみたいだね (´・ω・`)
アイキャッチ画像とかサムネイルとか、いろいろ呼び方はあるけれども、コメント主の横のやつはアイキャッチ画像ではなく「プルフィールアイコン」が一般的だと思う。
アイキャッチというのは通常、人の目を惹くために記事の横に配する画像のこと。
なんとなく記事の本文が想像できる画像であったり、記事内に添付されている画像であったり。
それが「アイキャッチ」

で、この「プロフアイコン」だけども。
FC2の仕様上、ブログ個人設定などで簡単に表示させられるようにはなっていないんです。
特に出向いた先での表示は「できない」と思ってください。
自分のブログ内で自分のアイコンを表示させることはできます。

この私のブログに私以外の方のアイコンを表示させようと思うと、
コメント常連さんならできんことはないけどやらん方がいい。
ハンドルネームが被ることもあるから迷惑かけちゃう。
この辺りの仕組みも含め書きます。
ちょっと時間ちょうだいね。

=======

それから、金さんにお使い頂いているテンプレートは「Nostalgia」ですので、
そちらの専用記事の方にコメントしてもらえると助かります。
(この記事は「Belong」というテンプレのためのものです)

次回はこっちへ ↓
http://vanillaice000.blog.fc2.com/blog-entry-390.html

Nostalgiaの仕様や各種設定の仕方なんかも書いてあるので必読で(笑)

一之瀬
2016/09/02 (Fri) 15:49

Q&A記事の作り方

Akiraさん。いつもお世話になります。

AkiraさんのQ&Aページ
http://vanillaice000.blog.fc2.com/blog-entry-220.html
これと同じように作りたくて、
<a>タグを使ったり自分なり調べて数日がんばってみましたが
どうしてもうまくいきません。

どうすれば良いのでしょうか。
ホントすみません何度も。
お忙しいところ恐縮ですがどうぞよろしくお願いします。

Akira
2016/09/03 (Sat) 00:15

To 一之瀬さん

こんばんは ( ゚Д゚)ノ

それは「ページ内移動」のことでしょうか。
テンプレートのデザインとは直接関係ありませんので本来はお断りするところですが、
類似質問も最近ありましたので今回は記事にしますね。
しばしお時間頂けると幸いです。
(明日の日中できたらやります)

一之瀬
2016/09/03 (Sat) 03:06

ありがとうございます。

Akiraさん。
ありがとうございます。

クリックすると目的の場所に移動する。ページ内移動の事です。

甘えてばかりで申し訳ありません。

今後はもう少し自助努力をしていけるよう気を付けます。

Akira
2016/09/04 (Sun) 13:49

To 一之瀬さん

書きましたのでご覧くださいね。

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

一之瀬
2016/09/04 (Sun) 15:38

ありがとうございます

Akiraさん。

先ずはお礼まで。ありがとうございます。

記事を拝見させていただいてから
まだ2回しか読んでませんので
ちゃんと理解できていませんが、解るまでもう少しです。

何とか実装します。

vanillaice (Akira)
Akira
2016/09/05 (Mon) 13:29

To 一之瀬さん

はい。頑張ってください :)
最初はなかなか難解ですが、たぶんハッ (゚д゚) と視界が開けることがあると思います。
あ、こういうこと??
みたいな感じで。
いや冗談でなく結構そういうことってありますよね(笑)

一之瀬
2016/10/03 (Mon) 17:36

カテゴリ各題名の前に

Akiraさん。お世話になります。
一之瀬です。

まだまだ「視界は開けていません」
なんと難しい事か・・・。

あまりご迷惑ばかりかけるのも、と思い色々とやってみましたが
ちょっとギブアップ気味です。

すみません。教えてください。

このテンプレートのように
カテゴリ各題名の前に、「アイコン画像」を追加したいのですが
どうしたら良いでしょうか。

どうかよろしくお願いします。

vanillaice (Akira)
Akira
2016/10/03 (Mon) 22:27

To 一之瀬さん

こんばんは (●'0'●)/

> カテゴリ各題名の前に、「アイコン画像」を追加したい

こちらは共有プラグインを使わせて頂いております。
DLはこちらから ↓

Paroday 様作
http://admin.blog.fc2.com/control.php?mode=plugin&process=download&no=29533&mob=

私は画像や位置の調整などをカスタマイズしていますので、一之瀬さんが当該プラグインをDLされましても現在ここでご覧になっているものと同じにはなりません。
また、共有プラグインカスタマイズのお手伝いは総じてお断り申し上げております。
その点をご了承くださいね。
とても優れたプラグインだと思います。
作者様感謝でございます。

一之瀬
2016/10/03 (Mon) 23:25

プラグインでしたか・・・

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

このアイコンはプラグインだったんですね。

そうとは知らず、てっきりCSSでAkiraさんが何か技を繰り出しているのだと思っていました。(実際は繰り出していますが)

教えて頂きありがとうございます。
早速使用させてもらいました。

Akiraさんはじめ皆さんホントによく考えて作られていますね。
ホント凄いです。

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


Akira
2016/10/03 (Mon) 23:38

To 一之瀬さん

ちょうど今テンプレをごちゃごちゃやっておりましたもので。
ちゃんとコメントお出来になったようでよかったです。ごめんなさいね ^^;

共有プラグインも覗いてみると楽しいですよ。
テンプレとの相性もありますけれど。
アーカイブを折りたたむプラグインもおすすめ。

Daniel 様作
http://admin.blog.fc2.com/control.php?mode=plugin&process=download&no=23610&mob=

ログが増えて行くとアーカイブ(年月日のリスト)がすんごく長くなりますものね。
こちらのプラグインも恐らく作者様がテンプレートのJSと干渉し合わないようよくよく考えて作られたものだと思います。
ご参考までに。

一之瀬
2016/10/04 (Tue) 01:28

No titleTo Akiraさん

今、少々設定をいじってい見ましたが面白いですね。

なるほど。

プラグインの世界も奥が深いですね。

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

以前教えて頂いた「ページ内リンク」を使ったQ&Aも制作中
なかなかUPできませんが…

Akira
2016/10/04 (Tue) 11:28

To 一之瀬さん

ページ内リンクに苦戦中でしたか。
いつか必ずできる(はず)。
ガンバです ٩( 'ω' )و

一之瀬
2016/10/04 (Tue) 21:26

To Akiraさん

はい。

きろろ
2016/10/28 (Fri) 01:28

今更ながらごめんなさい

ふと、思ったのですが……
What newって、最新記事のことですよね?
プラグインと連動していないのはわかっています。
サムネイルはRSSから取得しているので、プラグインの最新記事とは別物?
合ってますよね?

そこでふと?、思い付いたのが、
この最新記事プラグインのほうを非表示にして、
そこにサムネイルがついているWaht newは移動することは可能でしょうか?

めんどうです! であるのなら別にかまいませんw

ただ、せっかくの新着サムネイルが一番下というのは
ちょっともったいないような気がしたので。

お暇な時にお返事ください<(_ _)>

Akira
2016/10/29 (Sat) 10:52

To きろろさん

> 最新記事プラグインのほうを非表示にして、 そこにサムネイルがついているWaht newは移動する

これは可能ですが、What's newは一番上、ということでしょうか。
というのは、プラグインはカテゴリ毎に一括で出力されるので、こういうのは不可です ↓

プラグインカテゴリ1 --- コメント
プラグインカテゴリ1 --- アーカイブ
RSS新着サムネイル
プラグインカテゴリ1 --- タグ

同カテゴリのプラグインに挟み込むのは不可。
これはOK ↓

プラグインカテゴリ1
プラグインカテゴリ1
プラグインカテゴリ1
RSS新着サムネイル
プラグインカテゴリ2
プラグインカテゴリ2

同カテゴリのまとまりの間に挟み込むのは可。
理屈として「一番上」「一番下」にRSS新着サムネイルも可。

Belongテンプレはサイドメニュー(右)がメインコンテンツ(左)よりも短い時、一番下まで来たら画面内に留まるよう処理しています。
全文表示タイプだとメインがサイドの縦幅よりも長くなることが多いので、サイドの最下部で固定します。
長文が多い方・トップ1ページあたりの掲載数が多い方は、サイドメニューの一番下のものが表示時間が長いので、長く目に留めて欲しいものは最下部への掲載をおすすめしています。

全文タイプであっても
・ 短文が多い
・ トップ1ページあたりの掲載数が少ない
・ 個別記事でも短文, コメントやトラバの閉鎖
・ サイドのプラグインが多い
などに該当する方はサイドがメインよりも縦に長いこともあるかと思いますので、ボトムアンカー(最下部でホールド)に気がつかないことも。
それを踏まえた上で移動するには
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<!-- 注)新着サムネイル不要の方ここから削除 -->

上記を目印に

<!-- 注)新着サムネイル不要の方ここまで削除 -->

までの内容をカットし、ペーストできるのは

① <!--plugin_first-->の上
② <!--/plugin_first-->と<!--plugin_second-->の間
③ <!--/plugin_second-->と<!--plugin_third-->の間

このいずれかです。
きろろさんが一番理想だと思われる場所へ移動させてくださいね。
よろしくお願いします。

きろろ
2016/10/30 (Sun) 01:49

To Akiraさん

そうです、新着サムネイルを一番上に表示するのです。
正確に言えばプロフィールの上? になるのでしょうか?

<!-- 注)新着サムネイル不要の方ここから削除 -->

上記を目印に

<!-- 注)新着サムネイル不要の方ここまで削除 -->

の内容を全部カットして……
カットしたら非表示になりませんか?
RSSを取得してサムネイル表示にしているので。
実際カットしてペーストしてみましたが、
非表示になってしまいます。

ううーん、プラグインが一括で出力されているのであれば、
あきらめます(..)
無理を言ってすみません。
レクチャーを受けても、自力で直せないのであればあきらめるしかないw
ご無理を言って、お時間を取らせました。
ありがとうございます<(_ _)>

きろろ
2016/10/30 (Sun) 01:56

連投ですみません

質問するならまとめろ! って怒ってくださいね<(_ _)>

ブログタイトルの後にブログの説明ってありますよね?
Belongテンプレートはブログの説明が表示されません。
もしや……と思ってhtmlのtitleの後に書き込んでみたんですが、表示されません。

でもぉ……、ググるとタイトルとブログの説明が表示されていますw
なんで? と小首を傾げるきろろでした<(_ _)>

Akira
2016/10/30 (Sun) 02:30

To きろろさん

> カットしたら非表示になりませんか?

いえ、カットしただけなら無くなってしまいますが(笑)
カットして移動してペーストするので表示されます。
FC2のプラグインとは全くもって無関係ですので、FC2のプラグイン個人設定をどう触ろうとなんら影響はありません。
影響が出るのはFC2個人設定でRSSに係る内容のみです。
プラグインは一括で出力されますが、RSSは関与していません。
もう少しわかりやすく

プラグイン1
プラグイン3
プラグイン1
プラグイン2
プラグイン2

適当に書きましたが、こういったカテゴリの混同表示はできないよ、という意味です。
プラグイン1に分類されるものはひとつのまとまりとして出力。
2, 3も同様。
ですから必ずまとまります。
プラグインカテゴリの混合表示ができないということは、FC2プラグイン以外の要素も同じく混合できないということになります。
同じカテゴリに属するプラグインは必ずまとまりますよ、という意味です。

プラグインのカテゴリ表示については123の順序を入れ替えることはできますけどね。
例えばこんな感じになります ↓

プラグイン3
プラグイン3
プラグイン3
プラグイン3
-----------
プラグイン1
プラグイン1
プラグイン1
-----------
プラグイン2
プラグイン2

わかりやすく破線を入れましたが、各カテゴリ分類の「区切り」の位置にRSSを入れることはできますよ、という意味です。
「一番上に入れたい」とのことですのでカット後の貼り付け位置は

① <!--plugin_first-->の上

になります。
<aside id="aside-container"> と <!--plugin_first--> の間です。
スクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-10-30%202.19.21th__zpsylevlkgu.jpg

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

RSSの個人設定は正確に行なってくださいね。
参考
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object19

Akira
2016/10/30 (Sun) 02:43

To きろろさん

> htmlのtitleの後に書き込んでみた

titleというのは<title>というタイトルタグのことでしょうか。
こちらはhead情報に当たりますので、知識のある方以外は触らないようにお願いしています。
<head>〜</head>の内容は編集しない!
と覚えておいてください。
もちろん十分な知識がお有りになれば別です。

<title>はブラウザの「タブ」にブログ名やアイコンなどが表示されますが、あれのことです。
簡単に言うと「該当のページURLに割り当てられたタイトル = ページ名」にあたります。
この部位もSEOに大きく関連していますのでデフォルトの状態に戻されることをおすすめします。

FC2のサイト説明の変数は
<%introduction>
ですが、検索ロボット全般に向けてちゃんとサイト説明の情報は渡してあります。
テンプレート上に文字列が現れずとも内部で処理が行われています。
きろろさんの「なんで?」はこの「不可視情報」が答えです。

サイト説明文はBelongではわざと掲載していません。
必要であれば Ctrl+F(Windows)/ Command+F(Mac) キー検索

</h1>

このすぐ下に以下を追加

<div id="site-description"><%introduction></div>

さらにCSSソース末尾に以下を追加

#site-description {
margin: 0 auto ナビゲーションとの距離px;
width: 100%;
max-width: 850px;
text-align: center;
}

======

これは余談ですが

> ググるとタイトルとブログの説明が表示されています

これについてまだやはり
「ブログ開設や更新を行なったら即座に情報がインデックスされる」
という思い込みがあるようです。
1月1日に記事をUPしたからといって、その日のうちにインデックスされるとは限りません。
1月3日かもしれないし、当日の1日かもしれないし、5日かもしれない。
そして現在検索して出て来る情報(検索結果)は「今のテンプレではなく以前のテンプレのものかもしれない」ということです。
ただしBelongテンプレでの情報に書き換わったとしても何ら問題はありません。
それはさきほどお伝えした「不可視の内部情報」によるものです。
インデックス状況はサチコさんを見れば一目瞭然です。

検索での見え方 > HTML改善

を開くと一番上に「最終更新日」が表示されますよ。

きろろ
2016/10/31 (Mon) 00:54

To Akiraさん

申し訳ございません(T-T)ドゲザ

読解力がなさ過ぎだわ……私(T-T)
コピペの意味を勘違いしておりました。
一生懸命、<!--plugin_first-->をコピペしては
おかしいな……、表示されない……

あたりまえですよね(ё_ё)
サムネイル表示を削除しているんだから(爆)
ちゃんとプラグイントップに表示できました。
すっごいおおぼけですみませんでした。

>そして現在検索して出て来る情報(検索結果)は「今のテンプレではなく以前のテンプレのものかもしれない」ということです。
ただしBelongテンプレでの情報に書き換わったとしても何ら問題はありません。
それはさきほどお伝えした「不可視の内部情報」によるものです。
インデックス状況はサチコさんを見れば一目瞭然です。 <

なるほど!
最初のテンプレート情報が検索結果として表示されているんですね。
独自ドメインなんて取らなかったら、Googleの検索結果がおかしい?
なんて思わなかったでしょうね。
なんかネットの不思議ちゃん状態になっておりましたw
問題解決です、ありがとうございます<(_ _)>

Akira
2016/10/31 (Mon) 18:02

To きろろさん

なんにしてもできて良かったです(笑)

> 最初のテンプレート情報が検索結果として表示されているんですね

や!わからんよ!(笑)
きろろさんがどのタイミングでテンプレ変更をされて、どのタイミングでクロールが行われ、どのタイミングでサイトマップ登録したかによります。
そこはもうきろろさんの作業状況と照らし合わせないことにはなんとも言えません。

サイトマップ登録が無事に済んだ、ということなので、サイトマップ登録はクロールの口約束のようなものです。
「記事を更新したらなるべく早くクロールしに行くね〜」by google bot
って感じかな (´・ω・`)
「なるべく早く」というのがミソ。
「即座に」ではないです(笑)
ただし取りこぼしなどは発生しないはずなので、やはり登録の意義はあります。

きろろ
2016/11/07 (Mon) 04:59

記事の月が表示されませんw

こんばんは、きろろです。

実はつい今し方、あることに気づきました!
Belongの月……
何月何日の何月が表示されていません(爆)
Akiraさんの見本を見ると、ちゃんとAugustとか表示されて、
その下に日付、その下に西暦が表示されてますよね。
きろろん家は、なぜか何月が表示されていません。
なぜなんでしょうかw
お暇な時に、テンプレートを見てあげてください。

ちなみにDLし直しても表示されません。
よろしくお願いします<(_ _)>

Akira
2016/11/07 (Mon) 07:24

To きろろさん

わー。ホンマや(汗)
メンテの時にやっちまったパティーンです。
全然気づいてなかった… ( ̄∀ ̄;)
お知らせ頂いて感謝です。

今上書きしました。
度々ごめんなさい (_ _;)

きろろ
2016/11/07 (Mon) 20:13

To Akiraさん

これって、DLし直せばよいのでしょうか?w
きろろも昨日まで、まったく気づきませんでした(爆)

きろろ
2016/11/07 (Mon) 20:18

To Akiraさん

DLし直して、直りました。
ありがとうございます<(_ _)>

Akira
2016/11/11 (Fri) 12:39

To きろろさん

お返事大変遅くなりました。

毎回お世話おかけしますー ( ̄∀ ̄;)

Akira
2016/12/08 (Thu) 16:57

To sachiさん(移動先)

> コメント欄がデフォルトで非表示

というご質問内容について。
この意味をちょっと測りかねますが、推測でご回答しますね。
sachiさんのブログを拝見しますと、右のサイドメニューに

> コメント欄を表示するにはタイトルをクリックして頂くか〜

という文言が添えられています。
そこでFC2ブログのページ構成・仕様について。

● ブログタイトルをクリックして最初に現れるページと、そのページからページ送りで前後移動するページ
URLは
最初のページが
http://個人ID.blog.fc2.com
それ以降は
http://個人ID.blog.fc2.com/page-数字.html
この種のページがいわゆる「トップページ」で、通常は「時系列順記事一覧」ですので複数件表示されることが多いです。
ただしsachiさんの場合にはこのトップページの記事表示件数は「1件」に設定されています。
これは個人設定ですので、sachiさんが1件のみ表示を選択している、ということになります。
で、Belongテンプレートはトップページが「全文表示」と呼ばれる形態です。
記事の「本文」を掲載し、「追記」に書かれた内容については「個別記事ページ」(後述)へ移動して読んで頂く形です。
Belongテンプレでは右下に Read more というボタンが表示されます。
(当該記事内にある「TOP PAGE DEMO」をクリックしてご確認ください)
「追記」を利用されていない方については、記事内容全てがトップページに掲載されることになります。
これを踏まえまして、現在のsachiさんの記事の書き方は

● トップページへの掲載数は1件、追記は利用せず

--------

複数件表示させるトップページとは異なり、各記事の専用ページとなるのが「個別記事」ページで
URLは
http://個人ID.blog.fc2.com/blog-entry-数字.html
です。
コメント欄(受信コメント一覧・コメント受付フォーム)は通常この個別記事ページに掲載します。

--------

トップページと個別記事ページとではページの役割が異なりますので、
もしかするとsachiさんのおっしゃっておられるのが
「トップページにコメントに係る内容が無いじゃないか」
という意味であるならば、それはFC2の仕様です。
(というよりもブログサービス一般の通常仕様)
たまたまsachiさんの場合はトップが1件表示ですが通常は複数件ですから、トップにコメントまで取り込んでしまうとページが大変冗長になってしまいます。
そしてトップと個別記事との用途もいっしょくたに。

--------

こういった意味合いでのご質問ではないかという推測で書いていますので、見当違いでしたらご指摘くださいね。
上記諸々ご承知の上で「トップページにもコメント関連事項を表示させたい」という内容であれば、FC2変数を利用してhtmlに直接ソースを記載する必要が出てきます。
(htmlの追加)
こちらについては比較的大きな修正であること、基本レイアウトの大幅な変更になりますので自力でお願いします(すみません)

よろしくお願いします。

sachi
2016/12/09 (Fri) 10:09

Akira様

ご丁寧にしかもとても細かく教えて頂きましてありがとうございました!!
なるほど、根本的なデザイン構成を理解しておりませんでしたが良く分かりました。

上記ご説明を踏まえ設計通りの使用に変えてみました。
これで更にこのデザインが好きになりました!!

Akira
2016/12/15 (Thu) 00:45

To sachiさん

お返事が大変遅れてしまいました (*_ _)
なかなかログインする時間が取れずー ( ̄∀ ̄;)

ご理解頂きまして、また嬉しいお言葉もありがとうございます ('-'*)

Lの親父
2017/04/09 (Sun) 19:21

テンプレートの色について

Akira さん
初めまして、写真ブログをしています「Lの親父」と言います。

今、当テンプレートを使用させていただいております。
で、今のテンプレートのベース色(白色)を写真が映えるように黒系の色にしたいと思っています。レスポンシブの黒系のテンプレートってないんですよ。

Akiraさんのテンプレートのイメージが変わってしまうので不可でしたらあきらめます。

CSSソースを弄ってみたのですがわかりませんでした。

今のテンプレートの配色の反転でも構いませんのでお時間がある時でかまいませんので教えてください。

※写真の部分だけは記事毎に右クリック禁止になってます。(小さな抵抗です)

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

vanillaice (Akira)
Akira
2017/04/09 (Sun) 20:24

To Lの親父さん

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

> 黒系の色にしたいと思っています〜

現在のBelongテンプレで背景色変更、ということでよろしいでしょうか。
変更点が結構多いので頑張ってください(笑)

======

まずベースの色を白から黒系統に変更します
Ctrl+F(Windows)/ Command+F(Mac)キー検索

body { /* 注)記事内基本フォント関連 */

この括りの
color: rgb(51,51,51);


color: white;

に変更します。
これがテキストの基本色です。
そしてその color 指定のすぐ下で良いので以下を追加。

background-color: black;

完全黒だとコントラストがキツいかもしれませんので、私なら rgb(51,51,51) を指定して現在の背景色とテキスト色を入れ替えます。
(現在は背景が white, テキストが rgb(51,51,51) の指定です)

========

背景を反対色にしたので色々と変更すべき箇所が出てきます。
残りについては

rgb(51,51,51)

で検索し、反対色(white)に変更
そして

white

で検索し、反対色(黒系統)に変更
という手順でお願いします。
また、リンク色の変更も必要になるかと思いますので、

/* 注)基本リンク色 (approx)Nobel */

これが記事内リンクテキスト色です。
そしてサイドメニューに含まれるリンクテキストの色でもあります。
適切と思われる白系統の色に変更してください。

色調を完全反対色に変更する場合にはかなり修正箇所が多いので、とりあえずやってみて、どうしても指定箇所がわからないところがあればまたお尋ねくださいね。
よろしくお願いします。

------ 追記 4.11

ヘッダー画像以外で特殊なカスタマイズはされていないようですので、色調変更の作業に入る前に最新版の再DLをおすすめします。
サイドメニューの「What's New」はGoogleのAPI廃止で表示できなくなっています。
その他微調整もありますので、差し支えなければお願いします。

Lの親父
2017/04/11 (Tue) 22:05

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

Akira さん

お忙しい中、素早いご返事ありがとうございます。

とりあえず変更作業にあたり最新版をDLしてからやってみます。

空いた時間でしか出来ないので時間掛かるかもしれませんが挑戦しますので、また分からない事があればコメントさせて頂きます。



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

To Lの親父さん

最新版の件、お手数おかけします。
ご自分のペースでチャレンジしてみてくださいね。
また何かありましたらお気軽に。
ありがとうございます :)

Lの親父
2017/04/13 (Thu) 21:47

何とか出来ました。

Akiraさん

何とか色変えできました。

反対色にする際(検索時にrgb(51,51,51)と(white)ですると入れ替えた色をまた入れ替えてしまうので)黒系カラーはrgb(45,45,45)にして行いました。

多分、大丈夫だと思いますが、ココが変だよって所がありましたらご指示ください。

お手数をお掛けしました。
ありがとうございます。



Lの親父
2017/04/13 (Thu) 22:24

教えてください。

Akiraさん
1つ教えてください

色変え出来たと思ったら、コメントを書くところで何処をwhiteにすれば白文字になるのか教えてください。

Akira
2017/04/13 (Thu) 23:51

To Lの親父さん

> コメントを書くところで何処をwhiteにすれば白文字になるのか〜

CSSソースの末尾で良いので以下を追加。

#comment_form input,
#comment {
color: white;
}

これでできるはずですのでお試しください。
よろしくお願いします。
カメラ、お大事になさってください(笑)

Lの親父
2017/04/14 (Fri) 07:16

あるがとうございます

Akiraさん

素早いご返答ありがとうございます。
早速CSSに追加しましたらOKでした。

また何かお伺いすると思いますので、その時はよろしくお願いします。

vanillaice (Akira)
Akira
2017/04/14 (Fri) 15:18

To Lの親父さん

ご報告ありがとうございます。
安心しました :)

はる
2017/08/18 (Fri) 16:41

Akiraさん
初めまして。
わんこブログをしています。
こちらのスッキリとしたシンプルなテンプレートをお借りしまして
色を変えたり、ヘッダーに画像を入れたりしたのですが…
(勝手に変更してお気を悪くされたらすみません)
1.ブログタイトルが真ん中に表示され移動させたいのですが
 どこをどうすれば移動できるのかよくわかりません。
2.後、ブログの説明文の表示も併せてしたいのですが…
3.文章・画像を常にセンター表示させたいのすでが…
  (今は毎回<center>-</center>で調整しています)
初歩的な質問で申し訳ありませんがよろしくお願いします。

vanillaice (Akira)
Akira
2017/08/18 (Fri) 17:56

To はるさん

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

まず、カスタマイズについてはお好きにして頂いて構いません。
どうぞご自分の好みに叶うようになさってくださいね。

-------

> ブログタイトルが真ん中に表示され移動させたい〜

#blog-title {
でCtrl+F(Windows)/ Command+F(Mac)キー検索されますと、CSSソース内(管理画面下段)に1箇所ヒットします。
この括りの

text-align: center;

の一行を、左寄せにするならば削除
右寄せにしたいならば center を right に修正

---------

> ブログの説明文の表示も併せてしたい〜

</h1>
で検索。htmlソース内(管理画面上段)に1箇所あります。
その直下に以下の内容を追加。

<p id="site-description"><%introduction></p>

続きましてCSSソース末尾に以下の内容を追加

#site-description {
margin: auto;
width: 100%;
max-width: 850px;
padding-top: ●●px;
font-size: ●●px;
color: 文字カラーコード;
}

赤字の部分はご自身でお決めください。
padding-topの数値はブログタイトルとの距離です。

--------

> 文章・画像を常にセンター表示させたい〜

検索。

.inner-contents {

CSSソース内に1箇所あります。
この括りの
padding-bottom: 20px;
直下に以下の内容を追加

text-align: center;

ただしFC2ブログの都合上、関連記事やSNSシェアボタン(個人設定で表示するもの)及び記事下のテキスト広告も全てセンタリングされます。
が、非表示にされているようなので特に問題ないかもしれません。
(テキスト広告は影響を受けますが)
<center>というhtmlタグの利用については以下のページをご覧ください(強制ではありません)

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

--------

ヘッダーに画像を用いる場合には「上にブログタイトルが乗る」ことを意識しないと文字が見えません。
仮にタイトルを左あるいは右に寄せたとしてもデバイスの横幅は閲覧者によって違います(スマホの人も居れば大画面PCの方もいます)ので、一定の幅だけで「見える」と判断しても、それは間違いかもしれません。
ですので画像上に暗色のオーバーレイを乗せて可読性を上げるか(画像が暗くなります)、あるいはテキストにシャドウを付けて浮くような処理をするか。
とりあえずカスタマイズされまして様子をご覧頂いてから不都合があればまたご相談ください。
よろしくお願いします。

● カスタマイズ後にチェックすべきポイントまとめ

・ ブログタイトルがはっきり見えるか。
(レスポンシブデザインですのでブラウザ横幅を拡大したり縮小したりしてお確かめください。特に「縮小」時の見た目は要確認)
・ 記事下の要素もセンタリングされることについての可否。

はる
2017/08/18 (Fri) 19:54

ありがとうございます

早速のお返事、ありがとうございます。
ブログタイトルの位置について、自分ではいつもPCで最大で見ていたので
縮小してみるとか、スマホで見るとか考えてもいませんでした。
こうしてみると、やっぱりセンターにある方がスマートですね^^
画像の方を調整した方がよさそうです。
記事下の要素についてはセンタリングされても大丈夫です。
説明文ですが、padding-top の数字を小さくしてみてもブログタイトルとの幅が縮まらないのは何故かしら??
30にしても10にしても変わらないのですが…
お忙しいところ恐縮ですがよろしくお願いします。

vanillaice (Akira)
Akira
2017/08/19 (Sat) 13:34

To はるさん

> padding-top の数字を小さくしてみてもブログタイトルとの幅が縮まらない〜

こちらはすぐ上にあるブログタイトルにもpaddingが指定されているためです。
今回修正するブログ説明文側のpadding-topを削除すると、自動的にタイトルとの距離は30pxになります。
距離30pxで体裁が取れるのであればpadding-topの一行は不要ですので削除してください。
逆にもっと距離を狭くしたい場合は
#blog-title {
で検索し、その括りの

padding: 30px 0;

を以下の通り修正

padding: 30px 0 ●●px;

30pxが「上」0が「左右」●●が「下」の距離指定です。
#blog-titleの方でpadding調整をする場合には「距離を近づける」作業になります。

-----------

画像を調整する場合の方法は概ね4通りかと思います。
① 画像自体を変更する
② 現在の画像のまま、画像編集で暗色系のオーバーレイをかける (画像編集が必要)
③ 現在の画像のまま、画像編集なし、CSSで暗色オーバーレイをかける (CSS追加が必要)
④ 現在の画像のまま、画像編集なし、テキスト(ブログタイトル及び説明文)にCSSシャドウ処理をかけて浮き立たせる

①と②についてはご自身で行って頂くことになります。
③と④の手順を書いておきますのでご希望に沿う方を採用されると良いと思います。
もちろん以下の方法を利用しなければいけない、ということではありません。
そして
ブログタイトルリンク色は「白」である
・画像はヘッダー(.header-banner)ではなくヘッダー内側の要素(.blog-name-container)へ指定する
上記2点、はるさんのカスタマイズ済み内容を尊重し、前提にしています。
ホントは画像はヘッダーに指定した方がスマートですが、既にカスタマイズ済みなのでここは触らずに進めましょう。
-------

元の画像スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/original98u2943th.jpg

③ CSSオーバーレイ

.blog-name-container {
で検索。ヒット2箇所。最初のものが対象。
この括りの
color: white;
の直下に

position: relative;

を追加。
続きまして検索。
#blog-title {
この括りの
text-align: center;
の直下に

position: relative;
z-index: 3;


を追加。
そして昨日追加した
#site-description
の括り
color: 文字カラーコード;
の直下にも同じく

position: relative;
z-index: 3;


を追加。
続きましてCSSソース末尾で良いので

.blog-name-container:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.2);
position: absolute;
top: 0;
left: 0;
}


を追加。

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

--------

④ テキストにシャドウ

#blog-title {

text-align: center;
の直下に

text-shadow: 2px 0px 2px rgba(85,85,85,.8);

を追加。
説明文にも必要であれば、
#site-description
にも同じものを追加。

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

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

はる
2017/08/19 (Sat) 16:15

ありがとうございます

Akira様
早速のお返事、ありがとうございます。
ブログタイトルと説明文の幅が希望通り縮まりました!
そして、画像の調整にもいろいろな方法があるのですね!
今回は画像が暗くなるのは嫌だったので
どんな画像に変えても使えそうな④の方法にしました。
ハッキリ見えて良い感じです♪
いろんな方法を詳しく教えて頂き、本当にありがとうございました。
これからも素敵なテンプレートを提供してくださいね^^
ありがとうございました♪


vanillaice (Akira)
Akira
2017/08/19 (Sat) 23:23

To はるさん

見やすくなりましたね。
こちらこそありがとうございます。
お疲れ様でした :)

-
2017/11/04 (Sat) 16:23

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/11/05 (Sun) 15:18

To 応援のお言葉 内緒さん

ありがとうございます :)
僥倖っ…!なんという僥倖…!
励みになります(笑)

-
2018/01/05 (Fri) 14:00

管理人のみ閲覧できます

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

Akira
2018/01/05 (Fri) 15:16

To Belongテキスト位置揃えの件 内緒さん

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

-------
> 記事のフォントをもう少しだけ小さくしたい〜

ページ全体の調整は以下のページを参照してください。
https://vanillaice000.blog.fc2.com/blog-entry-641.html
(「フォントの rem という単位について」の章です)

-------
> 記事本文を両端揃えにしたい(出来たら記事ごとに貼る画像の幅で〜

Belongはレスポンシブデザインです。内緒さんはスマートフォン版を併用されていますが、基本的にスマートフォン版は非表示にしてお使い頂くことが前提です。
レスポンシブを採用するにしろスマートフォン版を併用するにしろ、記事内容(記事内のhtml)というのは共通です。
画像の横幅は固定してしまうとスマートフォンでははみ出してしまいますので、画面幅に合わせて自動で縮尺されるように設定しています。
(スマホ版の方はサポート外なのでわかりません。スマホ表示をサポートできるのはレスポンシブ設定をしている方だけです)

画像と同じ幅で、ということですが、画像の横幅自体が流動的になりますので両端揃えを実現しようと思えば内緒さんが思っているほど簡単にはいきません。
まずはパソコンからブラウザ幅を縮小し、テキストや画像がどうなるかを目視確認してください。

で、既存の記事を確認しましたところ、両端を揃えることにこだわるあまり画面幅の流動性を無視してこんな感じになってます ↓

https://blog-imgs-118.fc2.com/v/a/n/vanillaice000/capture9892r3eth.jpg

内緒投稿のためところどころぼかしましたので非常にわかりづらくなってしまいましたが、赤いのが改行をしたところですね。
これ閲覧者はとても困ります (´・ω・`)
文章が完結していないことに加え、横にもまだスペースがあるにも関わらず、見た目の都合だけで改行されてしまっている。
最後の2行なんかはもう何が何やら (´・ω・`)
厳しい言い方をすると文章として成り立っていません。

自身が利用しているデバイス(パソコンやスマートフォンなど)の画面幅「だけ」を考えて文章を書くとこうなりますね。
閲覧者が自身と同じ画面サイズで見ているとは限りません。

なのでまず位置揃え云々よりも、見た目を整えるためだけに改行を行なってはいけない、という点から始めた方が良いと思います。
現在はパソコンよりもスマートフォンから閲覧する人の方が多いので、パソコンだけを考えた配置(画像やテキストなど全て)を行なってはいけません。

両端揃えの件ですが、両端を揃えたつもりでも画面サイズの変化によって揃わなくなります。
横1200pxの画面で見たら5行だった文章が、768px(代表的なタブレットサイズ)では10行になっているかもしれません。
スマートフォンの320pxでは20行かもしれません。
テキストは自動で折り返しますので、完全に揃えるというのは不可能です。
どうしてもという場合には画像もテキストも横幅を280px程度に制限するしかありません。
スマホ最小画面が320pxですので大体の数字です。

通常は文章が画面幅いっぱいになった時の「折り返し」を揃えるためにjustify指定を行いますが、それはあくまでも記事横幅いっぱいまで到達しての折り返しです。

拝見したところ画像の掲載サイズがバラバラですので、下に続く文章を上にある画像と揃えるには文章を書く際に

<p style="width: 画像横幅と同じ数値px; max-width: 100%;">文章</p>

こうして毎回htmlを書く必要が生じます。エディターによる自動判別は不可能です。

記事幅いっぱいまで到達しての折り返しを両端揃え、ということであれば

.inner-contents {
word-break: break-all;
text-align: justify;
text-justify: inter-ideograph;
}

これをCSS末尾に追加してください。
ちょうど内緒さんと同じパターンの方についての記事がありますので、そちらもご覧ください。
(お友達のFC2ブロガーさんの記事です)

Webテク倉庫/ ぼっちん様
https://oops0011.blog.fc2.com/blog-entry-197.html

-
2018/01/05 (Fri) 15:48

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/01/05 (Fri) 16:16

To Belongテキスト位置揃えの件 内緒さん(終了のご報告)

そうですね。改行の方を正しく行なった方が良いと思います。
こちらこそありがとうございます。
お疲れ様でした :)

みいたむ
2018/08/18 (Sat) 19:46

ABOUTについて

はじめまして。お忙しいところを失礼します。初心者で勉強不足で申し訳ありません。ステキなデザインで敷居が高いのですが、ぜひ使いたいのでお願いします。

グローバルナビゲーションというのでしょうか、タイトル下の HOME Index ABOUT と続くボタンのことなのですが、このABOUTをクリックすると該当の記事が現れるようにするには、どうしたら良いのでしょうか。
そしてABOUTとはブログについて、プロフィールのもう少し具体的な記事という解釈でよいでしょうか。

誰も聞いていなさそうなので、基本的なことなのですね。恥。宜しくお願い致します。

vanillaice (Akira)
Akira
2018/08/19 (Sun) 00:34

To みいたむさん

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

> ABOUTをクリックすると該当の記事が現れるようにするには〜

aboutは予備リンクとして入れていますので、まず必要があるか無いかをご判断頂きまして、不要であれば削除をお願いします。
FC2ブログにはアメブロのような「プロフィール専用固定ページ」がありませんので、通常の記事を書くのと同じ要領でプロフィール内容を記した記事をUPし、そのページへのリンクを設定するなどの対処をお願いします。
href="#"
赤字の部位を該当ページURLに変更してくださいね。

Breaking Badおもしろかったですよね。
私の印象に残っているセリフは
〝Learn to take yes for an answer.〟
です。耳慣れない言い回しでそういう表現もあるのか、と(笑)

みいたむ
2018/08/19 (Sun) 14:54

To Akiraさん

わーーー。ありがとうございます!!ごめんなさい、あまりにダメなこと聞いているようで
相手にされないかと思いました。うれしい涙。そして仰っていることをこれから試してみます。

〝Learn to take yes for an answer.〟 
これどこのセリフだろ、ガスのウォルターにしたセリフかな? うふふ。

全然関係ないですけど、アマゾンプライムの『ミスター・ロボット』も結構好きで
Akiraさんのようなお仕事をされている方は、もっと深く理解できて楽しいのではないかしら
なんて思ったりします。

みいたむ
2018/08/19 (Sun) 15:21

できました!

できました。解決です!! 落ち着いて見てみたら、指示も書き込んであってすごくわかりやすかったです。改めてありがとうございました!

vanillaice (Akira)
Akira
2018/08/20 (Mon) 00:35

To みいたむさん(完了のご報告)

お出来になったということで安心しました。
お疲れ様でした :)

-----
セリフは確かマイクがウォルターに言って、同じセリフを後にウォルターがリディア(だっけ?うろ覚え ^^;)に言っていたと思います。
あーでも記憶違いかも ( ̄∀ ̄;)
今いまさらながらに「The Killing(米版)」を観ています。
ミスター・ロボットは気になりつつ未見なので候補にしておきます。ありがとうございます(笑)
ちなみに「Better Call Saul」はワザと見ずに引き伸ばしてるんです。
一気に観たいと思って(笑)

みいたむ
2018/08/20 (Mon) 09:40

カテゴリについて

Akiraさん。」ごめんなさい。。また教えていただいてもいいですか。⤵
カテゴリをクリックすると開くページの右側に小さい画像の枠が設けられていますが、私のブログを見ると、そこに入るべき画像が外れちゃってる(no image)なのはどうしてでしょう。昨日書いた記事の画像は外れてないから、なにかの初歩的なはずみで、はじめて作った記事がおかしくなってリンクしてないとかな思ったのですが、自己解決しようとしたんだけど、????で。。。急いでいないのでお手すきの際にアドバイスいただけたら幸いです。
-----
それと台詞は気になってあれから調べちゃいましたよ。あ、これなんかガスじゃないと思って。(笑)
Learn to~ そう訳すのか~、、勉強になりました!
こういう覚え方すると絶対忘れないですね、ありがとうございます。
「The Killing」おもしろいですか、気になっていたんですよね
Akiraさんとは好みが合いそう、って勝手に思ってます(笑)
「Better Call Soul」は今やってますね~明日です、私はナチョ(新キャラ)押しです。あは

vanillaice (Akira)
Akira
2018/08/21 (Tue) 01:59

To カテゴリの件 みいたむさん

お疲れ様です ('0')/

> カテゴリをクリックすると開くページの右側に小さい画像の枠が設けられていますが〜

サムネイル画像のことですかね。
今17日投稿の「Live life on your own terms.」を拝見しますと確かに出てないですね。
で、テストで画像を保存させて頂いてBelongで表示してみましたが、私の環境下ではちゃんと表示されるんですよね。
(お借りした画像は削除済みです)

https://blog-imgs-122.fc2.com/v/a/n/vanillaice000/capthumb88982.jpg

ちゃんと本文最初の画像になってますし、外部直リンクでもないですし、ファイル名に半角カッコも無い、html構文エラーも無い、スクリプトエラーも無し(一つ有るのはFC2の広告エラーです)…。

となるとアップローダーの不調ぐらいしかちょっと思い浮かばないんですよね。
ウォルター(めっちゃ似とるし((((笑))だけでなくガスやジェシーも出てないですよね。
でもTOEICのは出てる。よくわからないなぁ (´・ω・`)

構文的なエラーが無いとなると、このサムネイルというのはFC2がphpというのを利用して出力しています。
サーバー側で行う仕事のことなんですけど、サーバーサイドで何かしらの不具合があるのかしら。
差し支えがなければ「OGP設定」をしてみてもらえないでしょうか。

設定ページ : メタタグの設定 > OGPの設定「有効」に変更
https://admin.blog.fc2.com/control.php?mode=setting&process=2#meta_tag

現時点で無効になってます。
ここを設定しておくとSNSシェアなど行われた時に画像が添付されます。
他ブロガーさんからもブログカードなどで記事へリンクしてもらいやすくなります。
なので管理人の任意です。シェアを嫌う方もいらっしゃいますので。
(ただテンプレートの各記事下にあるSNSシェアボタンを削除しないのであればOGP設定した方が良いと思います)

OGPとサムネイルは関係あるっちゃあるけど無いっちゃ無い(なんだそれ)
サムネイルが表示されなければOGP画像も出力されないはずなので、OGP出力を私の方で調べたいと思います。
お手数ですがご協力お願いします。

-----
Killingは胸が潰れそうになります (´・ェ・`)
ただシーズン3の着地点が「はい?」って感じで(笑)
結局お前もかよ… みたいな (´・ェ・`)
なので4がなかなか進まないんですよぅ。
とても良くできている良ドラマだと思うのだけれど、と同時に打ち切りになった理由もわかるというか(笑)
米リメイクされる北欧ミステリにハズレって無いですよね。Bridge(スウェーデン・デンマーク版)もおすすめ。あと映画の特捜部Qも。
米版のドラゴンタトゥーの女はクソだと思った ←
ノオミ・ラパスのスウェーデン版おすすめ(笑)

ナチョって誰!(笑)
楽しみにしておきます(笑)

-----
やはりサーバーサイドで <%topentry_image_72> が上手く書き換わっていないように思います。
RSSへも画像情報はちゃんと出ていますし、サムネイル画像自体は存在しています。
これがサムネイルのURLです ↓

https://blogthumbnail.fc2.com/72/122/b/r/b/brbatoeic/201808181215065b6.jpeg

<%topentry_image_72> と記してあると、各記事に対応したサムネイル画像のURLをサーバーが
<img src="画像アドレス" alt="">
こうしてhtml要素に変換(というか上記文字列に書き換え)を行うんですが、それが上手く行っていないのか。
あるいは
<!--body_img-->と<!--/body_img-->
このエリア変数が機能していないのか。
ここ最近はいろいろとおかしな挙動があるようなので、その一つなのかもしれません。
共有テンプレートのJSファイルがおかしかったりURL消失が起こったり、スクリプトファイルに誤字があったり。
いずれにしろOGPを見させてくださいね。
よろしくお願いします。

* もしかしたら画像のアップロードし直しで直るかもです。
こちらの手順はOGPの後にお伝えしますね。

みいたむ
2018/08/21 (Tue) 09:30

To Akiraさん

Akiraさん
わー。素早い。。なんだかしょうもないことばっかり聞いているのに本当に申し訳ないです。こんな丁寧に。。。涙
サムネイルっていうのか~、それです。
素人なりに、ちょっとおかしなことになっていないか見てみたんですよね(素人レベルで(笑))、でもどこがおかしいのかわからなくて。。OGPの設定、有効にしました。むむむ。

見えているものと見えていないものでの、作業上の違い。

見えているもの→ 画像を先にアップして、ファイルアップロード画面で「この画像で記事を書く」から
開いたウィンドウにじかに文章を書いた。

見えていないもの→iPadのメモアプリに書いておいた記事をコピペしてから、後から画像を挿入した。
(最初なので画像サイズが気に入らなかったり、iPadで見てた画像が Windows でみたら粗が目立ったり
したので色が暗めだったので直してファイルを挿入しなおしたりをしつこく繰り返したりした。。

---

えーー。Killing、興味わいてきたー、でも打ち切りなんですか?かなしいですね。
ナチョは、「Better Call Soul」唯一の若い男キャラです(笑)
BrBaでいうところのジェシーみたいな、
いや、ジェシーはピュアでおもろくて憎めないキャラだけど
ナチョは最初から頭がよくて大人です。
イグナシオっていうから、ナチョなんだって。。
で、これがまた危ないことすんのよ(笑)後はお楽しみです!

vanillaice (Akira)
Akira
2018/08/21 (Tue) 18:34

To カテゴリの件 みいたむさん②

こんにちは ('0')/

そういうことでしたか。
状況分析してもらえるととても助かります。ありがとうございます。

> ファイルを挿入しなおしたりをしつこく繰り返したり〜

画像のアップロード自体も複数回行った、ということですよね。
ちょっとこれからFC2ブログのロダの特徴をお伝えします。

・ 上書き保存 --- 書き換わらないことがある・上書きしたデータが闇に葬られることもある(元データのまま存在する)
これはキャッシュが影響しています。自分が見て「上書きされていない」と思っても、第三者から見ると「書き換わっている」こともあり、わけがわからなくなります。なので使わない方が良いという結論です。

・ 別名保存 --- これを選択しておくと同名ファイルの場合に自動で別名に変更されます(末尾に数字を追加することで区別します)

・各種サムネイル画像にはタイムラグがある
本文の画像が変更されても関連記事などのサムネイルが切り替わらないことがあります

------
何が言いたいかというと、FC2ローダーは完璧ではないということです (´・ω・`)
特に「上書き」は絶対避けた方が良い。
FC2には無料・有料があり、画像サーバーの通信システムもアカウント契約状態で切り替わります。

画像のアップロードを繰り返した場合、ファイル名がどうなっていたか、が焦点になると思うのですが、画像の修正作業パソコン以外のデバイスだとファイル名がそのまま同じだった可能性もありますよね。
もちろんパソコンであってもアプリの設定などに左右されますが。

ともかく類似画像のアップロード&消去などを繰り返すと保存内容がワケワカメな状態になってしまう特徴がありますので、同じ画像であっても「ちょっと修正してアップし直し」という場合には ファイル名を自主的に別名にしてからアップする と良いと思います。自主的に、というのはローダー任せにせず能動的に済ませておくという意味です。

----
OGP用画像もやはり「存在しない」という判定になってますね。
同じ変数を用いて出力しますので、サーバーのphpエラーかあるいはローダーの混乱のどちらかだと思います。

----
画像の再アップロードをしてみましょう。
ここで提案ですが、画像ファイルの名称は不特定文字列ではなくなるべく分類できるような形にしておくことをおすすめします。
例えば
× 876132983471.jpg
✔ breakingBad_walter.jpg

記事数が今はまだ少ないので良いんですが、多くなってくるとどこかで「過去画像を探す」こともあると思います。
不特定文字列では検索ができませんので、意味が通り、自身ですぐに見当が付けられる名称にしておくと良いですね。

そしてエディターのツールを利用して掲載した画像にはalt属性が自動で付きます。
<img src="12345678.jpg" alt="12345678.jpg">
こうしてファイル名(拡張子含む)が自動でaltに入ります。
alt属性は画像検索で役立ちます。仮にファイル名が breakingbad.jpg だった場合には altも自動で breakingbad.jpg になりますので、もしかしたら検索した方がたどり着けるかもしれません。
英数字のランダム文字列なら画像検索は無理です。

もっと良いのは画像のaltもエディター任せにせずその都度手直しした方が良いです。

上記注意点というか提案に留意し、各画像をアップロードし直してみてください。
その際には記事編集画面下の「アイキャッチ画像」を一旦削除するのをお忘れなく。
アイキャッチ指定が空っぽになっている状態で更新してください(次回編集画面を開いた時には自動で適用されています)

一度これでやってみましょう。面倒ですがよろしくお願いします。

-----
killing最終回観ました。
やはりそうですか。それしかないdeathよねぇぇぇええぇ! って感じ ( ̄∀ ̄;)

みいたむ
2018/08/22 (Wed) 09:50

To Akiraさん

こんにちはっ。お世話様になります!
なるほど。。そうなんだ~。親切な説明ありがとうごさいます。。
わかりました!(画像名のアドレスもありがとうございます。)
やってみます。がんばりますっ!!!(鼻息!)

-----
>killing最終回観ました。
>やはりそうですか。それしかないdeathよねぇぇぇええぇ! って感じ ( ̄∀ ̄;)

え~~!!そうなんdeathかあぁ~~~?(笑)


なんだか、貴重なお時間を割いて長文を書いていただいているのに
しょうもない短文で失礼します。。

みいたむ
2018/08/22 (Wed) 09:58

↑↑↑

↑↑↑

>画像名のアドレス
✕画像名のアドレス→画像名のアドバイス。

みいたむ
2018/08/22 (Wed) 17:53

To Akiraさん

で、でででできますた。。
直りました、ありがとうございます。
良かった~~、、最初に教えてもらって。。ほんとに。
ちょっとこのサイト内の、他の問題とかも見学してよく勉強します。
ちょろちょろ来ていますがすみませ~~ん。笑

vanillaice (Akira)
Akira
2018/08/22 (Wed) 22:30

To カテゴリの件 みいたむさん(完了のご報告)

こんばんは (●'0'●)/

確認しました。修正できて安心しました。
もう一つアドバイスですが任意です。
SSL化を今のうちにしておいた方が良い思います。
記事数が増えてから行うと修正が大変かもしれませんので、後々の面倒を避けるために早めに。

SSL関連記事
https://vanillaice000.blog.fc2.com/?tag=SSL

設定ページ(301リダイレクト)
https://admin.blog.fc2.com/control.php?mode=setting&process=15

-----
どうぞチョロチョロいらしてください。ご遠慮なく(笑)
海外ドラマ談義も楽しかったですよ。ありがとうございます。
お疲れ様でした :)

みいたむ
2018/08/23 (Thu) 00:39

To Akiraさん

おこんばんわ。
いやいやいや、これは、、、やらなきゃいかんのでしょ?
ほんと無知って怖いわもう、、っていう話ですよね。
ウブですみません。
(ウブ、、。あれ?。。うん響きはいいな。ウブ。
なんだかとても遠くて甘酸っぱいけど笑)

早速SSL化しました。 302の方にして。
いや〜世の中ってそういうことになってるんですか。
世の中って広いっっ。沼っ!!笑
沼でほんとにいい人に出逢えて良かった自分。。って思ってます。
ありがとうございます。。

vanillaice (Akira)
Akira
2018/08/23 (Thu) 13:20

To みいたむさん

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

はい。やらなきゃあかんのです (´・ェ・`)
そして302ではなく301の方を選んでくださいね。
302は一時転送、301は恒久転送つまり正規URLです。
302だとhttpsもあるけどhttpの方が本家、ってことになってしまいます。

ところで私勘違いしてまして。
ギリガンさんは「tweaker」だと思っておりました((((笑)
そんな危ないブログ名なわけないですよね(笑)
勝手に「ギリガンさん(Breaking Badのプロデューサー)ってそうなんだ… (´・ェ・`汗)」って思ってました。
TOEICer だったんですね。やだー!恥ずかしい!(笑)

みいたむ
2018/08/23 (Thu) 19:57

To Akiraさん

ええええええええ!!
そんな意味があるんですかあああ!! tweakerって、、、笑!すごい奇遇、笑!!
びっくりするわ、そんなイカチーーブログ名付けちゃって笑。弱々なのに笑。

それはバイリンガルの人は間違う。。
やばいですね。いいこと教えてもらった。どうしよ名前変えよっかな
紛らわしーーのつけちゃったよ、、、笑。やいっそこのままにしとこ。
どっかに違いますよ〜って入れとこっかな。
や、かえって面白かったかなタイトル。。

いろんなところで助けてもらってます。。。わは

vanillaice (Akira)
Akira
2018/08/23 (Thu) 23:35

To みいたむさん

こんばんは (●'0'●)/

良いタイトルだと思います(笑)
TOEIC頑張ってくださいね。
長男は11月にIELTSを受けますよ。3万です。3万円death!!!
たけーよ((((笑)

-
2018/08/24 (Fri) 13:18

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/25 (Sat) 13:59

To Belong諸々の件 内緒さん

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

私の経歴についてはおっしゃる通りです。and I'm actually mixed(have 3 nationalities).

----
そのポップアップですが、今年の7月に爆発的に増え、一旦沈静化してまた増えているみたいですよ。
はてなブログ運営でもこんな記事が出てました。

http://staff.hatenablog.com/entry/2018/08/24/154144

まさにタイムリー(笑)
よく見ると後ろの質問が…((((笑)

この対策はなかなか難しいですよね。閲覧者の思考パターンは
1. サイト管理人が悪い
2. ブログサービスの場合はそのブログサービス運営が悪い
3. マルウェア感染?
こんな感じだと思いますけれど実際には広告配信とブラウザのクッキー情報を利用しているので、管理人やブログ運営は広告枠を貸し出しているだけですし、マルウェアでもないんです。
かといってクッキーを停止するといろいろ不便ですしね (´・ω・`)
はてなの「広告一時停止」はものすごい英断だと思います。大きな収入源を自ら断つわけですもんね。

内緒さんはとりあえずブラウザ拡張のアドブロックを入れてはいかがでしょう。
私は入れてますのでこのポップアップ一度も見たことないんです(笑)
アフィリエイターさんには申し訳ないけどこういうとき「やっぱりadblockやっぱ要るわ…」って思います ^^;

* ちなみにIELTSはUKの大学に入る際に必須だと思います。たぶん。

-
2018/08/25 (Sat) 18:45

管理人のみ閲覧できます

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

-
2018/08/25 (Sat) 18:56

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/25 (Sat) 20:12

To Belong諸々の件 内緒さん②

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

拡張機能のDLは簡単なので是非。
YouTube再生時の広告も出なくなりますので快適ですよ。
ただアフィリエイターさんには重ねてごめんなさい(笑)

内緒さんのイラストは味があって私好みですよ ( ゚∀゚)

-
2018/08/25 (Sat) 23:49

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/26 (Sun) 00:52

To Belong諸々の件 内緒さん③

はい。また気軽にお越しください。
私もドラマのことを書きたいと思うときはあるんですが、たぶん永久にやらない(笑)
内緒さんのブログで楽しませて頂くことにします。
ありがとうございます :)

チウ
2018/09/19 (Wed) 11:29

ヘッダー画像を横画面幅いっぱいに表示させたい

Akiraさん、こんにちは(✿ ❛‿❛)

こちらのテンプレートを使用させて頂いて、
ほんとうにとってもシンプルでスタイリッシュな
テンプレートで、使わせて頂いています。

皆さんのコメントも、楽しみながら見ています。
初めましてですが、宜しくお願いします✿


本当に全くの初心者で、HTMLもCSSも勉強中ですが、
頭がこんがらがってしまいそうで、できなくて
落ち込んでいます。


こちらのBelongのテンプレートで、
ヘッダーのSNSリンク枠(黒線部分)の真下から繋がるように、
グローバルナビゲーションの「HOME」や「INDEX」などのメニュー枠
ピッタリまでヘッダーに画像を敷いて、更にブログタイトルや
サブタイトル(文字)を画像に入れ込んで、中央上に表示させるには
HTMLとCSSをどのようにすれば良いのでしょう。


もう3日も色々なホームページや他の方のブログも見たり、
Akiraさんのページも何度も何度も読み返しているのですが、
できなくて・・・。


具体的にはこちらでご質問されている、わんこブログを
運営されている「はる」さんのようなヘッダースタイル
や背景(もちろん真似ではなく)がとてもおしゃれで
頑張ってしたいのですが。

https://blog-imgs-122.fc2.com/p/o/i/pointsitedesetsuyaku/apartment-chair-contemporary-509922.jpg


こちらの画像とブログタイトル、サブタイトルを
何とか綺麗に表示させたいのですが、
こんな初歩の私にも、ご教授頂けますか?

お忙しい中恐縮ですけど、教えてください;;(/ω\)

vanillaice (Akira)
Akira
2018/09/19 (Wed) 15:56

To チウさん

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

ヘッダー背景の件、CSS追加の前に画像を少し編集された方が良いと思います。
Belongはヘッダーの縦幅が狭いので、スマホでの表示は良いとしてもパソコンでこの画像だと椅子の背が見えるだけで上部の空間などは見えなくなります。
これはレスポンシブの宿命なんですね (´・ω・`)
レスポンシブデザインではブラウザ幅(画面幅)が広い時と狭い時、双方を考慮した画像選びもしなければいけません。
縦幅は変わらないけれども横幅は閲覧者の画面に左右されるわけで、チウさんは今回「横幅いっぱいに」をご希望なわけですからかなり横長になる場合も想定する必要があります。

①cover値で敷いた場合(原寸)
https://file.blog.fc2.com/vanillaice000/miscellaneous/1347918a.jpg
②contain値で敷いた場合(原寸)
https://file.blog.fc2.com/vanillaice000/miscellaneous/1347918.jpg
③contain値で敷いた場合(画像縦幅修正)
https://file.blog.fc2.com/vanillaice000/miscellaneous/1347918b.jpg

寸足らずを防いで全面敷きするのがcover値(代わりに見切れが多くなります)、寸足らずが発生しようとも原画をそのままの見た目で敷くのがcontain値です。
この画像の場合には余白(空間部分)がたまたま平坦なので背景色で補うことはできます。なので今回この画像についてはcontain値を採用される方がベター。
とはいえスクショをご覧頂いて分かる通りすごく小ぢんまりとした表示ですよね。これが良いのかどうかです (´・ω・`)

あるいはヘッダーの縦幅を大きくするか。
ただ最近だと大きいヘッダーは好まれません。特にスマホからの閲覧者は巨大ヘッダーを嫌う傾向にあります。
ここは私が決めるべき内容ではありませんので、サンプルを見比べて頂きましていずれかを採用するか、あるいは画像を選び直すかのご判断をお願いします。

①②③いずれを選択しても共通の作業
CSSソース(スタイルシート)末尾に以下を追加。


#header-banner {
background: url(画像URL) center center /cover no-repeat;
}

②と③
#header-banner {
background: url(画像URL) center center /contain no-repeat rgb(242,242,242);
}

③用の画像が必要な場合は以下を開いて保存してください。次回コメントを頂いた際に削除しますので必ず保存を行ってください。
https://file.blog.fc2.com/vanillaice000/miscellaneous/apartment-chair-contemporary-5099223.jpg

* 上記画像以外でキャプチャに利用した画像は消去済みです。

よろしくお願いします。

チウ
2018/09/20 (Thu) 01:17

お返事ありがとうございました♪

Akiraさん、お忙しい中、お返事どうもありがとうございました♪

こんなに簡単に背景画像自体は実装できるんですね。
(divでやってみたりとか、色々試していたんですけど)

ある程度画像加工しないと、確かにオブジェクトの表示も
小さくなっちゃいますね(っωc)
やっぱり画像選びも含めて、もう一度考えていきたいと思います。

レスポンシブにした場合の考え方とか、とってもよく分かりました。


改めて、きちんと配置できたらご報告しますね(✿ ❛❛)


それから、おっしゃっているヘッダーの縦幅を少し大きくするには、
CSSのヘッダー内paddingのpx数値を変えていくのでしょうか。


私が読者側として見ても分かります。
大きすぎるヘッダーって、威圧感ありすぎですもんね。


ただ、個人的に後ほんの少しだけでいいので、
ヘッダーの縦幅も大きくしたいと
思っているんですけど・・・。



vanillaice (Akira)
Akira
2018/09/20 (Thu) 21:16

To チウさん

こんばんは。

今ヘッダー部分拝見しました。良い感じに仕上がっているのではないでしょうか。
おっしゃる通り縦幅の調整はpaddingで行ってOKです。
ただスマホでは思い切って上のpaddingを減らした方が良いように思います。こちらはお任せします。