All-about-us - FC2ブログテンプレート

All-about-usテンプレート

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

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

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

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

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

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

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

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

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

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

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

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

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

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

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

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

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

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

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

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

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

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

①について

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

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

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

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

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

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

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

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

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

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

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

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

#comment_form {
  padding-top: 40px;
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

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

.contents {
  padding: 20px 0;
}

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

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

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

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

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2019.1.4
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

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

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

更新履歴 2018.2.5

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

  • 画像遅延読み込みをのJSを変更しました
  • jQueryのバージョンを3.3.1にUPしました
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • floatレイアウトをflexレイアウトに変更しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました
  • ナビゲーションを一つにまとめ、折りたためるようにしました

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

更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2017.1.13
  • RSS新着サムネイルをFC2独自変数での表示に切り替えました
更新履歴 2016.10.6
  • Microsoft10 の IE11及びMicrosoft Edgeのバグ用ハックJSを削除
  • FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 軽量化
  • 関連記事サムネイルの整形
  • ベンダープレフィックスの整理
  • その他微調整
「Sweetie」不具合修正と「Belong」「All-about-us」メンテナンスのお知らせ

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

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

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

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

コンビニのATMでおろした15万を取り忘れたり(カードと明細だけ取って)
長男が電車で財布を落としたり、次男がどこぞで財布をなくしたり、とふんだりけったりのあきら家 (´・ω・`)
しかし全部戻ってきた。ついてるんだかついてないんだか。 しかし日本というのはすごい国ですね 海外だったら絶対戻りませんよ(笑)

おーる あばうと あす
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

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

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

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

Common customization.

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

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

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

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

記事編集リンクについて

The position of edit link.

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

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

Cautions before asking for something.

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

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

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

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

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

さく
2016/06/10 (Fri) 15:19

アーカイブのツリー化の件です。

Akiraさま

こんにちは!。Akiraさま
いつも本当にお世話になっております!

そして、またお世話になります…(・ω・;)…汗
当方が 現在お借りさせて頂いております
「DaisyGreen」では 月間アーカイブが全部表示されるタイプなのですが
今こちら様に設定されているテンプレのような
アーカイブを 当月のみ表示させて それ以前の年を畳む形の
アーカイブ形式にしたいのですが…(・ω・;)…
何卒、ご指南のほど どうぞ宜しくお願い致します!
 

vanillaice (Akira)
Akira
2016/06/11 (Sat) 00:44

To さくさん

こんばんは ( ノ゚Д゚)

アーカイブ表示は共有プラグインをお借りしています。
作者: Daniel様
プラグイン名: Tree-Archive
DLリンク: http://admin.blog.fc2.com/control.php?mode=plugin&process=download&no=4542&mob=

カスタマイズなし、デフォルトのままで利用させて頂いております :)

さく
2016/06/12 (Sun) 17:56

ありがとうございます!

Akiraさま

こんにちはっ。ぬおおおおぉぉ…(゚Д゚;)… 
プラグインにも共有があったのですね! 気づておりませんでした…orz orz
さっそく 追加させて頂きました!。後もう少し アーカイブがたまったら
こちらのツリータイプに切り替えたいと思います!
←プレビューでもバッチリでした♡

お手数をおかけいたしました、いつも本当に有難うございます!
 

Akira
2016/06/15 (Wed) 15:38

To さくさん

ツリー系のプラグインは優れたものが共有にたくさんあります。
作者のみなさまありがとうございます ( ノ゚Д゚)

ミッキー
2016/07/07 (Thu) 20:54

タイトル、記事の文字の大きさ、色の変更について

初めまして。ステキなテンプレートなので使用させて頂きたいのですが、タイトル、記事の文字の大きさ、文字色を変更したいのですがどこを変えればいいのでしょうか?
素人なものでお教え願えないでしょうか?

vanillaice (Akira)
Akira
2016/07/07 (Thu) 23:36

To ミッキーさん

ありがとうございます (・ω・)ゞ
こちらはトップページでしょうか。
あるいは個別記事でしょうか。
それとも両方かしら。
個別記事だと仮定します。

Ctrl+Fキー検索

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

こちらが記事本文フォント該当箇所ですが、ここを変更されますとサイドメニューを除く他の部位(コメント欄など)も変わってしまいます。
全体的な変更であるならば上記該当部位を調整してください。
それが困るようであれば以下の手順でお願いします。
Ctrl+Fキー検索

.contents

上記で検索するとこんな風になってます ↓

.contents {
padding: 20px 0;
}

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

.inner-contents {
font-size: 数値px;
color: カラーコード;
}

上記のように「追加」を行った場合には適用範囲は「個別記事の内容」だけに限定されます。

-------

続きましてタイトルフォントの大きさ変更
Ctrl+Fキー検索

.entry-title

この項目の

font: bolder 16px/1.3 〜省略

赤字の部分が記事タイトルフォントの大きさです。
ただしここを変更されますと連動してトップページの記事タイトルも大きくなります。
それが困る場合にはhtmlの方を操作する必要が出てきますので、その旨お伝えください。

タイトルの文字色については、トップページはリンクになっていますが個別記事ではリンクはついていません。
個別記事の変更と仮定してお伝えしていますが、トップページのリンクつきタイトルを変更される場合はさらに以下の手順をお願いします。
Ctrl+Fキー検索

.entry-title a

この項目の color を修正してください。
よろしくお願いします。

ミッキー
2016/07/14 (Thu) 20:59

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

うまく行きました。

ご丁寧にお教え下さり本当にありがとうございました。

http://mickeyjapan.blog.fc2.com/

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

To ミッキーさん

拝見しました。
上手く行ってよかったです。
ありがとうございます :)

スノウ
2016/07/18 (Mon) 08:17

文字の濃さについて

お世話になってます。
またAkiraさんのテンプレート使わせてもらっています。

こちらのテンプレートですが、パソコンで見ると文字がグレーのようなちょっと薄く見えるのですが・・・
スマホではくっきりしてる文字ですね。
スマホのようにくっきりした文字にしたいのですが、どうしたらいいですか。
(初心者ですみません💦)
全ての文字を濃くしたいです。(フォントはそのままでOKです。)

よろしくお願いします。

vanillaice (Akira)
Akira
2016/07/18 (Mon) 21:20

To スノウさん

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

文字の色が薄い件。
「薄い」というのが
①「細いからそう見える」
のか
②「色自体が薄い」のかで処理が変わってきます。

=====

リンクの色ではない、という前提でお話しを進めますね。
(サイドメニューの文字が気になる場合は、ほとんどが「リンク」ですのでリンク指定色変更の必要があります。最後に記します)

①の場合
Ctrl+Fキー検索

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

この項目にある以下の2行を削除

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

上記はGoogle ChromeとFirefox限定ですが、フォントを細くすることで可読性を上げるというものです。
見る人によっては「逆に細くて読みづらい」と感じることもあるかもしれません。
上記2行を削除することによってページ内の文字全体が若干太くなります。
まずこちらをお試しください。

②の場合

基本のテキスト色は真っ黒を避けています。
①で検索して頂いたのと同じ body の項目の中の

color: rgb(51,51,51); /* 注)テキスト基本色 Night Rider */

こちらがテキストの色指定です。
真っ黒にするのであれば赤字の部分を

black

に変更、あるいは

rgb(0,0,0)

こちらがカラーコードです。
10進数指定で上記の通り。
16進数だと

#000000

こちらの方が馴染み深いかもしれません。
どちらをご利用頂いてもOKです。
真っ黒な字は目に優しくないので、段階的に黒に近づけると良いかもしれません。

例)
rgb(31,31,31)

rgb(10,10,10)

rgb(0,0,0)

様子をご覧になりながらの変更をお願いします。

=====

リンク色変更
Ctrl+Fキー検索

/* 注)基本リンク色 (approx)Pink Swan */

この行がリンクテキスト色ですので、お好きな色に変更してください。
よろしくお願いします (・ω・)ゞ

snow miy
2016/07/18 (Mon) 22:13

ありがとうございます

丁寧に教えていただきありがとうございます("⌒∇⌒")

週末になってしまいますが、段階を踏んで色の設定を決めたいと思います。

いつも素敵なテンプレートありがとうございます❤
今後ともよろしくお願い致しますm(._.)m

vanillaice (Akira)
Akira
2016/07/20 (Wed) 09:12

To snow miyさん

はい。お手数おかけします。
よろしくお願いします :)

-
2016/08/18 (Thu) 01:56

管理人のみ閲覧できます

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

-
2016/08/18 (Thu) 02:09

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/08/18 (Thu) 21:52

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

自己解決して頂いたようで恐れいります。
拝見致しましたが、ちゃんと表示されていて安心しました。
お疲れ様でした :)

aki
2016/09/04 (Sun) 18:14

スライドの画像について

Akira様

こんにちは、いつもテンプレートお借りしています
素敵なテンプレートをありがとうございます!!(*^_^*)

All-about-usのスライドの画像についてお伺いしたくコメントいたしました。

画像を差し替えて使わせていただこうと思ったのですが
人物の画像にした際にPC表示の際に顔が見切れてしまうことが多く…
この表示のされ方をコントロールすることは可能でしょうか?

できれば画像の上部を表示できればいいなぁと思っています。
もしくはPC表示用の画像を用意してそれを表示できれば…など。

お手数をおかけしてすみません(>_<)
お時間ある際に教えていただけましたら幸いです。

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

To akiさん

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

> スライド画像の上下合わせ位置を変更したい件

まず注意1点ですが、位置の指定はスライド画像全てに適用されます。
各画像にそれぞれの合わせを指定することはできませんので、そちらをご了承くださいね。
Ctrl+Fキー検索(CSSソース内にあります)

#header-banner

この項目に

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

という箇所があります。
赤字部分の left が左右の合わせで、左辺基準。
center が上下の合わせで、中央基準になっています。
上下合わせを上辺基準に変更される場合は

left top

に書き換えてください。
同じように左右の合わせも center あるいは right に変更可能です。
画像と相談してお決めくださいね。
よろしくお願いします。

aki
2016/09/05 (Mon) 18:42

スライド画像の上下合わせ位置を変更したい件について

Akira様

教えていただきありがとうございます!
無事に希望通りにスライドの画像の表示をさせることが出来て嬉しいです…!(*^^*)

このテンプレートの泡、可愛いですね~
とても気に入っています。

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

vanillaice (Akira)
Akira
2016/09/06 (Tue) 09:38

To akiさん

ご希望に沿えましたならば良かったです。
作業お疲れ様でした :)

pi-
2016/09/06 (Tue) 12:15

グローバルナビゲーションについて

はじめまして、こんにちは!

ブログ3年目ということで
素敵なデザインに一新したいと思い、All-about-usを見つけ
記事や上のコメント様などを拝見しながらカスタムさせてもらってます。

そこでAll-about-usのグローバルナビゲーションについて
お伺いしたいことがありコメントさせていただきました。

グローバルナビゲーション(主にINDEX、RSS、ADMIN)の部分を
別のページ、URLに飛ばせるようにしたいのですがそれは可能でしょうか?

専門的なことはほとんど知らないため失礼な質問かもしれませんが
お手すきの時にでもご指南のほど、よろしくお願いします。

pi-
2016/09/06 (Tue) 13:27

グローバルナビゲーションについて

自己解決できました!

また何かあったら質問させてもらうかもしれませんが
その時はよろしくお願いします。

お手数おかけしましたm(_ _)m

vanillaice (Akira)
Akira
2016/09/06 (Tue) 14:49

To pi-さん

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

自己解決して頂いたんですね。
お手数おかけしました。
はい。ご質問はお気軽にどうぞ。
作業お疲れ様でした :)

vanillaice (Akira)
Akira
2016/09/08 (Thu) 23:38

To ミカさん②

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

画像の部分をサクっと消すってことで良いんでしょうかね。
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<section class="element-item">

上記を目印に

<section class="element-item">
から
<div class="context">
までに挟まれている内容を削除
わかりにくいかもしれませんのでスクショでご確認ください。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-09-08%2023.27.03th__zps3ebrphxr.jpg

========

続きまして検索

<!-- 注)トップページスライドここまで -->

上記を目印にスクショの通り該当部分を削除

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-09-08%2023.34.42th__zpssc3bzhld.jpg

========

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

ミカ
2016/09/09 (Fri) 00:03

Akiraさま。

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

丁寧な説明を書いてくださったお陰で、私にも出来ました。
本当に、ありがとうございました。

また、分からない事がありましたら質問するかと思いますが、よろしくお願いします。

夜分に失礼しました。

vanillaice (Akira)
Akira
2016/09/09 (Fri) 00:49

To ミカさん

はい。ご質問はお気軽に。
作業お疲れ様でした :)

pi-
2016/09/10 (Sat) 17:24

背景について

こんにちは!

先日はありがとうございました。
再び質問させていただきますm(_ _)m

layoutのところで全体の背景色を変えて使用させていただいてるのですが、
テンプレートColonyのようにトップの各要約記事や個別記事に背景(枠)を付けることは可能でしょうか?

お時間がある時でいいのでよろしくお願いします。

Akira
2016/09/10 (Sat) 20:47

To pi-さん

こんばんは ( ゚Д゚)ノ

> 記事に背景

背景というのは「背景色」という意味でしょうか。
それとも「ボーダー」という意味でしょうか。
いずれにしても、簡単なように思えますよね。
ところが実際そう簡単でもないんです。
アウトラインの図解 ↓

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

赤い線は
・画像+記事概要
青い線は
・記事概要
それぞれを包括するアウトラインです。

仮に赤いアウトラインに背景あるいはボーダーをつけると
・画像上には余白が無いが、画像左右には余白がある
・下の記事の画像上辺と上の記事の概要の下辺が交わる(同じ位置)

青いアウトラインに背景あるいはボーダーだと
・概要の左右に余白が全く無い = 左右辺とテキストが密接

代替案 -------

概要の周りにさらにひとつアウトラインを追加(html修正が必要です)し、
左のSNS関連と右の要約記事とを囲う。
その追加アウトラインの左右に余白を設けつつ、背景あるいはボーダーを装飾。

上記を採用されますと画像の左辺と概要のそれとの位置が揃わなくなります。
(特に見た目がおかしいってことはないと思います)
サンプル ↓

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

bodyに黒を指定してみましたが、お気づきの通り背景部に白い点々が見えてます。
これがこのテンプレの実際の姿です。
白背景なので見えないだけで、上から3000px程度まではブクブクがあるんです(笑)
この点もお伝えしておきます。
で、アウトラインがはっきりしますと全体像としてはちょっとバランス悪いような気もしますが、そこはpi-さんの感性にお任せするとして。

どの方法を取られるかまずはご検討頂きまして、方向性をお伝えください。
選択肢
① 全体アウトラインに背景
② 概要アウトラインに背景
③ アウトラインを追加して背景

あとは「背景色なのかボーダーなのか」
こちらもお決めくださいね。

よろしくお願いします。

pi-
2016/09/10 (Sat) 21:49

To Akiraさん

こんばんは!( ゚Д゚)ノ

素人でも大変わかりやすく
いろいろな観点からの立案ありがとうございます。

青いアウトラインの場合の
左右の余白が無くなる改善策が③という認識で間違ってないなら、
「③アウトラインを追加して背景」という方法が好ましいです。

背景色とボーダーなら背景色のイメージが近いと思います。

大雑把な質問でお手数おかけしました、よろしくお願いします。


泡ぶくぶくはかわいくてとてもおきにいりです(´ρ`)

