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

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

名称
GirlOnWire
がーる おん わいぁ
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
全文
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 新着記事スライダー
  • ドロワーサイドメニュー(スマートフォン)
  • SNSリンクリスト
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Poiret One
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.22 2024.2.29
  • リスト型ページネーションの複製を可能に
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.14
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2023.6.12
  • IE用対応終了
  • jQueryを3.7.0にアップグレード
  • カスタムプロパティ導入
  • カルーセルスライダーのCLSを改善
  • ブログ背景シームレス画像を固定
  • 各アイテムにbox-shadowを追加
  • Font Awesome停止
  • YouTubeアイコン追加
  • ユーザビリティの最適化
  • 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にアップデート
更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
  • 上部ページ送り削除
更新履歴 2019.11.11
  • コメント主のリンク表示用JS及びデザインの変更
更新履歴 2019.8.3
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
【重要】テンプレートの変更点2つについてお知らせ

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

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

①について

<div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め <div class="icon-position"> のすぐ上にある </div> まで(この文字列も含む)を以下の内容に 変更

<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"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

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

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

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

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">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"><%comment_name>&nbsp;&nbsp;<script>a="<%comment_url>",""!=a&&document.write('<a href="'+a+'" target="_blank" rel="nofollow noopener noreferrer"><i class="fas fa-link"></i></a>');</script></p>
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

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

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

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

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

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

更新履歴 2019.1.17
  • Font AwesomeのCSSバージョンを5.6.3にアップグレード
  • lazyloading導入(カルーセル)
  • 構造化マークアップを導入
  • レイアウト関連CSSの追加及び一部削除
  • Pinterest・はてなブックマークのシェアアイコンを追加
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 受信コメント一覧のデザインを刷新
  • カルーセルスライダーの表示内容を新着記事に切り替え
  • ドロワーの展開ボタンを見やすく大きくしました(スマホのみ)

不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、カルーセル表示内容を変更しています
リリース当初はFC2ブログでは新着記事を取得するシステムが無かったため、ページ内と同じものを抽出していましたが、公式機能として新着の取得が可能になりましたので切り替えを行いました(htmlを変更すれば戻すことも可能です)
その点をお考え合わせの上でアップデートをご検討ください。

更新履歴 2017.12.6
  • 大規模なメンテナンスを行いました。

詳細は以下の記事を御覧ください。

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

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

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

更新履歴 2017.9.22
  • SSL化に伴うURL正規化
更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2017.1.13
  • RSS新着サムネイルを削除しました
更新履歴 2016.10.14
  • ページ遷移エフェクトをJSからCSSに変更 --- ページ表示が軽快になりました
  • カテゴリなど 一部ページをリスト形式に変更しました
  • 主要公式プラグインの整形
  • 関連記事サムネイルの整形
  • ベンダープレフィックスの整理
  • その他微調整

JSによるページ遷移エフェクトを取り除きました
JSのメリットとして 全てのレイアウトが構築されてから表示するので 表示が行われた時点ではページが整っていますが
CSSでは表示が速い代わりに 一部レイアウト構築前の状態が一瞬表示されてしまうことがあります
(通信環境やデバイスのスペックによります)

本メンテナンスに伴い記事内容を大幅に修正しましたことをご了承ください
お手元のソース内容と記事内容が合致しない場合は再DLをご検討くださいませ

更新履歴 2016.9.9
  • リストマーカーの位置を調整しました
更新履歴 2016.6.6
  • メンテナンスを行いました
GirlOnWireメンテナンスのお知らせ

GirlOnWireメンテナンスのお知らせ

GirlOnWireのメンテナンス及び微調整を行いました主な修正点等ご確認頂きまして DLの有無をお決めください見た目や機能が大きく変わることはありませんがスマホ閲覧時にドロワー(スライドサイドバー)に広告が被ってお困りの方は再DLをおすすめします...

更新履歴 2016.1.9
  • フッター構造を変更しました
  • タイトルタグを微調整しました(SEO対策)
更新履歴 2015.12.4
  • Google feed api 廃止に伴う新着サムネイル仕様変更

Google自体がこちらのAPIを排除してしまいましたので
この日付以前にDL頂きました方については新着サムネイルが反映されません
お手数ですが再DLをお願い致します

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

がーる おん わいあ ( ゚Д゚)ノ
2015.9.28 審査通過しました ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

ご質問・ご相談の前に

Please read the document before posting your issue.

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

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

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

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

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

必須個人設定

Necessary personal settings

Necessary personal settings

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

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

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

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

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

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

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

Common customization.

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

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

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

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

記事編集リンクについて

The position of edit link.

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

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

Cautions before asking for something.

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

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

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

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

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

クーちゃ
2015/09/26 (Sat) 05:35

おはようございます

はじめまして。Grunge_flowerをずっと使わさせて頂いてますm(._.)m
Akiraさんのレスポンシブな作品のサイドバーが横からニュルと出るのが使いやすいので、私もレスポンシブにしたいなぁと欲が出てきました笑。
でもgrunge_flowerが気に入りすぎて変えられません( ̄◇ ̄;)
これはリクエストになりますか?
もし考えて頂けたらとても嬉しいです。。。
是非ご一考ください>_<

Akira
2015/09/26 (Sat) 13:02

To クーちゃさん

こんにちは。ありがとうございますe-257
ちょっとメンテも放置気味ですし(ごめんなさい)、レスポンシブバージョンということで作ろうかと思います (´・ω・`)
もしかしたらブログ内限定になるかもなので、ちょこちょこ覗いてください(笑)
長く使って頂いてとっても嬉しいですe-454

duck
2015/09/27 (Sun) 03:41

夜分遅くすいません。

はじめまして、duckと申します。

現在Valparaisoを愛用しております。

この記事でGirlOnWireも気になっているのですがどちらからダウンロードできるのでしょうか。
公式のvanillaice (Akira)様の他の作品を見ても有りませんでした。
申請中なのでしょうか?

もし過去記事に記載があって見逃していたらすいません。

Akira
2015/09/27 (Sun) 08:24

To duckさん

おはようございます。ありがとうございますe-257

こちら申請はしてるんだけども、まだ承認されてないんですー。
もう一週間経ってますね ( ̄∀ ̄;)
まさかまた...リジェクト? (´・ω・`) ←
今のところそういったお知らせは来ておりません(笑)
今しばらくお待ちくださいね。
なんか担当の方、気まぐれに審査してるみたいなので。
いやホントに(笑)

duck
2015/09/29 (Tue) 07:54

ページ遷移エフェクト削除の件について

おはようございます。
申請通るの楽しみにしていたので早速使わせてもらっています。

ページ遷移エフェクトを削除しようと思って下記二箇所を削除したのですが適用すると真っ白になってしまいます。


HTML
<!-- 注)ページ遷移エフェクト不要の方ここから削除 -->
<script src="http://blog-imgs-50.fc2.com/tpljs/v/a/n/vanillaice000/pc/GirlOnWire/201509216065c93.js"></script>
<script>
$(function(){$("#wrapper a").addClass("animsition-link"),$(".side_bar a, a[target=_blank], a[href^=#], .nonmover").removeClass("animsition-link")}),$(function(){$(".animsition").animsition({inClass:"fade-in",outClass:"fade-out",inDuration:1e3,outDuration:800,linkElement:".animsition-link",touchSupport:!0,loading:!0,loadingParentElement:"body",loadingClass:"animsition-loading",unSupportCss:["animation-duration","-webkit-animation-duration","-o-animation-duration"]})}),window.onpageshow=function(n){n.persisted&&window.location.reload()};
</script>
<!-- 注)ページ遷移エフェクト不要の方ここまで削除 -->

