Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

Belong



名称 Belong
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC --- 右/ ブラウザ縮小時 下
記事幅 可変 最大960px
サイドバー幅 固定 300px (内寸 270px)
新着サムネイル表示 あり
右サイドメニュー
デフォルト 5件
鍵つきブログの方は表示されませんので削除をお願いします

Google Feed API廃止に伴い削除致しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム テーマ色変更, 文字大きさ変更 etc.


valid-html5.png


更新履歴 2017.1.25


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

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


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



更新履歴 2017.1.13


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

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


更新履歴 2016.11.7


不具合修正

・ トップページ・個別記事の月(month)が表示されない件を修正

前回メンテナンスと本メンテナンス間の約1ヶ月の間にDLされた方が対象です
再DLで解消されます お手数おかけします


更新履歴 2016.10.6


・ Microsoft10 の IE11及びMicrosoft Edgeのバグ用ハックJSを削除
・ ベンダープレフィックスの整理
・ その他微調整

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


更新履歴 2016.9.9


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

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


更新履歴 2016.7.30


関連記事サムネイルリストの整形を行いました

[詳細を見る]

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



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




------ 追記 6.24

当たったし((((笑)




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

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


びろんぐ o<。・ω・。>o
クリーンレイアウト
(クリーン = 日本語で言うところの『シンプル』)
27日申請予定
* カスタマイズして良いのかどうかわからん!
というリクエストを目に致しましたので 今回からライセンスを掲載します
特に堅苦しいことはなく ごく当たり前のことが書いてあるだけでございます *


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・右サイドメニュー(サイドバー)はボトムにアンカーを打ってあります
・エフェクトの類は一切いれていません
・トップページ以外は記事を探しやすいリスト表示
注)でCtrl+Fキー検索されますとカスタマイズ用のガイダンスが出てきますので カスタマイズを始める前に一度お目通しください


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(全文表示から要約表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更


カスタマイズをブラウザ上で行う方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします




サイドバー ボトムアンカー


正式な名称がわかりませんが…
左にあるメインコンテンツよりも右にあるサイドメニューが短いとき サイドコンテンツの下で留まる
というアレです (´・ω・`)
メインコンテンツの縦が短い場合は意味がありません(笑)
長文を書かれます方 サイドメニューの一番下は表示時間が長いですから
目に触れて欲しいものを設定されると良いですね
(デフォルトでは 新着サムネイルを設定しています)



No image画像変更


記事内のしかるべき箇所に画像が存在しない場合に表示されるNo image画像
使用箇所は
・検索結果
・RSS新着サムネイル
上記2種ページです
変更されます方は以下を検索

注)No image画像

CSSソース内に2箇所ありますので それぞれガイドに従ってください
最適サイズは 短辺 300px 程度です(縦横比不問)

デフォルト画像 (縮尺掲載 600×400 29KB public domain)





ドミナントカラー


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

例) 51,51,51

カラーネームの前の (approx) は近似色を意味します


rgb(150,150,150)
 カラーネーム: (approx)Nobel --- リンク基本色

rgb(51,51,51)
 カラーネーム: Night Rider --- テキスト基本色, ページ上部SNS背景色, ナビゲーションリンク色, ナビゲーションリンクホバーエフェクト色, コメントSEND/ DELETEボタン背景色 など



管理人コメントと訪問者コメントを分ける方


デフォルトはグレー背景アイコン
サンプル




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

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)





ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


いつもありがとうございます (*´・ω・)ノ ・゜:*:゜


------- 2016.7.30 追記

関連記事サムネイルについて


公式実装に伴い サムネイルの整形を行いました

● 関連記事リストのサムネイルを「表示する」設定の場合



● 関連記事リストのサムネイルを「表示しない」設定の場合



No image画像の設定は Ctrl+Fキー検索

注)No image 関連記事サムネイル

上記を目印に画像アドレスの差し替えをお願いします



------ 追記 2016.8.23
拍手等のボタンについて


ご指摘がありましたので記しておきます
テンプレートデフォルトの状態で
ブログ個人設定での拍手位置を「追記リンクの」に設定していると トップページには表示されません
表示させたい方は 「追記リンクの に設定してください

よろしくお願いします
関連記事

Comments 156

There are no comments yet.
きろろ  

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

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

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

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

2016/06/26 (Sun) 00:25 | EDIT | REPLY |   
Akira  
To きろろさん

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

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

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

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

2016/06/26 (Sun) 01:04 | EDIT | REPLY |   
きろろ  

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

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

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


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

2016/06/27 (Mon) 00:49 | EDIT | REPLY |   
Akira  
To きろろさん

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

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

2016/06/27 (Mon) 15:56 | EDIT | REPLY |   
ぼっちん  
サブタイトル表示の件

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

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

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

2016/06/30 (Thu) 10:51 | EDIT | REPLY |   
Akira  
To ぼっちんさん

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

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

2016/07/01 (Fri) 03:10 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/02 (Sat) 01:25 | EDIT | REPLY |   
Akira  
To 出版の件 内緒さん

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

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

--------

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

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

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

2016/07/02 (Sat) 18:50 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/03 (Sun) 00:54 | EDIT | REPLY |   
Akira  
To 出版の件 内緒さん

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

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

2016/07/03 (Sun) 01:05 | EDIT | REPLY |   
きろろ  
すごい便利です!

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

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

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

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

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

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

2016/07/14 (Thu) 00:40 | EDIT | REPLY |   
Akira  
To きろろさん

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

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

2016/07/14 (Thu) 06:57 | EDIT | REPLY |   
一之瀬  
教えてください。

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

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

さて、ご質問ですが

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

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

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

2016/07/14 (Thu) 23:03 | EDIT | REPLY |   
Akira  
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) 09:40 | EDIT | REPLY |   
一之瀬  
To Akiraさん

一之瀬です。

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

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

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

2016/07/15 (Fri) 16:46 | EDIT | REPLY |   
一之瀬  
Akiraさんご丁寧にありがとうございました。

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

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

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

嬉しいです。

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

2016/07/15 (Fri) 22:14 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

2016/07/16 (Sat) 10:07 | EDIT | REPLY |   
一之瀬  
先般お世話になりました。以下可能でしょうか。

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

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

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

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

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

2016/07/25 (Mon) 23:29 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

s=24

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

2016/07/26 (Tue) 00:01 | EDIT | REPLY |   
一之瀬  
ありがとうございます。

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

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

おっしゃる通りです。

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

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

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

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

2016/07/26 (Tue) 01:34 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

2016/07/26 (Tue) 09:56 | EDIT | REPLY |   
Akira  
To マタタビさん ②

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

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

======

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

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

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

=======

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

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

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

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

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

2016/07/28 (Thu) 20:55 | EDIT | REPLY |   
マタタビ  

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

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

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

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

お手上げです…。

2016/07/28 (Thu) 20:56 | EDIT | REPLY |   
Akira  
To マタタビさん

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

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

2016/07/28 (Thu) 21:01 | EDIT | REPLY |   
マタタビ  

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

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

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

2016/07/28 (Thu) 21:02 | EDIT | REPLY |   
Akira  
To マタタビさん

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

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

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

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

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

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

2016/07/28 (Thu) 21:09 | EDIT | REPLY |   
マタタビ  

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

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

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

2016/07/28 (Thu) 21:19 | EDIT | REPLY |   
Akira  
To マタタビさん

こちらでございますー ↓

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

2016/07/28 (Thu) 21:25 | EDIT | REPLY |   
マタタビ  

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

2016/07/28 (Thu) 21:26 | EDIT | REPLY |   
Akira  
To マタタビさん

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

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

Ctrl+Fキー検索

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

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

2016/07/28 (Thu) 21:32 | EDIT | REPLY |   
マタタビ  

mobileのボタン消えました!

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

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

2016/07/28 (Thu) 21:43 | EDIT | REPLY |   
Akira  
To マタタビさん

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

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

2016/07/28 (Thu) 21:44 | EDIT | REPLY |   
一之瀬  
フォントに関して。

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

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

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

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

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

FC2ブログ管理画面

記事の管理

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

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

2016/07/28 (Thu) 22:26 | EDIT | REPLY |   
Akira  
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/28 (Thu) 22:56 | EDIT | REPLY |   
一之瀬  
フォントに関して。

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よりきれいに表示されています。



2016/07/29 (Fri) 11:04 | EDIT | REPLY |   
Akira  
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に変更されて、さらに書体を変更された状態で「書体が変わった」とお感じになったということは、游ゴシック体をご覧になっていたのだろうと思います。
書体を変更して「前と同じフォントに見える」のであれば、アップグレード前も「メイリオ」でご覧になっていた、という理屈になります。

一旦投稿します。

2016/07/29 (Fri) 14:23 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

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

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

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

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

★ Windows10にアップグレード

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

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

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

2016/07/29 (Fri) 14:31 | EDIT | REPLY |   
一之瀬  
フォントに関して。ありがとうございます。

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

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

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

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

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

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

2016/07/29 (Fri) 22:11 | EDIT | REPLY |   
Akira  
To 一之瀬さん

こんばんは ( ゚Д゚)ノ

> 必要以上にご迷惑〜

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

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

2016/07/30 (Sat) 01:12 | EDIT | REPLY |   
一之瀬  
「知的探究心」良い言葉ですね。

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

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

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

2016/07/30 (Sat) 10:24 | EDIT | REPLY |   
マタタビ  
「関連記事」をコメントの上に追加したい

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

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

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

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

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

2016/07/30 (Sat) 12:56 | EDIT | REPLY |   
Akira  
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点についてお考え頂きお返事くださいね。
よろしくお願いします。

2016/07/30 (Sat) 14:44 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

2016/07/30 (Sat) 14:52 | EDIT | REPLY |   
マタタビ  
No title

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

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

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

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

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



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

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

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


2016/07/30 (Sat) 15:15 | EDIT | REPLY |   
Akira  
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) 16:33 | EDIT | REPLY |   
マタタビ  

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

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

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

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

2016/07/30 (Sat) 17:27 | EDIT | REPLY |   
Akira  
To マタタビさん

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

マタタビさんの場合には

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

② 公式からBelongを再DL

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

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

2016/07/30 (Sat) 21:19 | EDIT | REPLY |   
マタタビ  

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

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

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

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


2016/07/30 (Sat) 22:44 | EDIT | REPLY |   
Akira  
To マタタビさん

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

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

2016/07/31 (Sun) 00:56 | EDIT | REPLY |   
マタタビ  

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

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

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

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

2016/07/31 (Sun) 02:20 | EDIT | REPLY |   
Akira  
To マタタビさん

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

2016/08/01 (Mon) 01:20 | EDIT | REPLY |   
一之瀬  
関連記事の入ったテンプレート

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

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

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

2016/08/05 (Fri) 10:47 | EDIT | REPLY |   
一之瀬  
トップページ(ホーム画面)

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

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

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

2016/08/06 (Sat) 10:08 | EDIT | REPLY |   
Akira  
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) 16:00 | EDIT | REPLY |   
一之瀬  
ありがとうございます。

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

2016/08/06 (Sat) 17:21 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

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

2016/08/07 (Sun) 00:50 | EDIT | REPLY |   
一之瀬  
画像

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

2016/08/08 (Mon) 07:04 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

2016/08/11 (Thu) 00:57 | EDIT | REPLY |   
一之瀬  
ブログフッター

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

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

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

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

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

2016/08/18 (Thu) 15:13 | EDIT | REPLY |   
Akira  
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/18 (Thu) 22:03 | EDIT | REPLY |   
一之瀬  
ごめんなさい。

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

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

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

もう少し勉強します。

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

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

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

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

2016/08/19 (Fri) 10:13 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/08/21 (Sun) 02:46 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/08/21 (Sun) 02:50 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

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

2016/08/21 (Sun) 03:06 | EDIT | REPLY |   
Akira  
To 内緒Kさん

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

2016/08/21 (Sun) 03:07 | EDIT | REPLY |   
ぱんとら  

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

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

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

2016/08/23 (Tue) 11:29 | EDIT | REPLY |   
Akira  
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) 13:13 | EDIT | REPLY |   
一之瀬  
新着サムネイルについて

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

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

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

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

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

2016/08/23 (Tue) 14:57 | EDIT | REPLY |   
Akira  
To 一之瀬さん

こんにちは ( ノ゚Д゚)

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

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

2016/08/23 (Tue) 15:36 | EDIT | REPLY |   
ぱんとら  
To Akiraさん

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

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

2016/08/23 (Tue) 15:57 | EDIT | REPLY |   
Akira  
To ぱんとらさん

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

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

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

2016/08/23 (Tue) 16:15 | EDIT | REPLY |   
ぱんとら  
To Akiraさん

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

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

2016/08/24 (Wed) 11:05 | EDIT | REPLY |   
金  
コンニチワ~~!(∩´∀`)∩

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

でも

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

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

出来るのかな?

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

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

教えてくれますか?

2016/08/24 (Wed) 13:27 | EDIT | REPLY |   
Akira  
To ぱんとらさん

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

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

2016/08/24 (Wed) 13:31 | EDIT | REPLY |   
Akira  
To 金さん

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

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

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

2016/08/24 (Wed) 13:33 | EDIT | REPLY |   
金  

急がんで下さいね。

例の如く金は

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

金は、暇人やけれど

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

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

2016/08/24 (Wed) 13:42 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/08/24 (Wed) 17:00 | EDIT | REPLY |   
Akira  
To 金さん

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

2016/08/24 (Wed) 23:44 | EDIT | REPLY |   
Akira  
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:07 | EDIT | REPLY |   
金  
急がんで下さいね。

何時もお手間掛けます

ホンマに急がんで下さい

無理はアカンですけね。

2016/08/25 (Thu) 00:14 | EDIT | REPLY |   
Akira  
To 記事タイプ検討の件 内緒さん②

記事タイプの件

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

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

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

毎回例えばですね

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

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

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

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

===========

サムネイルの件

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

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

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

=======

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

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

2016/08/25 (Thu) 00:37 | EDIT | REPLY |   
Akira  
To 金さん

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

2016/08/25 (Thu) 00:43 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/08/25 (Thu) 01:44 | EDIT | REPLY |   
Akira  
To 記事タイプの件 内緒さん

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

お疲れ様です

2016/08/25 (Thu) 12:52 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/08/25 (Thu) 21:49 | EDIT | REPLY |   
Akira  
To Belongの件 内緒さん

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

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

2016/08/26 (Fri) 10:47 | EDIT | REPLY |   
一之瀬  
個別記事内にある画像について

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) 04:49 | EDIT | REPLY |   
一之瀬  
個別記事内にある画像について

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

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

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

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

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

2016/08/29 (Mon) 05:19 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

2016/08/29 (Mon) 10:04 | EDIT | REPLY |   
Akira  
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) 10:06 | EDIT | REPLY |   
ぱんとら  

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

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

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

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

2016/08/29 (Mon) 14:48 | EDIT | REPLY |   
Akira  
To ぱんとらさん

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

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

#blog-title

この項目内に

padding: 30px 0;

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

padding: 30px 0 下空白px;

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

padding: 30px 0 10px;

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

2016/08/29 (Mon) 17:18 | EDIT | REPLY |   
ぱんとら  
To Akiraさん

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

2016/08/29 (Mon) 19:16 | EDIT | REPLY |   
金  
あきらちゃんへ・・・(´▽`*)」

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

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

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

2016/08/29 (Mon) 20:56 | EDIT | REPLY |   
Akira  
To ぱんとらさん

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

2016/08/30 (Tue) 10:54 | EDIT | REPLY |   
Akira  
To 金さん

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

=======

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

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

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

2016/08/30 (Tue) 10:55 | EDIT | REPLY |   
金  
こんちわ!

>WEBSITE
の欄に入ってるURLが

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

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


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

2016/08/30 (Tue) 15:17 | EDIT | REPLY |   
Akira  
To 金さん

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

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

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

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

[すべて] を選択

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

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

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

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

2016/08/30 (Tue) 16:22 | EDIT | REPLY |   
金  
毎度お世話に成ります<(_ _*)>

出来たかな?

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

2016/08/30 (Tue) 17:23 | EDIT | REPLY |   
Akira  
To 金さん

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

2016/08/30 (Tue) 18:41 | EDIT | REPLY |   
金  
てんきゅ~~でしたm(__)m

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

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

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

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

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

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

2016/08/30 (Tue) 21:25 | EDIT | REPLY |   
ひろし  
金さんこんばんは

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

2016/08/30 (Tue) 22:01 | EDIT | REPLY |   
金  
こんばんわ!ひろしさん・・・

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

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

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

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

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

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

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

2016/08/30 (Tue) 23:49 | EDIT | REPLY |   
一之瀬  
個別記事内にある画像について

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

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

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

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

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

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

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



2016/08/31 (Wed) 08:01 | EDIT | REPLY |   
Akira  
To 金さん

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

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

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

2016/08/31 (Wed) 09:54 | EDIT | REPLY |   
Akira  
To ひろしさん

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

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

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

2016/08/31 (Wed) 09:56 | EDIT | REPLY |   
Akira  
To 一之瀬さん

おはようごじゃりますー

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

2016/08/31 (Wed) 09:58 | EDIT | REPLY |   
一之瀬  
ありがとうございます。

Akiraさん。

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

がんばります。

2016/08/31 (Wed) 19:36 | EDIT | REPLY |   
金  

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

2016/08/31 (Wed) 20:34 | EDIT | REPLY |   
Akira  
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) 10:09 | EDIT | REPLY |   
金  
毎度、ありがとうです。

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

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

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

2016/09/01 (Thu) 13:28 | EDIT | REPLY |   
Akira  
To 金さん

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

========

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

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

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

=======

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

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

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

2016/09/01 (Thu) 15:20 | EDIT | REPLY |   
一之瀬  
Q&A記事の作り方

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

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

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

2016/09/02 (Fri) 15:49 | EDIT | REPLY |   
Akira  
To 一之瀬さん

こんばんは ( ゚Д゚)ノ

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

2016/09/03 (Sat) 00:15 | EDIT | REPLY |   
一之瀬  
ありがとうございます。

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

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

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

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

2016/09/03 (Sat) 03:06 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

2016/09/04 (Sun) 13:49 | EDIT | REPLY |   
一之瀬  
ありがとうございます

Akiraさん。

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

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

何とか実装します。

2016/09/04 (Sun) 15:38 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

2016/09/05 (Mon) 13:29 | EDIT | REPLY |   
一之瀬  
カテゴリ各題名の前に

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

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

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

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

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

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

2016/10/03 (Mon) 17:36 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

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

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

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

2016/10/03 (Mon) 22:27 | EDIT | REPLY |   
一之瀬  
プラグインでしたか・・・

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

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

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

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

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

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


2016/10/03 (Mon) 23:25 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

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

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

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

2016/10/03 (Mon) 23:38 | EDIT | REPLY |   
一之瀬  
No titleTo Akiraさん

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

なるほど。

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

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

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

2016/10/04 (Tue) 01:28 | EDIT | REPLY |   
Akira  
To 一之瀬さん

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

2016/10/04 (Tue) 11:28 | EDIT | REPLY |   
一之瀬  
To Akiraさん

はい。

2016/10/04 (Tue) 21:26 | EDIT | REPLY |   
きろろ  
今更ながらごめんなさい

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

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

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

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

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

2016/10/28 (Fri) 01:28 | EDIT | REPLY |   
Akira  
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/29 (Sat) 10:52 | EDIT | REPLY |   
きろろ  
To Akiraさん

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

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

上記を目印に

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

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

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

2016/10/30 (Sun) 01:49 | EDIT | REPLY |   
きろろ  
連投ですみません

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

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

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

2016/10/30 (Sun) 01:56 | EDIT | REPLY |   
Akira  
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

2016/10/30 (Sun) 02:30 | EDIT | REPLY |   
Akira  
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/30 (Sun) 02:43 | EDIT | REPLY |   
きろろ  
To Akiraさん

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

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

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

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

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

2016/10/31 (Mon) 00:54 | EDIT | REPLY |   
Akira  
To きろろさん

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

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

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

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

2016/10/31 (Mon) 18:02 | EDIT | REPLY |   
きろろ  
記事の月が表示されませんw

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

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

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

2016/11/07 (Mon) 04:59 | EDIT | REPLY |   
Akira  
To きろろさん

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

今上書きしました。
度々ごめんなさい (_ _;)

2016/11/07 (Mon) 07:24 | EDIT | REPLY |   
きろろ  
To Akiraさん

これって、DLし直せばよいのでしょうか?w
きろろも昨日まで、まったく気づきませんでした(爆)

2016/11/07 (Mon) 20:13 | EDIT | REPLY |   
きろろ  
To Akiraさん

DLし直して、直りました。
ありがとうございます<(_ _)>

2016/11/07 (Mon) 20:18 | EDIT | REPLY |   
Akira  
To きろろさん

お返事大変遅くなりました。

毎回お世話おかけしますー ( ̄∀ ̄;)

2016/11/11 (Fri) 12:39 | EDIT | REPLY |   
Akira  
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の追加)
こちらについては比較的大きな修正であること、基本レイアウトの大幅な変更になりますので自力でお願いします(すみません)

よろしくお願いします。

2016/12/08 (Thu) 16:57 | EDIT | REPLY |   
sachi  

Akira様

ご丁寧にしかもとても細かく教えて頂きましてありがとうございました!!
なるほど、根本的なデザイン構成を理解しておりませんでしたが良く分かりました。

上記ご説明を踏まえ設計通りの使用に変えてみました。
これで更にこのデザインが好きになりました!!

2016/12/09 (Fri) 10:09 | EDIT | REPLY |   
Akira  
To sachiさん

お返事が大変遅れてしまいました (*_ _)
なかなかログインする時間が取れずー ( ̄∀ ̄;)

ご理解頂きまして、また嬉しいお言葉もありがとうございます ('-'*)

2016/12/15 (Thu) 00:45 | EDIT | REPLY |   
Lの親父  
テンプレートの色について

Akira さん
初めまして、写真ブログをしています「Lの親父」と言います。

今、当テンプレートを使用させていただいております。
で、今のテンプレートのベース色(白色)を写真が映えるように黒系の色にしたいと思っています。レスポンシブの黒系のテンプレートってないんですよ。

Akiraさんのテンプレートのイメージが変わってしまうので不可でしたらあきらめます。

CSSソースを弄ってみたのですがわかりませんでした。

今のテンプレートの配色の反転でも構いませんのでお時間がある時でかまいませんので教えてください。

※写真の部分だけは記事毎に右クリック禁止になってます。(小さな抵抗です)

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

2017/04/09 (Sun) 19:21 | EDIT | REPLY |   
Akira  
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廃止で表示できなくなっています。
その他微調整もありますので、差し支えなければお願いします。

2017/04/09 (Sun) 20:24 | EDIT | REPLY |   
Lの親父  
ご返事ありがとうございます。

Akira さん

お忙しい中、素早いご返事ありがとうございます。

とりあえず変更作業にあたり最新版をDLしてからやってみます。

空いた時間でしか出来ないので時間掛かるかもしれませんが挑戦しますので、また分からない事があればコメントさせて頂きます。



2017/04/11 (Tue) 22:05 | EDIT | REPLY |   
Akira  
To Lの親父さん

最新版の件、お手数おかけします。
ご自分のペースでチャレンジしてみてくださいね。
また何かありましたらお気軽に。
ありがとうございます

2017/04/12 (Wed) 19:17 | EDIT | REPLY |   
Lの親父  
何とか出来ました。

Akiraさん

何とか色変えできました。

反対色にする際(検索時にrgb(51,51,51)と(white)ですると入れ替えた色をまた入れ替えてしまうので)黒系カラーはrgb(45,45,45)にして行いました。

多分、大丈夫だと思いますが、ココが変だよって所がありましたらご指示ください。

お手数をお掛けしました。
ありがとうございます。



2017/04/13 (Thu) 21:47 | EDIT | REPLY |   
Lの親父  
教えてください。

Akiraさん
1つ教えてください

色変え出来たと思ったら、コメントを書くところで何処をwhiteにすれば白文字になるのか教えてください。

2017/04/13 (Thu) 22:24 | EDIT | REPLY |   
Akira  
To Lの親父さん

> コメントを書くところで何処をwhiteにすれば白文字になるのか〜

CSSソースの末尾で良いので以下を追加。

#comment_form input,
#comment {
color: white;
}

これでできるはずですのでお試しください。
よろしくお願いします。
カメラ、お大事になさってください(笑)

2017/04/13 (Thu) 23:51 | EDIT | REPLY |   
Lの親父  
あるがとうございます

Akiraさん

素早いご返答ありがとうございます。
早速CSSに追加しましたらOKでした。

また何かお伺いすると思いますので、その時はよろしくお願いします。

2017/04/14 (Fri) 07:16 | EDIT | REPLY |   
Akira  
To Lの親父さん

ご報告ありがとうございます。
安心しました

2017/04/14 (Fri) 15:18 | EDIT | REPLY |   
はる  

Akiraさん
初めまして。
わんこブログをしています。
こちらのスッキリとしたシンプルなテンプレートをお借りしまして
色を変えたり、ヘッダーに画像を入れたりしたのですが…
(勝手に変更してお気を悪くされたらすみません)
1.ブログタイトルが真ん中に表示され移動させたいのですが
 どこをどうすれば移動できるのかよくわかりません。
2.後、ブログの説明文の表示も併せてしたいのですが…
3.文章・画像を常にセンター表示させたいのすでが…
  (今は毎回<center>-</center>で調整しています)
初歩的な質問で申し訳ありませんがよろしくお願いします。

2017/08/18 (Fri) 16:41 | EDIT | REPLY |   
Akira  
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) 17:56 | EDIT | REPLY |   
はる  
ありがとうございます

早速のお返事、ありがとうございます。
ブログタイトルの位置について、自分ではいつもPCで最大で見ていたので
縮小してみるとか、スマホで見るとか考えてもいませんでした。
こうしてみると、やっぱりセンターにある方がスマートですね^^
画像の方を調整した方がよさそうです。
記事下の要素についてはセンタリングされても大丈夫です。
説明文ですが、padding-top の数字を小さくしてみてもブログタイトルとの幅が縮まらないのは何故かしら??
30にしても10にしても変わらないのですが…
お忙しいところ恐縮ですがよろしくお願いします。

2017/08/18 (Fri) 19:54 | EDIT | REPLY |   
Akira  
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) 13:34 | EDIT | REPLY |   
はる  
ありがとうございます

Akira様
早速のお返事、ありがとうございます。
ブログタイトルと説明文の幅が希望通り縮まりました!
そして、画像の調整にもいろいろな方法があるのですね!
今回は画像が暗くなるのは嫌だったので
どんな画像に変えても使えそうな④の方法にしました。
ハッキリ見えて良い感じです♪
いろんな方法を詳しく教えて頂き、本当にありがとうございました。
これからも素敵なテンプレートを提供してくださいね^^
ありがとうございました♪


2017/08/19 (Sat) 16:15 | EDIT | REPLY |   
Akira  
To はるさん

見やすくなりましたね。
こちらこそありがとうございます。
お疲れ様でした

2017/08/19 (Sat) 23:23 | EDIT | REPLY |   

Leave a reply

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