vanillaice (Akira)
Akira
2016/09/10 (Sat) 22:51

To pi-さん

> 左右の余白が無くなる改善策が③という認識で間違ってないなら

はい。そういうことで合ってます。
んでは③で「背景色」ということで。

====== html修正

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

<div class="context">

htmlソース内に1箇所あります。
このすぐ「上」に以下を「追加」

<div class="context-wrapper">

上記内容へは何も指定しませんが、今後のことを考えて一応クラス名をつけた方が良いと思います。
context-wrapper は任意文字列に変更して頂いて構いません。
続きまして検索。

<p class="topentry-description">

上記を目印にして頂きますと、その下の行がこうなってます ↓

<%topentry_description>
</p>
</div>
</div>
</section>

赤字の</section>の「上」に以下を「追加」

</div>

</p>と</section>との間に</div>が3つ有ればOKです。

======== CSS追加

検索。

.context {

CSSソース内に2箇所ありますが、最初のものが対象です。
赤字部分追加で以下の通り。

.context {
display: table;
table-layout: fixed;
width: 100%;
background-color: 背景色カラーコード;
padding: 0 20px;
}


===========

以上です。
bodyへの背景色指定は既に済まされている、というのが前提です。
よろしくお願いします (●'0'●)/

pi-
2016/09/11 (Sun) 18:54

To Akiraさん

ありがとうございます!

とてもわかりやすい説明のおかげで無事反映できました。

それと、無礼ながらこのような処置を
個別記事ページにも施したいのですが可能でしょうか?

恐縮ですが重ねてよろしくお願いします。

vanillaice (Akira)
Akira
2016/09/12 (Mon) 00:28

To pi-さん

こんばんは。
お疲れ様です。

> 個別記事にも背景

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

.main-body {

CSSソース内に2箇所あります。双方に修正が必要です。
まず最初の内容。
この項目の内容を以下の通り修正

.main-body {
margin-bottom: 60px;
background-color: カラーコード;
padding: 上余白px 0 30px;
}

上部に余白がついていませんので必要であればつけてください。

続いて2箇所目も同じ要領で以下の通り修正。
こちらはスマートフォンでの見た目です。

.main-body {
padding: 上下余白px 15px;
}

======

paddingによる余白指定の仕方は

padding: 上px 右px 下px 左px;
padding: 上下px 左右px;
padding: 上px 左右px 下px;

このいずれかです。
左右については既に指定がありますので、できれば触らない方が良いと思います。
main-bodyのクラス名が与えられている箇所は全て同じ見た目になります。
コメント周りや全記事一覧など。

この部分は背景なし、ここは有り、といった細かなカスタマイズについては自己責任・自力でお願いします。
よろしくお願いします (o'д`o)ゝ

pi-
2016/09/12 (Mon) 16:23

To Akiraさん

こんにちは!

無事反映させることが出来ました。

何回も質問しちゃって申し訳ありませんでした。
親切な対応していただき、感謝の気持ちでいっぱいです。

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


応援しています。これからも頑張ってください(*'ω')!

Akira
2016/09/13 (Tue) 00:07

To pi-さん

> 何回も質問しちゃって

そこはどうぞお気になさらず (o'ω')ノ
出来たようで良かったです。
作業お疲れ様でした (★ ̄∀ ̄)

ミカ
2016/09/13 (Tue) 19:26

レスポンシブについて

こんばんは。

プラグインのリンクが反応しません。

PCではリンク出来ているのですが、スマホの場合は、リンクをクリックしても反応しません。
どうすれば良いでしょうか?

どこかに同じ質問などがあり見逃していたらすみません。

よろしくお願いします。

Akira
2016/09/13 (Tue) 20:35

To ミカさん

申し訳ございません。
これだけでは情報が少なすぎてなんとも返答のしようがございません ^^;
リンクも頂いておりませんので目視確認も叶いません。

① プラグインは「全ての」でしょうか。それとも「一部の」あるいは「特定の」なんでしょうか
また、プラグイン1・2は右サイドメニューに、プラグイン3はフッター上サイドメニューにありますが、どちらも該当でしょうか。
② お使いのデバイス名(iPhone6, Xperia など)、OSのバージョン(iOS9.1, Android6.0 など)をお知らせください

恐らくAndroidでお使いのブラウザが「標準ブラウザ」のような気がします。
デバイスはXperiaかなぁ…(ボソッ)
記事をひとつ出しますので、そちらも併せてご確認をお願いします。
(ちょっと時間かかるかもです)

=======

記事出しましたー。

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

あと、ごめんなさい。
プラグイン1・2は右〜3はフッター上〜
これ嘘でした (´・ω・`)
このテンプレはプラグイン1・2・3全て右サイドメニューに収まってるタイプだった。
誤情報で申し訳ないですー ( ̄∀ ̄;)

ミカ
2016/09/13 (Tue) 22:47

Akira さんへ

雑な質問の仕方をしてすみませんでした。

① 公式プラグインのリンクです。
  メールフォームのリンクをつけています。(今のところこの1つだけです。)
 クリックしても、反応がありません。
 PCの方は問題ないのですが...。


② iPhone6s iOS9.3.5

これで大丈夫でしょうか?

お手数をお掛けして申し訳ありませんが、よろしくお願いします。

Akira
2016/09/13 (Tue) 23:18

To ミカさん

Androidじゃなかった!!!
とぅいまてーん ( ̄∀ ̄;)

で、今スマホから確認しました。
私のデバイスは
iPhone6S iOS9.3.5です。
検証ブラウザ
・Safari --- ○
・Sleipnir --- ○
・Firefox --- ○
・iLunascape --- ○
・Google Chrome --- ○

いずれも問題なく遷移しました。
スクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/290185D9-5C89-4B23-B3B8-7BF69DDD274A_zps6nrggpbdth__zpsmgx0jw1m.jpg

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/79288FBD-B055-4EB7-8E4C-9F47226398D5_zpssioe1wlzth__zpsnlcid7en.jpg

コード的にも特に問題無いみたいですね。
んー。ひとつだけ。
最近のiPhoneは感圧システムが導入されています。リンクを押すときに
軽くタッチ = パソコンで言う「マウスオーバー」に近い動作(遷移は行われない)
強くタッチ = ページ遷移
少し強めに押してみるとどうでしょうか。遷移しますでしょうか。
ちょっと一度ご確認頂けると助かります。

ミカ
2016/09/13 (Tue) 23:33

Akira さんへ

強くタッチしたら!出来ましたー!

他のプラグイン(最新記事やアーカイブなどなど)は、軽いタッチで大丈夫なのに、どうしてなんでしょうね。
でも、問題が解決出来て良かったです。
ありがとうございました。


お手数をお掛けしました。

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

Akira
2016/09/13 (Tue) 23:47

To ミカさん

別タブで開く指定だからじゃないですかね。
target="_blank"
たぶんだけど(笑)

ご納得頂けたなら良かったです。
お疲れ様でした (★ ̄∀ ̄)

micu
2016/09/14 (Wed) 17:19

記事下のタグについて

いくつかユーザータグを書くと、それだけ縦に長くなりますので
横並びに出来ないでしょうか?

よろしくお願いします( *´艸`)

Akira
2016/09/14 (Wed) 18:00

To micuさん

お手数おかけしております。

リストアイテムの修正の際にひとつミスがありました。
申し訳ございません。
カスタマイズをされておられないようでしたら再DLをお願いします。
再DLが困難な場合には記事内に修正の仕方を掲載しますので、そちらをご参照ください。
よろしくお願いします。

micu
2016/09/14 (Wed) 18:47

Akira さんへ

無事!出来ました。
ありがとうございました。

vanillaice (Akira)
Akira
2016/09/14 (Wed) 20:53

To micuさん

貴重なお時間頂きましたー!
ごめんなさいね ^^;
お疲れ様でした :)

ikea
2016/09/15 (Thu) 02:32

夜分にすみません

新着記事の'FC2不具合のお知らせ「カラム落ち」「表示不備」'を読んだんですが、私も上の人と同じでタグが急に縦になってしまって困っていましたi-230
それで相談したいのは、テンプレートはカスタマイズしているのでできればこのまま使いたいと思っていますが、記事にしてくだすっている修正をした方がいいんでしょうか?
不具合なら直ればテンプレートに何もしなくても元に戻るということですか?
理解が鈍くてすみません><

Akira
2016/09/15 (Thu) 02:43

To ikeaさん

こんばんは (o'д`o)ゝ

今追記しました。
FC2側で修正が行われれば元に戻りますので、そのまま何もされなくても良いと思います。
私の方も修正してしまった内容をどうするか考え中(笑)
(構文上問題になることはないはずだけども)

さきほど運営宛にメールを送りましたので、また経過などもご報告できるかと思います。
お手数おかけします。
よろしくお願いします。

ikea
2016/09/15 (Thu) 02:50

To Akiraさん

素早いお返事ありがとうございます。
ブロ友さんも困っているみたいなのでAkiraさんの記事を紹介しましたi-234
早く直るといいですねぇ・・・
私は何もしないで待つことにします。
ありがとうございました!

vanillaice (Akira)
Akira
2016/09/15 (Thu) 21:14

To ikeaさん

修正されたようですね。
今日ちょっと時間なくてやっとログインできました ^^;
午前中には改善されたのではないでしょうか。
お疲れ様でした :)

ルート423
2016/09/18 (Sun) 09:56

ヘッダー画像変更についてお願い致します。

本当に素晴らしいテンプレートばかり発表されておられて

私もお借りしております。感謝しております。

 本当に素人な質問で恐縮ですが是非教えて頂きたくコメント致しました。


Promise-meのテンプレートのトップの画像変更の方法を教えて頂けたら幸いです。

色々AkiraさんのQ&Aなど見せて頂きましたが見つからずお手数をお掛けしますが

宜しくお願い致します。

ルート423
2016/09/18 (Sun) 10:52

To ルート423さん

再度書き込みすみません。
なんとか解決できました。
有難うございました。

vanillaice (Akira)
Akira
2016/09/18 (Sun) 16:06

To ルート423さん

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

自己解決して頂いたようで恐れ入ります。
一応こちらがPromise-meの専用ページです。
ヘッダー変更の仕方も記してあります ↓

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

よろしくお願いします :)

2016/09/27 (Tue) 12:53

はじめまして。
とても素敵なテンプレートで、特にヘッダーの泡がブログのテーマと合っていたので
こちらのテンプレートをお借りさせていただきました。

質問がいくつかあるので、お時間のある時に教えていただけたら幸いです。

1.ヘッダー画像のサイズ
ブラウザをある程度縮小させると、わりと良い感じに全体画像が表示されるのですが
ブラウザを最大化すると、許容範囲ではあるけれど画像が切れてしまいます。
ヘッダーの画像サイズがいくつだと、ブラウザ最大でも全部収まるのかを知りたいです。(横1920)

2.ヘッダーのブログタイトル文字サイズと位置
ヘッダーのブログタイトル文字サイズを大きく、そして位置を変えたいです。
(フォントは現在のまま)
具体的には、左上の「Welcome to my blog」の位置より若干下にブログタイトル
文字もあれぐらいの大きさで、その下に「Hello~」の文字列を置けたらと考えています。(「Welcome to my blog」自体は無くす)
グローバルナビゲーションのリンク判定が、ヘッダー上部にもあるので
その関係で左上にブログタイトルというのは難しいのでしょうか。
良かったらお願いします。

3.個別の記事ページには、フッターに泡の表現が入っていませんが
これは、記事閲覧の際、重くなるのを避けるためかと解釈しましたが
記事個別ページのフッターにも泡の表現を入れる場合は
どのようにしたらよいでしょうか。

よろしくお願いします。

vanillaice (Akira)
Akira
2016/09/27 (Tue) 22:12

To 夏さん

ありがとうございます (o'д`o)ゝ

1.ヘッダー画像のサイズ

途中で切れる、ということですが、CSS解釈上そういったことは通常起こらないと思います。
この表示方法は画像のサイズには依存しません。
(なるべく大きいサイズであるに越したことはありませんが、それは『解像度』の観点からです)
サンプル(27inch 横2560px)

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-09-27%2021.47.23th__zpspbu1usxg.jpg

ご利用の環境を教えてくださいね。
OS名(Windows10 など)
ブラウザ名(Firefox最新 など)

2.ヘッダーのブログタイトル文字サイズと位置

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

<h1 id="blog-title">
<a href="<%url>"><%blog_name></a>
</h1>

上記を削除
さらに検索。

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

上記を以下の通り修正

<h1 id="blog-title"><a href="<%url>"><%blog_name></a></h1>

さらに検索。

-------- CSS修正
検索。

/* 注)ブログタイトルフォント関連 */

上記を目印に、すぐ下にある

#welcome {
省略
}

を全て削除
続いてそのすぐ上にある

#blog-title {
省略
}