CSS
/* 注)ページ遷移エフェクト不要の方ここから削除 */
.animsition,.animsition-overlay{position:relative;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-loading{position:fixed;z-index:100;top:0;width:100%;height:100%;background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23ccc%22%3E%0A%20%20%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200%20A16%2016%200%200%200%2016%2032%20A16%2016%200%200%200%2016%200%20M16%204%20A12%2012%200%200%201%2016%2028%20A12%2012%200%200%201%2016%204%22/%3E%0A%20%20%3Cpath%20d%3D%22M16%200%20A16%2016%200%200%201%2032%2016%20L28%2016%20A12%2012%200%200%200%2016%204z%22%3E%0A%20%20%20%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2016%2016%22%20to%3D%22360%2016%2016%22%20dur%3D%220.8s%22%20repeatCount%3D%22indefinite%22%20/%3E%0A%20%20%3C/path%3E%0A%3C/svg%3E%0A%0A)center center no-repeat;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-loading:after{font-size:16px;position:fixed;top:50%;width:100%;margin-top:20px;content:'Loading';text-align:center;color:#aaa}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.fade-in{-webkit-animation-name:fade-in;animation-name:fade-in}@-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}.fade-out{-webkit-animation-name:fade-out;animation-name:fade-out}
/* 注)ページ遷移エフェクト不要の方ここまで削除 */


HTMLだけ削除→真っ白
CSSだけ削除→変わらず
HTML、CSSを削除→真っ白

公式からDLしただけの状態で試しても駄目でした。

Win10、64bit 最新のFirefox、最新のIEで試しました。

何か解決方法がわかりましたら教えて頂きたいです。
よろしくお願いします。

vanillaice (Akira)
Akira
2015/09/29 (Tue) 08:13

To duckさん

わー。ごめんなさい ( ̄∀ ̄;)
もう一箇所あるんでした (*_ _)

Ctrl+Fキー検索

<div id="wrapper" class="animsition">

この赤字部分を削除して以下の通り

<div id="wrapper">

これで正常に動作するはずです。
お手数おかけしました (*_ _)
記事内容も訂正しますー!
助かりました。ありがとうございます ^^;

duck
2015/09/29 (Tue) 09:37

できました!

早速のレスありがとう御座います!

おかげさまでかなり思い通りの形になりました!
もう、このテンプレ以上のものはそうそう出てこないと思うので
大事に(?)使わせてもらいます!

これからも頑張ってください!

vanillaice (Akira)
Akira
2015/09/29 (Tue) 10:59

To duckさん

お手を煩わせてしまってごめんなさいね。
こちらこそありがとうございます :)

sawa@Akiraマネージャー(笑)
2015/09/29 (Tue) 13:58

サイドバーの出現方法の質問です

このGirlOnWireをColorbox化して、使い始めてちょっとびっくりしたのですが。。。
質問させて下さいね(笑)
スマホでのサイドバーの表示の方法なんですけど、ご説明では

スマホ --- 左スライド

となっていて、iPhone6+Safariでの表示だと、左上の三本線をタップすると、にゅるんってサイドバーが現れますよね。
ところがですよ(笑)iPhone6+Chromeだと、その三本線は表示されず、その代わりに右側の上下スライダーの間にmiddleボタンである「MENU」ボタンが現れて、そのタップでサイドバーが記事下に現れます(笑)

これはAkiraさんが意図的にそのように作られたんでしょうか?
だとしたら、あなたは天才です(笑)
ほんとに驚きました ^^

とろん。
2015/09/29 (Tue) 20:30

管理人さん、初めまして。

申請が通るのを待ち焦がれていたので、速攻でDLさせていただきました。

2点質問があるのですが、

トップの女性の画像を変更するコトが可能でしょうか?

あと、文字部分(個別に読むなど)の色の変更は可能でしょうか?


テンプレートに関して素人なので、初歩的な質問でもうわけないのですが、

変更する場所と適正サイズを教えていただけるとありがたいです。

よろしくお願いします。

Akira
2015/09/29 (Tue) 22:53

To sawa@Akiraマネージャー(笑)さん

えっ (▪⌔▪)
ちょっとよくわかってない。
すみません凡人で(笑)

今主人のiPhone6 iOS9.0.1 Chromeでやってみたところ、フツー... (´・ω・`)
えっ?(笑)
なんでや?(笑)

ちょっとsawaジャーマネの情報待ちにします (▪⌔▪)

vanillaice (Akira)
Akira
2015/09/29 (Tue) 23:06

To とろん。さん

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

> ヘッダー画像変更の件

以下の文字列をCtrl+Fキー検索

注)バナー画像変更はここ

訳注に従って変更してくださいませ。
画像のサイズは極端な話、いくつでも良いです(笑)
ただ元画像が小さいとブラウザ幅が大きくなったときに拡大されて画質が落ちますので、なるべく大きいものが良いと思います。
横1200以上が理想的。
大きい画像は容量が重たいですから、専用サイトなどで削減してからお使いになられると良いですね。
参考記事
http://vanillaice000.blog.fc2.com/blog-entry-208.html

画像の位置合わせについてはこちらを参考にどうぞ
http://vanillaice000.blog.fc2.com/blog-entry-213.html

-----------

> 文字色変更

「個別に読む」の文字については全体リンク色と同じになってます。
リンクの色自体を変更されるのであれば
Ctrl+Fキー検索

注)記事内のリンク色はこちら

「個別に読む」の部分だけを変更される場合には

.read_jump_span {
color: カラーコード;
}


上記をCSSソース(テンプレ管理画面「下段」)の末尾に追加してください。
カラーコード参考サイト様
http://www5.plala.or.jp/vaio0630/hp/c_code.htm

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

-
2015/09/30 (Wed) 07:24

管理人のみ閲覧できます

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

Akira
2015/09/30 (Wed) 17:19

To sawa@Akiraジャーマネさん

え? (▪⌔▪)

ねぇ!ちょっと!これおかしいよ!((((笑)
だってページ送り見て。
数字が変(笑)

えー なにこれ (▪⌔▪)
んでもって主人のiPhone Chromeではなってないよ。
なんでよー!(笑)
ってゆーかお尻!(笑)

Colorboxは私のファイルなんだろうか。
それともジャーマネがご自分で追加したやつ?
ちょっと混乱中 ( ̄∀ ̄;)
しかもie8以下でしか出ちゃいけないバナーが画像にくっついて表示されてるじゃないdeathか。
どゆこと (▪⌔▪)

今日親類の四十九日法要なんです。
なので帰宅次第。申し訳ないであります (*・x・)/

-
2015/09/30 (Wed) 19:08

管理人のみ閲覧できます

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

-
2015/09/30 (Wed) 19:17

管理人のみ閲覧できます

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

sawa@Akiraジャーマネ
2015/09/30 (Wed) 21:13

基本に戻って・・・

たびたびごめんなさい。
基本に戻って、ダウンロードしたデフォルトファイルをそのままブログに適用したら、やっぱり私の

iPhone6+iOS9.0.1+Chrome45.0.2454.89

の組み合わせでは先ほどのスクショと同じ表示になってるの (;^_^A アセ
なんなんでしょ?
Safariは相変わらず正常に左からにゅるんってサイドバーが現れます(笑)

なにか、野球の日ハムの大谷くん(笑)みたいに二刀流的にAkiraさんのテンプレが機能してる(爆)
なんとも不思議ですよ (^_^; アハハ…

-
2015/10/01 (Thu) 07:43

管理人のみ閲覧できます

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

Akira
2015/10/01 (Thu) 09:23

To sawa@Akiraジャーマネさん

昨日寝ちゃった ( ̄∀ ̄;)
遅くなってごめんなさい (*_ _)

まとめると、ChromeではColorbox適用する云々に関わらずその状態になる、ってことだよね。
今日また主人の貸してもらって見てみるけども、不思議すぎる(笑)

ChromeのUAがかなり独特だ、というのはありますよね (´・ω・`)
独自の慣性スクロールなんかも効いてるよねぇ...。
それからテキスト入力時のパネルも独自のもののようだし。
OSとデバイスの組み合わせってのもあるのかな?
あるのかな って、実際私のiPhone5Sではなってないわけだからあるだろ、みたいな(笑)
ジャーマネいろいろ検証してくれたのですね。
素敵(笑)

今日の夜やってみますね。
お時間使わせちゃってすみません ^^;

sawa@Akiraジャーマネ
2015/10/01 (Thu) 10:45

あのですね(笑)

しつこくてごめんなさい(笑)

だって、GirlOnWireのデフォルトのソースに

<div id="pagemiddle"><a href="#secondary" id="go_middle">MENU</a></div>

って書いてあるでしょ(笑)
これって、スマホじゃ表示しない仕様なら何故書いてあるの?って思ったところから「きっとAkiraさんはナイショでこんなTwo ways仕様に作ったのね(笑)」って、邪推したんでした~(笑)

お騒がせしてスミマセンでした~ ^^

匿名コメント
2015/10/01 (Thu) 15:22

こんにちは。はじめまして。
Be Happyi-255Girl On Wire使わせて頂いてます。
今までにスライダーが付いているテンプレートはありましたけど記事に乗せた写真が出てくるものはなかったと思います。
初めて見たときは感動して声が出てしまいましたi-228
背景だけ愛犬の写真に変更して大切に使わせて頂きます。
本当にありがとうございましたi-175

タケノコ
2015/10/01 (Thu) 15:23

名前が匿名になってしまいましたi-201
失礼しましたi-229

とろん
2015/10/01 (Thu) 18:14

早速のレスありがとうございます!

おかげさまで画像の変更が出来ました。
大事に使わせてもらいます~。

Akira
2015/10/02 (Fri) 00:49

To sawa@Akiraジャーマネさん

なんかもう色々思案させちゃってすみません(笑)
そして宅の亭主は自由人のチャラ男なので帰って来やしません((((笑)
また明日以降やりますね。
ごめんよー ( ̄∀ ̄;)

vanillaice (Akira)
Akira
2015/10/02 (Fri) 00:50

To SparkNorkxさん, To Janedoe1471さん

おはようございます ('0')/

I'm sorry I don't know that much about Twitter lol. He seems to have already grasped the system of dlivr.it(and he's been using another tool lately). I think he wouldn't settle for anything less lol
Either way, where're there're pros, there must be cons(or vice versa). And I tend to agree with SparkNorkx ^^;
Anw, M is the only one who can decide :)

Mさんには会話の概要を説明したいと思います。

vanillaice (Akira)
Akira
2015/10/02 (Fri) 00:51

To とろんさん

できて良かったですー。
お疲れ様でした :)

sawa@Akiraジャーマネ
2015/10/02 (Fri) 09:09

もしかしてなんですが

> なんかもう色々思案させちゃってすみません(笑)

いえいえ、こういう探求って私大好きなんです(笑)

それでですね、夕べふと
『もしかしてこの現象って、PCのChromeとiPhone6のChromeを同期してるからそうなるの?』って思いがして来たんです。
iPhone6+Safariだったら普通に表示してるし。

Akiraさんのヒントになればいいんですけど(;^_^A アセ

-
2015/10/02 (Fri) 15:59

管理人のみ閲覧できます

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

58
2015/10/02 (Fri) 16:11

初めてコメントします。
GirlOnWireのテンプレが格好良くて、すごいイイと思いました。

このGirlOnWireでTOPページに記事が表示されるじゃないですか?
記事全文じゃなくタイトルのみのパターンとかって今後出される予定とかありますか?

Akira
2015/10/02 (Fri) 20:11

To sawa@Akiraジャーマネさん

ジャーマネ出勤おつです ( ゚Д゚)ノ

すっごい遅くなっちゃってすみませんです (;´Д`)
同期!それは全く考えておりませんでした(笑)
どうなるんだろうね (´・ω・`) ←
「PC表示をリクエスト」ってのがあるでしょう?
そこ押すとおかしなことになる、ってのはわかった((((笑)
同期もちょっとやってみようかなー (´・ω・`)

vanillaice (Akira)
Akira
2015/10/02 (Fri) 20:19

To GirlOnWire記事幅の件 内緒さん

遅くなりました (*_ _)
記事幅変更手順(2手順)

① Ctrl+Fキーで以下の文字列を検索

#wrapper

2箇所ありますので、最初の方を修正します。

min-width: 80%;

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

min-width: 90%;


② 上記で修正した #wrapper のすぐ下にある

#float-container

こちらの
width: 80%;
赤字修正で以下の通り

width: 90%;

さらに
max-width: 1200px;
赤字修正で希望の数値に変更ですが、1500ぐらいが妥当だと思います。以下の通り。

max-width: 1500px;

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

お手数おかけします。宜しくお願いします :)

vanillaice (Akira)
Akira
2015/10/02 (Fri) 20:25

To 58さん

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

タイトルのみ、というのは文字通り「タイトルのみ」で良いんでしょうか。
薄い紫色の囲いの中に
・カテゴリ
・タイトル
・投稿日時
があって、その下の記事内容はゴッソリ削って、Read moreでジャンプして読んでもらう、ということかしら。

それとも記事を「要約表示に変更」という意味でしょうか。
たぶん前者かな、と思いますので手順ご説明します。

と思ったけど、修正するより説明する方が手間なので作ろうと思います(笑)
少しお時間くださいね。
出来たら記事の最後にZIPフォルダ置いておきます。

sawa@Akiraジャーマネ
2015/10/02 (Fri) 22:23

原因判明(笑)

Akiraさん、原因が判明しましたよ~(笑)

ヒントは「PC版サイトをリクエスト」にありました(^_^; アハハ…
私のを見たらそこがグレーアウトしちゃってて触れなくなってました。
あらぁ?って不思議に思って調べたら、レシポンシブなサイト・ブログを表示してから、一度でも「PC表示をリクエスト」をタップしちゃうと、次から同じブログを開くとPC版表示になってしまうんです(爆)
ですから、私が1人騒いでたようになってたの(^_^; アハハ…
だから、一度PC版表示を「閉じて」改めてURL入力から読み込んだら、ちゃんと正常なサイドバー表示になりました~(笑)

と言うことはですよ、やっぱりAkiraさんのレスポンシブなテンプレートはTwo ways仕様に出来てる!ってことなんです(笑)

やっぱり貴女は天才です~。

ああ、これでやっとこの件終われますね~(爆)
ほんとに、いろいろとお騒がせしちゃってすみませんでした~m(_ _)m

vanillaice (Akira)
Akira
2015/10/03 (Sat) 11:46

To sawa@Akiraジャーマネさん

それかー。
私もなんですぐ気がつかなかったのか ( ̄∀ ̄;)
私がiPhoneのChromeを使わないのって、PC版リクエストが超ビミョーだからなんでした(笑)
なんか他のブラウザより全体が縮尺されてるような希ガス (´・ω・`)
でもあのドゥルル〜〜ンな慣性スクロールは快感。

もういいじゃんね。
私が天才ってことで ←
捏造だけど((((笑)

ところでMacOSをEl capitanにアップしたらテキスト入力がー ( ̄∀ ̄;)
便利なような不便なような。
それこそビミョー。
ジャーマネお疲れサマンサタバサ ( ゚Д゚)ノ

58
2015/10/04 (Sun) 14:42

早い対応ありがとうございます。

昨日、早速ダウンロードし少して弄っていましたw

希望通りのタイトルVer.が凄い気に入ってます。

ありがとうゴザイマス。

vanillaice (Akira)
Akira
2015/10/05 (Mon) 09:42

To 58さん

オッケーでしたか。
良かったですー。
カスタマイズお疲れ様でした :)

-
2015/10/05 (Mon) 11:04

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2015/10/05 (Mon) 11:57

To GirlOnWire記事幅の件 内緒さん

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

きろろ
2015/10/10 (Sat) 01:52

がんばってみたのですが……

お久しぶりでございます<(_ _)>
このところ、自力でAkiraさんのテンプレートにColorboxを仕込んでいたのですが……

GirlOnWireはどうにもなりません(/_;)

あれ~~~、どこがどう違うのか……わかりません。

LinkはAkiraさんのColorbox,cssを使わせてもらっています。
トリガーもなんとなくですが、出来ていたんですが……

今回はGiveします・゚・(つД`)・゚・ ウェ―ン
お忙しいAkiraさんのお手を煩わせてはいけなと思ったのですが
どうしても、Colorboxが起動しません。

記事に毎回、スクリプトを書き込むという手間をどうにかし
たいのですが
過去記事がありすぎて、自動での表示ができません。

<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>

これをどこに突っ込めばいいかレクチャーをお願いします(/_;)
急ぎませんので、お手すきの時にお願いいたします<(_ _)>

vanillaice (Akira)
Akira
2015/10/10 (Sat) 09:34

To きろろさん

ご無沙汰でございますー :)

んー。ちょっと色々と整理をした方が良いような気がします。
まず大前提。

① リンクに target="_blank" が指定されているか
これついてないと起動しません。
特にYoutubeは全画面になってしまいます。

② 私が提供しているColobox適用版は「自分でColoboxのファイルを保持していない方」へ向けてです
きろろさんの場合にはご自分でファイルもお持ちですし、独自の実行コードをお持ちですので
通常版の方へファイルを追加していく形です。
Colorbox適用版への導入は内容がコンフリクト(衝突)します。

---------

もしかしたら上二つの見直しで上手く行くかもしれません。
もう少し踏み込んでコード内容で気になる点がいくつか。
分解して説明します。


<script type="text/javascript">
→ type="text/javascript" は不要です。
初期値ですので書く必要なし、というか寧ろ書かない方が良い
<script>
だけでOKです。


$.fn.colorbox.settings.bgOpacity = "0.5";
→不透明度(opacity)指定にfn拡張を使う必要は無いと思いますので書き換えます(後述)
(全てに同じ指定をするのならこれでOKです)


$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
→rel属性を利用している点
<a>タグ(アンカータグ)のrel属性というのは「定義」を持っています。
そして値(""に挟まれる文字列)は任意でつけることはできません
決まった値以外使用してはいけないことになってるんです。
alternate, author, icon 等々
値として勝手な(ちょっと表現悪いですが)文字列を指定した時点でバリデートでエラーが返ってきます。
ここはきろろさんがバリデート(ソースコードの整合性)にこだわりがなければそれで良いです(笑)
でもあんま良くはない ^^;
Colorbox上でのrelはこういう使い方をします ↓

$(".group-photo").colorbox({
rel: "slideshow"
});

意味
「group-photoというクラス名が与えられた要素はグループ化してスライドショーを適用」

そしてこの二行のうち、上の行でもう一点。
これは振り分ける必要があるんだろうか?
一つは fade というグループ分けをして、「エフェクトは初期値の elastic ではなく fade にしたい。」
もう一つは「スライドショーにしたい」
質問事項
・ 画像のエフェクトは常にfadeですか?それともたまにfadeにしたいだけですか?
常にfadeエフェクトを適用するならば分ける必要はありません。
.cpModalでデフォルト化をおすすめ。


$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});

youtubeは置いといて、その他4つ。
えっとですね、アイディー(#名前)やクラス(.名前)というのはコード製作者が任意で付けるものですので、
私としては「推量」「推察」するしかないんです(笑)
ですから「これはたぶんこれをやる為やろうな〜」という推測で書きます(笑)
その上で、きろろさんにとってそれが本当に必要なのかどうかを決めてください。
使わないものであれば書く必要はありません。
コードが長くなって無駄がでるだけですので見極めをお願いします。

#ajax
外部ファイル参照?
iframeで外部(当該ページ以外)ファイルを表示させるための記述...だと思います。
例えばURLを指定して、リンクをクリックしたら該当ページに遷移するのではなく
遷移させずに自分のページに取り込むのがiframeというHTML要素です。
youtubeやdailymotionなどの動画もこの方法で表示させるのが推奨になってます。
youtube用(動画用)の記述は別で設けてありますので、この記述が必要なのかどうか。

#flash
フラッシュコンテンツ表示?
これ要るかな? (´・ω・`)

#google
これは... なんだろう(笑)
ajaxと重複してる気がするのだけれど。
きろろさんが「んー。わかんね (´・ω・`)」な状態なのであれば不要だと思います(笑)

#inline
これはインラインコンテンツの表示用ですよね。
HTMLソース内容を表示することがあるのならばアレですが、「そんなことしたことないな〜 ( ̄∀ ̄;)」ならば不要。

さらにこの3つの名称がアイディーになっているのも気になります。
アイディーというのはユニーク(単一)ですから、同ページ内に一つしか存在してはいけないことになってます。
ページ内に複数あるとエラー。

例)
×
<a id="photo" 〜略〜><img src="画像1">
<a id="photo" 〜略〜><img src="画像2">


<a class="photo" 〜略〜><img src="画像1">
<a class="photo" 〜略〜><img src="画像2">

---------

すっごい長くなりましたので一旦投稿します。
そして長男を駅まで送ってきます(笑)
パシリかよ (;`ー´)o

Akira
2015/10/10 (Sat) 11:32

To きろろさん

> 記事に毎回、スクリプトを書き込むという手間を

これなんですけどもね。
どゆ意味? (´・ω・`)
えっと。もしかして記事を書かれる際に毎回記事投稿画面(FC2エディター画面)にコードを貼り付けてる、ってことでしょうかしら。
もしそうでしたら、その必要は無いですよ。
テンプレートの
</body>
の直前に書いてしまえば一度やるだけで済みます。
あとはちゃんと名称(トリガーになるアイディーやクラス)を覚えておけば良いだけです。

で、確認です。

・クラスやアイディーは毎回手入力をしている(JSによる後付けはしていない)
YES or NO?

・毎回手入力をしている場合にはお知らせ頂いた名称を利用している
YES or NO?

上記二つが両方YESであるならば、もう名称はそのまま使うしかないですよね (´・ω・`)
グループ分けなんかはJSで自動で...というのはまず無理なので(個人の選択によるから)、たぶんそうしてると思います。

--------

きろろさんにまずやってほしいこと

① 上のコメントで指摘したように、必要・不要の区分を行う。
② Colorboxのバージョンを確認し、最新のものを入手する。
③ Colorboxを適用したい画像のアンカータグにtarget="_blank"が付いているか確認する。

まずここまでで (´・ω・`)
んで、今から私このテンプレートにColorboxスライドやらなんやら入れてみますので、そちらお待ちください。

Akira
2015/10/10 (Sat) 15:15

To きろろさん

記事を出しましたので、ご自分のクラス名やアイディー名と照らし合わせながら確認をお願いします。

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

GirlOnWire動作確認済みです。
わかりにくい点ありましたらご指摘くださいませー。

きろろ
2015/10/11 (Sun) 00:41

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

すっごいよくわかりました<(_ _)>

また別記事を立てていただいてありがとうございます。
最初のお返事に従って、テンプレートを合わせて行ったらできましたw

なんか、いつもどこか私……抜けているのかも(ё_ё)

>これなんですけどもね。
どゆ意味? (´・ω・`)
えっと。もしかして記事を書かれる際に毎回記事投稿画面(FC2エディター画面)にコードを貼り付けてる、ってことでしょうかしら。 <

えーと、これはですね。
画像をサムネイルで取り込んで、target_blankのところを
class="cpModal" title="No Title"に書き替えているわけです。

YouTubeなら
<a class='youtube' href="http://www.youtube.com/embed/YOUTUBEの動画ID/rel=0&wmode=transparent"title="「たいとる」"><img src="「サムネイル画像」" width="「幅」" height="「高さ」" /></a>
みたいにテキスト入力して表示させているということです。


自動で、と書いたのはYouTubeのことですw
AkiraさんのColorboxは、Wordpressなどで使っているプラグインみたいに
YouTubeのサムネイル画像が自動取得になっているでしょう?
それが出来たらいいな~、って思ったんです。

なんだか紛らわしくなってしまい申し訳ありません<(_ _)>
いつもいつもご丁寧なレクチャーで助かります。
ありがとうございました。


-
2015/10/11 (Sun) 14:57

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2015/10/11 (Sun) 15:43

To きろろさん

ツベのことでしたか(笑)
今target_blank付けないと上手く開かないんです。

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

それから、youtubeの埋め込みコードがちょっと気になる(笑)
パパっと書いたからミスっただけ、かもしれませんので、その際にはスルーで ( ゚Д゚)ノ

<a class='youtube' href="http://www.youtube.com/embed/YOUTUBEの動画ID/rel=0&wmode=transparent"title="「たいとる」"><img src="「サムネイル画像」" width="「幅」" height="「高さ」" /></a>

rel=0
というのがありますよね。
これたぶん効いてなくないですか (´・ω・`)
「関連動画を表示させない」設定だけれども。

//www.youtube.com/embed/動画ID?rel=0

スラッシュ不要 ハテナマーク必要。
一つ目パラメータは「?」で。それ以降は「&」(あんど えー えむ ぴー せみころん)(変換されてしまうので平仮名で表記)で繋ぎます。
wmode=transparent も要らないんじゃないだろうか。
フラッシュプレイヤーで貼り付けてます、なら要るんだろうけど。
今デフォルトがHTML5プレイヤーだから機能してないと思います。
動画を何かと重ねたりすることがある方は必要かもしれません(でもたぶんCSSでやらないと効かない)
だからシンプルにこれで良いような気が。(http: も省略可能)

//www.youtube.com/embed/動画ID?rel=0

<a class="youtube" href="//www.youtube.com/embed/YOUTUBEの動画ID?rel=0" target="_blank" title="タイトル"><img src="画像アドレス" style="width: 数値px; height: auto;"></a>

この中にある rel は<a>タグのrel属性とは全く別のyoutubeAPIの「relation」です。
念のため。

Akira
2015/10/11 (Sun) 15:46

To Colorboxの件 内緒さん

いえいえ。構いません(笑)
きろろさんも気にされないと思います。
(きろろさんと類似要件です。「横から失礼します〜」の一文がありましたもので。)

もう一つのコメントの方にまとめますね。

きろろ
2015/10/12 (Mon) 00:36

確かにw

ツベが動きませんでしたw

レクチャーどおり、
//www.youtube.com/embed/動画ID?rel=0 に書き替えたら
表示できました<(_ _)>

何度も、お手数をおかけしてすみません<(_ _)>

自力でなんとか出来るようにならないとダメだと思うのですが、
つい、頼ってしまう(ё_ё)
すみません!<(_ _)>

vanillaice (Akira)
Akira
2015/10/12 (Mon) 02:08

To きろろさん

いえいえ。どうぞお気になさらず。
お役に立てれば幸いです :)

沙姫
2015/11/06 (Fri) 19:13

「記事タイトル」と「INDEX」から個別記事を表示した場合

こんばんは^^
いつも、大変お世話になっております。
「GirlOnWire」を、お借りしております。
以前も書かせていただきましたが、私の大のお気に入りのテンプレートです♪

それでお忙しいのに、お尋ねしてよいか迷ったのですが、
5日間くらい5時間ネットで検索しても、分からないことがありまして、
現在はランキングのバナーとブックマークのタグを、下記の所に、貼っているのですが、「記事タイトル」と「INDEX」から個別記事を表示すると、
なぜかランキングバナーもFC2拍手も、どちらも表示されなくなってしまいます。
表示されるようにするには、どうしたらよろしいでしょうか?
※「FC2拍手」とは、通常のブログ拍手とは違い、別に登録してお礼ページが出る拍手です。

それとAkira様の「ランキングバナーを常に拍手の前に入れたい」
に書かれている方法もやってみたのですが、FC2拍手のコードが、
上手く表示されず、上手くいきませんでした。

できましたら、お時間のある時に、ご返答いただけると、大変有り難いです。
スマホ版のテンプレートも、Akira様の「Grunge_flower_sp_p」を、お借りしております。
これも、タイトルだけではなく、少し内容も表示されるので、お気に入りです^^
どうぞよろしく、お願いいたしますm(__)m

【バナー貼っている位置】
----------------------------

<%topentry_body>
<!--more_link-->
<%topentry_more>
★ここにランキングバナーとその他のタグ挿入★
<!--/more_link-->
★ここにFC2拍手のタグ挿入★

<!--more-->
<%topentry_more>
<!--/more-->
----------------------------

vanillaice (Akira)
Akira
2015/11/07 (Sat) 09:39

To 沙姫さん

ありがとうございます :)
で、なるほど。
外部プラグイン的な方の「拍手」なのですね。
スクリプトを任意の場所に貼り付ける系の。

お読み頂きました記事内容は、個人設定ページから利用可能の「拍手」への対策です。
沙姫さんの場合にはまた別のやり方です。

GirlOnWireのトップページの記事一覧と個別記事のページの構成が若干異なりますので、
スクリプト+ランキングバナーを貼り付ける場所が二箇所あります。

まずひとつめ(トップページ用)
これは沙姫さんが既に貼られた場所で良いと思います。
そのまま残してください

二箇所目

Ctrl+Fキー検索

<!--permanent_area-->
<!--more-->
<div class="more2">
<%topentry_more>
</div><!--/read_more-->
<!--/more-->
<!--/permanent_area-->

この中に組み込みますので以下の通り

<!--permanent_area-->
<!--more-->
<div class="more2">
<%topentry_more>
</div><!--/read_more-->
<!--/more-->
バナー内容
拍手タグ内容
<!--/permanent_area-->



上記手順を踏まれますと、ランキングバナーと拍手の位置が
「関連記事の下」になります。
これが良いかどうかですよね。
関連記事とバナーの位置を交換したい場合にはまたちょっと手続きが必要です
(html内容の追加が要ります)
まずは一度ご確認頂きまして、位置についてどうされるかお返事くださいね。
お手数おかけします :)

沙姫
2015/11/07 (Sat) 11:33

お礼・出来ました!(^^)!

こんにちは~^^
Akira様、大変お忙しい中を、即答していただきまして、感謝感激ですぅ♪
ご指示どおりに、いたしましたら、すぐにできました。
これで、「INDEXページからと、タイトルリンクからの個別記事」から飛んでも、別登録の「FC2拍手」と「ランキングバナー」もすべてのリンクからのページで、表示されるようになりました。
まるで魔法をかけるように、ご指導いただけて、本当に嬉しいです。

うちのサイトは画像などを、お借りしているものが多いので、著作権のことでサイドバーに、管理者様のリンクを貼らせていただいております。
Akira様も、リンクさせていただいておりますので、どうぞよろしくお願いいたします。

Akira様のサイトは、テンプレートだけではなく、「正しいコピーの仕方」など、大変お勉強になるので、またお邪魔させていただきます。
今後も、大変でしょうけれど、素晴らしい作品を、期待しております^^
本当に、どうもありがとうございました。

沙姫
2015/11/07 (Sat) 13:02

追伸 バナーの出る位置について

位置については、トップページからの通常表示の場合は、思った位置に出ています。「INDXとタイトルと個別に読む」場合のみ、バナーが「関連記事の下」に出ますが、今のところ私の場合はこの位置で結構です。
この位置で、今後差し障りのある場合は、また、お尋ねさせていただくと思いますが、その節はどうぞよろしく、お願いいたします。

本当にご親切に、どうもありがとうございました^^

vanillaice (Akira)
Akira
2015/11/07 (Sat) 14:58

To 沙姫さん

位置的なことも大丈夫でしたか。
良かったです。
リンクのお気遣いまで頂きましてありがとうございます。
また何かありましたらお気軽にどうぞ。
お疲れ様でした :)

沙姫
2015/11/11 (Wed) 14:31

トップ画面の最新記事のnew!(赤字・小)の数の追加について

いつも、お世話になっております。
先日も、ありがとうございました^^

実はトップ画面で、最新記事の横に赤字で小さな「new!」が付きますよね。
この「new!」を最新記事1つだけではなく、もうひとつ前の記事にも、付けたいのですが、どのようにすればよろしいでしょうか?
合計で2つの「new!」を、付けたいのです。

大変お忙しい中を、毎度恐れ入りますが、どうぞよろしくお願いいたします。

沙姫
2015/11/11 (Wed) 18:23

質問2 プラグインのフリーエリアを記事の最上部に設置について

こんばんは。度々恐れ入ります。
今、公式プラグインの「フリーエリア」を、TOP画面の記事の最上部に設置しようとしたのですが、プラグインカテゴリを、「1または2」に設定すると、両方共サイドバーに表示され、「3」に設定すると、何も表示されません。

フリーエリアを、「TOP画面の記事の最上部に1つだけ設置」するには、どうしたらよろしいでしょうか?

お忙しい中を、恐れ入りますが、どうぞよろしくお願いいたします^^

vanillaice (Akira)
Akira
2015/11/11 (Wed) 21:44

To 沙姫さん

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

> newマークの件

newマークは時間軸で動いており、記事の1件目・2件目... という概念とは異なります。
投稿された時間から指定した一定時間の表示です。
ですから○○件目に〜 という内容になりますと主旨が違ってきますし、newマーク本来の意味が失われてしまいます。

記事の投稿頻度にもよりますが、マークの表示時間を引き伸ばされてはいかがでしょうか。
Ctrl+Fキー検索

var t=new Date,s=48

赤字の部分が表示時間指定です。
デフォルトは48H(2日間)ですので、こちらを3日表示にされるなら72に、4日ならば96に変更してください。
1件目・2件目に、という記事カウントでの表示にどうしても変更したいという場合にはできなくはないですが、FC2の使用上「投稿された記事の最新から1件目・2件目」ではなく
「ページ内にある記事の一番上と2番目」という情報取得になりますので、
トップページのページ送りから別のページを開いたときに1・2件目にnewがついてしまうことになります。
指定時間を変更されまして様子をご覧頂ければと思います。

Akira
2015/11/11 (Wed) 21:55

To 沙姫さん

> プラグインの件

まずFC2の仕様として、同一ブログ内に同じプラグイン(グループ含む)を重複して表示させることはできないと思ってください。
例えばhtmlソース内にプラグイン3が2つ書いてある、といったような記述は誤動作を起こします。

<!--plugin_first-->〜<!--/plugin_first-->
<!--plugin_second-->〜<!--/plugin_second-->
<!--plugin_third-->〜<!--/plugin_third-->

これが各ひとつづつ「のみ」になっていなければいけません。
ですから「複製」ではなく「移動」ですね。
まずここが正しいかどうかの確認。
特にJavascript を利用しているプラグインについては重複は絶対NGだと思ってください。

で、スタイリングの点からですが、
現在サイドバーに入っているものを記事上に、ということになりますと、サイドバーの横幅と記事上の横幅とは随分差がありますよね。
現在の状態はプラグイン1〜3まで全て同じスタイルが適用されていますので、場所が違えば当然その場所に合うようなサイズ設定やスタイリングの必要が出てきます。
それを踏まえた上でどうされるか方針をまずお決めになられまして、
おすすめとしてはプラグインとして扱うのではなく、該当プラグインを「非表示」にした状態で、直接htmlソース内に内容を記述されると良いかな、と思います。
必ずしも「プラグイン」である必要はないわけです。

で、出力された内容につきましては私の方でそれがプラグイン2なのか3なのか、判別ができません。
ですので自己責任の上でカスタマイズして頂く、という形になります。
FC2仕様と絡めてご判断をお願いしますー!

沙姫
2015/11/12 (Thu) 12:58

newとプラグインの件

こんにちは^^
いつもお忙しいのに、詳しくご説明いただきまして、ありがとうございます。
1.「newマークの件」
これは、ご指示どおりに、「表示時間指定」を4日で96Hに変更しました。
2.「プラグインの件」
こんなに難しいこととは知らず(@_@;)、お尋ねしてしまい、すみませんでした。結局、考えた末に、現状のまま「未来記事」を最上部へ表示しておくこと にいたしました。それがいちばん、簡単だと思いました。

それと、もうひとつお尋ねしたいのですが、
Q.ページの最下に表示される、「What'new!?」のことなのですが、
この左側の写真の部分が、私は「No image」となっていますが、ここは写 真が表示されるのですか?試しに、新しい記事にjpag画像を、貼り付けて みましたが、何も表示されません。
「どういう場合に、何が表示されるのでしょうか?」お手すきの時にで  も、お返事いただければ、結構です。どうぞよろしくお願いします。

今回も詳しくご説明していただきまして、本当に、どうもありがとうございました。それと同時に、お忙しいのに、お時間を取らせてしまいまして、申し訳ありませんでしたm(__)m

Akira
2015/11/12 (Thu) 14:14

To 沙姫さん

お手数おかけしておりますー!

> 新着の「サムネイル画像」がNo imageの件

恐らくブログ個人設定のRSSの詳細設定の問題だと思います。
以下の記事内容をご覧ください

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

既に目は通して頂いたと思うんだけれども、この項を追加したのが最近なものですから見落としがあるのかもしれません。
すみません ^^;
RSSの表示が「全文」になっているかどうかがポイントだと思いますので、一度ご確認くださいませ。

* 取得できる情報 = RSSとして配信が済んでいる記事
* ブログに表示できる文字数 = テンプレソース内で制御(変更したい場合はお知らせください)
* 取得できるサムネイル = 記事の「本文の編集」内に記載されている一番最初の画像(絵文字含む)
* ブログに表示できる最大件数 = 8件(デフォルトは4件 こちらも変更したい場合はお知らせください)

沙姫
2015/11/12 (Thu) 16:06

新着の「サムネイル画像」がNo imageの件

こんにちは~^^
いつもお忙しい中を、迅速にお返事をいただいて、大変、恐縮しております。
ご指示のとおりに、「RSS発信の状態をMAXの8件・全文に切り換え」にしましたら、imageがちゃんと表示されました!(^^)!

私の場合はRSSを10件・一部表示にしていたので、表示されなかったようです。
また、「ご質問の前に・・・」を、見落としておりまして、お手数をお掛けしまして申し訳ございませんでした。
本当にどうもありがとうございました。

沙姫
2015/11/12 (Thu) 16:29

コメント欄の太字についてのご報告

追伸です。
これは、ご報告です。
「GirlOnWire」のテンプレートのコメント記入の時に、試しに一部の語句だけ 例)「春爛漫」などを、太字に設定してみたとろ「スパム判定」となってしまいました。

それでサイト内を探してみましたら、下記の記事に書いてありました。

「太字について」-雑記
http://vanillaice000.blog.fc2.com/blog-entry-187.html

このご指示のとおりに、CSSに追加したところ、普通にコメントを投稿できました。
これは既に解決済みですので、ご安心くださいませ^^

vanillaice (Akira)
Akira
2015/11/13 (Fri) 16:22

To 沙姫さん

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

表示されたようで安心しました :)
RSSの表示件数は10件でも大丈夫です。
サムネイル用に取得できるのは8件までですので、それ「以上」の数字であれば理想的、ということです。
そこは沙姫さんにお任せします。

----------

strongの件

コメント欄は太字にsrtongを利用してるんですよね (´・ω・`)
これもう変えて欲しい!(笑)
strongはとても強い強調なので、本来はコメント欄などで多用するものではないんですよねぇ (´・ω・`)
ここはFC2さんの対応待ちで ^^;

沙姫
2015/11/27 (Fri) 20:48

記事本文のフォントサイズの変更について

こんばんは。日頃、大変お世話になっております^^
実は今回、「記事本文のみ」のフォントサイズを、14pxにしたいのです。しかし「body { /* 注)基本フォント関連 */」の項目で操作してしまうと、全部のフォントが14pxになってしまいます。記事本文のみ(追記・個別記事を含む)のサイズの変更はどのようにしたらよいでしょうか?

大変お忙しい中を、毎度申し訳ありませんが、どうぞよろしくお願いいたします。

vanillaice (Akira)
Akira
2015/11/27 (Fri) 22:25

To 沙姫さん

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

> 記事本文のフォントを大きく

以下をCtrl+Fキー検索

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

ここに一部追加で以下の通り

.inner-contents {
margin-bottom: 20px;
font-size: 14px;
}

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

沙姫
2015/11/28 (Sat) 00:50

お礼:できました^^

こんばんは。こちらこそ、いつもありがとうございます。お忙しい中を、早速お教えいただいて大感謝です♪
できましたv-221魔法の呪文を、どうもありがとうございました。

これから忘年会のシーズンになりますので、Akiraさんも体調を崩さないように、お気をつけくださいネ^^

vanillaice (Akira)
Akira
2015/11/30 (Mon) 15:01

To 沙姫さん

お返事大変遅くなりました (*_ _)
ご希望に添えたようでよかったです :)

これからかきいれどきで時間が〜 ( ̄∀ ̄;)
お気遣いありがとうです (・ω・)ゞ

きっぷす
2015/12/23 (Wed) 16:09

プロフ写真とカルーセルについて教えてください

初めましてこんにちは。
いつも素敵なテンプレートありがとうございます♪♪

さて、「プロフィール写真」と「カルーセル?(ヘッダーで動いている記事一覧)」を丸型から四角にしたいのですが、カスタマイズ可能であれば方法を教えてください。

お願いしますm(_ _)m

vanillaice (Akira)
Akira
2015/12/23 (Wed) 17:18

To きっぷすさん

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

> プロフ写真を丸から四角へ

以下をCtrl+Fキー検索

.plugin-myimage img {
width: 150px;
height: 150px;
border-radius: 50%;
}

以下の通り修正

.plugin-myimage img {
width: 150px;
height: auto;
}



横幅を150px に設定してありますが、任意の数字に変更できます。
サイドバーの最大横幅が240pxですので、それ以内でお願いします。

-------

> カルーセルの件

こちらははじめから四角だと思うのですけれども (´・ω・`)
ちょっと鈍くてすみません。
カルーセルを丸から四角、というのはどういった意味合いでしょうか。
お返事待ちにしておきますね。
よろしくお願いします。

カルーセルについて
2015/12/23 (Wed) 17:23

To Akiraさん

すいません。(ノД`ll)

カルーセルは逆に四角から丸にする場合の方法を教えてください。

vanillaice (Akira)
Akira
2015/12/23 (Wed) 17:47

To カルーセルについてさん

逆でしたか(笑)

以下をCtrl+Fキー検索

.imgLiquidFill {
position: absolute;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
top: 0;
right: 0;
bottom: 0;
left: 0;
}

一部追加で以下の通り。

.imgLiquidFill {
position: absolute;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
}


続きまして検索

.inner-image-parent:before {
padding-top: 60%;
display: block;
content: "";
}

上記を削除して
以下を追加(差し替え)

.item-cell-left {
width: 30%;
}

.item-cell-right {
width: 70%;;
}



レスポンシブですのでスマホ版の調整があります。
ここまでの内容で大丈夫かとは思いますが、修正されましたらブラウザ横幅をなるべく小さくしてご確認ください。
よろしくお願いしますー。

きっぷす
2015/12/23 (Wed) 18:17

お礼

ありがとうございます♪♪
おかげで、上手くカスタマイズできましたv( ̄∇ ̄)

これからも、よろしくお願いします!!

vanillaice (Akira)
Akira
2015/12/24 (Thu) 17:04

To きっぷすさん

安心しました。
お疲れ様でした :)

-
2015/12/27 (Sun) 22:22

管理人のみ閲覧できます

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

-
2015/12/28 (Mon) 09:15

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2015/12/28 (Mon) 14:27

To GirlOnWire トップ画像etcの件 内緒さん

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

ひとつづつ整理していきますね。
> トップ画像変更したらスマホ閲覧時に拡大される

まずこちらですが、カスタマイズされます際に変更すべき箇所は1箇所(1行)だけです。
Ctrl+Fキー検索

background: url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/20150812074313061.jpg) center center no-repeat; /* 注)バナー画像変更はここ */

http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/20150812074313061.jpgの画像アドレスを差し替えるだけです。
それ以外に何か追加、あるいは削除しているのであれば、その作業は不要であり間違いです。
まずそこをご確認ください。
ソース内容としては「デバイス幅に合わせて指定範囲に全面表示」というものですので、スマホ側で拡大されるというのはちょっと考えにくいかなー と (´・ω・`)
ただ、デバイス(OS)によってはCSSプロパティが誤解釈されたりすることはあります(バグ)
で、拝見しないことにはなんとも対処ができませんので、上記をご確認頂いた上でまだおかしいということであれば、
鍵付きで構いませんのでURLをお書き添えください。
そしてご利用のデバイス名とOSバージョン(例: Xperia Android4 など)も教えて下さいね。

vanillaice (Akira)
Akira
2015/12/28 (Mon) 14:53

To GirlOnWire トップ画像etcの件 内緒さん②

> カルーセルを削除しても画像の縦サイズは保持したい件

カルーセルは削除済み、と仮定します。
そのまま縦サイズを大きくすると文字の上下バランスがおかしくなりますので、以下の手順をどうぞ。
Ctrl+Fキー検索。

#blog-name-container {
width: 100%;
max-width: 900px;
display: table;
padding: 80px 5px;

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

#blog-name-container {
width: 100%;
max-width: 900px;
display: table;
padding: ブログタイトル上の空白px 5px 80px;

末尾の80pxの方はブログタイトル+サブタイトルと、その下にあるナビゲーションとの距離ですので見た目を確認しながら調整をお願いします。
もう1箇所

#navigation-container {
width: 100%;
padding: 10px 2px 70px;

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

#navigation-container {
width: 100%;
padding: 10px 2px ナビゲーション下の空白px;

赤字部分がナビゲーション下の空白です。
ここの数値と最初に修正した「ブログタイトル上の空白」を大きくすることで画像の縦サイズを大きくできます。
「ブログタイトル上の空白」と「ナビゲーション下の空白」をほぼ同じ数字にされると良いと思います。


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

> ページ頭&最後尾へ移動のアロー

これはページ内スクロールのことでお間違いないでしょうか。
こちらの該当箇所は以下の通り。検索。

#pagetop a, #pagebottom a, #pagetop-sp a, #pagebottom-sp a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
}

一部追加で以下の通り

#pagetop a, #pagebottom a, #pagetop-sp a, #pagebottom-sp a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
color: カラーコード;
}

もう1箇所。検索。

#pagemiddle a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
font-family: 'Poiret One', cursive;
}

一部追加で以下の通り。

#pagemiddle a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
font-family: 'Poiret One', cursive;
color: カラーコード;
}

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

> 一気に変更

これはhtmlエディターをお持ちであれば可能です。
「置換」という機能を使います。
各エディターによって操作方法は異なりますので、ここで「こうやります。」とは言えないです。
ごめんなさいね ^^;
ブラウザ画面上での操作でしたら無理です。
そしてそういった「タグ」というのも存在しません。
タグというのはhtml要素のことを指します。こういうの ↓
<a>
<div>
<table>

装飾を担うのはCSSです (・ω・)ゞ

ブラウザは何をお使いでしょうか。
Chromeを例に取りますと、
変更したいな、と思う箇所の上にマウスを置いて右クリック→検証
すると該当箇所のCSS内容が出てきます。
その中の

rgb(数字,数字,数字)

あるいは

rgba(数字,数字,数字,数字)

こちらが色コードです。
この色コードをコピーされまして、エディター内で「置換」機能を利用して一括変更、というができますよ。
注意としては rgb と rgba は別もので、rgba というのは不透明度を指定するものです。
最初の3つの数字までがカラーコード。末尾のカンマを含む数字が不透明度です。
例)
rgba(0,0,0,.5)

意味 --- カラーコードは「黒」で不透明度は「0.5」(小数点の前は省略)

*置換による一括変換をお使いになると思わぬ部分の色も変更されてしまうことがあります。
なのであまり過信しないよう注意です (●'ω')ノ
わかりにくい点がありましたらお気軽にお尋ねください :)

-
2015/12/28 (Mon) 16:48

管理人のみ閲覧できます

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

-
2015/12/28 (Mon) 17:30

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2015/12/28 (Mon) 23:37

To GirlOnWire トップ画像の件 内緒さん 壱

今拝見しましたー。
トップ画の部分、現在こうなってます ↓

background: url(画像アドレス) fixed top 44% right 58% no-repeat;

これね、ダメなんです (´・ω・`)
fixed
という記述がありますよね。
これ今ショートハンド(略式・一括記述)で記述していますが、これらを分解するとこうなります。

background-image: url(アドレス);
background-attachment: fixed;
background-position: top 44% right 58%;
background-repeat: no-repeat;

* 注意
background-positionはそのまま抜き出しましたが、
最初の値が水平方向、次に垂直ですから記述順序が逆です *

この中のbackground-attachment(ばっくぐらうんど あたっちめんと)というプロパティですが、
現在スマホでは正しく機能しません。
これは下層にブラウザの左隅を基準として背景を敷く、というものですが、非常にバグが多いプロパティなんですね (´・ω・`)
恐らくスクロール時に画像を連動させたくない(固定したい)ので利用したのだろうと思いますが、現在は「使ってはいけないプロパティ」の代表格です。
(iPhone --- 実装済みだがバグる --- background-size: cover; との併用で背景が拡大表示されて解像度がめちゃくちゃなことになる/ 単体では固定されず単なる繰り返しになる)
Android --- 最近実装されたが同じバグあり)
拝見したところまさしくattachmentの典型的バグ表示でございます(笑)

形状は現在のものを維持したい、ということで良いでしょうか。
スクロール時に背景が固定、という意味です。
こちらを実現するには
background-attachment: fixed;
ではなく
position: fixed;
を利用します。

で、topの44% そして rightの58%
こちらは指定する必要は無いように思います。
ここは一度修正されました上で決めてください。
で、このパターンだとちょっとややこしいというかですね。
htmlソースも一つ入れ子を増やさなければいけません。


------ ① htmlに追加

Ctrl+Fキー検索

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

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

<div id="whole-container">


続いて検索。

<div class="push"></div>

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

</div>

------ ② CSS修正

検索
#banner, #another-banner {
background: url(画像アドレス) fixed top 44% right 58% no-repeat;
background-size: cover;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}

こちらはご自分で手を加えた箇所ですね。
赤字部分を以下の通り修正、青字部分削除。

#banner, #another-banner {
background: transparent;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}


------- ③CSS追加

検索。

body { /* 注)基本フォント関連 */
省略
}

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

body:before {
content: "";
background: url(トップ画像アドレス) center center no-repeat;
background-size: cover;
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 600px;
}


赤字部分のheightの数値なんですけどもね。
これ本当は指定するべきではないんです。
でもこのパターンでは仕方ないです (´・ω・`)
ちょっと余裕を見た数値が良いと思いますので600pxが妥当か...。
ここは見た目を確認しながら調整してください。
これ以上小さい数値は『なし』だと思って良いです。


------- ④CSS修正及び追加

検索。

#wrapper {
background-image: url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/backwewo.jpg); /* 注)ブログ全体背景 削除すると白背景に */
省略
}

青字部分(URL含む)を削除したらこのすぐ「下」に以下を追加

#whole-container {
width: 100%;
background-image: url(背景画像アドレス);
}


--------

これでいけると思います。
で、一つお願いなのですが。
FC2の検索バーはできれば非表示にして頂いた方が(笑)
今気づきましたが、以前よりさらにひどいことになっておりますー(タブレット表示)
FC2検索バーを無理やり画面内に収めている結果、コンテンツ全体のサイズが狂ってしまいます。
FC2は何を考えているのでしょう((((笑)
これはひどい ( ̄∀ ̄;)
FC2検索バーを非表示にするだけで解決します。
ご検討ください(笑)

Akira
2015/12/28 (Mon) 23:40

To GirlOnWire トップ画像の件 内緒さん 弐

エディターについてはおっしゃる通りです。
コピペでエディターに移して、修正後コピペでエディターからFC2のテンプレ管理画面に戻す という手順です。
カラーコードは右クリック> 検証 を上手く活用されると良いですね。
(Firefoxでも同じ機能があります)

後はローディング中にトップ画像が表示されっぱなしになります。
元々が固定画像で作成されたわけではありませんので、今回はこれでご容赦ください (*_ _)

スマホ画面、タブレット画面を考慮するのならば『background-attachmentは使わない』というのも知っておくと良いと思います。
ご存知ない方もまだ割りといらっしゃいます (´・ω・`)