を以下の通り書き換え

#blog-title {
margin: 0 auto;
color: rgb(240,240,240);
line-height: 1.2;
padding-top: 画面上部からブログタイトルまでの距離px;
font-family: 'Alex Brush';
font-size: 50px;
-webkit-animation: slideInDown 1.5s;
-moz-animation: slideInDown 1.5s;
-o-animation: slideInDown 1.5s;
animation: slideInDown 1.5s;
animation-delay: .5s;
}

上記を以下の通り書き換え。
font-familyについては Welcome〜と同じものを踏襲します。
「フォントは現在のまま」がWelcomeと同じもの、を指すのならば上記の通り。
ただし日本語フォントが含まれている場合には、日本語は美しく表示されません。
日本語があるのなら

font-family: 'Alex Brush', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif';

に変更してください。
Welcomeと同フォントではなく、元のブログタイトルのフォントを指すのであれば

font-family: 'Playfair Display', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif';

です。

3.個別の記事ページには、フッターに泡の表現が入っていませんが〜

こちらはですね、泡は上から約3000pxまで入るように設定しています。
場所毎の適用ではありません。
トップページなど、メインコンテンツの縦幅が比較的短い場合にはフッターにも泡が。
個別記事など縦幅が3000pxを超える場所では泡が表示されていない(ように見える)という仕組みです。
フッターの部分は本来は「泡なし」にしたかったのですが、
それをするためには「重なり順」指定が必須です。
(泡よりもフッターを上位設定にする = 泡は下になって見えない)
しかしながらFC2のスマホ版広告の仕様との絡みから断念しました。
というわけで、こういった仕様ですのでごめんなさいです (*_ _)

2016/09/28 (Wed) 06:39

とても丁寧な返信をいただき、ありがとうございます。
3の件もそういう仕組みだったのですね、了解しました。

ヘッダー画像1の件ですが、そういうことでしたら
私の環境などが悪いのかもしれません。

23インチモニタ(1920:1080)
Windows10
ブラウザは普段Chromeで、IE11でも確認してみましたが同じでした。
両ブラウザ共、上部にツールバーを表示しています。

クロームほぼ最大時
https://gyazo.com/b06185372db23f13c2e70b3d0ecc6819

クローム縮小時(適当な大きさ)
https://gyazo.com/5dced7b00899f4397212d41c6f1dfeed

IEほぼ最大時
https://gyazo.com/36506250fff8d0ebd4854e09e873253a

IE縮小時(適当な大きさ)
https://gyazo.com/ae9e6864e0508d63bc5e408a9b312376

ブラウザを適当な大きさに縮小していくと、画像の全体が出ます。
画像サイズは1920×600で作成しました。

もしアドバイス等があれば、教えていただけると幸いです。
テンプレート以外のことになってしまうようであれば
そのように伝えていただければ、こちらで何とか調べます。
よろしくお願いします。

Akira
2016/09/28 (Wed) 08:10

To 夏さん

おはようございます (●'ω')ノ

ちょっと確認なんですが、
> 画像が切れる

この意味を私は
「横幅が埋まらない」
と捉えました。
スクショを見る限り「画像の途切れ(横の寸足らず)」は無いように思います。
(②のChromeで右側にほんの少しだけ白い空白がありますが、これは横幅が奇数になった時のみ1px誤差が出る、というChromeのグリッチです)

もしかしたら、画像内のオブジェクト(チョコボ?)が思うような位置にならない、ということなんでしょうか。
元画像の全体が表示されない、という意味かしら。
仮にそうだと仮定して。

このヘッダー部分はどんな縦横比の画像を使用しても縦横ともに寸足らずが起こらないようなCSSを書いてます。
横幅についてはブラウザをマウスで引っ張るだけで大きくなったり小さくなったりしますよね。
ですが縦幅については変わりません
縦幅は固定、横幅のみ可変、ということになります。
縦横比を固定すると縦幅も可変になります(技術的には可能です)

縦幅が変わってしまうということは即ち、ブログタイトル周りの空白が横幅によって大きく異なってしまうようになり、かつ 横幅が大きくなるとそれに従って縦も大きくなるわけですから、W1900pxにもなればブラウザ画面全体がヘッダー(あるいはそれ以上)というカタチになってしまう、というのを意味します。
これは物理的な問題です。
つまり、ヘッダーの縦幅を可変にしない限りどうやっても元画像全体を常に表示するのは物理的に不可能です。
元画像自体を拡大・縮小してみてください。
画像が大きくなれば当然縦も大きくなりますよね?
それがそのままヘッダーのサイズになってしまう、ということです。
どうしてもヘッダー縦幅固定・横幅可変の上で画像全体表示、となるとあとはもう画像縦横比を壊してしまう他ありません。
縦横比を崩すということは、ひどく歪んだ(横広がり・縦潰れ)画像表示になる、ということです。

画像内のオブジェクトで一番大事なのがどこかを判断されまして、それを基準にある程度の位置を合わせる、といった対策しかありません。
デフォルトは
・左右位置は左辺を基準
・上下位置は中央を基準
に設定しています。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-417.html
↑ このページの「ヘッダー画像変更」の見出しを持つ内容をご確認ください。

どの位置合わせが最も都合が良いのかをお決め頂きまして修正をお願いします。
Ctrl+F(Windows)/ Command+F(Mac) キー検索

/* 注)スライド最初の一枚 */

この行の対象箇所を変更です。
よろしくお願いします。

2016/09/29 (Thu) 10:51

とても丁寧な返答ありがとうございます。

縦のサイズをヘッダーのサイズに合わせた画像を用意したら
上手く収まるのかな~などと思って、気軽な気持ちで聞いてしまったのですが
分かりやすく教えていただきありがとうございます。
お時間とらせてしまって申し訳ないです。

教えていただいた記事を参考にカスタマイズしてみます!

Akira
2016/09/30 (Fri) 00:26

To 夏さん

いえー。それはお気になさらず。
少しでも理想に近づけると良いのですけれど ^^;

Okan
2017/01/21 (Sat) 15:50

助けてください

こんにちは
素敵なテンプレート使用させていただいてます。
Akiraさんにお手間をかけない様ド素人なりに、日々テンプレートと睨めっこし、カスタマイズに励んでおります。(無知だけど、結構おもしろい)
どうしても出来ない(分からない)事があって、、
教えてください。
TOPページのバナーに表示されるBLOG NAMEを、Google wab fontで変更しました。
が、、、
最初のページはwebフォントに変更できたものの、READ MOREで個別記事に移動すると
フォントは全く別モノ(苦笑)
・HTMLに<link要素を追加
・CSSにfont-familyを挿入
(PC用語間違っていたら、ごめんなさい)
スライド画像変更の様に、もう一箇所どこか?に追加しないといけないのでしょうか??