Akira
2015/12/28 (Mon) 23:56

To GirlOnWire トップ画像の件 内緒さん 参

> 矢印の周りの枠と背景色

該当箇所は以下の5箇所です。

#pagetop {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}

#pagebottom {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}

#pagetop-sp {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}

#pagebottom-sp {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}

#pagemiddle {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}


一行目 --- 枠の色指定(不透明度0.5)
二行目 --- 背景(不透明度0.4)
よろしくお願いします (・ω・)ゞ

-
2016/01/01 (Fri) 20:10

管理人のみ閲覧できます

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

mifune
2016/01/01 (Fri) 20:16

検索バー

消せました!!!消せること知らなんだ…!ありがとうございます!!

-
2016/01/03 (Sun) 10:07

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/01/03 (Sun) 16:10

To mifuneさん

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

検索バーは任意表示ですー。
以外とご存知ない方も多いみたい。
お疲れ様です :)

vanillaice (Akira)
Akira
2016/01/03 (Sun) 16:26

To GirlOnWire タイトル画像の件 内緒さん

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

ブログタイトルをテキストから画像に変更したい、ということでお間違いないでしょうか。
Ctrl+Fキー検索(htmlソース内です)。

<div id="blog-name-container-cell">
<h1 class="blog-title animated zoomIn"><a href="<%url>"><%blog_name></a></h1>
<p class="sub-title"><%introduction></p>
</div>


赤字がブログタイトル、青字がサブタイトルです。
差し替えたい画像がこの2つを兼ねているかどうかが私からは不明ですが、ここをまずご自分で方針をお決めになってください。
共に画像になっている(一枚の画像の中にブログタイトルもサブタイトルも入っている)方がレイアウトは楽だと思います。
そしてレスポンシブですからデバイスが変更されますと画像は縮小されます。
パソコンでのサイズだけを考えてしまうと、スマホで閲覧した時に読めないほど小さくなってしまうことがあります。
そちらも調整をお願いします。
(横300px程度になってもしっかり目視確認できるようなサイズ設定)
画像はデバイスのサイズに合わせて文字が下へ繰り越す、というのが不可能ですからよくよくお考えになって元サイズをお決めくださいね。

<%blog_name>を以下の通り変更

<img src="タイトル画像アドレス" alt="代替テキスト">

タイトル部分のみ画像であれば上記の通り。
サブタイトルも画像内に含まれるのであれば青字部分は削除してください。
それから、CSSアニメーションが不要(というか使えない)になりますので、

<h1 class="blog-title animated zoomIn">

赤字部分を削除して以下の通り

<h1 class="blog-title">

さらにCSSソース内から以下をCtrl+Fキー検索、赤字部分削除

.blog-title {
display: inline-block;
line-height: 1.2;
padding: 0 40px 5px;
background: url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/wingleft.png) left center no-repeat,
url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/wingright.png) right center no-repeat;

}

.blog-title a { /* 注)ブログタイトルフォント関連 */
font-family: 'Poiret One', cursive; /* 注)タイトルが日本語の方はこの行を削除するとMacはヒラギノWindowsはメイリオになります */
font-size: 40px;
color: white;
text-shadow: 2px 4px 3px rgba(0,0,0,0.2);
}

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}

@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}

50% {
opacity: 1;
}
}

.zoomIn {
animation-name: zoomIn;
}


よろしくお願いします。

-------

なんとなくご質問の主旨に沿っていないような気もしますので、私が内容を取り違えているようでしたらご指摘ください(笑)

きろろ
2016/03/10 (Thu) 05:13

GirlOnWireを諦められなくて、
こちらの説明と首っ引きで、colorboxの導入をした結果……
できましたよ~。
あんなにできなかったのに(>_<)
やっぱり、説明をちゃんと読めばできるんですね!
画像のポップアップもYouTubeのポップアップも
記事内に書き込むソースを書き替えずにすんでいます。
ひゃ! 嬉しくてお知らせまで。

あと、やはりAdelのソースが欲しいです。
お願いしてもよろしいですか。
あとのカスタマイズはレクチャーしていただければ
頑張りますe-271

vanillaice (Akira)
Akira
2016/03/10 (Thu) 09:51

To きろろさん