お手数ですが、よろしくおねがいします。

URL: http://voyageparis.blog.fc2.com/.
TITLE tricolore de paris

vanillaice (Akira)
Akira
2017/01/21 (Sat) 18:30

To Okanさん

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

> ブログ名「のみ」をKaushan scriptに変更したい

という解釈で合ってますでしょうか。
まず解消手段を先にお伝えして、次にweb fontを利用する際の注意点をお伝えします。

=======


追加した
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
削除


①で消した内容の少し下に以下の内容がありますので見つけてください。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Playfair+Display%7CAlex+Brush%7CRoboto:400,700">

上記内容を以下の通り書き換え(内容一部追加)

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Kaushan+Script%7CPlayfair+Display%7CAlex+Brush%7CRoboto:400,700">

これで正しく表示されるようになるはずですのでお試しください。

=======

原因

追加したlinkの位置が
<!--not_permanent_area-->

<!--/not-permanent_area-->
の間に挟まれていたのだと思います。
こちらはFC2独自変数で「個別記事(パーマリンク or パーマネントリンク)以外のページで表示」を意味します。
変数はページとして変換されてしまうと、どの位置に記してあったのか第三者からは目視確認が叶いません。
ですから「恐らく」という但し書きつきでの指摘です。

=========

webフォントを使う際の注意点

既にデフォルトでwebフォントが導入されている場合には、Googleで提供されるlink要素をそのまま追加するのではなく、既存のlink要素を探します。
今回の場合には

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Playfair+Display%7CAlex+Brush%7CRoboto:400,700">

がそれにあたります。
デフォルトでは
Playfair Display --- ブログタイトル
Alex Brush --- ブログタイトル上welcome
Roboto --- 記事内使用英字フォント
この3種が既に利用できる状態になっています。
ここへフォント名だけを追加する形での導入をしてください。
<link>とは外部へアクセスして情報を拾うために使いますが、向かう先はGoogle fontsですよね。
一つの場所へ行ったらば、必要な情報はその一度で全て取得してください。
今回Okanさんが行った<link>の追加は

Google fontsへ一度行って3種フォントを取得

再度Google fontsへ行って1種を取得

という形で、アクセスが無駄になります。
一度行って4種拾う方が効率的です。
フォントの繋ぎはパイプライン(|)で記しますが、より正確な記述のためには
%7C
の使用をおすすめします。

例)
BETTERな記述
Playfair+Display|Alex+Brush|Roboto

BESTな記述
Playfair+Display%7CAlex+Brush%7CRoboto

=====

以上です。
よろしくお願いします ( ゚Д゚)ノ

=====

追加です。
今度はCSSでのフォント指定について。
これは一応有効にはなっていますので、修正必須ではありませんが、
「できれば変えておいた方が良いよ」ぐらいでお願いします。

Kaushan scriptの追加の仕方が現在はこうなってます ↓

#blog-title {
margin: 0 auto;
width: 100%;
line-height: 1.2;
padding: 26px 0;
font: bolder 38px/1.2 'Playfair Display', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif';
text-align: center;
font-family: 'Kaushan Script', cursive;
-webkit-animation: slideInUp 1.5s;
-moz-animation: slideInUp 1.5s;
-o-animation: slideInUp 1.5s;
animation: slideInUp 1.5s;
}

この書き方は既に別のフォントが指定されており、それを「上書き」することになってます。
CSS内容は上から読み込まれた順に瞬時に描画をしていきますので、一旦はデフォルト指定フォントが解釈されてるんですね。
それをわざわざ打ち消して上書き、というのが現在の状況。

#blog-title {
margin: 0 auto;
width: 100%;
line-height: 1.2;
padding: 26px 0;
font: bolder 38px/1.2 'Kaushan Script', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'cursive';
text-align: center;
-webkit-animation: slideInUp 1.5s;
-moz-animation: slideInUp 1.5s;
-o-animation: slideInUp 1.5s;
animation: slideInUp 1.5s;
}

こうした方が解釈はスムースです。
あるいはOkanさんのブログ名はフランス語オンリーですので、fontの部分は以下のようなシンプルな書き方でもOKです。

font: bolder 38px/1.2 'Kaushan Script', 'cursive';

余力があれば修正してください(笑)

Okan
2017/01/21 (Sat) 21:21

ありがとうございます。

お忙しい中、早々にお返事ありがとうございますMerci.

出来るかどうか⁇
正直、全く自信がありませんが、、、
明日、朝から頑張ってみます(^^)v
多分、また質問するかも?ですが
よろしくお願いします。

ps. 肝心な記事も書かずに
テンプレートのカスタマイズに
ハマってしまいました(笑)

vanillaice (Akira)
Akira
2017/01/22 (Sun) 00:50

To Okanさん

はい。お試しください。
お疲れ様です :)
記事も頑張って書いてくださいね(笑)

Okan
2017/01/22 (Sun) 11:48

No title

教えて頂いた様にしてみたんですが、反映されないんです(泪)

①<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">を削除 (全部削除するんですよね?)

②<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Playfair+Display%7CAlex+Brush%7CRoboto:400,700">

③/css?family=(    )Playfair+
(  )にKaushan+Script%7Cを追加

cssは、ややこしくなったら大変なので、触ってません。
(触らぬ神にたたりなし)

どこか間違ってますか??

ふと、思った事は、、
《更新》ボタンを押さないと、個別記事へ移動した際の画面は確認できないの?って
《更新》を押す前に、Akiraさんに確認しておこうと思い又おじゃましました。

助言よろしくおねがいします。

Akira
2017/01/22 (Sun) 12:46

To Okanさん

はい。更新を押してください(笑)
ブラウザにはキャッシュという機能がありますし、FC2のテンプレプレビューはJSの処理が走らないことがあります。
正しい確認をするには「更新」を押してくださいね。

もう既に手を加えた後かと思いますが、カスタマイズの前には複製をお取りになられることをおすすめします ^^;

②③の手順についてはコピペでやってみてください ↓
(Ctrl+C(Windows)/ Command+C(Mac)でコピー、Ctrl+V(Windows)/ Command+V(Mac)でペースト)

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Kaushan+Script%7CPlayfair+Display%7CAlex+Brush%7CRoboto:400,700">

なにせ一文字でも違えば反映されませんので、コピペで ╭( ・ㅂ・)و
一度思い切って更新してみてください。
更新しないと私の方でソースの確認もできませんので、更新されましたら再度拝見しに参ります。

Okan
2017/01/22 (Sun) 15:00

お世話になりました、ありがとうございます。

Akiraさん、ありがとうございますv-352
個別記事TOPのフォント無事に変更できましたv-433

Akiraさんのテンプレートは、どれも素敵でいっぱいDLさせて頂いてます。
(私のイメージするブログにぴったりなテンプレートばかり)
どれを使おうか? 贅沢な悩みです!!

また、テンプレートを交換して、ブログ名にWEBフォントを使う場合は
デフォルトでwebフォントが導入されている時は、Playfair Display の要素が
含まれているか探して、含まれていれば既存linKのcss?family=(    )Playfair+
(  )にフォント名%7Cを追加すればOKですか??

交換して分からない時は、また教えてくださいね。
このたびは、本当に本当にお世話になりましたありがとうございます

ps これからも素敵なテンプレートを期待しています。

vanillaice (Akira)
Akira
2017/01/22 (Sun) 15:13

To Okanさん

Playfair Displayは数あるフォントのひとつにすぎませんので、テンプレ内で必ず利用されているわけではないんです。
Google fontsへのlinkが記載済みであるかどうかは

fonts.googleapis

の文字列を検索してチェックしてくださいね。
既に記載されているフォントと繋ぐ際にはご自身で書かれた通りです。

... 省略 ...css?family=フォント名%7Cフォント名%7Cフォント名%7C...

この形になっていればOKです。
Google fontsがテンプレに導入されていない場合には、
<link>
のタグが多数集まっている箇所があるはずですので、その一番上か一番下に追加してください。
その際には
<!--not_permanent_area-->

<!--/not_permanent_area-->
との間、あるいは
<!--permanent_area-->

<!--/permanent_area-->
との間など、
<!-- 文字列 -->〜<!--/文字列 -->
挟まれないようにご注意ください
(意図的に表示ページ操作をするなら別です)

例)
元の内容 ↓

<link>
<!--permanent_area-->
<link>
<!--/permanent_area-->


上記に対し…

ここはOK
<link>
ここはOK
<!--permanent_area-->
ここはNG
<link>
ここはNG
<!--/permanent_area-->
ここはOK

はい。ご質問はお気軽にどうぞ。
こちらこそありがとうございます。
お疲れ様でした :)

Aoi
2017/06/01 (Thu) 11:12

No title

はじめまして。とても素敵なデザインなのでこちらのテンプレートをDLさせていただきました。
ありがとうございます。

質問させて頂きたいことがあるのですが
全く未熟な者で、まず自分の質問が最初の注意書きにある受け付けていない質問の範疇に入るのかが分からず失礼になるかもしれませんが

サイドバーの形状変更の質問は受け付けていらっしゃらないと言うことなので
スマホのサイドメニューをドロワーにしない方法の質問もそれに該当するでしょうか?

もし、その範疇でなければスマホでドロワーにしない方法をご助言頂ければと思うのですが

宜しくお願いします。
場違いな質問でしたらすみません。

Akira
2017/06/01 (Thu) 12:43

To Aoiさん

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

> スマホのドロワー解除の件〜

まず注意点です。
ドロワーを解除した場合にはサイドメニューがメインコンテンツの「下」になりますが、ページmiddle(サイドメニュー上部への頭出し)がありませんので、
従来通り「ページ最上部」「ページ最下部」のみの移動になります。
こちらをご了承くださいね。

-------- ① ドロワー解除

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

<script src="http://blog-imgs-88.fc2.com/v/a/n/vanillaice000/simplersb1_4_5min.js"></script>

上記スクリプトファイルを削除
続きまして検索

$("#secondary").attr("id","sidenav")

上記を目印に、その内容を含み

css:{zIndex:1000009}}});});

までを削除
後ろの記号に気をつけてくださいね。一つでも間違えるとページ全体が崩れてしまいます。
ここまでがドロワーの解除です。
まだドロワー開閉ボタンが残っているのと、ナビゲーションの位置修正も必要です。

------ ② 開閉ボタン削除

検索

<div class="mobile-toggle2">

htmlソース内に1箇所ヒットします。上記を目印に

<div class="mobile-toggle2">
<span></span>
<span></span>
<span></span>
</div>


上記内容を削除
続きまして検索

$('.mobile-toggle2')

こちらもhtmlに1箇所。
上記を目印に

$('.mobile-toggle2').css('display','block');

上記内容を削除
やはり記号には留意してください。
以上がボタンの処理です。

--------- ③ ナビゲーションテキスト位置修正

$('.navi-menu2').css('padding-right','58px');

html内です。
上記を削除

以上です。
今回CSSの方は触りません。
一度に全て行わず、段階を踏んで修正されることをおすすめします。
① → 目視確認 → ② → 目視確認 → ③ → 最終確認

よろしくお願いします。

Aoi
2017/06/02 (Fri) 00:01

ありがとうございます!

Akiraさんへ
削除箇所をとても分かりやすく教えて頂きありがとうございます!
おかげさまですぐに出来ました。v-353

とても素敵なデザインのテンプレートも本当にありがとうございます♥

vanillaice (Akira)
Akira
2017/06/03 (Sat) 10:57