わー。
出来て良かった((((笑)
ちょっとした間違いや勘違いって結構ありますよね。
なんでこんなこと気づかんかったんや ( ̄∀ ̄;)
的なやつ(笑)

装飾枠の件ですけれども、
あちらのサイトの既存のものをまずご覧頂いて、お気に召すものがあればタイトルをお伝えください。
んで、私集中力が途切れるともう嫌になっちゃうんですよ。
そういう事情で「ほぼ完成してるけどなんとなく中途半端で放置 = 未公開」
なものがたくさんあります((((笑)
未公開のものはこれからスクショ撮ってコメント欄に追記しますので、
そちらもご覧になってくださいませー。

-----

未公開のものはこちら ↓

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

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

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

画像小さくて申し訳ないです。
どれが合うか、というのはきろろさんにしか決められません。
背景というか、枠部分の画像を変えるのは簡単ですので、とりあえず何か一つまず選らんで練習してみることです (´・ω・`)

きろろ
2016/03/10 (Thu) 15:29

できてしまいましたσ(^◇^;)
Akiraさんの新作、colorboxの導入。
実は自分のcssを使って導入したんですね。
行けないかな? 行けるかな? 半信半疑で。
結果、ちゃんと動作したんです。
で、もしかしたら? って思ったら寝ていられなくてw
明け方目がさえて、こちらの説明書をもう一度頭から読み直して、
これは自分のオリジナルcssを使わないとダメ? ってことに気づいたんですよw
よく読みもしないで……随分とお世話をおかけしました。

装飾枠の件ですが、
サイトに行ってみました。
ここはどういうサイトなんでしょうか?
FC2tempとあることから推測すると、Akiraさんのサイトですか?
こういうことに疎くすみませんe-443

装飾枠、既存のものを探してきますv-355

Akira
2016/03/10 (Thu) 16:54

To きろろさん

画像のサイトのことかしら。
Photobucketという単なる画像ホスティングサービスです(笑)
有料会員なので使わないと損!
ぐらいの感じで、画像類はなるべくそちらへアップロードしております。
FC2のストレージをあまり消費したくないものでー。

きろろ
2016/03/10 (Thu) 23:42

なるほどw
レンタルサーバー的な場所なんですね。
はじめて知りました。
テンプレートを作成していると
素材になる画像とか確かに重いですよねぇ。
FC2のストレージなんて、気にかけたこともありませんでしたw

装飾枠、今片っ端に見させていただいております。
お願いする時は、こちらのコメントに繋げさせていただきますね<(_ _)>

vanillaice (Akira)
Akira
2016/03/11 (Fri) 10:12

To きろろさん

一般ユーザーさんはストレージを気にする必要はほぼ無いです。
テンプレートやってるとやっぱりちょっとは気にしないといかんかなー、ぐらいです(笑)

はい。枠の件了解致しました :)

きろろ
2016/03/11 (Fri) 15:14

装飾枠の件でないのですが……
こちらのテンプレートを現在使用しているので
こちらで質問させていただきます。

プロフィールの画像の件です。
〇で切り抜かれているわけですが、
どうも縦長にストレッチされてしまうんですねw
猫の顔をプロフィール画像にしているんですが
どうもラクダに見えてしまって(爆)

Akiraさんのテンプレートでいくつか同じような現象が見られます。
Ivory……ってテンプレートありましたよね?
そのテンプレートのサムネイル画像もかな?
縦長に伸びている? ストレッチされているような気がしました。

別に気にすることはないのですが、
もし改善策があるようでしたらお願いします<(_ _)>
できないよ、と言うのであればそれはそれでかまいません。
プロフィール画像を変えればすむ話ですので。
よろしくお願いします。

きろろ
2016/03/11 (Fri) 15:22

装飾枠のリクエスト候補

I Don't Want To Change You/ Damien Rice
100 Years/ Five For Fighting
By Your Side/ Sade

の中で、シンプルで使い回しができそうなものがいいかもです。
3つとも額縁の中におさまる絵画のようでステキですe-420
きろろでも使えそうだな……と思える物でかまいませんので
よろしくお願いします<(_ _)>

vanillaice (Akira)
Akira
2016/03/11 (Fri) 16:24

To きろろさん

おっつっつですー ( ゚Д゚)ノ

画像縦横比の件から

① プロフ画像円形縦横比固定 --- 可能ですが制約あり。
② Ivoryサムネイル --- 修正済みです。

-------

①の件のご説明はこちら ↓

記事タイトル: FC2プロフィール写真の縦横比について
http://vanillaice000.blog.fc2.com/blog-entry-291.html

記事内容をお読み頂いた上で補足説明。
FC2の訪問者履歴ありますよね。
あそこのみなさんのプロフアイコンは円形です。
そして縦横比も維持されています。
これは公式プラグインでプロフ画像を表示する際に用いられるFC2変数とは別の変数を利用しています

一、画像のサイズをこちらにお伝え頂いてCSSで位置調整
二、画像を正方形でアップロードし直す(これが一番簡単)
三、公式プラグインのプロフィールは非表示にして、新たにフリープラグインを作成する

対処法はこの3つですかね (´・ω・`)
一の方法をお選びになった場合、これは単純に個々のユーザーの個々の画像に合わせた処理、ということになりますので汎用的な方法ではありません。
プロフ画像はユーザー任意の縦横比、あるいはサイズでアップロードできるわけですから、
その画像は横に長いの?それとも縦に長いの?
という点を私が事前に把握するのは不可能です。
公式プラグインを流用する、というのを前提にした話しです。
「個々の」対応というのが一の方法。

二は省略。

三はですね、訪問者履歴で用いられている変数を利用して、予め円形にしておく方法です。
画像表示のhtmlを公式プラグインとは違う内容で書きます。
これを用意しておくとテンプレートを変更しても、自分が円形にしたいと思った時に公式と切り替えればOK。

-------

テンプレートソースに初めからぶっこみでプロフを書いておけば良いんですけどね。
なるべくそれはしたくないんです。
既にカレンダーは毎回公式のものと重複してるわけですけど(笑)
なんでしたくないかというと、
位置の変更がめんどくさい
これですね (´・ω・`)
プラグインになっていればラジオボタンと矢印ですぐに場所の移動ができますが、
テンプレートソース内容となると
「どこからどこまでの範囲を どこに移動させればいいわけ???」
ってのがあるよね(笑)

というわけで、
公式プラグインを流用し、なおかつ円形にしたい、
という場合には一・二いずれかの方法をお選び頂くってことになります。
二が一番簡単だよ。
と再度お伝えしておきます(笑)

Akira
2016/03/11 (Fri) 16:27

To きろろさん

I don't want to change you と By your side については既に掲載しておりますー。

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

100 Yearsは少しお待ち下さいね (・ω・)ゞ

きろろ
2016/03/11 (Fri) 23:42

プロフの縦長、了解しました。
なんだ、こちらで直せるのですね。
申し訳ございません、よく調べもせずに(>_<)
こちらでプロフの画像を正方形でアップロードいたします。
お手数をおかけしました<(_ _)>

きろろ
2016/03/11 (Fri) 23:48

装飾枠

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

早速DLさせていただきます。
使用は前述したように
ColdplayとAdelのYouTubeに使わせていただきますので。
Akiraさんのcopyrightは不要なんですか?

それではお借りします<(_ _)>

きっぷす
2016/03/12 (Sat) 01:10

タイトル等を左端に表示したい

こんばんは。
夜分遅くにすいません。

ちょこっとカスタマイズしたくなったのですが、変更の仕方が分からないので、またコメントしました。 ^^;


ヘッダーに表示される、「タイトル」「サブタイトル」「ナビゲーション」を左端に寄せたいのですが、どのようにしたらいいでしょうか?

教えてください!

Akira
2016/03/12 (Sat) 12:40

To きろろさん

copyrightの表記は不要です。
改変もお好きになさってください ( ゚Д゚)ノ

Akira
2016/03/12 (Sat) 12:42

To きっぷすさん

お疲れ様です (・ω・)ゞ

> タイトル・サブタイトル・ナビの左寄せ

まず「始点」をどこにするかはきっぷすさんの方で決めて頂いて。
始点、というのは
レスポンシブですから画面幅が変わることを前提にしています。
ブラウザの横幅を基準にして一番左にするのか、
それともコンテンツの幅(記事とサイドバーを含めたもの)と左の位置を揃えるのか、という意味です。

● ブラウザ幅基準の場合
Ctrl+Fキー検索

#blog-name-container

CSSソース内にありますのでこれを目印に下記の通り修正

#blog-name-container {
width: 100%;
max-width: 900px;
display: table;
padding: 80px 5px;
line-height: 1.2;
text-align: left;
}


-------
続きまして検索(上の内容のすぐ下にあります)

#blog-name-container-cell

以下の通り修正

#blog-name-container-cell {
width: 100%;
display: table-cell;
}

注意: ブラウザ左辺との距離が5pxしかありません。
もっと離すには
#blog-name-containerのpaddingの指定を

padding: 80px 5px 80px 左の距離px;

に変更してください。

-------
続きまして検索

#navigation-container

以下の通り修正

#navigation-container {
width: 100%;
padding: 10px 2px 70px 左の距離px;
}

-------
上記内容のすぐ下に以下を追加

#navigation-container ul {
text-align: left;
}

=======

● コンテンツ幅基準の場合

Ctrl+Fキー検索

#blog-name-container

内容を以下の通り修正

#blog-name-container {
width: 80%;
max-width: 1200px;
display: table;
padding: 80px 0;
line-height: 1.2;
margin: 0 auto;
}

--------
検索

#blog-name-container-cell

内容を以下の通り修正

#blog-name-container-cell {
width: 100%;
display: table-cell;
text-align: left;
}

--------
検索

#navigation-container

内容を以下の通り修正

#navigation-container {
margin: 0 auto;
width: 80%;
max-width: 1200px;
padding: 10px 0 70px;
text-align: left;
}


======

デザイン的にあまりおすすめしませんが(特にナビゲーション)、以上です(笑)

きっぷす
2016/03/13 (Sun) 14:10

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

教えてくださりありがとうございます♪♪
でも、イメージしてたのと違ったので、これまで通りでいきます!笑


でも、でも、勉強になったので助かりました!!今後もよろしくお願いします♪♪😄

vanillaice (Akira)
Akira
2016/03/13 (Sun) 22:34

To きっぷすさん

そうじゃないかと思いました(笑)

はい。こちらこそよろしくお願いします :)

vanillaice (Akira)
Akira
2016/05/24 (Tue) 12:12

To てっちぃさん

てっちぃさんへのお返事です。
取り掛かろうと思ったのですが、あまりにエラー数が多いもので(笑)
まずこちらをご確認頂けますでしょうか ↓

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

それからこちら ↓

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

ランキングバナーが表示されない直接の原因は、ユーザーエージェントで
display: none;
が指定されているからです。
しかも !import 付き。
強制力としては最強です(JS+インラインCSS+user agent)
これはCSSでの指定ではなくJSによるものですので、デフォルトテンプレに対して
何を追加したか
を教えてください。
例えば
・アクセス解析コード
・外部プラグイン
など。
テンプレートソース内容に直接打ち込んだものを思い出してお伝えください。
特に<head>〜</head>内に何かを追加しなかったか。

よろしくお願いします。
ひとつ修正点先にお伝えします。
Ctrl+Fキー検索

<%topentry_title>

全部で6つあります。
その2つ目が対象です。
すぐ下に

</a>

があると思いますが、その</a>が以下のようになっているかご確認ください

<!--not_permanent_area-->
</a>
<!--/not_permanent_area-->

赤字で挟まれているかどうか。
無ければ上記のように修正をお願いします。

てっちぃ
2016/05/24 (Tue) 14:59

別のテンプレートのコメント欄に書き込んでしまい誠に申し訳ありませんでした。
Facebookのボタンというのは、毎記事最下部に表示されるFC2の拍手ボタンの隣に表示される「いいね!」ボタンです。
環境設定では間違いなく設定されているのに表示されません。(以前は表示されていました)
今回ご質問している内容は確かに自己責任の範囲内でやらなければならないと思いますので、これ以上ご迷惑をおかけするわけにはいきません。
こちらでも一度デフォルトに戻すなど考えてみます。大変申し訳ありませんでした。
これからもAkira様のテンプレートをお気に入りで使用させて頂きます。
ご丁寧なフォローありがとうございます。

てっちぃ
2016/05/24 (Tue) 15:03

度々失礼します。
エラーについてのご指摘ありがとうございます。
今すぐに確認ができない環境なのでまた後ほどご指摘内容を確認させていただきます。
ありがとうございます。

Akira
2016/05/24 (Tue) 18:41

To てっちぃさん

いえいえ。
コメントする場所についてはどうぞお気に病まれませんよう。
私自身が混乱しないためのお願いごとにすぎません。

で、いいねボタンですが、私の環境では表示されています。
私の端末からはてっちぃさんのブログを拝見するといいねボタンが表示されているよって意味です。
こちらはソース変更をする前から表示されておりました。
ですからこのボタンのことではないと思っておりました(笑)

最新記事へのいいねが32
二つ目の記事に45
となっております。
てっちぃさんの環境ではそれが見られないってことなんですかね (´・ω・`)

一度キャッシュ・クッキーの削除をしてみてください。
コードもちゃんと吐き出されていますので表示するための動作自体は行われていると思います。

てっちぃ
2016/05/24 (Tue) 18:45

No title

過去に自分で変更を加えた個所を思い起こしてみました。
内容のみ箇条書きで並べてみます。
① トップ画像(というのでしょうか?)の変更
② 記事内の画像にドロップシャドウを追加
③ サイドバーのプラグインにスクロールバーを追加(2か所)
これはプラグインの設定から【HTML編集】欄に外部からいただいたソースを貼っています。
④ カラムの幅の変更

こんな感じだったと記憶しています(;´・ω・)
あと、私が見る限りではランキングバナーは表示されています。


てっちぃ
2016/05/24 (Tue) 18:58

先ほど上記で修正点を教えていただいた件ですが・・・

<%topentry_title>
</a>
<script>
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>
<!--not_permanent_area-->

<!--/not_permanent_area-->

</h3>
<div class="element-datetime">
<span class="fa fa-clock-o"></span> <span class="month<%topentry_month>"></span> <%topentry_day>, <%topentry_year> <%topentry_hour>:<%topentry_minute>
</div>
</div>
</div><!--/element-header-->

太字+下線の部分のことでしょうか?

Akira
2016/05/24 (Tue) 19:52

To てっちぃさん

先にソース内容から。
以下の通り修正してください。

<%topentry_title>
<!--not_permanent_area-->
</a>
<!--/not_permanent_area-->
<script>
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>
</h3>
<div class="element-datetime">
<span class="fa fa-clock-o"></span> <span class="month<%topentry_month>"></span> <%topentry_day>, <%topentry_year> <%topentry_hour>:<%topentry_minute>
</div>
</div>
</div><!--/element-header-->

-------

私の環境下ではこう見えています。

パソコン(ランキンバナーなし いいねあり)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a98ru42ow_zpsmbfrnrv0.png

スマホ(どちらも表示あり)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/CF44147A-D70D-4A61-8F5E-470553DA7B54_zpsi3jpcdep.jpg

いいねが押されている(いいね数が存在)するところを見ると、恐らく私と同じ状態での見え方をしている人の方が多いのかな と思います。
一度上記の通り<a>の修正をして頂きたいと思います。
<a>は見た目にも影響を及ぼしやすいものですので、もしかするとこの部分の修正で直ることもある「かも」しれません。

--------

サイドメニュープラグインのスクロールバーですが、
ソース内に
/* スクロールの高さ設定 */
というCSS用のコメントが含まれているようです。
この書式はhtml内では使えません。
style属性に対してコメントがついていますが、このstyleはあくまでもhtml属性であって、
CSSの <style>とは全く別のものです。
従ってこれはエラーです。
それからスクロールバーに対してデザイン指定がありますが、こちらはIEだけの独自スタイルですから他ブラウザでは無意味です。
さらにMicrosoft自体もこのスクロールバー装飾を既に廃止(廃棄)しています。

<div style="width: 100%; height: 140px; overflow-y: auto;">
内容
</div>

上記への修正が望ましいです。

てっちぃ
2016/05/24 (Tue) 20:25

本当に詳細にわたり、ありがとうございます(汗)
後ほど修正を加えてみます。

Akira
2016/05/24 (Tue) 22:17

To てっちぃさん

はい。一度お試しください ( ゚Д゚)ノ

てっちぃ
2016/05/25 (Wed) 17:45

お世話になっています(^^♪
サイドメニュープラグインのスクロールバーの部分修正してみました。
これでいいのでしょうか^^?

そして、Facebookいいねボタンが表示されない件についてですが
送って頂いたソースを貼ってみた感じでも、こちらでは表示されていない状態が
続いています。 iphone6sではランキングバナー、拍手、いいね!のすべてが
表示されています。
PCではこんな感じです。
↓ ↓ ↓
http://i1224.photobucket.com/albums/ee372/Tetsuji_Hattori/%202016-05-25%2017.38.30_zps6jobhhbi.png

てっちぃ
2016/05/25 (Wed) 17:52

先ほど職場にある他のPCで確認したところ
ランキングバナー、拍手、いいね!のすべてが
表示されていました。。。。
これって・・・なんでなんでしょう?

Akira
2016/05/25 (Wed) 21:11

To てっちぃさん

こんばんは。お疲れ様です ( ゚Д゚)ノ

プラグイン側のエラーは解消されています。
それから<a>タグの修正も正しく行われています。
私の環境から「ランキングバナー」「fbいいね」共に表示もされています。

てっちぃさんもしかしてAdblock入れてませんかね (´・ω・`)
ランキングバナーは恐らくAdblockに引っかかります。
Adblockにも
・Adblock
・Adblock pro
・その他類似及び派生アドオン
といった種類があるのですが、proだとランキングバナー関連は広告と同じ扱いでブロックされるものも多いです。
fbいいねについてはちょっとわかんないなー (´・ω・`)
Adblockでfbボタンが非表示なる、ってのもちょっと考えにくいかもしれませんが…。

てっちぃさんのブラウズ環境で広告非表示アドオンが搭載されているのであれば、それにひっかかっているという可能性もゼロではないです。
一度ご確認くださいね。

てっちぃ
2016/05/25 (Wed) 22:40

こんばんは(^^)
あのぉ〜・・・
Adblock ってなんですか(^^;;
無知でごめんなさい(汗)
恥ずかしい。。。

Akira
2016/05/25 (Wed) 22:46

To てっちぃさん

いやいや。
何も恥ずかしいことなどありません。
知ってて当たり前みたいな書き方をした私が悪いです ^^;
ご存知なくてもなんら恥じるようなことではございません。
ごめんなさいね (*_ _)

Adblock(アドブロック)というのはブラウザのアドオン(拡張機能)のことです。
アドオンには色々な種類がありますが、広告の表示をブロックするためのもので有名どころが
「Adblock」です。
ですから言ってみりゃ商品名というか。
Adblockを入れているとwebページだけでなく、youtubeなど動画中に出てくる広告もブロックすることができます。

んで、てっちぃさんご存知ないということなのでたぶん入れてないですよね (´・ω・`)

Akira
2016/05/25 (Wed) 22:54

To てっちぃさん

てっちぃさんがお使いのパソコン環境を教えてください。
・OS名 (例: Windows10)
・ブラウザ名 (例: Firefox)

スクリーンショットからWindows10 Firefoxかな? と思うのですけれど。
この記事内のいいねボタンというのはFC2サイドのJSで表示されています。
今まで見られていたものが急に見られなくなり、他者からは見ることができているということは、

・OSのアップデートがあったかどうか
・ブラウザのアップデートがあったかどうか
・アドオンなどを追加しなかったか

fbの仕様というのはコロコロ変わります。
今把握できているものだと、非ログインでシェアボタンをクリックするとタブが開かない(笑)
(ログインフォーム画面を経由してくれない)
ですがいいねボタンの仕様変更というのは情報が今のところ出てきません。

上記以外で考えられるのはOSやブラウザの破損ですかね (´・ω・`)
クリーニング、あるいはセーフブート(セーフモード)で起動すると軽微なOS損傷であれば自動修復されます。
一度セーフモードをお使い頂いた方が良いかもしれません。

てっちぃ
2016/05/26 (Thu) 08:32

いつもお世話になります。
お疲れ様ですぅ

先日お送りしたスクリーンショットの画像は
・OS名 :Windows10
・ブラウザ名 : Firefox です。
大正解です(^^)/  あっ・・・失礼しました(^_^;)

win10にアップデートしたのは二日前ですが、アップデート前のWin7でも非表示でした。
お話をお聞きしている限り、こちらの環境に不具合があることは
間違いなさそうなので、「いいね」ボタンの表示に関しては
ひとまず放置してみようかな?って思っています^^

自宅で使用するパソコンはiMacですが、ここ最近開けていないので
こちらで同様の非表示現象が起きているのかは確認できていません。
こちらでも早急に確認してみます。

てっちぃ
2016/05/26 (Thu) 09:08

お世話になっています。
ご教授くださいm(__)m

トップ画像内の「 HOME INDEX RSS ADMIN 」のところですが
マウスオンの時に文字を白く表示させるにはどうすればいいでしょうか?

差し替えた画像が明るいため、ちょうどいい表現方法ができないので
何か「こうやったら見やすくなるんじゃないかな?」的な
アドバイス頂けないでしょうか^^?

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

vanillaice (Akira)
Akira
2016/05/26 (Thu) 11:15

To てっちぃさん

当たった ╭( ・ㅂ・)و ̑̑ グッ
なんでだろうね。
私はフツーに見ることができてるのでなんとも…(笑)
やっぱり一度セーフモード試してくださいね。

-------

Ctrl+Fキー検索

#navigation-container ul li a:hover

というのがCSSソース内にありますので、以下の通り追加修正。

#navigation-container ul li a:hover {
background-color: rgb(158,86,154);
color: white;
}

で、ひとつ気になりましたが、そのすぐ上にある

#navigation-container ul li a

の項目を編集されていると思います。
その中の

color: solid navy;

こちらは間違った内容ですので修正をおすすめします。
これはなんだろう。
solidというのはborderに対して付与する内容(ボーダーの見た目)で、色がネイビー…。
テキストの色を変更したかったんですかね (´・ω・`)
その場合は

color: navy;

でOKです。

てっちぃ
2016/05/26 (Thu) 17:11

ありがとうございます。

>color: solid navy;
>テキストの色を変更したかったんですかね

また当たってしまいました(^_^;)
テキストの色を変更したかったんですが、手を施しかけたら
何が何だか分からなくなってしまいました・・・(;'∀')

てっちぃ
2016/05/26 (Thu) 18:56

No title

こんばんは^^
お疲れ様です。
いつもありがとうございます。

レイアウト(?)のことでご相談です。
1ページごとの最下段記事のすぐ下に「WHAT'S NEW? 」が表示されていますが
最下段の記事と「what's new」の間に「Prev・・・Next」の表示を
割り込ませることはできるでしょうか?

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

てっちぃ
2016/05/26 (Thu) 22:26

再度こんばんは^^
自宅のiMacでも同様にFacebookいいねボタンは表示されていないですねぇ〜
http://i1224.photobucket.com/albums/ee372/Tetsuji_Hattori/%202016-05-26%2022.18.06_zpsr5h5deeq.png
不思議ですぅ〜〜〜

Akira
2016/05/27 (Fri) 00:06

To てっちぃさん

先にアイコンの件。

肝心なことをお尋ねしますが、表示されないのは全てのページでしょうか。
それとも特定のページでしょうか。
私は前者だと思っているのですが。
特定のページということになると話しが全然違ってきますので、一応確認です。

-------

ページ送りを新着サムネイルよりも前(上)に移動させたい、という解釈でお間違いないでしょうか。
GirlOnWireは記事の上下にページ送りがありますけれど、どちらを移動でしょう。
それとも追加? (´・ω・`)
prev, nextと書いてらっしゃるので上かしら。

てっちぃ
2016/05/27 (Fri) 08:34

お世話になっています。
表示されていないのは、全てのページです。再度確認してみました。

ページ送りについて、わかりにくい伝え方で申し訳ありませんでした;^_^A

下側のページ送りを新着サムネイルの上に移動したいなぁ〜という全くわがままなお願いですσ(^_^;)

あと、これは個人的な感想なんですが、ページを送りながら見ていく際に、新着サムネイルの上にページ送りがあると便利かな?と感じていてお問い合わせした次第です。

それか、新着サムネイルが縦長レイアウトではなく 横長レイアウトですと、ページ送りがサムネイルの下にあってもわかりやすいのではないかな?と感じました。

すみません。。。
素人の勝手な戯言ですが(汗)

vanillaice (Akira)
Akira
2016/05/27 (Fri) 09:33

To てっちぃさん

おはようございます ( ゚Д゚)ノ

やっぱり全ページですかー (´・ω・`)
うーん なんでやろ ( ̄∀ ̄;)
で、セーフブートはお試し頂いたんでしょうか。
大事なのは「以前は見られた」というところです。
その間カスタマイズもされておらず、他者からは見られている。
こうなると疑わしいのはやはり個人環境ということになってきます。

・セーフブートを試す --- これで改善されればOS損傷が原因
・他のブラウザで閲覧してみる --- 他ブラウザで閲覧できればFirefoxの損傷あるいはバージョンに起因
・OSやブラウザのアップデートが為されているか確認する(していなければしてください)

上記3つが最優先です。
特にセーフブート。
これをせずにああだこうだ言っても始まりませんのでね。
ともかく一度お試しください。
既にされているようでしたらごめんなさい ^^;
あー。でもiMacでもダメっておっしゃってましたよね (´・ω・`)
ますますわからない(笑)
一応私の検証した環境を書いておきます

Mac OSX yosemite(最新)
・Google Chrome
・Firefox
・Opera
・Vivaldi

Windows10
・Microsoft Edge
・IE11
・Google Chrome
・Firefox
・Opera

-------

ページ送りの件。
Ctrl+Fキー検索

個別記事用ページナビ

htmlソース内に1箇所あります。
こちらを目印にスクショの範囲をカット(切り取り)して移動させます。

スクショ ↓
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/%202016-05-27%209.22.51_zpswrcnnnvw.png

続きましてCtrl+Fキー検索。

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここから削除(この行含む) -->

このすぐ「上」にペースト。

ページ送りデフォルト位置の理由ですが、ページ内の分岐の近接にあった方が使い勝手が良いのではないか、という私の判断に基づきます。
ページ内の分岐 = top, bottomボタンでの移動位置
bottomをクリックしてすぐその近くにページ送りが有る、というのがデフォルトです。
このあたりは個人観によりますので、ご自身の使いやすいように変更してくださいませ。

てっちぃ
2016/05/27 (Fri) 16:24

No title

大変ご迷惑をおかけして申し訳ありません。
セーフモードで起動してみました。
その後の状況も変化ありません(;´・ω・)

ボタンの非表示につきましては、とりあえず目をつむることにします^^
これ以上ご迷惑かけれません。ごめんなさい。

まずは取り急ぎ、ご報告まで。。。

Akira
2016/05/28 (Sat) 23:07

To てっちぃさん

お役に立てずごめんなさいね (*_ _)
しかしなんでだろう。
すっごい気になる… ( ̄∀ ̄;)

てっちぃ
2016/06/01 (Wed) 16:49

No title

とんでもありません。
様々なわがままに対応してくださり誠にありがとうございました。
その後もAkiraさんのテンプレートを物色しております(笑)
またご指導をお願いいたします。

vanillaice (Akira)
Akira
2016/06/03 (Fri) 14:49

To てっちぃさん

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

こちらこそ貴重なお時間頂きました。
ありがとうございます :)

-
2016/07/15 (Fri) 13:03

管理人のみ閲覧できます

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

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

To  GirlOnWireメンテの件 内緒さん

長くお使い頂き嬉しく思います。
ありがとうございます :)

こちらがGirlOnWireのメンテナンス要件です ↓
http://vanillaice000.blog.fc2.com/blog-entry-367.html

① フォントやメールフォームの件

こちらは意図的な変更です。
Windows10ということですので、フォントは游ゴシック体に変更されているはずです。
メールフォームなど主要公式プラグインについては整形を行いましたので、それが反映されています。

② コメント返信にある修正点〜

カスタマイズについては以前のバージョンとほぼ変わりません。
メンテナンスのお知らせページにある内容との照らしあわせをお願いします。

③ カルーセルの件

こちらは複雑なJSで動いていますので、プレビュー画面では確認できません。
参考
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object14

お手数ですが「上書き」を行っての確認をお願いします。
作業中のテンプレートを設定しておきたくない場合には、
「プレビュー」ではなく、上書きをしたうえでテンプレート名をクリックしてご確認くださいね。
設定中テンプレートに間違って上書きしないようご注意ください。
上記方法でも変更がリアルタイムに反映されないことはあります(キャッシュの関係)

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

-
2016/07/16 (Sat) 10:41

管理人のみ閲覧できます

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

-
2016/07/16 (Sat) 11:04

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/07/16 (Sat) 11:56

To GirlOnWireの件 内緒さん

いえいえ。どうぞお気になさらず。
いつでもお気軽に :)

-
2016/07/16 (Sat) 12:14

管理人のみ閲覧できます

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

Akira
2016/07/16 (Sat) 13:27

To GirlOnWire ランダム表示の件 内緒さん

JSのmath randomを利用すれば可能ですよ (´・ω・`)
Ctrl+Fキー検索(htmlソース内)

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

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

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


* 不備ありコードですので打ち消し線を入れておきました (2016.7.17)

続きましてCtrl+Fキー検索(CSSソース内)

#banner

この項目の以下を削除

background: url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/20150812074313061.jpg) center center no-repeat; /* 注)バナー画像変更はここ */

------

以上です。
あくまでもランダム表示ですので、同じ画像ばかりが連続して出てきたり、なんてこともあります。
それから、特殊なカスタマイズですのでサポートは対象外にさせてくださいね。
自己責任の上でご利用をお願い致します (・ω・)ゞ

-
2016/07/17 (Sun) 07:30

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/07/17 (Sun) 09:48

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

大変失礼致しました。
一部書き忘れ ^^;

こちらに変更 ↓

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

赤字部分を追加です。
これが「指定範囲全画面」にするためのおまじない。
これでできると思いますが、元に戻される等お任せします。
貴重なお時間潰してしまいました。
ごめんなさいね。

戸村サキ
2016/11/03 (Thu) 12:38

ブログ記事のフォントについて

管理人様、はじめまして。いつも素敵なテンプレありがとうございます。

質問ですが、当方のブログを見ていただければ分かるように、ブログ記事本文だけ、MSゴシックになってしまうのです(遊ゴシック希望です)。
CSSは、カラーとfont-size, 見出しの作成、font-familyの追記をした程度です。

試しに別のブログにテンプレを適応したところ、普通に遊ゴシックになりまして、二つのHTMLおよびCSSの比較もしたのですが原因がわからず…

祝日に恐縮ですが、ご回答いただければと思います。
よろしくお願いいたいます。

Akira
2016/11/03 (Thu) 20:23

To 戸村サキさん

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

ご質問の際にご利用の環境を併せてお知らせ頂けると助かります。
Windows OS(バージョン不明 恐らく8.1以上)、ブラウザはMicrosoft Edge あるいは IE11ではないかと仮定します。

まず、記事内を書かれる際にFC2エディターのツールを用いて、フォントを「ヒラギノ」に変更されていると思います。
ヒラギノフォントは現状ではMac専用で、Windowsにはインストールされていません。
OSに存在しないフォントが書き込まれていた場合にはOSあるいはブラウザの「標準フォント」に書き換わります。
サキさんのお使いのブラウザのデフォルト指定フォントがMS Pゴシックである、ということになります。
記事中でフォントの指定を行わなければ最優先フォントである游ゴシック体が自動的に採用されますが、エディターでフォント変更してしまうと

<div style="font-famly: HiraginoSans-W3">文字列</span>

こういったソース内容になり、この書き方は「インラインCSS」と言って強制力の強い指定です。
CSSソース内で游ゴシック体が指定されていてもインラインCSSが優先されますので游ゴシック体が適用されなくなってしまいます。

まとめ
・ エディターによるフォント指定

・ OS, ブラウザ内に同フォントが見つからない

・ CSSでの優先順位を無視してOS, ブラウザの標準フォントで表示

こういう仕組みです。
他のブラウザ、例えばGoogle Chromeから見たらちゃんとヒラギノになってる!
と思うかもしれませんが、それもヒラギノではないです (´・ω・`)
Chromeに指定されている優先フォントが表示されていて、それがMS Pゴシックではなくちょっと丸みのあるフォント(meiryoや游ゴシック UIなど)というだけです。
CSSフォント設定が外れてしまった際に表示されるフォントは閲覧者のブラウザ設定に依存しますので、こちらも併せてご確認ください。
ちなみに私のマシンはMacですのでヒラギノで表示されてますけどね (´・ω・`)
さらに
inner-contensに対してYu Gothicという指定を追加されておられますが、正しい書き方は
font-family: '游ゴシック', 'YuGothic';
です。
そしてこの追加記述は不要です(書いても最優先にはなりません)
一度ご自分の記事内容とその手順とをお確かめくださいね。
よろしくお願いします。

* FC2エディターでのフォント指定は誤解が多くあるようですので、近いうちに記事にしようと思います。

戸村サキ
2016/11/03 (Thu) 20:48

解決しました!

管理人様

質問した後いろいろと試行錯誤をしていたら、原因が分かりました!
普段Win10なのですが、ブログ記事をコピペする際にiPadのテキストエディタを経由していて、その際にフォントが指定されていたようなのです。

Win10から改めてメモ帳にコピペして更新したところ、無事遊ゴシックになりました。

お騒がせして申し訳ありません。貴重なスペースありがとうございました。

vanillaice (Akira)
Akira
2016/11/03 (Thu) 20:52

To 戸村サキさん

なるほど。
意図的に指定したわけではなかったんですね。
コピペをされる際には必ずhtml専用エディターを経由させてくださいね。
コピーというのはhtmlソースなどの情報も拾います。
フォントの種類やサイズ、色などが指定されている場合にはその情報も受け継いでしまいます。
htmlエディターを経由させることでその指定を取り除くことができます。
(特に新投稿画面での直コピペは厳禁)

お疲れ様でした :)

戸村サキ
2016/11/03 (Thu) 21:36

To Akiraさま

先にご回答をいただいていたのに気付かず投稿してしまいました。お手数おかけしてすみません。
色々とご丁寧にありがとうございます。勉強になりました。
これからもクールなテンプレートに期待しています!

Akira
2016/11/04 (Fri) 03:59

To 戸村サキさん

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

はい。お言葉励みになります (●'0'●)/

-
2017/08/26 (Sat) 18:42

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/08/26 (Sat) 20:05

To GirlOnWire開閉スクリプトの件 内緒さん

こんばんは (o'ω')ノ
こちらこそお世話になります :)

> サイドバーに折りたたみタグを使用することは可能でしょうか〜

こちら最初は勘違いしてしまいました。
ユーザータグを折りたたみたいのかと(笑)
「タグ」というのは
<header>
<article>
などを指します。上記は「開始タグ」
</header>
</article>
上記のようにスラッシュのついたものが「終了タグ」
<div>あいうえお</div>
上記の中で「タグ」と言える部位は<div>と</div>だけです。
全体を指すのならば div要素 と言います。
ですので内緒さんの今回のソースコードも「タグ」とは言いません。
この機会に覚えておかれると良いと思います。
正しい用語を覚えることが自己解決の近道です。

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

-----

結論から言うとできますが、そちらの既存コードのままではよろしくありません。
まず内容が古い。
aタグというのは昔のように得手勝手に使えるものではありません。
(既存コード内容はhtml4、現在のweb標準はhtml5)
そしてaタグは現在だとほとんどの場合、ページtop/ bottomなどページ内移動を司っています。
内緒さんの言う「どこかへ飛ばされる」というのは、

ページ内移動とページ遷移とが混在しているが実際には遷移先を含むどの移動先も指定されていない + フェイドエフェクトの起動

これらがいっしょくたになって起こっています。
今後はaタグを何かのスイッチ的に使わない方が良いですね。
html5テンプレでページ内スクロールが実装されていた場合にはほぼ間違いなく衝突します。

で、ソース内容自体が結構謎な感じはしますが…。
(clear: both; は不要ですしその他もちょっといろいろ)
他所様のコードである以上私が細かな修正を入れることはできませんので、応急処置としてそのソースの

<a style="cursor:pointer;">



<a class="nonmover" style="cursor:pointer;">

に変更してください。
次にテンプレートのhtmlソース内に
<script src="//blog-imgs-82.fc2.com/v/a/n/vanillaice000/fade500tmb_unit_compress.js"></script>
の一行がありますので、削除してもらいますがその前にこのファイルを開いて
(//blog-imgs-82〜 の前にhttp:を付けないと開けませんので、コピーしてスキームを追加した上でどうぞ)
内容を全コピー(Ctrl + A)してメモ帳などにペースト(Ctrl + V)します。
(Macの場合はControlキーではなくCommandキーに置き換えてください)
htmlエディターをお持ちでしたらそちらへ。
お持ちでなければwindowsなら「メモ帳」Macならば「テキストエディット」をご利用ください。
内容を写しましたらその中に

$("a[href^=#]")

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

$("a[href^=#]:not(.nonmover)")

修正できましたら全てをコピーし、テンプレのhtmlソース内 </body> の直前に以下のような形でペースト

<script>
ここにペースト
</script>

scriptの開始及び終了タグが必ず必要ですので書き漏らしの無いよう。
そして元々あったscriptファイルの一行を削除することもお忘れなく。

--------

これで機能はするはずですが、根本的解決にはなっていません。
そしてテンプレのアップデートをされた時点でまた改めて書き直すことになります。
あるいは初めからhtml5に準拠した内容で導入するという考え方もあります。

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

---------

記して頂いた既存コード内容の書き換えはこれ以上は致しかねますので(失礼だから(笑))、自身での選択・判断をお願いします (o'ω')ノ

-
2017/08/28 (Mon) 00:11

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/08/28 (Mon) 01:38

To GirlOnWire開閉スクリプトの件 内緒さん

お疲れ様です (●'0'●)/

> 正規バージョン(?!)で参りたく〜

そうですね。正規というわけでもないのですが、その方が良いかもしれません。
たぶんそちらのほうが後々楽ではないかと思います(笑)

更新の件は慌てる必要はありませんのでどうぞお時間のある時に。
お疲れ様です :)

m
2017/08/28 (Mon) 01:57

m(_ _)m

めっちゃくちゃ使い勝手が良いです。。(そして既にとても楽です^^;)
使い勝手良くて多用しすぎないように気をつけようと思うくらいです(笑)
改めて、ありがとうございました…!

vanillaice (Akira)
Akira
2017/08/28 (Mon) 13:19

To mさん

ご丁寧にありがとうございますー。
こちらこそ感謝です :)

さっちぃ
2017/10/09 (Mon) 11:40

コメント欄のアイコンについて

初めまして。
GirlOnWireのテンプレをお借りしております。
写真を載せることが殆ど無い私には、とても使い易くて助かっております。

お尋ねしたいのは、コメント欄の管理者のアイコンについてです。
この記事の文中に掲載されている

.name管理人ハンドルネーム {
background: url(//blog-imgs-82.fc2.com/v/a/n/vanillaice000/wingpurple_A.png) left center no-repeat;
}

をCSSソースの末尾に付け足ししたところ、訪問者と同じグレーのアイコンと重なって表示されてしまいました。
貼り付ける場所が違っているのでしょうか?
それとも、別の場所に何かを付け足す必要があるのでしょうか?

Akira
2017/10/09 (Mon) 16:58

To さっちぃさん

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

こちら、申し訳ございません。私の手落ちです。
以前のメンテナンス時、コメント欄の仕様を変更しております。
その際に記事内容変更を怠っておりました。
現在このページでご覧頂いている見た目と同じで、管理人コメントは「自身のプロフィール画像を表示」する仕様になっています。
変更の仕方は本文内容を修正しましたのでそちらをご参照ください。
よろしくお願いします (*_ _)

さっちぃ
2017/10/09 (Mon) 22:56

To Akiraさん

記事の修正ありがとうございました。
おかげでアイコンのきちんと表示ができました。

あとですね…
ヘッダー画像のランダム表示にチャレンジしてみたのですが、

</body>の直前に貼る
<script>
var randomimage = [];
randomimage[0] = '画像1アドレス';
randomimage[1] = '画像2アドレス';
randomimage[2] = '画像3アドレス';
var n = Math.floor(Math.random()*randomimage.length);
document.getElementById('ここにid名').style.background='url("'+randomimage[n]+'") center center /cover no-repeat';
</script>
のidは banner でしょうか? another-banner でしょうか?
それとも banner,another-banner なのでしょうか?

どれを試してもヘッダーが真っ白になっちゃいました。
ランダム表示のカスタマイズは難しそうなので諦めました。

vanillaice (Akira)
Akira
2017/10/10 (Tue) 00:06

To さっちぃさん

まず、コメントアイコンの件が完了したということで、お疲れ様でした。

> ヘッダー画像のランダム表示にチャレンジしてみた〜

GirlOnWireの場合には「banner」です。

<script>
var randomimage = [];
randomimage[0] = 'アドレス';
randomimage[1] = 'アドレス';
randomimage[2] = 'アドレス';
var n = Math.floor(Math.random()*randomimage.length);
document.getElementById('banner').style.background='url("'+randomimage[n]+'") center center /cover no-repeat';
</script>

を</body>の直前に。
変更部位は赤字部分だけです。
CSS内の

/* 注)バナー画像変更はここ */

を目印に、その一行を削除してください。

サンプル ↓
https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/girlonwire-randomheader.html
ブログタイトルクリックでお試し頂けます。

よろしくお願いします。

さっちぃ
2017/10/10 (Tue) 22:52

To Akiraさん

何度やっても上手くいかなかったので、テンプレの再ダウンロードをしてから修正を掛けたら、上手い具合になりました。

サポートありがとうございました、

vanillaice (Akira)
Akira
2017/10/11 (Wed) 09:15

To さっちぃさん(完了のご報告)

そうでしたか。
いずれにしろお出来になったようで良かったです。
お疲れ様でした :)

-
2017/10/16 (Mon) 22:57

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/16 (Mon) 23:46

To GirlOnWireドロワーメニュー内リンクの件 内緒さん

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

> 〜リンクが 飛びません〜

デフォルトのGirlOnWireで、かつページ内にエラーが無い(html内容が全て正しい)場合にはちゃんと機能します。
一応私の検証環境をお伝えしますと、私のブログをGirl〜に設定して閲覧した際にはドロワー内別タブで開く指定のリンクを始め全てのリンクが正常に開けます。
内緒さんのブログの場合は

iPhone6s(iOS11.0.3 --- 最新) --- ランキング, お友達共に開ける
iPhone7(iOS11.0.3 --- 最新) --- 共に開けはするがなんとなくおかしい
iPhone7(iOS10.2.1) --- ランキングは開ける、お友達は開けない

ということで、最新OSでは開けますがやはり挙動はおかしいです。
で、ランキングとお友達リンクの間にある某かの要素に正しくない構文があり、その影響だと思います。

html的なエラーは結構たくさんある…(笑) のですが、iOSに影響するようなものというとどれだろう、ってところですね (´・ω・`)
思わぬものがひっかかったりしますので、構文は正しく書くに越したことはありません。

とりあえず内緒さんにお試し頂きたいのは、

① お友達のリンク「以外」のプラグインを全て非表示にする。
その状態でジャンプができるかどうかを確認

② ひとつづつプラグインを表示し、どのプラグインを表示した時にジャンプできなくなるか

これをご自身で確認してください。
私的にはインスタグラムの

省略〜ig-b-v-24"target="_blank"

ここは正しくは

省略〜ig-b-v-24" target="_blank"

属性間の半角スペースは必ず要りますので、ここは修正してください。
これが影響しているのかなぁ、どうかなぁ、という感じです。
一般的にはさほど影響しないけれども、もしかしたらiOSは敏感なのかもしれませんし。
iOSというか、safariですね。
お使いのブラウザってsafariですよね。たぶん。
Chromeとかは最新iOSでなくともフツーに開けます。
ですから「サファリが過敏」ってことだと思いますけれど。

ともかく…ちょっと一旦エラー関係は修正した方が良いかもしんない ^^;

ちなみに最悪の場合を想定すると、毎回記事に定形として書いていらっしゃる「顔文字」
<(_ _)>
↑ これなんですが、これ実はダメなんですよ (´・ω・`)
みなさん割りと知らないようですが。
この影響では無いと思いたい…というところです。

ちょっとはっきりしませんので、上記手順でご確認とご報告をお願いします。
原因が絞れれば後はそれを正しく修正ということになります。
よろしくお願いします。

-
2017/10/17 (Tue) 18:13

管理人のみ閲覧できます

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

-
2017/10/17 (Tue) 22:26

管理人のみ閲覧できます

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

Akira
2017/10/18 (Wed) 00:08

To GirlOnWireドロワーメニュー内リンクの件 内緒さん②

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

うーん。内緒さんの状況を再現できないんですよね。
内緒さんのお友達リンク全てとinstagramのコードも移植して確認したのですが、私の環境だと何も問題なく開けます。
(現在全て削除済みです)

私が一時的な移植でもって再現できないのは「アクセス解析」なんですね。
こればかりは勝手にコードを引っこ抜くわけにいきません。内緒さんのデータがおかしくなってしまうので。
FC2のアクセス解析ではなく、accaiiの文字列を持つ外部サービスのスクリプトですが、この内容にはtarget指定に関するものが含まれてます。
それがもしかしたら… という気もしますが、濡れ衣かもしれない。わかんない(笑)

再度確認したところ、やはり旧OSのsafariではランキングも開くことができませんでした。
ということは、ランキングはドロワーの最上部にありますので、それよりも「前」に書かれているhtmlないしJSなどの影響だとあたりをつけることになります。

記事内容の顔文字ですが、良くないのは確かですが(この件は近日中に記事にします)、今回の件には直接関わってはいません(たぶん)

---------

アクセス解析を一旦削除

してみてください。
それからこれは余力があればですが、カルーセルを削除されていますので不要JSも取り除いてください。
これもなにかしらの影響を与えているわけではありませんが、記述が残っている以上解釈は行われますのでローディングにわずかでも負荷を与えます。
<!-- 注)スライダー不要の方ここから削除 -->
を目印にガイダンスに従ってください。

アクセス解析が無関係だとすると結構根深い問題になってくると思いますので、時間かかるかもです ( ̄∀ ̄;)

* instaのクルクルは単なるマウスオーバー時のオシャレ演出ですので気にする必要はありません(笑)

-
2017/10/18 (Wed) 00:30

管理人のみ閲覧できます

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

-
2017/10/18 (Wed) 07:48

管理人のみ閲覧できます

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

Akira
2017/10/18 (Wed) 16:06

To GirlOnWireドロワーメニュー内リンクの件 内緒さん③

取り急ぎのお返事です。

原因は取り敢えず「アクセス解析」だとはっきりしたわけですね。
で、相方が帰ってこないと古いiOSの検証ができないんです。なのでお待ち下さいね ^^;
今日その相方が戻ったら家族で食事に出ることになってるので遅くなると思います。すみません(汗)

「個別に読む」についてはその部位(<div class="read_jump">から</div>まで)の削除で合ってます。
ただ個別記事(パーマリンク)へのアクセスは減ってしまうかもしれません。
全文表示で追記を分けない場合は必然的にそうなりますが、さらに、という意味です。
コメントしない限りパーマリンクを開く必要がなくなってしまうので。
ボタンが無いと一番上まで移動しないと遷移できませんよね。
(コメントアイコンクリックで移動できるのはFC2ブロガーでないと気づかないと思います)
そこをよく検討された上でどうぞ。

-
2017/10/18 (Wed) 19:14

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/18 (Wed) 23:32

To GirlOnWireドロワーメニュー内リンクの件 内緒さん④

遅くなりましたー! (*_ _)

あー。ホントですね (´・ェ・`)
アクセス解析を入れると旧OSのsafariのみ開けないみたい。

で、結構大掛かりな修正になりますが大丈夫でしょうか ( ̄∀ ̄;)
公式配布のものはまだ書き換えできませんので(カルーセルの検証ができていないため)、取り敢えず内緒さんに先にアップデート的な修正になります。
ついでにjQueryのバージョンも上げようと思います。
動作確認済ませました。ちょっと簡易的で申し訳ないのですが ^^;
たぶんこれでいけるはず。

----------

まず、アクセス解析を記載する場所については<body>の直下で合ってますので、修正が済みましたら貼り直しをお願いします。最後の最後にしてくださいね。
これからドロワーのJS内容を大きく変更しますので、そちらの動作確認が第一です。

------
手順① jQueryアップグレード

https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

上記をCtrl+F(Windows)/ Command+F(Mac)キー検索されまして、赤字の数字部分を
3.2.1
に変更してください。

------
手順② JS内容削除

$('#sidenav')
から
;});}else if
赤字まで(赤字部分含む)を一旦削除しますが、同じ場所に別の内容を記載しますので場所を見失わないよう注意してください。
意味が伝わりますかね(笑)
えっと。削除した後はこんな風になってるはずです ↓

$(function(){}else if

上記の {} の中に新たに内容を入れます。
記号ひとつでも消し忘れたり、逆に余分に消してしまったりでもJSは動かなくなりますので、細心の注意を払って作業をすすめてください。

------
手順③ JS内容追加

内容を消した同じ場所に以下の内容を追加します。

$('#sidenav').simplerSidebar({align:'left',selectors:{trigger:'.mobile',quitter:'close-sidebar'},sidebar:{width: 300}});});

------
手順④ JS内容追加

さらにもうひとつ追加します。
$("#secondary").attr("id","sidenav"),
で検索し、以下の通り修正

$("#secondary").attr("id","sidenav");$('.side-menu a').addClass('close-sidebar'),

------
手順⑤ JSファイル差し替え

https://blog-imgs-88-origin.fc2.com/v/a/n/vanillaice000/simplersb1_4_5min.js
上記ファイルを

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/jquerysimplersidebar2_2_2min.js

に差し替えます。
一連の作業全て行わないとサイドバーは動きませんので、途中で動作確認など行わないようお願いします(時間が無駄になるため(笑))

------
以上です。これでちゃんと動作するかどうか一度お試しください。
ドロワーがちゃんと開けることが確認できましたら、最後にアクセス解析を入れてみてくださいね。
ドロワーでつまずきましたらその時点で私の方にお伝え下さい。
お手数おかけします!

-
2017/10/19 (Thu) 09:44

管理人のみ閲覧できます

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

Akira
2017/10/19 (Thu) 19:01

To GirlOnWireドロワーメニュー内リンクの件 内緒さん⑤

はい。内緒さんのペースでどうぞ。

投稿画面の件はいずれ「新」の方に統一されると思いますので、今のうちに慣れておくのも良いと思います。
こっちはこっちでやはりクセがあるんですけどね (´・ω・`)

-
2017/10/19 (Thu) 23:12

管理人のみ閲覧できます

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

-
2017/10/20 (Fri) 00:18

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/20 (Fri) 00:28

To GirlOnWireドロワーメニュー内リンクの件 内緒さん(完了のご報告)

出来ましたか。良かったですー(笑)
こちらこそ内緒さんがお知らせくださらなければ気が付きませんでした。
ありがとうございます。

でもできればOSは常に最新で(笑)
お疲れ様でした :)

-
2017/10/20 (Fri) 00:41

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/20 (Fri) 00:52

To RSSが飛び出している件 内緒さん

2つ原因考えられるんですが、まず最初の方。

アクセス解析に「ソーシャルタイプ」をご利用だと思います。
FC2ブログのソーシャル解析は特にメリットが無いどころか、レイアウトを崩します。
ヘッダー上に空白できてますよね。
これは「アイコンタイプ」に変更するだけで直ります。

あと、jQueryのバージョンを上げたことによって一部エラーが生じてしまいました。
a[href^=#]
という箇所がありますので、
a[href^=["#"]
こうしてフラグメントをダブルクォーテーションで囲うだけで直ります。

毎度段階を踏んで申し訳ないです。まずここまでお願いします。

-
2017/10/20 (Fri) 09:07

管理人のみ閲覧できます

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

Akira
2017/10/20 (Fri) 13:16

To RSSが飛び出している件 内緒さん②

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

まず、a[href^="#"]への修正はできていません。まだa[href^=#]のままになってます。
で、内緒さんのソース拝見しますと至る所に空白行があるんですね。
改行されてませんでしょうか。
JSソース内で改行してはダメですよ。JSコードの改行は意味がありますので、元の状態から好き勝手に変更してはいけません。

X
;$('.mobile').css('display','block');


$("#secondary").attr("id","sidenav");$('.side-menu a').addClass('close-sidebar'),



$(function(){$('#sidenav')


;$('.mobile').css('display','block');$("#secondary").attr("id","sidenav");$('.side-menu a').addClass('close-sidebar'), $(function(){$('#sidenav')

恐らくナビゲーションのズレもそれが原因です。
<li>要素の直後に空白行がありますので、それが影響しています。
(改行分がRSSの下に縦幅として認識されている状態)
内緒さんがhtml専用エディターを利用して編集をされているのならば良いのですが、ブラウザ上で作業されている場合には空白行だけでなく半角スペースもそのまま「文字」として捉えてしまいます。

-------

アクセス解析についてはコードは正しいと思いますが、本来であれば
<a href="http://fc2.com/">内容</a>
の部位が0 x 0 になるはずが内緒さんの場合は 0 x 17 です。
この17pxの縦サイズがヘッダーを下へ下げています。
これは2つの原因が考えられます。

① ソーシャル解析タイプの利用
② head情報にミスがある

今内部的にどうなっているかというと、2つの解析のうちFC2でない方が2度出力されています。
<!-- [FC2 Analyzer] //analyzer.fc2.com/ -->
から
<!-- [FC2 Analyzer] -->
までの間にまたもう一つの方のscriptが実行されている状態です。

JSというのは何かを一緒にまとめてしまったり、途中で見やすさのために改行や半角スペースを入れてしまうのはご法度です。

半角スペース, 改行
に留意して、ご自身で入れた箇所については削除してください。
どこをどうしたかご自身で見当をつけられない場合は…んー。再DLして最初からやった方が良いかもしんない(笑)

とりあえず解析2つを外されまして、ともかくJSの修正からやりましょう (´・ω・`)