To Aoiさん

ご希望の形になりましたでしょうか。
こちらこそありがとうございます。
作業お疲れ様でした :)

-
2017/06/08 (Thu) 18:15

管理人のみ閲覧できます

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

Akira
2017/06/08 (Thu) 20:09

To All-about-us全記事リストの件 内緒さん

こんばんは。ありがとうございます (●'0'●)/

> 全記事リストの連番が歯抜けになる件〜

FC2ブログの仕様をお伝えしますと、この番号というのは サーバーにアップロードされた時点で自動付加 されるものです。
例えば古い順に

1. 公開記事
2. 非公開記事(下書き)
3. 削除記事
4. 公開記事
5. 非公開記事(下書き)
6. 公開記事

この順序で書いたとします。そして「保存」を行った、と。
すると公開記事はそのうち3件だけ。その番号が 1.2.3 と続いてくれれば良いですが、実際には

1. タイトル
4. タイトル
6. タイトル

こうなります。(デフォルトの表示順序は上から 6. 4. 1 の順ですが)
URL末尾の数字とも関わってます。
これはFC2ブログの、というよりもブログサービスの一般的な仕様ではないかと思います。
ブログなどは「時系列」というのがとても大事なので、これはこれで正しいというか。

この順序を作為的に変更するとなると方法は ul や ol などのリスト形式を利用することですかね (´・ω・`)
ただしそれをやったとしてもですね、あくまでもこの形にしかできません ↓

<ul>
<li>タイトル
<li>タイトル
<li>タイトル
</ul>

<li>の行の先頭にCSSで連番を振る形。
ですがこれはあくまでも <ul>〜</ul> 内の<li>要素に割り当てられますので、記事数が増えて関連記事ページ自体が複数に渡った場合、例えば3ページだとしますと
1ページ目のリストは 1〜100までの連番
2ページ目のリストも1〜100までの連番
3ページ目の 以下同文。
(CSSではカウンターリセットの方法(リスト番号のスタート番号操作)もできるのですが、ページが違うとなるとそのページの指定自体がFC2では困難です)
これが果たして良いものかどうか。
(私的には良くないと思います)
全記事リストに番号が有る場合は、そのブログ内の総記事数がいったいいくつであるのか、というおおよその目安の役割にもなっているわけで。
連番の意味を為さないとでもいえばよいでしょうかね (´・ω・`)

代替案として、連番が不都合であるならば無理に表示せずに削られてはいかがでしょうか。
番号なしにする、という意味です。
その場合には Ctrl+F(Windows)/ Command+F(Mac)キー検索

<%titlelist_eno>:

これが番号を表示させる変数ですので、ここを削除
後ろに半角スペースがありますので、それも含め削除です。
まずこの案でお考え頂ければ、と思います。
どうしても番号を… ということでしたら、htmlの比較的大きな修正(アウトライン変更・定義変更)になります。
というわけでお返事待ちにしますね。
よろしくお願いします ( ゚Д゚)ノ

gao
2017/06/26 (Mon) 10:21

ご質問失礼いたします

はじめまして!
先日よりAll-about-usのテンプレートを拝見し、
カスタムさせていただいています。
素敵なテンプレートを共有いただき、ありがとうございます。

fc2ブログ初心者のため、調べながらカスタムさせていただいているのですが、
以下の2点、ご教示いただければと思い、コメントしてみました!

1)以前「pi-」様からもご質問があったようなのですが、自己解決できず。。。
グローバルナビゲーションの「ADMIN」の部分に
Webページをリンクしたいのですが、どの部分にURLを入れたらよろしいでしょうか?

2)「You may also like」の上に固定文を挿入したいのですが、
どこにタグを入れたら良いでしょうか?
現在「スポンサーサイト」の下にしか入れることができずに困っています。。。

ご都合のよいときにでも、ご返信いただけるととても嬉しいです。
どうぞよろしくお願いいたします。

vanillaice (Akira)
Akira
2017/06/26 (Mon) 11:52

To gaoさん

ありがとうございます (●'0'●)/
コメント欄で正解を探そうとして頂いたんですね。
ご配慮ありがとうございます :)

> ナビゲーションのリンク設定

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

ADMIN</a>

上記を目印にして頂くと該当箇所が以下のようになっていると思います。

<li class="sweep-to-top"><a href="<%server_url>control.php">ADMIN</a>

デフォルトではFC2ブログアカウント所有者は自身の管理画面へ。
アカウントをお持ちでない方はログイン画面が表示されます。
その上で変更されます場合は「Admin」のテキストも書き換えをしてくださいね(閲覧者が混乱します)
変更するのは赤字の部位です。

<li class="sweep-to-top"><a href="ここに遷移先アドレス">テキスト</a>

赤字部分以外のクラス名などは触らないようお願いします。

---------

> 「You may also like」の上に固定文〜

FC2の仕様上htmlだけではできません。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object18

移動先ページでは「ランキングバナー」を「SNSボタン(FC2ブログ個人設定で表示させるもの)」の「前」としてありますが、原理は同じです。
JSを用いてhtmlを書き出す方法です。
まず注意点ですが、SNSボタンを「軸(基準)」としています。
仮に今後SNSボタンを非表示にされますと、今回これからお伝えする内容は破棄されます。
簡単に言うと
「SNSボタンを見つけて、発見したらその前(or 後)に某かの内容を書き足してください。」
というJS構文を書きます。
ですからそのボタンが無くなれば見つける対象が失われてしまいます。
そこをまずよくお考えになってくださいね。
問題がありそうならば別の軸を据える必要があります。

表示したい内容がどういったものかわかりかねますので「テキストのみ」という仮定でご説明します。
そしてSNSボタンの「後」ということで合ってますでしょうか。
SNSボタンとyou may〜 の間に挟まれる形になります。

<script>
$(function() {
$('<div style="text-align: center; margin: 30px auto;">テキスト内容</div>').insertAfter('.fc2_footer');
});
</script>

説明

text-align: center;
は文章のセンタリングです。左寄せで良ければ不要ですので赤字部分を削除。
; の後ろに半角スペースがありますので、それも削除

<script>
$(function() {
$('<div style="margin: 30px auto;〜以下省略〜


30pxの数値は上下内容との空白指定ですので任意です。
状態を確認しながら適切な数値に変更してください。


改行したい箇所はEnter/ Returnキーを押下するのではなく <br> と明示してください。
上記コードの <div 省略>〜</div> 内でキーボード改行を行わないようご注意ください。


X
最善のものを希望せよ。
しかし最悪のものに備えよ。


最善のものを希望せよ。<br>しかし最悪のものに備えよ。

--------

以上です。
わかりにくい点がございましたらお申し付けください。
ちなみにスポンサーサイトの表示は任意設定で消すことができますよ。
(ただし画像高速化表示(CDNサーバー利用)が適用されなくなります)
よろしくお願いします ( ゚Д゚)ノ

gao
2017/07/03 (Mon) 10:57

To Akiraさん

早速ご返信くださり、ありがとうございました!
おかげさまで無事に解決しました!!

> 「You may also like」の上に固定文〜

上記の件についてはしっかり検討して、編集してみたいと思います。
また何かありましたら、ご相談させてください。

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

vanillaice (Akira)
Akira
2017/07/03 (Mon) 12:48

To gaoさん

ご報告ありがとうございます。
はい。固定文についてはよくお考えになった上でどうぞ。
修正作業お疲れ様です :)

gao
2017/09/26 (Tue) 14:20

度々失礼いたします。
サイドバー欄の一番下に広告を挿入したく、操作していたのですが、
通常ヘッターの部分にあった表示がサイドバー欄に移動してしまいました。。。

プラグインカテゴリ1、2でも試してみたのですが、
同じ状況。。。

何か解決策をご存知であれば、ご教示ください。

vanillaice (Akira)
Akira
2017/09/26 (Tue) 16:14

To gaoさん

こんにちは。

html構文上の大きなエラーがありますので、それを修正しないことには正しく表示されません。

① アクセス解析の貼り付け位置
テンプレートのガイダンスにある通り、

<!-- アクセス解析はここから -->
<!-- ここの間 -->


ここへ貼り付けてください。でないとこの手のタイプの解析システムでは正しい情報が取得できません。
現在はhtmlの最後方にあります。
解析コードは最前方への掲載が最も効率的です。

また、gaoさんはスマホ版を併用されていますので、スマホ版でも同じ作業をしなければスマホアクセスがカウントできません。
広告についても同じです。
今はどのサイトでもPCよりモバイル閲覧の方が多いですし、近い将来(来年あたり)はPCよりもモバイルでの見た目や動作が「上位」となります。
ですのでカスタマイズの意識はPC版よりもモバイル版の方へ集中してください。
All-about-usはレスポンシブデザインですので本来はスマホ版を非表示にしてお使い頂くのが最善ですが、そちらについてはお任せします。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-579.html

-----
② ナビゲーションリンク「オンラインショップ」のリンク構文エラー
X
<a href="アドレス"_blank">オンラインショップ</a>

<a href="アドレス" target="_blank">オンラインショップ</a>

属性間に半角スペースを入れた上で
target="_blank"
です。半角スペースを忘れないよう注意。

X
<a href="アドレス"target="_blank">オンラインショップ</a>

<a href="アドレス" target="_blank">オンラインショップ</a>

このエラーが後々まで後を引き、かつ以降の内容でもさらにエラーが追加されたことで問題が起きています。
これ1つで4のエラーに該当。
------------

現時点でエラーが13ありますが、そのほとんどがリンク修正で消えるはずです。
上記内容を一度お試し頂き、再度お見せください。
よろしくお願いします。

gao
2017/09/30 (Sat) 16:38

To Akiraさん

いつも丁寧にご教示いただきありがとうございます。

初心者でいろいろ調べながらさわっているので、
きっとどこかでおかしくなってしまったんですね。

いろいろとお手数おかけいたします。

早速Akiraさんにご指摘いただいた箇所、

① アクセス解析の貼り付け位置
>>貼り付け位置を修正しました。
また、スマホ版は以前のテンプレートは以前のものがそのままになってしまっていたため、
今回を機に非表示に訂正しました。


② ナビゲーションリンク「オンラインショップ」のリンク構文エラー
>>修正しました。
半角も入っています。

以上2箇所を修正しましたが、
現在のところヘッターの部分はそのままです。

またまたお手数おかけしてしまいますが、
お手すきのときにでもご覧いただければ幸いです。

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

vanillaice (Akira)
Akira
2017/09/30 (Sat) 17:27

To gaoさん

こんにちは ( ゚Д゚)ノ

ヘッダーではなくフッターではないですかね?
前にコメント頂いた時は単なる書き間違いだと思ってスルーしたのですが、やっぱりヘッダーなんでしょうか。
(ページ最上部が「ヘッダー」ページ最下部が「フッター」)
私が取り違えていたらご指摘ください。
とりあえずフッターの方は明らかに崩れていますので、そちらの修正をお伝えします。

admax広告のコード内が以下のようになってます。

<!-- admax -->
<script src="アドレス"></script>
<!-- admax ->

赤字のコメント部分は正しくは

<!-- admax -->

です。
コメントの記述エラーも重大エラーになりますのでご注意ください。
よろしくお願いします。

gao
2017/10/05 (Thu) 11:58

いつもご丁寧にありがとうございます!!
おかげさまで直りました!

しかも、混乱させてしまって申し訳ないです。
フッターでした。

大変お騒がせしてしまい、すみませんでした。

これからもどうぞよろしくお願いいたします。

vanillaice (Akira)
Akira
2017/10/05 (Thu) 18:07

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

修正できたということで安心しました。
お疲れ様でした。
こちらこそよろしくお願いします :)

みか
2017/10/20 (Fri) 07:27

画像の左右に余白を作りたいのですが

Akiraさま、お世話になっております。
すてきなデザインをお借りで来て楽しいブログライフをスタートさせました!v-345
一つ解決できない事がありまして、お時間のある時に教えて頂ければ・・・と思うのですが。

文章中に挿入している画像の左右に、余白を作りたいと思い
いろいろ調べて画像urlの後ろに hspace="20"など付けてみたのですが変化がなかったので、
今のところ画像自体に白枠をつけているのですが、できればタグで指定出来たらと思っています。

お手数ですが、もし解決方法がありましたらご助言いただけないでしょうか。宜しくお願いします。

vanillaice (Akira)
Akira
2017/10/20 (Fri) 13:37

To みかさん

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

> 文章中に挿入している画像の左右に、余白を作りたい〜

hspaceというのはhtml5では廃止属性です。
廃止された属性はブラウザがサポートを段階的に外していきますので(特にFirefoxが積極的に行ってます)、今後は使わない方が良いですね。

画像周りに空白を設けるにはmarginあるいはpaddingを使ってください。
marginは使い方が非常に難しいのでpaddingをおすすめします。

<img style="padding: 上px 右px 下px 左px;" src="アドレス" alt="代替テキスト">

paddingの指定の仕方は上記が基本です。
また

padding: 上下px 左右px;
あるいは
padding: 上px 左右px 下px;
あるいは
padding: 上下左右px;

のいずれかです。

----------
> 画像自体に白枠をつけているのですが、できればタグで指定〜

こちらはご自身のイメージがあるでしょうから以下のページを参照してください。

https://vanillaice000.blog.fc2.com/blog-entry-554.html

ただしborderで装飾をつける場合に先の「padding」指定があるとボーダーと画像の間に空白ができます。
floatした画像であれば右か左いずれかのmargin指定をおすすめします(paddingをmarginに変更。左右いずれか一方のみ。margin-left: 数値px; や margin-right: 数値px; など)が、左右marginというのは画像が横幅100%あるいはそれ以上の時には右側が効きません。
ですから

<div style="margin: 数値;"><img src="アドレス" alt="代替テキスト"></div>

こうしてdivで囲ってdivの方にmargin指定を行ってください。

「画像四方に余白」と一口に行っても条件分岐がありますので、内緒さんがどんな形を求めていらっしゃるか見えてきません。
floatなのか横100%の画像なのか、また別なのか。
なので見当違いなお返事であればご指摘くださいね。
よろしくお願いします。

------ 追記
floatではなく align属性でやってるんですね。
align属性も廃止ですのでいずれ見た目が崩れる可能性はあります。
ブラウザがどこまで後方互換してくれるか不明です。
できれば今のうちにfloatへの切り替えをおすすめします。

https://vanillaice000.blog.fc2.com/blog-entry-529.html

みか
2017/10/20 (Fri) 21:44

ありがとございます!

丁寧なご教示ありがとうございます!
お陰様で画像に余白を作ることができました。
また alignの事もありがとうございます。全く知りませんでした。v-356
まだ出来たばかりのブログなので何とか他の使ってる場所も直す事が出来ました。
リンクして下さったページも、こんなに色々できると知って目から鱗です。
大変勉強になりましたv-343

ありがとうございます!

vanillaice (Akira)
Akira
2017/10/21 (Sat) 00:42

To みかさん(完了のご報告)

お出来になったということで安心しました。
お疲れ様でした :)