-
2017/10/20 (Fri) 17:57

管理人のみ閲覧できます

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

Akira
2017/10/20 (Fri) 23:24

To RSSが飛び出している件 内緒さん③

お疲れ様です (o'ω')ノ

その方が間違った情報を与えたというわけではないですよ。
JSに当てはまらないのと、htmlでもinline-blockというdisplayプロパティの値の特性上、今回は<li>というhtml要素に引っかかったというだけです。
li要素のinline-blockについては記事にした方が良いのかなぁ、と思っています。
たまたま今回はその2つがコンボになりましたが、ほとんどのhtml要素の場合には改行などは影響しません。
ただしJSはダメです。

ともかくひとつづつ進めていきましょうね。

-
2017/10/21 (Sat) 08:17

管理人のみ閲覧できます

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

Akira
2017/10/21 (Sat) 22:04

To GirlOnWire フェイドの件 内緒さん

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

fadeIn
で検索するとCSSソース内に5箇所出てきます。htmlの方でも何箇所かヒットしますが、htmlは無関係なのでCSSの方だけです。

bodyに指定されている
-webkit-animation: fadeIn 1.5s;
animation: fadeIn 1.5s;

の2行を削除。
残りの3つは
/* fadeIn */
から
/***------------------------------------------
header
------------------------------------------***/
のすぐ上までを削除してください。

GirlOnWireは全文表示タイプなのでローディングスピードは要約のそれに比べて遅くなります。
内緒さんの場合は追記も利用していませんので記事内の画像など全てトップページにも表示されますのでさらに遅くなります。
スピード重視の方へはできるだけ要約タイプをおすすめします。
とは言え好みで選べば良いんですけどもね。
特徴だけは知っておいてくださいね。
よろしくお願いします。

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

あとお伝えし忘れましたが、コメント欄は記事編集画面とはまた別のプログラムですので顔文字を使っても問題ありません(笑)

-
2017/10/22 (Sun) 00:26

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/22 (Sun) 02:10

To GirlOnWire フェイドの件 内緒さん(完了のご報告)

かなり厄介な修正でしたが投げ出さず根気よくおつきあい頂きました。
こちらこそありがとうございます。
お疲れ様でした :)

さっちぃ
2017/12/09 (Sat) 18:25

メンテ後の見出し

此方に記入をということでしたので。
再DL後のブログタイトル部分の見出しのコピペです。

<div id="blog-name-container">
<<!--not_permanent_area-->h1
<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area--> id="blog-title"><a href="<%url>"><%blog_name></a></<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area-->>

他の見出しのタグの位置も上記のようになってますが、これで合ってるのでしょうか?


Akira
2017/12/09 (Sat) 18:43

To さっちぃさん(移動先)

>
こんばんは。
GirlOnWireのメンテをされたということなので再ダウンロードしてみたところ、HTMLの見出しのタグが妙な箇所に分断されていますが、これはメンテの結果なんでしょうか?

何処にコメントをして良いのか分からず、此処にコメントしました。
2017/12/09 (Sat) 16:06
https://vanillaice000.blog.fc2.com/blog-entry-618.html#comment4810

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

ごめんなさい。「分断」の意味がわかりません。
上下に間隔が空きすぎるということでしょうか。
提供サンプルがありませんので予想でお返事します。

-------------
見出しのhxについては初期値適用となりますので、上下にmarginがつきます。
そして先行要素のmargin-bottomと後続要素のmargin-topは「相殺」が起こります。
例)
先行要素 --- margin-bottom: 1em;
後続要素 --- margin-top: 2em;

各要素のmarginは2em(大きい方が小さい方を吸収)

さっちぃさんが「旧投稿画面」をお使いで、改行の扱いを「自動」にされている場合にはhタグの直後に<br>が入りますので相殺は起こりません。
つまり間隔がより大きくなります

例)以下のような書き方をした場合

<h2>見出し1</h2>
<h2>見出2</h2>

旧投稿画面
見出し1と見出し2の間隔 --- 0.75em(h2下margin) + 1.9em(br改行分) + 0.75em(h3上margin) = 3.4em
新投稿画面
見出し1と見出し2の間隔 --- 0.75em(h2下marginとh3上margin相殺) = 0.75em

各見出しのmarginをリセットしたい場合は

h2, h3, h4, h5, h6 {
margin: 0;
}


を追加してください。

-----------
装飾が踏襲されない、という意味であれば「独自クラス」の確認をしてください。
GirlOnWireは見出しデザインの独自クラスは未導入ですので、該当CSS内容を移植しなければ装飾は適用されません。

-----------
こういった問題が生じた際、該当テンプレートが設定されていないと回答が非常に困難です。
特定箇所で実際に発生しているのであれば、テンプレ適用状態で該当URLをお知らせください。
それが無理な場合には最低でもスクリーンショットを頂けないでしょうか。
よろしくお願いします。

Akira
2017/12/09 (Sat) 18:48

To さっちぃさん

回答が入れ違いになってしまいました。
記事内の見出しではなくテンプレートの見出しということなんでしょうか。
そのhtml内容が気になるということですか?
それとも表示上何か問題が生じているということですか?

--------
新仕様では
トップページはブログタイトルが h1、各記事のリストが h2、各記事のアウトラインは section
個別記事ではブログタイトルが div、記事タイトルが h1、記事のアウトラインはarticle
です。
上記のように変更するためのhtml内容がさっちぃさんがコメント欄にコピペで掲載した箇所です。
「合っているかどうか」は「どうしたいか」によります。
html構文上「正しくないのではないのか」という意味であれば「正確です」

個別記事の記事タイトルをh1にしたくない、という場合には旧仕様の内容を移植してください。
よろしくお願いします。

さっちぃ
2017/12/09 (Sat) 21:36

To Akiraさん

<!--not_permanent_area-->と
<!--/not_permanent_area-->の間にh1の見出しタグや
/>の閉じタグのみが入っているのを見た事が無かったので、気になってました。

今まで<h1>見出し</h1>という表記が当たり前だと思ってましたし、タグの色が黒になってたので??ってなってしまいました。
正確なのですね。了解しました。

Akira
2017/12/09 (Sat) 21:52

To さっちぃさん

コメントアウトに似た
<!--not_permanent_area-->
というのはFC2独自変数(エリア変数)で、サーバーサイドの処理(php)を行うための記述です。
ですからhtmlではないんです。
FC2内でしか使えませんので、html専用エディターなどに移すと理解できない文字列なので書式(タグ色分けなど)が乱れます。
これらの変数を利用することによって、トップページではブログタイトルを h1 に、個別記事では div に、という振り分けが可能になります。

記事タイトルをh1にしたいと希望される方が多いので、この仕様で統一していく方向です。
あとはhtml5ですからアウトラインとも密接な関係がありますが、SEOでは一番重要と思われるものを h1 というのが最近のセオリーですのでそれに倣っています。
といってもGoogle自体は「そんなに重要視していない」と言っていますのでお守り的でしかないんですけどね (´・ω・`)

-
2018/10/31 (Wed) 11:31

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/02 (Fri) 10:58

To GirlOnWire ナビゲーションの件 内緒さん

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

> ADMIN は削除して、サイドメニューを表示するものと入れ替えることは可能でしょうか?〜

ナビゲーション内に開閉ボタンを設置するといったことはできないです。
サイドメニューは開いたら閉じなければいけませんので、ナビ内にボタンを置いてしまうと閉じることができなくなってしまいます。

adminリンク(閲覧者がFC2ブロガーの場合は自身の管理画面へ、FC2ユーザー以外の場合はアカウント作成画面へ遷移します)が不要な場合は
admin
で検索されますとhtml内(テンプレート管理画面上段)に2箇所ありますので、最初のものが含まれている1行を削除してください。

開閉ボタンについてはアイコンが分かりづらいようであれば「開閉」などの文字に置き換えることもできますが、記事内容と重なりますので却って迷わせることになると思います。
「OPEN」にしても開いた状態でもOPENの表示のままなのでちょっとどうかなぁ、と思います。
サイドメニューがドロワー(開閉タイプ)になっていないテンプレートへの変更もご一考ください。

というかその前に内緒さんはレスポンシブ設定(スマホ版非表示設定)をされていませんので、スマホ閲覧者が見ているのはFC2ブログの公式テンプレートですよ (´・ω・`)
パソコンとスマホのテンプレートを共通化するならば記事内にある通り「スマートフォン版の表示」設定を「非表示」にしてくださいね。
よろしくお願いします。

杉山孝慶
2018/11/03 (Sat) 05:14

魔法使いの弟子

Akiraさま
ご丁寧な返信をありがとうございました。
ナビゲーション内に開閉ボタンを設置するといったことはできないことは理解いたしました。

申し訳ありませんが、「開閉ボタンについてはアイコンが分かりづらいようであれば「開閉」などの文字に置き換える」方法について、ご教示いただけませんか?
一応試してみたいと思います。
重ねてのお願いで恐縮ですが、よろしくお願いいたします。

vanillaice (Akira)
Akira
2018/11/03 (Sat) 16:14

To 杉山孝慶さん

こんにちは。
ちょっと確認なんですが、スマートフォンの表示は私のテンプレート(GirlOnWire)でのことをおっしゃっているのですよね? (´・ω・`)
杉山さんの場合、スマホからアクセスした際に閲覧者が見ているのは FC2ブログ公式デフォルトテンプレート(スマホ専用版) ですので、GirlOnWireを目にすることはありません。
もちろん閲覧者が自主的に「PCビュー」をクリックする、あるいはスマホブラウザの個人設定で「PC版リクエスト」を行えば別です。

で、三のボタン(この形状を一般的に「ハンバーガー」と言います)のことはGirlOnWireのことでしょうか。それとも公式テンプレートのことなんでしょうか。
後者であれば私のテンプレートとは無関係なのでカスタマイズ指南はできません。
まずその点を明確にしてください。

①正しい設定(レスポンシブ, スマホでもGirlOnWireで表示)
https://file.blog.fc2.com/vanillaice000/capture/capgirl.jpg

②正しくないというかレスポンシブ未設定(公式テンプレートで表示, こちらが現在の状態)
https://file.blog.fc2.com/vanillaice000/capture/capnotgirl.jpg

まとめます。
①の状態でのことを指しているのであれば後述する方法で修正を行ってください。
②の状態を指しているのであればGirlOnWireテンプレートではありませんので私からお答えできることはありません。

------
ハンバーガーを「開閉」のテキストに置き換える手順

<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
で検索するとhtml内に1箇所あります。これを削除し、以下の通り変更

<span>開閉</span>

続いてCSSソース(管理画面下段「スタイルシート」)の末尾に以下の内容を追加。

.mobile span {
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
border-radius: 50%;
background: rgba(158,86,154,.8);
color: white;
}

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

参考記事: FC2ブログでレスポンシブテンプレートを正しく使う方法
https://vanillaice000.blog.fc2.com/blog-entry-711.html

杉山孝慶
2018/11/04 (Sun) 07:45

魔法使いの弟子

Akiraさま

ご丁寧にご教示いただきありがとうございました。
実は、スマホの場合に公式テンプレートを使うか、GirlOnWireを使うか、決めかねておりました。
「ハンバーガー」を変更できましたので、スマホもGirlOnWireにする方向で進めたいと思います。

この「ハンバーガー」のメニュー表示ですが、とても一般的のようですが、スマホに慣れない私たち高齢者には、メニューのボタンとは気が付かないようです。(65歳の私自身が最近までそうでした。)

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

vanillaice (Akira)
Akira