雪柳アン
2018/03/31 (Sat) 16:30

自分で設置したFancyboxが機能しなくなりました

少し込み入った内容ですみません。
現在、こちらのテンプレートを使用させてもらっていますが、私はいつも画像拡大表示のためにFancyboxを適用させています。
ただ、必要なJSやCSSなどはFC2のファイルにアップロードできないようなので、自分のサーバーに載せているもの(http://yukiyanagi.oops.jp/)を引っ張ってきています。
先月ぐらいまでそれで普通に機能していたのですが、本日見たらこのFancyboxが機能しなくなっていました。
HTMLやCSSは特に何も変更していません。
FC2側で何か仕様が変わってしまったのでしょうか。
お忙しいところ恐れ入りますが、原因などわかりましたら幸いです。

すぐに見ていただけるように、私のブログのHTMLに設置しているスクリプトをコピペして送ろうとしましたが、英数字の羅列がスパムコメントと認識されてしまい送れなかったので、
私のブログのソースを開いていただき、「fancybox」でページ内検索をお願い致します。
fancyboxで画像拡大表示を設置しているページの例→http://sosakugenba.blog.fc2.com/blog-entry-239.html

雪柳アン
2018/03/31 (Sat) 16:42

すみません、こちらのミスでした…

連続になってしまいすみません。
再度確認してみたところ、自分のサーバーの方でFancyboxのCSS及びJSを載せている階層の名前を変えていたことに気付いていませんでした。階層名を修正したら直りました!お騒がせして申し訳ありませんでした(´;ω;`)

vanillaice (Akira)
Akira
2018/03/31 (Sat) 17:21

To 雪柳アンさん

こんにちは。
解決済みということで大丈夫でしょうか。

ここのところ海外からのスパムが酷いもので、致し方なく英字を50%まで制限しています。
ソースコード確認のご質問の方にご迷惑だろうなぁと思いつつ。申し訳ないです (*_ _)
んー。やっぱスパム対策は別の方法を考えた方が良さそう ^^;

いずれにしろ解決済ということで、お疲れ様でした :)

gao
2018/04/17 (Tue) 12:55

リンクの色変更について

いつもお世話になっております。
All-about-usのデザインが気に入って、ずっと使わせていただいております^^

今回、記事を見やすくするために個別記事のリンクの色を変更したいのですが、
どの部分を編集すればよろしいでしょうか?

お手すきの時にご教示ください。


添付させていただいたURLの記事でいうと、
『◯◯』のご紹介はこちらから♪
という部分の色を目立つ色に変更したいと思っています。

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

vanillaice (Akira)
Akira
2018/04/17 (Tue) 21:02

To gaoさん

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

gaoさんがご利用中のAll-about-usは旧バージョンですので、スタイルシート末尾に

.inner-contents a {
color: カラーコード;
}


を追加してください。
新バージョンにアップデートされた場合にはセレクタ名が .inner-contents ではなく #inner-contents に変わりますのでご注意ください。
また、この追加をされますと関連記事リストのリンク色も連動して変わります。
別の色に指定する場合にはさらに

#fc2relate_entry_thumbnail_area .relate_entry_title .relate_entry_title_text {
color: カラーコード;
}

を追加してください。
最新バージョンはページ表示スピードなどの改善が行われている点もお伝えしておきますね。
よろしくお願いします。

gao
2018/07/05 (Thu) 14:51

To Akiraさん

ご返信がとっても遅れてしまい、すみませんでした。
おかげさまで修正することができました!
ありがとうございます。
アップデートも検討してみたいと思います^^
今後ともよろしくお願いします。

vanillaice (Akira)
Akira
2018/07/05 (Thu) 16:18

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

こんにちは。
お役に立てたなら幸いです。
お疲れ様でした :)

浜工高OB&OG祭実行委員会
2019/03/21 (Thu) 18:37

FC2拍手のボタン設置について教えていただけませんか?

Akira様、はじめまして。
とても素敵なデザインをいっぱいお作りなので、Akiraさんが作られたテンプレートから学校関係が使えるものを探しまくり、こちらのテンプレートをDLさせていただきました。 ありがとうございます。
年齢層が上の方々が見るブログなので記事内の文字を少し大きくしたりと変更を加えましたが、現状のこれで大丈夫でしょうか?

また質問させて頂きたいことがあるのですが、教えていただけますか?
「ブログ拍手」の設置についてです。
もともとFC2ブログについている拍手ボタンは設置できるようなのですが、「FC2拍手」のブログボタンの設置ができません。
「テンプレートの設定」→HTML、CSSの「編集」でHTML編集を開き、<!--topentry--><!--/topentry-->内に下記タグを貼り付けてください。
と「FC2拍手」のタグ作成のページで促されるので、その部分に貼り付けてみましたがブログのテンプレートが崩れるだけで拍手ボタンが現れません。
できれば、現状のブログ拍手のボタンがある位置に「FC2拍手」を置きたいのですが、これは不可能でしょうか?
もしできるなら、どこへ「FC2拍手」のタグを貼り付ければいいのか教えていただけませんか?

それから
・ 右クリック禁止の解除
は、どこを見ればいいのでしょうか?
もし解除になっていないようでしたら、その部分も教えていただけますか?
(あまりに初心者レベルの質問で申し訳ありません。)

vanillaice (Akira)
Akira
2019/03/21 (Thu) 22:38

To 浜工高OB&OG祭実行委員会さん

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

> 記事内の文字を少し大きくしたりと変更を加えましたが、現状のこれで大丈夫でしょうか?〜

はい。問題ありません。正しく指定されています。

-----
> 右クリック禁止の解除は、どこを見ればいいのでしょうか?〜

右クリックの禁止はされていませんので大丈夫です。お気遣いありがとうございます。

-----
> どこへ「FC2拍手」のタグを貼り付ければいいのか〜

本題のこちらは以下の手順です。

<!--/more-->
で検索するとhtml内に1箇所ありますのでその直下にコードを貼り付けてください。

* 注意点です。表示位置について。
ブログ個人設定の拍手ボタンはFBなどのSNSボタンと並んでいますよね。今回拍手を個人設定からこちらに切り替えますとSNSボタンとは並ばなくなります。同じ箇所に、というわけいはいかないんですね。記載位置はFC2の仕様なので変更不可です。
よろしくお願いします。

浜工高OB&OG祭実行委員会
2019/03/22 (Fri) 05:50

To Akiraさん

Akira様、こんなに早くお返事いただけるとは思っていなかったので恐縮です。
教えていただいた箇所へタグを貼り付けてみましたが広告の後に設置となるようです。
拍手ボタンのクリックのお礼ページで、更にOB&OG会の告知の念押しも兼ねた画像を作ったので、それが生かされれば…と思ったのですが、広告の後ですと拍手ボタンに気がつかない(何しろ、OB&OGの年齢が高いので)と思われ、断念することにしました。
テンプレートはとっても気に入っていますし、同じ同窓会委員会メンバーにも好評だったので現状の状態で使わせていただきます。
ありがとうございました!!!

vanillaice (Akira)
Akira
2019/03/22 (Fri) 16:21

To 浜工高OB&OG祭実行委員会さん

こんにちは。

念の為、個別記事下のテキスト広告と、画面上部に固定されている広告(検索バー)は非表示が許可されています。

テキスト広告(画像高速表示の設定)
https://admin.blog.fc2.com/control.php?mode=setting&process=2#ads
広告を出す変わりに画像の高速表示(CDNサーバーの利用)を許可します、という設定なので広告OFFを引き換えにCDNは使えなくなります。

検索バー
https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar
こちらは特に代償を払う必要はありません。この検索バーが出ているとタブレットユーザーさんの閲覧が困難になりますので(検索バーがレスポンシブでないため画面を超過します)、非表示をおすすめします。

テキスト広告の方は代償がありますのでよくよくご検討くださいね。
よろしくお願いします。

浜工高OB&OG祭実行委員会
2019/03/22 (Fri) 18:01

Akira様、更にアドバイスありがとうございます。
ただいま、広告設定をOFFにしてみました。今、offに切り替えで30日に非表示になるそうなので、30日に再度教えていただいた場所へタグを挿入してみます。
思った位値へ設置できれば非表示で様子を見たいと思います。
実際のところ、どの程度の速度変化があるのか分からないので体験してみて判断してみます。
Web用語がよく分からないので“CDNサーバー FC2”で検索したところ、「FC2ブログの【アカマイ】画像表示高速化の仕組み」が検索でヒットし読んでいたところ、あれ?これAkiraさんのブログページ?!と途中で気が付き、ひとりでウケてました(笑)。
そのブログページの中で、上書きが反映されない理由、もっと早く読めていたら…と。
画像の上書きで何回やっても画像が変わらず、何回リロードしても画像が変わらず、名前を変えて置き換えてもサムネイルはしつこく変わらずで、以前に諦めて一つ記事を削除してしまいindexの順番が順番通りにならず欠番も出てしまい後悔していたので。
でも、ここで改めて確認ができ、画像の上書き保存はダメ、絶対しちゃダメ!と老化脳にインプットできました。

検索バーの件もアドバイスありがとうございます。
スマホとMac、Windows環境での画面確認はしたのですが、自分がタブレットを持っていないので確認できていなかったので、とっても助かります。
こちらも早速、非表示にしました。

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

To 浜工高OB&OG祭実行委員会さん(終了のご報告)

そうですね。横に並ばずとも大きく離れてしまうことはなくなるかと思います。

CDNの特性によるキャッシュ残り(サムネイルが変わらない件)や記事番号の件、やはり皆さん疑問に思ったりつまずくところは同じですよね ^^;
一からやり直すわけにもいかないので気づいた時点からすぐ軌道修正、ということになりますかね。
広告非表示の方は少し時間がかかりますが一度ご確認ください。
お疲れ様です :)

浜工高OB&OG祭実行委員会
2019/03/31 (Sun) 22:01

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

Akira様
結果報告です。
TwitterやFacebookのボタンの下へ現れたので、どうしようか悩みましたが急遽、目立てばいいじゃん!と思い、SNSボタンの下でも目立つようにボタンを作りました。
広告非表示にしても私の環境では速度的にあまり変化を感じられなかったので、このままいこうと思います。
色々お世話になりました!
丁寧に教えてくださり大、大、大、大感謝です^^。

vanillaice (Akira)
Akira
2019/04/01 (Mon) 14:47

To 浜工高OB&OG祭実行委員会さん(完了のご報告)

こんにちは ('0')/

拝見しました。良いと思いますよ。目立ちますし(笑)
ボタンは大きくて押しやすい方が良いですよね。
ご報告ありがとうございます。お疲れ様でした :)

カッターレース実行委員会
2019/05/17 (Fri) 17:24

Facebookプラグインの表記

Akira様、いつもお世話になっております。

今回、テンプレートにFacebookページを貼り付けたいと思い、FC2のプラグインの設定よりフリーエリアを作成しました。そこにFacebookのページプラグインにてコード作成し、貼り付けたのですが上手く表記されません。ネットでも原因を探したのですが見つけることができませんでした。FacebookページのURLは、 https://www.facebook.com/8cutter/
以前、Akira様の違うテンプレートは問題なくできたのですが、なぜ今回上手くいかないのか原因がわかりません。
お忙しいと思いますが、見ていただければ幸いです。

では、よろしくお願いします。

vanillaice (Akira)
Akira
2019/05/17 (Fri) 18:05

To カッターレース実行委員会さん

こんばんは。

スクロールアンカー(サイドメニューが画面外に流れていかないようにする)のJSと衝突しています。

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

で検索し、ガイダンスに従って削除をお願いします。

カッターレース実行委員会
2019/05/17 (Fri) 23:24

To Akiraさん

Akira様、早速の返信ありがとうございました。

言われた通りやったところ無事に表示されました。助かりました。

今後ともよろしくお願いします。

vanillaice (Akira)
Akira
2019/05/19 (Sun) 15:26

To カッターレース実行委員会さん(完了のご報告)

修正できたということで良かったです。
お手数おかけしました。お疲れ様でした :)

カッターレース実行委員会
2019/05/31 (Fri) 15:17

No title

Akira様、お世話になっております。

先日は、ありがとうございました。 また一点お聞きしたいのですが。
記事の写真をアップロードし、記事は問題なくアップロードした写真がみれるのですが、TOPに行くと写真がプロフィールの
写真と一緒になってしまいます。過去にアップしたyou tube のデータのときもそうでした。
何か邪魔をしているのでしょうか。何か分かりましたら教えてください。

vanillaice (Akira)
Akira
2019/05/31 (Fri) 18:34

To カッターレース実行委員会さん

こんにちは。

該当するページのURLを記載して頂けると質疑応答がスムースに進みますので、次回からURLの提示をお願いします。
今回は

①「2019八戸港カッターレース 中国語版完成!」
②「こんないいものあったのぉ~、movie!」

が対象ということで合ってますでしょうか。

①については記事編集画面を開き、右側にある「メタタグ編集」をクリックして展開される「アイキャッチ画像」を確認してください。画像が無い場合と別の画像が指定されている場合は記事内の画像と同じものを指定するようにしてください。

参考記事: FC2ブログ「サムネイル」「アイキャッチ」のおさらい
https://vanillaice000.blog.fc2.com/blog-entry-900.html

-----
②について、YouTubeなどの動画の場合はサムネイル対象にはなりません。動画の掲載はiframe要素あるいはembed要素で表示しますが、画像はimg要素です。トップページで取得するのはimg要素のみです。

一度ご確認くださいね。よろしくお願いします。

余談ですがSNSシェアを促進する場合はOGP設定を有効化されることをおすすめします。
参考記事: OGP設定は大事です
https://vanillaice000.blog.fc2.com/blog-entry-819.html

カッターレース実行委員会
2019/06/01 (Sat) 16:54

Akira様、お世話になります。URLの件は申し訳ありませんでした。

①に関しては言われた通りアイキャッチ設定で画像指定して改善されました。

②You tubeに関しても了解いたしました。

余談で書いてあるOGP設定も知りませんでした。ブログの設定からメタタグ設定を有効に変更しました。
次回からFacebookなどのシェアしたときの表示がどのようになっているのか見てみようと思います。

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

https://8cutter.blog.fc2.com/

vanillaice (Akira)
Akira
2019/06/02 (Sun) 00:19

To カッターレース実行委員会さん(完了のご報告)

こんばんは ('0')/

修正できたということで良かったです。
はい。また何かありましたらお気軽にどうぞ。お疲れ様でした :)

カッターレース実行委員会
2019/06/11 (Tue) 15:14

OGP設定について

Akira様、いつもお世話になっております。
先日、SNSを有効に使うにはOGP設定をした方がいいとのアドバイスをいただきました。ブログ設定の方から有効にしたのですが、Akira様のリンクからみるSNSの表示と写真の大きさが違います。これはどうしてなのでしょうか?いくらやっても写真が左側に小さく表示されてしまいます。Akira様のは大きい写真のしたにリンク情報がきています。表現が下手ですみません。
https://8cutter.blog.fc2.com/

https://www.facebook.com/kenichi.mayama.1

Facebook内、八戸港カッターレース【基本的作法編】です。何かあれば返信いたします。よろしくお願いします。


vanillaice (Akira)
Akira
2019/06/11 (Tue) 21:21

To カッターレース実行委員会さん

こんばんは。

OGP画像には推奨サイズ・推奨アスペクト比があります。
参考記事: 2018年時点でサムネイル画像・OGP画像は横1200px以上が最適解
https://vanillaice000.blog.fc2.com/blog-entry-715.html

web上のサムネイルの基本は「横長」です。何故ならスマートフォンで縦に長い画像は画面のほぼ全てを奪ってしまうからです。縦長を推奨しているSNSはありません。なので
・横長
・横1200px以上
にされると良いですね。横長画像にすると上に画像、下にコンテンツ、という形になります。

カッターレース実行委員会
2019/06/12 (Wed) 09:41

To Akiraさん

Akira様、お世話になります。

早速の返信ありがとうございます。
OGP画像の推奨サイズがあるのですね。画像そのものを1200x630pxで作成し、OGP画像として使用するという
認識でよろしいでしょうか。
それともファイルアップロードでサムネイル大きさ指定してもできるのか教えて欲しいのですが。

基本的な質問で申し訳ありませんが、よろしくお願いします。

vanillaice (Akira)
Akira
2019/06/12 (Wed) 18:42

To カッターレース実行委員会さん

こんにちは。

> 画像そのものを1200x630pxで〜使用するという認識で〜

はい。そうです。オリジナルサイズが横1200px以上、ということです。

> ファイルアップロードでサムネイル大きさ指定してもできるのか〜

アップローダーの「サムネイル作成」は最大で999pxまでしか指定できません。そして縦横比の変更不可です。
そしてOGP画像はあくまでもオリジナル画像が対象になります。

例)
xxx.jpg --- 横2000px
xxxs.jpg --- 横2000px画像のサムネイル(仮に横300pxとする)

記事内に下の横300pxのサムネイルの方の画像を掲載したり、あるいは「アイキャッチ画像」に同じく横300pxのサムネイルの方を指定してもOGPに選出されるのはファイル名に s の付かないオリジナル画像の方です。

画像の容量は可能であればできるだけ削減するようにしてくださいね。横1200px原寸の画像だと大抵400〜500KBほどありますが、理想としては100KB前後まで削減した方が良いと思います。

参考記事: 画像を圧縮して軽くするおすすめサイト「Tiny PNG」
https://vanillaice000.blog.fc2.com/blog-entry-208.html

カッターレース実行委員会さんの場合サイドメニューに外部サイトのウィジェットを多く掲載されていますので、それだけでも負荷が高くページ表示のスピードに影響があります。なのでそれ以外で対処可能な画像容量などは常に気にされると良いですね。何も考えずに掲載しているとページがどんどん重たくなってしまいます。

カッターレース実行委員会
2019/06/13 (Thu) 15:12

Akira様、ありがとうございます。

写真の大きさを1200x630pxを基本に考えてやってみます。また画像の容量を気を付けないとだんだん重くなっていくのですね。気にしておりませんでした。また、サイドメニューもfacebookを一つ削除しました。(これはとりあえずにぎやかな方がいいかなというだけで表示していたものなので。)

いつも丁寧な説明ありがとうございます。今後とも、よろしくお願いします。

vanillaice (Akira)
Akira
2019/06/14 (Fri) 01:32

To カッターレース実行委員会さん

こんばんは。

そうですね。画像の容量削減は非常に大事です。さすがに1MB超えは無いなぁ、と思います ^^;
(6月10日の画像は横4000px超え、容量は1.7MBあります)

カッターレース実行委員会
2019/06/14 (Fri) 08:06

To Akiraさん

Akira様、お世話になります。

6月10日のデータはチェックしてみます。画像サイズの変更は今までのイメージだとphotoshopのようなソフトを使うという感じがしていましたがフリーのソフトもあるのでしょうか?もし使い勝手の良いサイトがあれば教えて下さい。よろしくお願いします。^_^

カッターレース実行委員会
2019/06/14 (Fri) 09:21

To Akira様、お世話になります。

一応6/10のブログの写真のサイズをフリーソフトで変更してみました。横を1200pxを基本にタテヨコ比率固定でやってみました。
データは165KBあたりまで縮小しました。
https://www.iloveimg.com/ja を使ってみました。

最初は4000pxぐらいあったものを1200pxに小さくしたのですが、この1200pxという話しは前回のOGPの設定にも通じる話ということでいいでしょうか。これから画像サイズを気にしながらやってみます。

https://8cutter.blog.fc2.com/

今後ともよろしくお願いします。(^^)/

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

To カッターレース実行委員会さん

こんにちは。

4枚目の写真が未調整のようですが、3枚については軽量化されていますのでOKだと思います。

-----
> この1200pxという話しは前回のOGPの設定にも通じる話〜

OGP画像として指定したい場合にはそうなりますね。OGP以外の画像については1200pxでなくとも大丈夫です。といっても高dpiのことを考えれば大体1000〜1200pxにしておくのが妥当ですね。結局は「掲載寸法」によります。
例えば横300pxで掲載したい画像のオリジナル寸法は最低でも横600px必要ですし、横600pxで掲載したいならばオリジナルは横1200px必要です。

横1200px以上で縦長(16:9推奨)はあくまでもOGPやGoogleの推奨であるという話です。本文最初の1枚目の画像または「アイキャッチ画像」に指定する画像はこれが基本です。それ以外は臨機応変に。

画像の容量削減についてはOGPで有る・無しに関わらずweb上で画像を掲載する際の基本ですから全ての画像で処理ができればそれが一番良いですね。

カッターレース実行委員会
2019/06/15 (Sat) 15:19

To Akiraさん

Akira様、お世話になります。

自分でコントロールしないといけないのですね。でもそれが楽しさに変わるのかも知れませんね。
また何かあればよろしくお願いします。(^^)/

みか
2019/12/02 (Mon) 16:17

Akira様、いつもお世話になっております。

質問させてください。
トップページのアイキャッチ画像の上に表示される、更新の月・年・曜日・時間の表示についてなのですが、もともと文字色は白だったと思うのですが
いろいろ弄っているうちになのか、いつの間にかrgb(51,51,51)の色になってしまいました。
この文字を白に直す方法がどうしても分からず…、教えて頂ければ幸いです。

どうぞ宜しくお願いします

vanillaice (Akira)
Akira
2019/12/02 (Mon) 20:31

To みかさん

こんばんは。こちらこそお世話になります :)

> いつの間にかrgb(51,51,51)の色に〜

スタイルシートの中程にある
/*取り消し線の色変え*/
のコメントの近接に

span {
color: #5b6356;
}

が追加されています。なので実際は rgb(51,51,51) ではなく rgb(91,99,86) です。
この内容はみかさんが必要と感じて入れたものだと思いますが、その必要が生じた要素を私の方で見つけるのは困難なので、「何故追加したのか」をまず思い出してくださいね。

で、spanというのは要素名ですから、span要素全てが色指定に従ってしまいます。仮にみかさんがテンプレートhtml内あるいは記事内でspan要素を任意追加や利用しているとして、その場合はできれば要素名に直接スタイルを振るのではなく(「タイプセレクタ」と言います)、要素にクラス属性を追加し、そのクラス名にスタイルを振ると良いですね(「クラスセレクタ」と言います)
特にspan要素というのはテンプレート内あるいはページ内で広汎に利用されますのでタイプセレクタ指定は避けてください。

例)
×
<span>内容</span>

span {
color: white
}


<span class="xxx">内容</span>

.xxx {
color: white
}

-----
修正方法
① 上記説明に従ってタイプセレクタからクラスセレクタの指定に変更する
② 既存内容(span {color: #5b6356})を削除する

まずはこの2つのうちいずれか、または両方で対処してみてください。これで都合が悪いようならまた別の方法をお伝えします。
②を行えば現在支障が出ているグリッド内の日付の色やナビゲーションのリンクの色などは解消されます。が、「何か」への色指定が失われます。

ともかく既存の内容が「何故必要か」を判断しないと対処ができませんので、とりあえずはこの2つで。
よろしくお願いします。

みか
2019/12/02 (Mon) 22:57

早速お調べいただき、詳しく分かりやすいご説明有難うございます!

問題のcss追加は
取り消し線と下の文字色を変えたいと思って入れたのですが、
それをspanで指定したら他で指定したspan要素にも効いてしまうと、その当時は全く思い至りませんでした。
言われてみれば本当に納得です。

しかも追加した時は、文字色は本文と同じにしようと思った結果、何故か適当に近い色の#5b6356にしたみたいです。
本文と似た色を指定していたのでspan要素の全てがその色に変わっているとも気がつきませんでした。
topentry-month-and-yearという記述のある所やその周辺を鬼のように見ていたのですが、そこに原因があったとは自力だったら10年経っても気が付かなかった気がします。汗
なんだか色々お恥ずかしいです。

おかげさまで①の方法で修正し、月・年・時間の色を白に戻す事ができ、取り消し線の指定も教えて頂いたクラスセレクタに変える事ができました。感激です!
大変、大変勉強になりました。ありがとうございます。

vanillaice (Akira)
Akira
2019/12/05 (Thu) 22:23

To みかさん

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

修正できたようで安心しました。
画面上部のFC2検索バーはタブレットユーザーさんの使い勝手のために非表示設定をおすすめします(詳細は当該記事をご覧ください)
お疲れ様でした :)

あトん
2019/12/24 (Tue) 23:57

気泡のエフェクトについて

Akira先生、質問ではなくお願いがありカキコさせて頂きます。
All-about-usに実装されている気泡のエフェクトのCSSを、はてなブログで流用したくお許し頂けないでしょうか。
実際は気泡として使うのではなく、雪を降らせるために使用する予定です。
宜しくお願いいたします。

vanillaice (Akira)
Akira
2020/01/03 (Fri) 19:13

To あトんさん

こんばんは。お返事めちゃくちゃ遅くなってしまいました。ごめんなさい (*_ _)

はい。どうぞお使いください。
JSコードやファイルの直リンク以外、特にCSSは基本的にご利用頂いて構いません。
ご丁寧にありがとうございます :)

あトん
2020/01/03 (Fri) 22:35

To Akiraさん

Akira先生、当方のわがままをお許し頂き感謝します。流用するのはCSSのみです。
お正月で休み中にも関わらず、ご返事ありがとうござます。

あトん
2020/01/25 (Sat) 15:57

お礼

Akira先生、何とかブログに雪を降らせることが出来ました。ありがとうございました。

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

To あトんさん

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

良かったですー。ご報告ありがとうございます :)

bell
2020/03/03 (Tue) 09:39

ブログタイトル、個別記事時タイトルのフォントの変更

akira様
はじめまして。こちらのテンプレートのデザインが素敵で利用させていただいております。

質問ですが、ブログタイトルと個別記事の上部タイトルのフォントですがゴシック体に変更したいのですが方法をおしえていただけますでしょうか?

Welcome to my blogの部分も同じく変更したいです。

自分で触ってみましたがなんだかおかしくなってしまいました。

申し訳ありませんがよろしくお願いいたします。

vanillaice (Akira)
Akira
2020/03/03 (Tue) 22:44

To bellさん

こんばんは。

えーと、まず「解釈」の確認をしたいのでお願いします。この「ゴシック体」の意味についてです。

欧文のフォントの大きな分類は
・serif(セリフ) --- ひげがついているもの
・sans-serif(サン セリフ) --- ひげがついていないもの
に分かれます。All-about-usの「welcome」と「ブログタイトル」はserifです。
で、欧米で「gothic」(ゴシック)というのは本来は「black letter」のことなんですね。ちょっと説明が難しいのでblack letterで検索してもらうと画像が出てくると思います。

で、日本で「ゴシック」というときには本来の意味と違うのではないかなぁ、と思っていて、その私の解釈が正しいかどうか。

日本の人の言う「ゴシック 」= sans-serifのこと?全体の太さが平均なもの?
ということで合ってますでしょうか。というのはbellさんのブログタイトルは英文なので、テンプレートデフォルトの欧文書体を継承させるのならば「roboto(ロボト)」というsans-serifですし、日本語書体は「游ゴシック」というゴシックの名を含むフォント名です。こちらは欧文ではないのですが分類的にはsans-serifになるかと思います。日本語で表現するところのゴシックということですよね。たぶん。

なのでこのどちらにしたいのか、です。あるいは何か特定のフォントを想定しているのか。
または。bellさんご自身が記事の文章をどのフォントで見ているのかも実は不明です。というのは第一優先フォントの「游ゴシック」はwindows8.1以降でしか見られませんので、bellさんのOSが(winだと仮定して)7とか8とかだとmeiryo(メイリオ)で見ていることになります。フォントの見え方・操作というのは結構難しいんですね。なのでbellさんが「記事の文章を游ゴシックで見ている」と仮定して進めます。

欧文フォントと日本語フォントを別に指定しているのは英文の特に長文を日本語フォントで書いてしまうとEnglish speaker(ネイティブ)にとっては非常に読みづらいんです。
欧文フォント --- アルファベット, 数字, 記号
日本語フォント --- アルファベット, 数字, 記号, ひらがな, カタカナ, 漢字
この違いがあり、欧文フォントに日本語表記はできませんが日本語フォントは英文の表記も可能です。ただし繰り返しますが日本語フォントによる英文は見づらい。

bellさんが「welcome」「ブログタイトル」をどのフォントでの表記を期待しているのかちょっと不明なので、2パターン書いておきます。

#blog-title {
で検索するとスタイルシート内に1箇所あります。ルールセット内

font: bolder 2.4rem/1.4 'Playfair Display', 'Hiragino Mincho ProN', YuMincho, 'MS PMincho', 'MS Mincho', serif;


【robotoの場合】
上記内容(font: bolder〜省略)を削除し、削除した場所に以下の内容をコピー&ペーストで追加。

font-weight: bolder;
font-size: 2.4rem;

【游ゴシックの場合】
上記内容を一部変更し以下の通り。

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

こちらがブログタイトルです。続いてwelcomeの方。
#welcome {
で検索するとスタイルシート内に2箇所あります。1つ目の方のルールセット内
font-family: 'Alex Brush', cursive;


【robotoの場合】
上記内容(font-family: 'Alex〜省略)を削除。

【游ゴシックの場合】
上記内容を以下の内容に変更。
font-family: YuGothic, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

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

-----
あとこれ余談ですけども、記載されているアドレスが特定のページへのリンクになっています。あえてそうしたのなら良いんですが、別の方にコメントする際にも内容が継承されてしまいますので(クッキーの働きです)次回ご返信頂く際にでも正規ブログアドレス(末尾が .fc2.com/)に書き換えを行った方が良いと思います。

bell
2020/03/03 (Tue) 23:33

To Akiraさん

akira様

お世話になります。

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

ゴシック体の件言葉足らずで申し訳ありませんでした。角ばっている文字が良かっただけなんです・・・

丁寧なご説明ありがとうございます、お陰でフォント変更することができました。

ブログのURLおかしかったですね・・・申し訳ございません。

この度はありがとうございました。またご質問の機会ありましたら宜しくお願いいたします。

vanillaice (Akira)
Akira
2020/03/06 (Fri) 22:59

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

こんばんは。お返事遅くなりました (*_ _)

そうだったんですね。robotoは角ばっているというよりも丸みのあるフォントなので大丈夫でしょうか。web fontsで選び直す、という方法の方が適切だったかもしれません(必要であればお申し出ください)
お疲れ様でした :)

-
2022/10/26 (Wed) 15:48

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/10/29 (Sat) 17:07

To All_about_us の件 内緒さん

お返事遅くなりごめんなさい。

> シェボタン〜全て非表示に〜

<ul class="inner-footer-sns">
で検索するとhtml内に1箇所出てきます。この行を含み直近 下の方にある
</ul>
までを削除。こちらがトップページ種(グリッド系ページ)です。続いて
<ul id="entry-footer-sns">
で検索すると同じくhtml内に1箇所出てきますので、直近 下の方にある
</ul>
までを削除。こちらが個別記事下のものです。
一度お試しください。
励みになるお言葉もありがとうございます :)

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