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

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

テンプレート 配布中テンプレート
2017/10/02
164
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD
Axisテンプレート

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

名称 Axis
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大740px
サイド --- 320px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.4.1)
Font Awesome導入 なし(インラインSVGのみ)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 動画縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
変則2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右
(デバイス幅依存)
サイドメニュー --- 下
最終更新 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

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

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("prev-a");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("next-a");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("circle-left");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("circle-right");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>var start_pos=0;$(window).scroll(function(e){var a=$(this).scrollTop();if(a>start_pos){$('.side-pager-left,.side-pager-right').removeClass('appear')}else{$('.side-pager-left,.side-pager-right').addClass('appear')}start_pos=a});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

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

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

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

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

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

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

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

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

①について

<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 reply</h3> までを 削除

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

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

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

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

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

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

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

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

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

④について

#inner-contents { で検索するとスタイルシート内に1箇所ありますので padding: 20px 0;margin: 20px 0;変更

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

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

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

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

最終履歴 2019.1.17
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • スライダーJS変更(パフォーマンス改善及び表示時のチラツキ解消)
  • 記事編集リンクをSNSアイコン並びからプロフィールアイコンに変更

不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、スライダーのJSを変更しています ので是非アップデートをおすすめします。

更新履歴 2018.3.23

タブレットの表示不備を修正

最終更新 2018.3.21
  • Font Awesomeをバージョン4(CSS)から5(JS)へアップグレード
  • ベンダープリフィックスの整理
  • エンターページのbackground-image(各カテゴリのサムネイル)を遅延読み込み対象に

webkit用(旧Safari, 旧iOS, 旧Chrome, 旧Android) 及び ms用(ie10を含むそれ以下のバージョン)の後方互換ベンダープリフィックスを外しました。
ieでは11以外のバージョンは完全対応外となります のでご了承ください。
(ie10以下は既にサポートが終了していますので対応努力は致しません)

更新履歴 2018.1.16

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

  • 画像遅延読み込みを導入しました(デフォルトではエンターページを除くグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップのシンタックスをJSON-LDに変更しました

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

更新履歴 2017.12.2

スライダー前後ボタンを押しやすく修正しました。

Axisテンプレートのスライダー前後ボタンが使い辛い方へ

Axisテンプレートのスライダー前後ボタンが使い辛い方へ

Axisテンプレートの一部メンテナンスを行いました。 Axis - FC2ブログテンプレート - テンプレートAxisテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。 設定ページ 更新履歴 2017.10.3 個別記事下ページ送り修正 ページ送りがおかしなことになっておりました。 早々...

更新履歴 2017.10.3

個別記事下ページ送り修正
ページ送りがおかしなことになっておりました。
早々の修正で申し訳ございません。
既にカスタマイズ済みの方は
個別記事用ページナビここから を目印に以下の手順で修正をお願いします。

<!-- 個別記事用ページナビここから -->
<!--permanent_area-->
<ul class="posted-pager">
  <li class="prev-entry">
    <!--prevcategoryentry-->
    <a href="<%prevcategoryentry_url>" class="prev-a">
      <div class="preventry-text"><i class="fa fa-caret-left" aria-hidden="true"></i>Prev entry</div>
      <div class="preventry-title"><%prevcategoryentry_title></div>
    </a>
    <!--/prevcategoryentry-->
  <li class="next-entry">
    <!--nextcategoryentry-->
    <a href="<%nextcategoryentry_url>" class="next-a">
      <div class="nextentry-text">Next entry<i class="fa fa-caret-right" aria-hidden="true"></i></div>
      <div class="nextentry-title"><%nextcategoryentry_title></div>
    </a>
    <!--/nextcategoryentry-->
</ul>
<!--/permanent_area-->
<!-- 個別記事用ページナビここまで -->

緑の部位が余分ですので削除して以下の通り

<!-- 個別記事用ページナビここから -->
<!--permanent_area-->
<ul class="posted-pager">
  <li class="prev-entry">
    <!--preventry-->
    <a href="<%preventry_url>" class="prev-a">
      <div class="preventry-text"><i class="fa fa-caret-left" aria-hidden="true"></i>Prev entry</div>
      <div class="preventry-title"><%preventry_title></div>
    </a>
    <!--/preventry-->
  <li class="next-entry">
    <!--nextentry-->
    <a href="<%nextentry_url>" class="next-a">
      <div class="nextentry-text">Next entry<i class="fa fa-caret-right" aria-hidden="true"></i></div>
      <div class="nextentry-title"><%nextentry_title></div>
    </a>
    <!--/nextentry-->
</ul>
<!--/permanent_area-->
<!-- 個別記事用ページナビここまで -->

8箇所category を削除です。
コピペ差し替えをおすすめします。
お手数おかけします。よろしくお願いします。

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

海外ドラマの録画が溜まりに溜まっているあきらでございます (´・ェ・`)

あくしす
承認されました。ありがとうございます。

サンプル

Samples

ENTER PAGE DEMO
画像クリックでデモ画面へ
CATEGORY PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE 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

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

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

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

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

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

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

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

スクロールアンカーについて

About scrolling ancho

左右いずれかのカラムの縦(高さ)が一方よりも短いときにスクロールで画面外へ流れていかないようストップがかかります(スクロールアンカー)
現時点で以下のような注意点があります。

  • 「特定のプラグインやウィジェットのJS内容 + Google Chromeのグリッチ」でChromeブラウザ上でプラグイン・ウィジェットが表示されなくなる
  • アフィリエイトによってはスクロールアンカーへの掲載禁止

特定のプラグインに該当する具体的なものは「FC2動画」「FC2カウンター」「アフィリエイト」など、JSで内容を取り込むタイプのものです。表示されない、という症状が出ている場合には スクロールアンカーの解除を行ってください。

注)スクロールアンカー不要の方 で検索すると該当部位が出てきますのでガイダンスに従って削除をお願いします。

Font Awesomeについて

About Font Awesome

リリース直後は Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。

FAがどうしても必要、という方はhtml内に

注)Font Awesome(JS)必要な方この一行削除

という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。

CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome

JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。

エンターページの仕様について

About entrance page

エンターページには カテゴリの一覧 がグリッドレイアウトで表示されます。

親カテゴリ
(子あり, 子なし 共通)
子カテゴリ
デザイン
背景色 rgb(250,250,250) white
円形部位 記事総数 + in total (意味: 合計)
背景色 rgb(219,204,212)
記事総数 + articles (意味: 記事)
背景色 rgb(240,240,240)

親子別のデザインは自動で適用されます。

カスタマイズ必須

About required customization in entrance pege

  • 各カテゴリ用画像設定
  • 各カテゴリ用説明文

上記2項目はご自身でCSS内容を記して頂く箇所です。

注)カスタマイズ必須箇所

で検索されますと該当部位が出てきます。デフォルトの状態は以下の通り

/* 注)カテゴリ画像とカテゴリ説明文
#catenumカテゴリ番号 {
  background-image: url(画像アドレス);
}
#catedespカテゴリ番号:before {
  content: "カテゴリ説明文";
}
 */

カスタマイズ手順について説明します。

カテゴリ番号を把握する

エンターページにカテゴリが全て表示されていますので、ひとつづつクリックします。
別タブで開く方が作業が捗りますので

Windows
Ctrl + リンククリック

Mac
Command + リンククリック

もちろん右クリック「別タブで表示」を選んでもOKです。

category-9.html
末尾の赤字部分が各カテゴリ専用の番号です。

番号を当てはめる

カテゴリ番号が 9 だとして説明を続けます。

/* 注)カテゴリ画像とカテゴリ説明文
#catenum9 {
  background-image: url(画像アドレス);
}
#catedesp9:before {
  content: "カテゴリ説明文";
}
 */

これでカテゴリ1件分、ワンセットです
あとは画像のアドレスと説明文を入力しますが、説明文については 改行は利用できません
必ず横に続けて書いてください。また、改行タグ(br)も利用不可です。

/* 注)カテゴリ画像とカテゴリ説明文
#catenum9 {
  background-image: url(https://blog-imgs-***.fc2.com/*/*/*/***/*****.jpg);
}
#catedesp9:before {
  content: "主に猫に関する内容です。猫グッズ情報も盛りだくさんです。";
}
 */

あくまでも例文として。 長文は向きません。なるべく端的な説明文にされると良いと思います。この作業を カテゴリの件数分行ってください。 デフォルトの雛形はワンセットしか入れていませんので、コピペして増やします。
また、説明文が仮に不要だとしても contentプロパティは必須です ので、削除するのではなく content: ""; こうして 空欄 にしておいてください。

画像最適サイズは縦横比不問ですができるだけ横長で。長辺500〜600pxが妥当です。
注意!
最初の行 /* 注)カテゴリ画像とカテゴリ説明文 と最終行 */ は最後に削除しますのでコピー範囲に含めないようにしてください。

コメント状態を解除

このままでは実際のページは反映されません。
必ずコメント状態を解除してください

/* 注)カテゴリ画像とカテゴリ説明文
#catenum9 {
  background-image: url(https://blog-imgs-***.fc2.com/*/*/*/***/*****.jpg);
}
#catedesp9:before {
  content: "主に猫に関する内容です。猫グッズ情報も盛りだくさんです。";
}
 */

緑の部位が削除部分です。

完成形

#catenum9 {
  background-image: url(https://blog-imgs-***.fc2.com/*/*/*/***/*****.jpg);
}
#catedesp9:before {
  content: "主に猫に関する内容です。猫グッズ情報も盛りだくさんです。";
}
便宜上のスタイルを削除

テンプレートプレビューのため、便宜上の画像と説明文を設定しています。
カスタマイズが済みましたら

注)削除 or コメント化必須箇所

を目印に該当部位を削除してください。これで必須カスタマイズは終了です。

このテンプレートの主旨であり特徴はこのエンターページですので、表示内容や表示形態の変更についてのご相談はお受け致しません。予めご了承をお願いします。

エンターページのスライダーについて

About image slider

構成上 エンターページとカテゴリページにはサイドメニューが出ません
ので新着記事をスライダーに表示させるようにしています。
件数は個人設定を遵守しますので、件数の増減は ブログ個人設定 で行ってください。またその際にはFC2プラグイン(新着記事関連)の件数も連動します。

スライダー右の3つのリンク

The usage of 3 boxes on the right side of image slider

一番上は BLOG と称し、通常の更新順ページへと移動しますのでこれはそのまま残しておかれたほうが良いと思います。他の2つは

  • ABOUT ME
  • CONTACT

ABOUT ME はプロフィール画像 + 説明分 と、ブログ説明文がオーバーレイ(モーダル)で表示されます。
CONTACT はメールフォームを設定しています。
オーバーレイの内容を変更したい場合は

注)カスタマイズ可能部位ここから

で検索されますとhtml内の該当部位が出てきます。
例としてコメント一覧に差し替える場合は以下の通り。

<div class="modal-title">
  Comment
</div>
<ul>
  <!--rcomment-->
  <li><a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_etitle>" class="time<%rcomment_year><%rcomment_month><%rcomment_day><%rcomment_hour>">
  <span><%rcomment_month>/<%rcomment_day></span>&nbsp;&nbsp;<%rcomment_name>&nbsp;<span><%rcomment_title></span></a>
  <!--/rcomment-->
</ul>

全体幅調整の仕方

How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1300px に設定しています。 1300 で検索して頂きますと、CSSソース内に 6箇所 ありますので、6箇所全てを希望の数値(同数値)に変更してください。

ナビゲーションについて

Important thing to be careful when adding links to navigation

● ナビゲーション内リンクについて
ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。
文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に各1箇所、計3箇所ヒットします。
それぞれの

(max-width: 850px)

緑の部分 850 を 大きな数字に変更 してください。
この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。

左右カラム入れ替えの仕方

How to reverse the direction of rows

#main-container { を検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 0 60px 80px; の直下に flex-direction: row-reverse;追加

続きまして #primary { で検索。2箇所ヒットし、やはり最初のものが対象です。この括りの margin-right: 40px; 緑部分 rightleft に変更。
以上2手順です。

ドミナントカラー

Dominant colors

以下が基本色調です
数字の部分だけを抜き出して検索されますと 不透明度つきのものも全て出てきますので上手に活用してください(カラーコードクリックでコピーできます)
例) 51,51,51

rgb(250,250,250) 全体背景色, ナビ背景色 など
rgb(219,204,212) 親カテゴリ円形部位背景色, 各種ボタン関連背景色, モーダル背景色 など

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。

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

Cautions before asking for something.

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

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

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

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

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

Related post

Comments  164

きろろ
2017/10/03 (Tue) 01:12

うわっ!

風邪を引いてダウンしている間に、すっごいおしゃれなテンプレートができている!
もう、お借りします!
ふむふむ、今回はカテごとに画像が違うんですね
とりあえず、説明を読みながらカスタマイズしてみます(^^)

Akira
2017/10/03 (Tue) 02:24

To きろろさん

きろろさん、ごめんなさい。
もうDLされましたでしょうか。
私、ページ送りミスっちゃったんです (;ωq`)
カスタマイズ前でしたら再DLお願いします。
毎度毎度申し訳ないですー ( ̄∀ ̄;)

きろろ
2017/10/04 (Wed) 01:15

えっ?

こんばんは<(_ _)>
DLして、カスタマイズも終わりました。

個別記事用ページナビのところですか?
コピペして差し替えましたけど……。
まだなにか?
とりあえず、できあがりを見てみてください。
それでおかしかったら、再DLしますので(^0^;)

Akira
2017/10/04 (Wed) 13:41

To きろろさん

きろろさん、こんにちは (o'ω')ノ

直ってます。ページ送りだけ直して頂ければオッケーです。
お手数おかけしました ^^;

きろろ
2017/10/05 (Thu) 00:09

To Akiraさん

こんばんは(^^)
大丈夫ですか?
よかったですw

にしこり
2017/10/17 (Tue) 01:38

No title

お世話になっております。AKIRAさんのAxisを使用させていただいております。
エログで大変恐縮なのですが、2点ご相談させていただきます。

1,TOPページのカテゴリー画像が上の手順で修正しても表示されなくてデフォルトのままになってしまいます。

2,個別記事右サイドバーのプロフィール欄が2つも表示されてしまい、片方を消したいのですがどこをどう修正すればよろしいでしょうか?

以上、2点お手数ですが教えていただけると助かります。よろしくお願いします。

vanillaice (Akira)
Akira
2017/10/17 (Tue) 02:06

To にしこりさん

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

> デフォルトのままになってしまいます〜

カスタマイズは合ってますので、後は
/* 注)カテゴリ画像サンプルここから, 編集後は削除してください */
を目印に、ガイダンスに従って削除してください。
ここを削除しない限りいつまで経っても反映されません。
この作業は本説明ページの見出し「便宜上のスタイルを削除」の内容です。

-------

> 右サイドバーのプロフィール欄が2つも表示されてしまい〜

テンプレート内のhtml内容を削除するか、プラグインを非表示するかのいずれかです。
プラグインとは表示内容が違いますので、どちらを消すかはにしこりさんご自身でお決めください。
テンプレートの方を削除する場合には
<!-- 注)プロフィール不要の方ここから削除 -->
を目印に、ちょっとここ私ガイダンスコメントの位置間違えましたので(すみません)、
<!-- 注)プロフィール不要の方ここから削除 -->
のすぐ上の
<div class="side-menu">
から
<!-- 注)プロフィール不要の方ここから削除 -->
のすぐ下の
</div>
までを削除してください。

プラグインの方を非表示にするにはブログ個人設定の「プラグインの設定」をご利用ください。

* 重要な部位のカスタマイズ・想定内のカスタマイズについては
注)
で検索されますと全てガイドが出てきますのでご確認くださいね。
この作業は本説明ページの「カスタマイズをブラウザ上で行う方は〜」の項目に該当します。
よろしくお願いします。

にしこり
2017/10/17 (Tue) 11:41

to akiraさん

早々のご返信有難うございます!

プロフィールに関しましてはプラグインを削除し無事解決いたしました。
しかし、カテゴリー画像がどうしてもデフォルト画像のままになってしまい解決致しません。私のCSS編集部分を下記にコピペしますので問題箇所がありましたらご指摘いただけると助かります。

/***------------------------------------------
注)カスタマイズ必須箇所
------------------------------------------***/


#catenum0 {
background-image: url(https://blog-imgs-97.fc2.com/w/h/t/whtitestars/20171016105815cc8.png);
}
#catedesp0:before {
content: "巨乳娘のハメ撮り動画が見たい人はココ♪";
}

#catenum9 {
background-image: url(https://blog-imgs-97.fc2.com/w/h/t/whtitestars/bikyonyuu_5027-002.jpg);
}
#catedesp9:before {
content: "寝取られ動画が見たい人はココ♪";
}


下記に同じようなカテゴリーが並びます。/* 注)カテゴリ画像サンプルここから, 編集後は削除してください */は削除いたしました。

以上お手数ですがよろしくお願いいたします。

にしこり
2017/10/17 (Tue) 11:43

早々のご返信有難うございます!

プロフィールに関しましてはプラグインを削除し無事解決いたしました。
しかし、カテゴリー画像がどうしてもデフォルト画像のままになってしまい解決致しません。私のCSS編集部分を下記にコピペしますので問題箇所がありましたらご指摘いただけると助かります。

/***------------------------------------------
注)カスタマイズ必須箇所
------------------------------------------***/


#catenum0 {
background-image: url(https://blog-imgs-97.fc2.com/w/h/t/whtitestars/20171016105815cc8.png);
}
#catedesp0:before {
content: "簡単な説明文";
}

#catenum9 {
background-image: url(https://blog-imgs-97.fc2.com/w/h/t/whtitestars/bikyonyuu_5027-002.jpg);
}
#catedesp9:before {
content: "簡単な説明文";
}

以上お手数ですがよろしくお願いいたします。

にしこり
2017/10/17 (Tue) 11:55

Akiraさん

何度も申し訳ありません。

問い合わせの内容、自己解決いたしました!

お手数おかけしてしまい申し訳ありませんでした。

vanillaice (Akira)
Akira
2017/10/17 (Tue) 16:45

To にしこりさん(完了のご報告)

こんにちは ( ゚Д゚)ノ

解決されたということで良かったです。
お疲れ様でした :)

-
2017/10/18 (Wed) 16:10

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/18 (Wed) 16:12

To テンプレート別サイト使用の件 内緒さん

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

申し訳ございません。FC2ブログ専用ですので、Wordpressを含む他サービスではご利用頂けません。
明記すべきでしたね。以後気をつけます。
ご意見ありがとうございます :)

-
2017/11/10 (Fri) 03:43

管理人のみ閲覧できます

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

-
2017/11/10 (Fri) 03:43

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/11/10 (Fri) 15:19

To Axix利用許諾の件 内緒さん

こんにちは。
ご丁寧にお問い合わせ頂きありがとうございます。
拝見しましたが何ら問題ありませんので、どうぞ気兼ねなくお使いくださいね。
よろしくお願いします :)

su
2017/11/11 (Sat) 05:24

Akira様

Akira様(Axix利用許諾の件)

早朝に失礼します。
迅速なお返事有難うございます!また二重投稿になってしまっていた事に気付かず…申し訳ありません。
これからも愛用させていただきます。本当にご返答ありがとうございました!

su

ucchiee
2017/11/12 (Sun) 15:32

カテゴリ サムネイルがおかしい

Axis ありがたく使わせていただきました。すごく久しぶりの更新でしてすごくかっこよくていいです。
今現在カテゴリが名称未設定からNENGAまで17項目ありますが・・・・
おかしいです。
1.名称未設定にも画像を割り当ててあるのですが・・・何も表示せず
2.1から17までのカテゴリなにかすべて1づれて画像が配置されてるようにも見えます、でも全部じゃないです。(画像の名前に数字をつけてますが・・・)
3.コメントも何故か3番めの”おでかけ”だけ表記されます。他との違いがよくわかりません。

忙しい中大変申し訳ありませんが、原因をご教授いただければ思います。
よろしくお願いしますm(_ _)m

vanillaice (Akira)
Akira
2017/11/12 (Sun) 17:18

To ucchieeさん

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

> 1.名称未設定にも画像を割り当ててあるのですが・・・何も表示せず〜

名称未設定の記事番号は「0」ですが、0の指定
#catenum0
#catedesp0:before
共にCSS内容が見当たりません(未指定)ので追加してください。

---------
> すべて1づれて画像が配置されてるようにも見えます〜

どのカテゴリにどの画像を割り当てるかという意図はご本人にしかわかりません。
ズレているようであれば各カテゴリのURLと画像URLのすり合わせを行なってください。
名称未設定の「0」を失念しておられるようなので、それが原因かもしれませんが、私の方では推測しかできません。

uccihieeさんの場合は

名称未設定 - 0
Mac - 1
おでかけ - 3
Scout - 5
House - 2
MyBoom - 4
Music - 6
indigo blue - 10
ID - 7
UNDOU - 8
MOVIES - 9
iPhone - 11
wallpaper - 12
iPhone Apps - 13
iPad -14
soccer - 15
NENGA - 16

です。
トップページでの表示順は関係ありません。カテゴリに与えられている番号で指定を行なってください。
トップでの並び順と記事番号が同一ではないので混乱するかもしれません。
その場合にはカテゴリ番号順ではなく表示順でCSS指定を行なっても問題ありません。

例)
#catenum12 {
内容
}
#catedesp12:before {
内容
}

#catenum4 {
内容
}
#catedesp4:before {
内容
}

番号が正しければCSSの順は影響しません。
この方が後々楽かもしれませんね。
各内容にコメントをつけても良いですよ。



/* 日記 */
#catenum12 {
内容
}
#catedesp12:before {
内容
}

/* 英会話 */
#catenum4 {
内容
}
#catedesp4:before {
内容
}

コメントでカテゴリ名を記しておくとさらにわかりやすくなるかと思います。

---------
> 何故か3番めの”おでかけ”だけ表記されます〜

記号が間違っています。
3番のカテゴリのみ正しい記述ですので、「おでかけ〜」の文章だけが表示されているのはそのためです。

現在(誤)
説明文"

赤字の記号はhtmlで用いる記号ではありません。

(正)
"説明文"

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

htmlで用いる記号は全角のまま打ってはいけません。必ず半角英数字入力の状態で行なってください。
ちなみにこのコメント欄でもucchieeさんが用いているのは全角記号です。
”おでかけ”
↓ 半角
"おでかけ"

記号やアルファベットは半角で打つ、と頭に置いてください。

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

ucchiee
2017/11/12 (Sun) 23:50

To Akiraさん

丁寧に教えて頂いてありがとうございます。
ほぼ解決しました。
いろいろ細かいところで間違えてますね・・・

休館していたBLOGこれで、本格的に再開しようと思います。
素敵なテンプレートありがとうございます。

vanillaice (Akira)
Akira
2017/11/13 (Mon) 14:16

To ucchieeさん

今拝見しました。
修正できたようで良かったです。
こちらこそありがとうございます。
お疲れ様でした :)

-
2018/03/17 (Sat) 09:26

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/17 (Sat) 19:15

To Axisの件 内緒さん

こんばんは。とりあえず「読んだよ。了解だよ。」のお知らせです。
これから出先なので改めて追記しますね ('0')/

------
遅くなりました (*_ _)
今検索モーダル修正の最後の一つをやってますので、それが終了したらやりますね。
内緒さんはカスタマイズをすぐに再適用できるようにだけしておいてください。
ご面倒おかけします ^^;

予定
・アニメーションの再調整
・webkitベンダープリフィックスの削除(もういい加減要らんと思う)
・FontAwesomeのバージョンアップ
・新変数「管理人コメント」適用
ですかね。
よろしくお願いします ('0')/

-
2018/03/18 (Sun) 07:32

管理人のみ閲覧できます

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

chiemi
2018/03/18 (Sun) 11:48

お久し振りです。

以前お借りしていたテンプレが、やはり覚悟して弄ったけど
重さが気になりだしたので、大事に取っておきながら.....
此方に替えてみました。

大事に使いたいと思います。
良く分からないけど、(カテゴリー別の記事の写真)
この場所で編集とあってもコメント通りにするとできなくて
また
消して...と言うところを消してしまうと、画像が消えて
でない...とか、きっと何か私、間違えているんですよね。

でも、消さないでも、別の場所で変更できたみたいなので、
問題起きるまでちょっと、このまま......
自己流過ぎるけど、忙しさが一段落してそうかなぁと
みえたら、お声掛けて教えて戴こうかと思います。

ありがとうございます♡
楽しく更新したいと思います。

vanillaice (Akira)
Akira
2018/03/19 (Mon) 02:11

To chiemiさん

お久しぶりですー :)

せっかくカスタマイズまでして頂いたのに、Axisは近日中にアップデート予定です。申し訳ない。
FontAwesomeのバージョンを上げようと思いまして ( ̄∀ ̄;)
(不具合修正ではありませんのでそのままお使い頂いても問題ありません)

長く使ってくださったんですね。とてもうれしく思います :)
CSSガイドの件はメンテの際に再度チェックしてみますね。

chiemi
2018/03/19 (Mon) 09:36

To Akiraさん

あ......アプデされるんですね
頑張ります。
またそれも勉強になる.....ということで........

楽しみにしております♡

vanillaice (Akira)
Akira
2018/03/19 (Mon) 13:50

To chiemiさん

お手数おかけします。内容は殆ど変わりませんのでカスタマイズにもさほど影響は出ないというか、出ないようにします ^^;

vanillaice (Akira)
Akira
2018/03/20 (Tue) 03:34

To chiemiさん②

メンテ前にchiemiさんのCSS内容を確認しました。
恐らく「説明文不要」という意味で(かな?)
content
を書いてらっしゃらないですよね。
エンターページの記事説明文はhtmlではなくCSSの疑似要素と呼ばれるもので表示しています。で、その疑似要素の表示には contentプロパティが必須なんですね。
文章が不要な時は「書かない」のではなく

content: "";

こうして空欄にしておかないと表示されません。
消去のガイダンス部位を消すと画像も連動して消えてしまう、というのはそれが原因です。
現在のようにガイダンス付きの部位を残しておくという方法でも構いません
アップデート後にも同じことが起こりますのでお伝えしておきますね。
よろしくお願いします。

vanillaice (Akira)
Akira
2018/03/21 (Wed) 02:20

To Axisアップデートの件 内緒さん

アップデートしましたのでお知らせします ('0')/
変更内容は既にお伝えした通りですが、記事内にも記しておきます。
よろしくお願いします (o'ω')ノ

-
2018/03/21 (Wed) 07:43

管理人のみ閲覧できます

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

-
2018/03/21 (Wed) 07:55

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/21 (Wed) 15:39

To Axisアップデートの件 内緒さん②

こんにちは (●'0'●)/

それは不幸中の幸いでしたね。昨日ちょうど家族で「目」のことを話してました。
うちの息子はふたりとも色弱なんですよね (´・ω・`)
全く気にかけても卑下してもいないけど(笑)
目って大事だよね、みたいな話を。
お大事になさってくださいね。

更新履歴書くの忘れました((((笑)
公式の方は追加しました。内緒さんすみませんがお手元のものに覚えで書いといて貰えると助かります。ごめんなさいね ^^;

chiemi
2018/03/22 (Thu) 03:28

お忙しいことと思いますのに、確認くださって、ありがとうございます。
出張して帰宅が今になってしまったので、お礼が遅くなりました。
いつも丁寧に、皆さんのこと、心にかけてくださること、頭が下がります。
ありがとうございます。

ところで....

カテゴリーの説明は、書いても表示されなかったんです。
それで諦めて、まぁ特に説明はなくても大丈夫かなと思い今の形にしています。
新しくダウンロードして、再度挑戦してみます。

また一つ質問なのですが、
タブレットで見ると、トップの右三つ(About meなど)が崩れてしまっています。
またiPhoneでみると、更新順のもののみとなり、カテゴリー別の表示が出ません。

お時間あるときで結構ですので、どこが違ってしまっているのか、
教えて頂けると幸いです。

季節の変わり目で体調の管理が難しいですね
どうか、無理なさらず、ご自愛ください。

chiemi
2018/03/22 (Thu) 08:24

追記です

スマホ・タブレットの件

・スマホ版を非表示にしてあります。
・両方OSは最新です。
・ブラウザは、サファリとGoogle Chromeです。
・ほかの同じテンプレを見てもそのようになります。

vanillaice (Akira)
Akira
2018/03/22 (Thu) 11:37

To chiemiさん

こんにちは。

> カテゴリーの説明は、書いても表示されなかった〜

こちらはちょっと後回しでお願いします。

------
> タブレットで見ると、トップの右三つ(About meなど)が崩れてしまっています〜

「崩れる」というのはどういった形になっているんでしょうか。
スクリーンショットの添付をお願いします。

------
> またiPhoneでみると、更新順のもののみとなり、カテゴリー別の表示が出ません〜

スライダーと3つのリンクのみが表示されている、ということなんでしょうか。で、下に続く記事が出ないのかしら。
それとも記事内の注意書きにあるように「ログオフ状態でindex_area(エンターページ)が無視される」ことを指してらっしゃるのでしょうか。
(後者の場合はどうにもできませんのでリンク先の内容をお読みください。)
https://vanillaice000.blog.fc2.com/blog-entry-592.html

------
> ほかの同じテンプレを見てもそのようになります〜

Axisを利用して頂いている他ユーザーさんのページも同じ、という意味でしょうか。
それとも私の製作した全テンプレートが、という意味でしょうか。
いずれにしろ私のこのブログもタブレットでは崩れてるってことですよね。

------
OSは最新とのことですが、スマホはiPhoneだとしてタブレットはAndroidですかね。

・双方の機種名(iPhone7, ASUS ZenFone 3 など)
・念のためそれぞれのOS名及びバージョン名を正確にお伝えください。

お手数おかけします。よろしくお願いします。
(出かけますのでお返事遅くなるかもです。ごめんなさい)

vanillaice (Akira)
Akira
2018/03/22 (Thu) 17:02

To chiemiさん

今ちょっと出先なので自分で確認ができなくてすみません。
もしかしたら
iPadは

display:-webkit-flex;

これが要るかもしれない。
display:flex;
で検索して頂くと数カ所出てきます。その「上」に display:-webkit-flex; を追加。
仮に10あれば全てに書き出して貰わないといけませんので忍びないのですけれど (´._.`)

iPhoneだと要らないんだけども、iPadはダメなのかも ( ̄∀ ̄;)

帰宅が遅くなりそうなので先にお伝えしておきますね。実際の検証を行っていませんのでまだ不明ですがとりあえず情報だけ。
重ね重ね申し訳ないです。

-
2018/03/22 (Thu) 17:03

管理人のみ閲覧できます

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

chiemi
2018/03/22 (Thu) 17:06

わぁ.....本当に申し訳ないです。
ご心労かけていますね。本当に申し訳ないです。
早速試してみます。
ありがとうございます。

vanillaice (Akira)
Akira
2018/03/22 (Thu) 17:07

To chiemiさん

あ。ちょうど良かったです(笑) タイミングが(笑)

とりあえず考えられる原因を書いておきました。
つまり私が-webkit-のベンダープリフィックスを全て取り除いたのが原因「かもしれない」というところです。
お時間あるようでしたら試して頂けると助かります(もちろん帰宅次第私も行います)
ホントごめんなさい。

ログインの件についてはエンドユーザーではどうしようもないので、ご納得頂けるかどうかというところを含めご検討ください。
よろしくお願いします。

chiemi
2018/03/22 (Thu) 17:14

ありがとうございます。
本当に有り難いタイミング。
まずは少しでも自分で解決すべきことなのに
お手を煩わせて済みません。

甘えすぎですね。
でも嬉しいです。
そのほかに関しては、理解の上、了承致しました。
ありがとうございます。

ほんとうに、ありがとうございます。

chiemi
2018/03/22 (Thu) 17:23

To Akiraさん

済みません....

お時間あるときでよいですから....
決して無理しないでくださいね。
良いようでしたらOKとだけいただけたら助かります。


#main-container {
display:-webkit-box;/* fallback old Android */
display:-ms-flexbox;/* fallback ie10 */
display: -webkit-flex;/* fallback old safari */
 display:-webkit-flex;→こう入れてみましたが、こんな感じに全てで宜しいでしょうか?
display: flex;

vanillaice (Akira)
Akira
2018/03/22 (Thu) 17:31

To chiemiさん

まだ旧仕様の方をご利用だったんですね。ということは既に含まれているということなので効果ないですね。
ちょっとやっぱりコード見てやらないと無理みたい ( ̄∀ ̄;)
とりあえずこの方法については無意味のようなので一旦破棄してください。すみません。

また改めますね。

vanillaice (Akira)
Akira
2018/03/22 (Thu) 17:40

To chiemiさん

ホントに動作検証してんのか、って話ですよね。ごめんなさい。
この件は製作者が解決すべき問題ですのでchiemiさんのお手を煩わせて申し訳ないばかり… ( ̄∀ ̄;)

で、ちょっとうろ覚えなんですが、CSS内に

flex-flow: column nowrap;

という箇所が無いでしょうか。あるとしたら2箇所…か3箇所ぐらいあると思います。
上記を

flex-direction: column;

に書き直してみたらどうかと思ったんだけども。
あると思うけど定かでない… (´-ε-`;)

--------
私のテンプレでやってみました。
スマホから書いたのですんごい心配だけど(笑)
私のブログを見て頂いて改善されるようであれば上記内容で合ってます。
すみませんがご覧頂けると助かります。

--------
4箇所!4箇所ありました!(笑)
これで直ると良いけどなー (´・ェ・`)

chiemi
2018/03/22 (Thu) 17:50

済みません。
無理されていませんか?

ほんとうにごめんなさい。

動作確認しましたが変化なしです。

vanillaice (Akira)
Akira
2018/03/22 (Thu) 17:53

To chiemiさん

変化無しですかー!わー!どうしましょう(笑)
帰宅したら実機見ながら確認しますね。ごめんなさいホント(汗)

-----
-webkit-calc!かなぁ (´・ェ・`)

ちょっとまたやってみましたのでご覧ください。何度もすみません。
もうこれで戻らないといけないので、続きは帰宅次第。よろしくお願いします!

Chiemi
2018/03/22 (Thu) 17:59

いえいえ、申し訳ないのは私です。私自身出来る限りしますので、
無理されないでください。

chiemi
2018/03/22 (Thu) 18:35

>-webkit-calc

変化なしです。
タブレットの問題かもしれないので、
知り合いに最新タブレット(iPadではないもの)で見てもらいます。

最終、リンク先には飛ぶので、
気にしないという選択もあり....かなぁと

vanillaice (Akira)
Akira
2018/03/23 (Fri) 00:49

To chiemiさん

こんばんは。遅くなりました (*_ _)

先程帰宅して、個人的なメモをちょっと見てみたんですね。
> DO NOT use height: calc n -webkit-calc. iOS just works buggy.
って書いてある。これだ ( ̄∀ ̄;)
「高さ指定にcalc function を使うな。iOSで不安定。」
自分で書いとるがな ((((;`ー´)o

相方が深夜2時頃戻ると思います。彼がiPadを持っているので結局すぐには確認できませんが、たぶんこれで間違いないと思います。
なので私の方をこれから修正し、相方の帰宅を待つという形になります。
もしその間にここをご覧になって解消されていればその旨教えて頂けないでしょうか。
ホント何度も何度もすみません (*_ _)

-------
今修正してみました。どうでしょうか。ってもうご就寝ですよね ^^;
また追記しますね。

chiemi
2018/03/23 (Fri) 08:18

No title

おはようございます。
今日出張の為に昨日準備に追われて確認が遅くなりました。
確認しましたら.....ん、直っている.....
もう感激し過ぎて、時間も動作も止まりました。

どの部分を直したらよいのか
済みません、もうあと一押し教えてください。

遅くまで、しかも相方さんまで巻き込んでの
ご心配ご迷惑を想うと、申し訳なさ過ぎて.....
ありがとうございます。
しっかり表示されています♡

カテゴリー別と言うのは、とても素敵で
公式のあちらのブログ、憶えてらっしゃるでしょうか?
海外の方とのやり取りも多い中
必要ではない場所を飛ばして本題だけ見るには
最高のテンプレなので

前のも保存しつつ、時折リニュ感を出すにも
良いのではないかと話し合って使わせていただくこととなりました。
やはり海外の方はタブレットかスマホで確認される団体がほとんどなので、
少し拘りました。すみませんでした。

本当に素晴らしいテンプレの数々と
分かり易い、そして丁寧なケア....どうぞ、これからも宜しくお願い致します。
私も少しでも勉強を続け、迷惑を少しでもかけないよう頑張りたいと思います。

....と言っておきながら
実はまたもう一つ問題が.....

BOXサイズのところかなぁと
弄っているうちに(複製はとってあります)

http://hitohanamoyo.blog.fc2.com/img/20180323080556a07.jpg/

通常はこのようになるのですが

ベースになっている(区分けされている)薄いグレーの部分が消えました←おいおい

http://hitohanamoyo.blog.fc2.com/img/20180323080600c0f.jpg/

なので、再ダウンロードして最初からやり直しています(見直すより
例のカテゴリーの場所ともども再度やり直してみようかと思って)

今日は出張から帰って頑張ります。

ぼっちん
2018/03/23 (Fri) 11:21

助かりました

昨日のchiemiさんとAkiraちゃんの一連のやりとりを傍観しつつ「私のiPhone Xからは問題なく見えてるんだけど、なんだろ~?」って感じでいたんですけど、タブレットでの表示不具合だったんですね~ (^^ゞポリポリ
一度は「2018.3.21版」で設定してカスタマイズも済ませてたんですけど、今朝から「Latest update: 2018.3.23版」を戴いて、なんとかカスタマイズも終了 (^。^;)ホッ

chiemiさんによる不具合発見と、Akiraちゃんの大奮闘修正に感謝感謝です~♪
お二人とも、ほんとにありがとうございました、お疲れ様でした~ m(_ _)m

vanillaice (Akira)
Akira
2018/03/23 (Fri) 12:32

To chiemiさん

こんにちは。ご迷惑おかけしております。

その該当記事は
http://hitohanamoyo.blog.fc2.com/blog-entry-628.html
で合ってますでしょうか。
私の環境下(Mac)では特に問題はないようですが、今回はパソコンの見た目かしら。
全てのページでなっているのか、特定ページなのかをURL添付とともにお知らせください。
またこちらでもやはりOS名・ブラウザ名をお願いします。

取り急ぎ、上記記事に関しては記事内で利用している <span>タグの4つについて終了タグの欠損があります。
また、「歳を重ねても」の近接にある <tr> が一つ余分です。
<span style="color:white;">
を検索し、適切な箇所に終了タグの追加、及びtr開始タグの削除をお願いします。

全ページで生じている場合はテンプレートのCSS内容を疑う必要がありますが、特定の記事だけで発生する場合には記事内のhtmlを検証してくださいね。
よろしくお願いします。

------
開始・終了タグの整合性チェックはこちらが便利ですよ ↓

【 HTML終了タグチェッカー 】改訂版の再配布を致します/ ぼっちん様
https://oops0011.blog.fc2.com/blog-entry-214.html

紹介記事(弊ブログ内)
https://vanillaice000.blog.fc2.com/blog-entry-691.html

vanillaice (Akira)
Akira
2018/03/23 (Fri) 12:37

To ぼっちんさん

ぼっちんさん、こんにちは (●'0'●)/

ご迷惑おかけしますー ( ̄∀ ̄;)
Safariでheightにcalcを使うと危険、というのを完全に失念していました。
申し訳ない限りです。

ぼっちんさんにどのタイミングでお伝えしたものかと思ってましたが追ってくださっていたようで良かったです ^^;
お手間を取らせてごめんなさいね。毎度のことだけど(笑)

chiemi
2018/03/23 (Fri) 14:49

To ぼっちんさん

出張中なので、遅いお礼とお返事で、申し訳ございません。
お心に掛けて頂き、とても嬉しく有難いです。
出先なので、帰宅後、改めて、お声を掛けさせてください。
まずは、取り急ぎ、お礼まで。ありがとうございました。

chiemi
2018/03/23 (Fri) 14:55

To Akiraさん

こんにちは。

色々済みません。

今は新しく直しているテンプレが表示されているので、問題が出ていません。

テンプレを今までのものにしますね。
お手数お掛けします。

と思いましたが、前回先送りにしていた問題が丁度見えているので、先にこのテンプレでお聞きしたいです。

カテゴリの画像、設定しましたが、出ないんです。
説明は、教えて頂いたようにしましたが、何故画像が出ないのか…見ていただけると嬉しいです。
宜しくお願い致します。

vanillaice (Akira)
Akira
2018/03/24 (Sat) 01:12

To chiemiさん

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

> 何故画像が出ないのか〜

CSS内容を拝見したところ記事中の手順「カテゴリ番号を把握する」に沿っていないようです。
この番号は1から始まる連番ではなく、各カテゴリのURL末尾の番号でなくてはいけません。
例えば「赤色の花」カテゴリの番号は 342 ですから

#catenum342 {
background-image: url(画像アドレス);
}
#catedesp342:before {
content: "カテゴリ説明文";
}

こうですね。
作業手順を今一度よく読まれまして、同じ工程を踏んでくださいね。
よろしくお願いします。

chiemi
2018/03/24 (Sat) 02:05

To Akiraさん

遅い時間に申し訳ないです。
出張からの帰りが、かなり遅くなってしまって
ご迷惑かけないと良いのですが......

わぁ.....やっちゃいました。

本当にご迷惑おかけして申し訳ない限りです。
済みません。早速やり直します。
ありがとうございました。

-
2018/03/24 (Sat) 05:43

管理人のみ閲覧できます

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

chiemi
2018/03/24 (Sat) 12:40

仕事場のPCより、お邪魔致します。
無地全て解決いたしました。
色々と有り難うございました。
早速仕事のほうのブログも移行させていただきます。
本当に色々ご迷惑をおかけして、申し訳ございませんでした。

vanillaice (Akira)
Akira
2018/03/24 (Sat) 14:10

To chiemiさん

こんにちは ('0')/

説明文「なし」という状態ですが大丈夫でしょうか。意図的と解釈します(笑)
こちらこそ貴重なお時間頂きました。お疲れ様でした :)

chiemi
2018/03/24 (Sat) 16:13

To Akiraさん

はい。
説明なんですが
例えば「赤色の花」の説明が、今の段階では、
何としたらよいか考えつかないのです。
それ以上の説明も要らない感じなので.....
でも、入れ方が分かりましたので、また、説明を入れなくても
どうしておいたら良いのか、教えていただきましたので、
おいおい必要なら、また良い言葉が浮かんだら入れようかと思っています。

仕事のほうのブログでは、説明文を入れているので、仕上がりましたら
ご報告します。お時間あるとき、見ていただけたら幸いです。

たくさん勉強になりました。
ご迷惑掛けっぱなしで心苦しいですが、
大事に使わせていただくことで少しでも、ご恩返し(にもならないでしょうけど)
できたらなぁと思っております。

ありがとうございました。
(前回のコメントで「無事」を「無地」と...お恥ずかしいです。ごめんなさい)

ぼっちん
2018/03/24 (Sat) 20:11

Axisのページ送りアイコンの不具合?

Akiraちゃん、こんばんは ^^
ちょっと変な現象が現れました(爆) 先ずはスクショを貼ります。

https://blog-imgs-120.fc2.com/o/o/p/oops0011/2018-03-24-1.png
https://blog-imgs-120.fc2.com/o/o/p/oops0011/2018-03-24-2.png
https://blog-imgs-120.fc2.com/o/o/p/oops0011/2018-03-24-3.png

私のブログ上でも同じことが起きているんですけど、トップページのスライダーが動作している時に、左側のページ送りアイコンがこんな妙な表示になります。
PC画面ではこうはならないんですけど「iPhone X iOS11.2.6 Safari」にて起きております。
もしかして iPhone X 特有の不具合で他のiPhoneでは起きていないかもしれませんが、ちょっと検証して戴けないでしょうか? (笑)
実は「Axis 2018.3.21版」に設定した時に「あれれ?」と気がついてたんですけど「2018.3.23版」で直るかな?と思ってて、直ってないことにいま気がつきました (^^ゞポリポリ

vanillaice (Akira)
Akira
2018/03/24 (Sat) 22:05

To chiemiさん

こんばんは。
説明文についてはご自身が必要と感じられた時に設定すれば良いと思います。
(ここでの説明文はSEOなどにも関連していませんので念のためお伝えしておきます)

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

vanillaice (Akira)
Akira
2018/03/24 (Sat) 22:17

To ぼっちんさん

ぼっちんさん、こんばんは。

うーんどうやっても再現できない (∵`)
更に気になるのは、1枚目・2枚目の画像を見るとBlog, About meのリンクの辺がぴったりくっついてますよね。
これもおかしいですよね。

iPhoneXの実機が無いんですよね。iPhone6S, iPhone7では何度リロードしてもスクショのような症状は顕れないので、iPhoneXの固有バグなのかなぁ。わからないな (´・ω・`)

この矢印の部分はFont Awesome5なのでSVGなんですけど、3枚目でアイコンがrotateしてしまって向きが逆になっているのかそれとも、2枚目の画像を見るとスライド時にアイコン一緒に移動しているようにも見えますよね。
2枚目・3枚目のコードの状態が確認できれば話しが早いんだけども、再現できない以上難しいというか無理 ^^;
iPhoneXはOSバージョンが同じでも不具合が非常に多いというのは聞いてます。
SVG表示の問題もいくつか報告が挙がっているようなのでそれに関することかなぁ (´・ω・`)
他のブラウザではどうでしょう。SafariだけなのかChromeなどでもそうなのか。
SafariだけであればSafariのバグ、他ブラウザも巻き込んで同じ症状であればiOS11.2.6自体のバグではなくiPhoneXの機種固有バグのような気がします。
いずれにしろ再現できないので何もできなくてすみません (*_ _)

とりあえず

.flex-control-nav {
display: none;
}

をCSS末尾に追加してみるとどうでしょうか。
もちろん私の環境下では何も変わりませんし何の意味もないかもしれません。
お試し頂けると助かります。
(私の方も現在追加した状態です)

ぼっちん
2018/03/24 (Sat) 23:01

あのですね

あのですね、トップページを表示させて何も画面を操作しないでじっと眺めてますと、スライダーが切り替わる瞬間に「プルッ」って感じでアイコンが潰れたり左右反転が起きるんですけど、起きない時もあるというランダム性があるんです。

Safari
https://blog-imgs-120.fc2.com/o/o/p/oops0011/2018-03-24-4-comp.png
https://blog-imgs-120.fc2.com/o/o/p/oops0011/2018-03-24-5-comp.png
https://blog-imgs-120.fc2.com/o/o/p/oops0011/2018-03-24-6-comp.png

Chrome
https://blog-imgs-120.fc2.com/o/o/p/oops0011/2018-03-24-7-comp.png

Firefox
これは、なかなかトップページが表示されず確認を諦めました (^^ゞポリポリ

「2枚目・3枚目のコードの状態が確認できれば」← このコードとは何を指すんでしょうか?

.flex-control-nav {
display: none;
}

をCSS末尾に追記しても変化はなかったです。

そうなんです、iPhone Xってけっこういろいろと起きるんです(爆)
例えば2本指で画面をピンチアウトした瞬間に画面がチラつくこともあるんですけど、購入初日に目撃して「げっ なんだこりゃ?」って思ったし (^_^; アハハ…
OSのバージョンが上がってもそれは解消されていないし。
きっとたぶんiPhone X特有のものかもしれないですから、放置でもいいんですけどね~(笑)

vanillaice (Akira)
Akira
2018/03/25 (Sun) 02:40

To ぼっちんさん

今ちょっと内容を変更してみたんですけど、なにせ再現ができないので暗闇での手探り状態です。
これで解消されれば良いのですが。
お手数ですがご覧頂けないでしょうか。
申し訳ないですー!

> このコードとは何を指すんでしょうか〜

症状が出ている状態でのhtml及びCSSソースコード確認のことです。
これができないとなんともならない ( ̄∀ ̄;)
なので当てずっぽうというかホントに手探りで一応やってみました。
SVGを辞めてユニコードを利用しています。
これでも解消されなければ問題はSVG(のtransform-boxかな?と当初はあたりをつけました)ではなくpositionの関係かもしれません。
とにかく確認をして頂くということでお願いします。
(今アイコン小さめですが大きさは変更できます)

実は私もね、iOSとFAの相性が良くないのではないかと思ってます。
何故かというとぼっちんさんが書かれている「ブルっと震える」状態を別のパターンでも確認しているんですね。
スクロールするとFAアイコンが若干動くという現象を。
FA5はもうちょっと追った方が(掘り下げて検証した方が)良いかもしれないなぁ (´・ω・`)
とその前にFA運営自体がバージョン5以降は擬似要素の利用は非推奨とはっきり言っているので無理に使おうとするのが間違いかもですね。
ただ今回の処理で改善されないとすれば問題は別のところにありますのでぼっちんさんからの結果待ちで。すみません ( ̄∀ ̄;)
(ちなみにスクロールブルリは擬似要素利用ではありません(笑))

ぼっちん
2018/03/25 (Sun) 07:37

OKです、素晴らしい♪

Akiraちゃん、おはようございます ^^
対策、まさにビンゴですよ~♪ 現象が止まりました、素晴らしいです。

> 症状が出ている状態でのhtml及びCSSソースコード確認のことです。
> これができないとなんともならない ( ̄∀ ̄;)

なるほど、ログ取れないと対策のしようがないですもんね。
Macなら「Xcode」があるから便利なんですけど、私のようにWindowsじゃそんなツールないものねぇ!ってずっと諦めてたんですけど、なんと「iTools」ってのをいま見つけました(爆)
な~んだぁ「あるじゃん、あるじゃん(笑)」って目から鱗です (^_^; アハハ…

> これでも解消されなければ問題はSVG(のtransform-boxかな?と当初はあたりをつけました)ではなくpositionの関係かもしれません。

いやぁ、まさにビンゴなんですけど、これ、ちょっと影響大きいですよね (^^;; アセ

> とその前にFA運営自体がバージョン5以降は擬似要素の利用は非推奨とはっきり言っているので無理に使おうとするのが間違いかもですね。

あららら(爆)擬似要素非推奨じゃ「Font Awesome 5」の楽しみ方がドっと減ってしまう感じですけど、FA運営さんったら、困ったこと言ってますねぇ(笑)

夜中に「iPhone Xでスクショ動画」を撮ったんですけど、公開しなくても良さそうですね(笑)

そうそう、アイコンが痩せちゃった(笑)から、見映え上もうちょっと太らせてくださったら嬉しいです(爆)

vanillaice (Akira)
Akira
2018/03/25 (Sun) 15:57

To ぼっちんさん

ぼっちんさん、こんにちは。連日ご迷惑おかけしております。

ということはやっぱりSVGですかね (´・ω・`)
勝手にrotateとかあきらかにおかしい。困る… ( ̄∀ ̄;)

ちょっとここのところ多忙でして。
またこれから外出なので上書きは今夜になります。
で、ぼっちんさんは既にカスタマイズを済ませてらっしゃいますよね。
今回はCSS修正のみなので、記事で改めて内容変更の手順など掲載しますね。多分その方が楽だと思います。
今暫くお待ち下さいね。よろしくお願いします。

* 余談ですが私も製作にはVivaldiとBraveを使ってます ('0')/
Chromeは動作検証と閲覧だけです。

ぼっちん
2018/03/25 (Sun) 16:58

了解です ^^

> 勝手にrotateとかあきらかにおかしい。困る… ( ̄∀ ̄;)

(笑)これが一番の笑撃です、目撃すると\(><)/ギョッってなっちゃいますよ (^_^; アハハ…

> またこれから外出なので上書きは今夜になります。

ハーイ(^O^")/ お任せです~ ^^
CSSコピペで済むようでしたら嬉しいですが、ちょっと複雑さもありそうですね~(爆)

えっえっ? AkiraちゃんもVivaldiとBrave使いさんだったんですね、いや、ちょっと意外でした。
じゃあ、私もちょっとだけ真剣になってみようっと (^^ゞポリポリ

ぼっちん
2018/03/26 (Mon) 16:59

CSS修正しました

「またまたAxisテンプレート修正のお知らせです」記事を拝読して早速CSS修正完了しました ^^
おかげさまでiPhone Xで問題解消確認出来ました。
ほんとにほんとにありがとうございます m(_ _)m
font-size: 7rem; に設定しました(笑)

ところで Xcode 9 だとデフォルトで iPhone X のシュミレートが出来るみたいですね~ ^^
いいなぁ、羨ましい(笑)
Windows10でiPhone Xのシュミレートが出来るツールってないんですねぇ、がっかり (・・.)グスン
シュミレートして「why」を見つけ出したかったんですけど、残念です (^^ゞポリポリ

そうそう、余談ですけど、VivaldiをCPUパフォーマンス監視してみたんですけど、ChromeよりもHDDやRAMへのアクセスが若干多くて「夏場の利用は大丈夫?」って一抹の不安を持っちゃいました(爆)



vanillaice (Akira)
Akira
2018/03/27 (Tue) 17:59

To ぼっちんさん

お手数おかけしました。

私がVivaldiを利用している件、実際はものすごくくだらない事情なのでぼっちんさんきっとがっかりすると思います(笑)
作業時は
・Chrome --- 作業中にコメントが届いていないか確認するため
・Vivaldi, Brave --- Chromium系ブラウザであること、拡張機能などは作業時に一切不要であること

こういった理由で3ブラウザを同時に開いてやってます。拡張機能のないChromeという意味合いぐらいでしか使っていないので、リリース元からすれば不本意ではないかと ^^;
ホントはChrome + Firefox + Chromium系
の3本立の方が良いんでしょうけどね。なんとなく最近のFirefoxは敬遠しています。
なんでかは自分でもわからない(笑)

BraveはPCだとそれほどでもありませんがスマホだと結構高速ですよ。
ただしJSが「一呼吸置いてから動作する」みたいなクセがあります。

* X codeはswiftを使うことが皆無なので全然わかんないです。ごめんなさい。

ぼっちん
2018/03/28 (Wed) 08:33

了解です ^^

Akiraちゃん、おはようございます ^^

> * X codeはswiftを使うことが皆無なので全然わかんないです。ごめんなさい。

いえいえ(笑)私がずるく「why」の正体解明をAkiraちゃんに押しつけようと画策しただけ(笑)ですから、気にしないで下さいね~(笑)
ではでは、これからも宜しくお願い致します ^^
お返事無用です~ ('◇')ゞ

シムハム
2018/03/30 (Fri) 10:38

カテゴリーの画像が表示されません

お世話になります。ほかにもちらほら同じような現象の方がいらっしゃるようなのですが…
カテゴリーの画像が変更されず困っております。
とりあえずカテゴリー番号1のCSSだけ、以下のように変更してあるのですが、画像が変更されません。
ご教授いただければ幸いです。

#catenum1 {
background-image: url(https://blog-imgs-120.fc2.com/i/w/a/iwazumogana2018/icon.jpg);
}
#catedesp1:before {
content: "横浜のプロバスケットボールチーム、横浜ビーコルセアーズに関する内容";
}

ぼっちん
2018/03/30 (Fri) 11:13

To シムハムさん

横から失礼致します。
私も「Axis」利用者ですので、この質問にはお返事出来ます ^^

CSS内に
/***------------------------------------------
注)削除 or コメント化必須箇所
------------------------------------------***/
/* 注)カテゴリ画像サンプルここから, 編集後は削除してください */
#index-category-list li:nth-of-type(5n+1) .cate-thumb {
background-image: url(https://blog-imgs-114.fc2.com/v/a/n/vanillaice000/slidesamplethumb1.jpg);
}

あと数行あり

がありまして、カテゴリカスタマイズが終了しましたら、上記を削除もしくはコメント化して反映されないような処理をしませんと、いつまでも上記設定が表示されます。
いま、その状態にあると言うことなんです ^^
CSSをご確認下さいね~。

シムハム
2018/03/30 (Fri) 13:20

To ぼっちんさん

一応、「編集後は削除」の箇所は削除してるんです。
他にも何かあるのでしょうか…

シムハム
2018/03/30 (Fri) 13:25

To ぼっちんさん

あぁ!!そういうことなんですね!!
ご指摘ありがとうございました。もう一か所見落としていました!!
ありがとうございました!!

ぼっちん
2018/03/30 (Fri) 13:51

To シムハムさん

ご理解戴けたご様子で、しっかり表示出来ましたね~ ^^
安心致しました (^。^;)ホッ

シムハム
2018/03/30 (Fri) 14:18

To ぼっちんさん

本当にありがとうございました!無事解決です。また何かありましたらよろしくお願いいたします。!

vanillaice (Akira)
Akira
2018/03/30 (Fri) 18:55

To シムハムさん, To ぼっちんさん

シムハムさん

> ほかにもちらほら同じような現象の方がいらっしゃるようなのですが…〜

直接お越し頂かないことには私の方で把握することはできませんのでこちらはスルーします。
シムハムさんご自身については解決済ということでよろしいでしょうか。
お疲れ様でした。

-------
ぼっちんさん

いつもありがとうございますー。
オープンコメントにすることでこうして有志の方が降臨して問題が早く解決する、という事実に多くの方が気付いてくれると良いのだけれど(笑)
ここのところ多忙なのでホントに助かります (●'0'●)/

vanillaice (Akira)
Akira
2018/03/30 (Fri) 19:02

To ぼっちんさん

最新記事拝見しました。

FC2のCSSが読み込まれない現象は結構しょっちゅうあるんだけども、
「修正を繰り返していると全く別テンプレートのCSSと差し替わる」
現象に出くわしたことありませんか (´・ω・`)
私だけ?(笑)

一旦別テンプレートを設定してまた戻すことで解消されるので実害は無いんですけどね。
不思議な現象。100回更新を押す中の1〜2回ぐらいの発生頻度かな。たぶん。
最初はレアパターンだと思ってたけど意外と行き当たるのでレアでもない気がしてきた((((笑)

ぼっちん
2018/03/30 (Fri) 19:33

To Akiraちゃん

私レベルで解ることでしたら、お手伝いさせて戴きますね~ ^^

「修正を繰り返していると全く別テンプレートのCSSと差し替わる」
いやぁ、これはさすがに今までも一度も経験ないですよ~(笑)
もしかして、Akiraちゃん固有だったりして (≧ω≦。)プププ
CSS抜けは、仰るようにけっこう頻繁にあります、但し「プレビュー」での体験ですけどね。

今後そんなのがありましたら、真っ先にお知らせしますね~(笑)

vanillaice (Akira)
Akira
2018/03/30 (Fri) 20:56

To ぼっちんさん

文献(?)を発見しました(笑)
そして記事を書きましたYO (●'0'●)/

さっちぃ
2018/04/01 (Sun) 09:34

トップページのスライダー画像

おはようございます。
いつもAkiraさんのテンプレに目移りしております。

こちらのテンプレのメンテが一段落したようなので、カスタマイズが難しそうなのとタブレット故の問題で見送っていたAxisをお借りしました。

カテゴリー番号が管理ナンバーと違うことを理解してなくて、説明文と画像が反映されない原因に気付くのに時間が掛かりました。
カテゴリーのエントリー番号って?タブレットからだと何処を見たら分かる?
かなりテンパりました。
何度Akiraさんのページにお邪魔したことやら(汗)
結局、一通りブックマークに放り込んで編集画面で突き止めました。

カスタマイズ終了した時点でテンプレ一覧からプレビューを見ると、ぼっちんさんが記事にしておられた現象が…orz!
でも、編集画面でプレビューを見ると正常に表示されるんですよ。
こういう状態、実は頻繁に目にしてます。
これってカスタマイズが正しいの?間違ってるの?どっち?
ま、良いや。変更しちゃえ。って変更するとレイアウトは崩れたままだったり正常だったり…
ホント謎です。

本題ですが…
このテンプレってトップページを表示させた時に、2カラム表示で見ると気になりませんが、シングルカラム表示の場合だと最初のスライダー画像が一瞬ピカッと白く光る?ように見えます。
Akiraさんのページもぼっちんさんのページも同じ状態です。
Androidタブレット特有なんでしょうかね?
因みにdタブでAndroid6.0を使ってます。

長文失礼致しました。

vanillaice (Akira)
Akira
2018/04/01 (Sun) 22:06

To さっちぃさん

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

> 最初のスライダー画像が一瞬ピカッと白く光る?ように見えます〜

こちらはスライダーの特徴です。
気になるようでしたらごく単純な処理ですが
function(a){a.pause();a.play()}})});
を検索して頂き、その部分を

function(a){a.pause();a.play()}});$('.flexslider').hide().css('visibility','visible').fadeIn('slow');});

に変更(赤字部分が追加内容です)
続いてCSS末尾に

.flexslider {
visibility: hidden;
}

を追加。
ただ単にスライダーの表示を遅らせてフェイドでごまかすだけですが多少は軽減されると思います。
私のブログに同じ内容を追加しておきますのでご確認ください。
まだ気になるということであればあとはアニメーションの追加ですかね (´・ω・`)
パッと見えるのは非表示状態から表示状態になるのにかかる時間(ミリ秒数)が少ないためなので、結局のところは「非表示→表示までを引き伸ばす」という手段になります。

* 管理画面からのテンプレートプレビューはキャッシュが強く残りますので、カスタマイズ後は必ず「更新(上書き保存)」及び「設定」状態での目視確認をおすすめしています。

さっちぃ
2018/04/02 (Mon) 06:08

To Akiraさん

おはようございます。

スライダーの特徴なんですね。
端末が原因だったら、どないしよ(汗)
なんて思ってたので、理由が分かってホッとしました。

あれれ?って思っただけで、特に気にいらないっていう訳じゃないので、このままにしておきます。

vanillaice (Akira)
Akira
2018/04/02 (Mon) 17:33

To さっちぃさん

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

いつもは「ごまかし」を入れるんですけどAxisでは入れませんでした。
他にも気になる方がいらっしゃるかもなので追記しておこうと思います。
いつもありがとうございます :)

-
2018/04/05 (Thu) 09:52

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/04/05 (Thu) 17:28

To Axisカテゴリの件 内緒さん

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

> 別カテゴリーを作り、再度その中に記事をいくつか入れる〜

これはカテゴリ編集の仕方を尋ねておられるのではなく、編集後にもページを維持できるかどうかという意味でしょうか。
カテゴリ編集は個人設定でFC2ブログの仕様に則ったやり方で編成して頂くとして、現在の状態から「親カテゴリ」「子カテゴリ」など全て変わってしまいますので、希望のカテゴリ状態にして頂いた後に再度調整の必要があります。CSS内容が自動で変わることはありません。
よろしくお願いします。

-
2018/04/05 (Thu) 21:16

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/04/05 (Thu) 22:54

To Axisカテゴリの件 内緒さん②

はい。同じ方ということは存じております。
いつもありがとうございます :)

内緒さんのイメージをはっきり認識できてはいませんが、FC2は今のところ「親」「子」カテゴリのみで「孫」までは作れないんですね。子にしても偽装に近い形です。
階層的な事を言うと、親も子も同じ階層です。
例えばカテゴリのプラグインで見た目的に

親カテゴリ1
L 子カテゴリ1
L 子カテゴリ2
親カテゴリ2

こんな風になっていても、URLは
blog-category-1.html --- 親1
blog-category-2.html --- 子1
blog-category-3.html --- 子2
blog-category-4.html --- 親3

こういう感じですよね。
本当に親子関係ならば例えば

blog-category-1/child-1.html --- 親1の子1

こういう階層になります。
なのでAxisにしても「見た目上の親」と「見た目上の子」を区別することしかできません。
これはFC2ブログの特徴ですので今のところどうしようもないですね。残念ながら。
今更階層が増えても大混乱になるでしょうし、「最初にもっと考えてシステムを作るべきだった」ということでしょうか(笑)

-
2018/04/06 (Fri) 00:04

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/04/06 (Fri) 00:48

To Axisカテゴリの件 内緒さん(終了のご報告)

なかなか思い通りにはならないまでもFC2ブログは全体的にはかなり良くできてますよね。
しかし欲が出ますよねー。私なんかすごい強欲になってるわ((((笑)

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

-
2018/04/14 (Sat) 07:48

管理人のみ閲覧できます

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

-
2018/04/14 (Sat) 08:39

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/04/15 (Sun) 20:31

To Axis限定記事の件 内緒さん

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

現状のFC2ブログのシステムでは「限定記事である」「限定記事ではない」を振り分ける変数がありませんので厳密にはできないんですね。
ただし内緒さんの場合
・公開記事がNo imageになることが絶対に無い(毎回必ずサムネイル対象画像を掲載している)
という場合に限り、ご自身で書かれている修正内容が有効かと思います。
というかそれしか方法が無いです (´・ω・`)

参考記事: FC2ブログ【限定記事の場合のみ出力する変数】が追加されました
https://vanillaice000.blog.fc2.com/blog-entry-610.html

限定記事のみ出力する変数を用いて記載した内容はパスワードを入力しなければ出てきませんので、今回の内緒さんのケースでは使えない方法です。
ちょっと残念な仕様だなぁ、と私も思っています(笑)

-
2018/04/17 (Tue) 17:26

管理人のみ閲覧できます

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

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

To Axis限定記事の件 内緒さん②

こんばんは。

いえ。内緒さんが使えないというのは「限定記事のみ出力する新変数を用いる方法」のことです。
ちょっと整理しますね。

内緒さんの希望
・一般閲覧者がトップページを見た時にすぐに「限定記事である」ことがわかるようにする
・No image画像の代わりに 〝Password Required〟 に準じる文言を表示する

新変数を用いる場合
・パスワード保有者・非保有者共にパスワードを入力するまで文言は出てこない --- この点で内緒さんの希望に沿わない = 使えない

No image画像を代用する場合
・内緒さんの公開記事が「全てサムネイル画像つきである」ことを大前提として、No imageのテキストを変更することで有効

-------
こういうことですね (´・ω・`)
例えば今後内緒さんが公開記事で画像なしの記事を書かれた際には password required が表示されてしまうので注意してね、ということです。

新着リストや関連記事リストに非公開記事のサムネイルが出てしまう件については、おっしゃるように各記事の編集画面下にある「アイキャッチ画像」の機能を利用することで防げるかと思います。
ただしこちらは画像の上にテキストを載せる仕様にはなっていませんので、password requiredの文言が必要ならば画像を編集する(テキスト入り画像を作成する)必要がありますね。
まぁ、内緒さんがご自身で仰っている手順の通りなんですけど(笑)
要するにその考え方で合ってますよ、をなんか回りくどくお伝えしてしまった気が ^^;

ここはもう少し改善してもらいたいところですよね。
非公開記事についてはやっぱりYahoo!ブログのシステムが優れているように思います。
FC2も頑張ってー (´・ω・`)

chiemi
2018/04/17 (Tue) 21:53

No title

ありがとうございます。

要するにその考え方で合ってますよ、をなんか回りくどくお伝えしてしまった気が ^^;

いいえ、いいえ、
こうして教えて頂くことによって、もうひとつ先の段階を勉強することができますし
重要なのに見落としていた部分も見つけられたり、また
繰り返し知ることによって、最初には理解が難しかったことも、イメージしやすくなり
あ、これを理解しておくと(知っておくと)、〇〇に活用できるかも...って
他に分からなかったことへの道筋も、光さして見えたりします。

そんな風に、何度も助けて頂きました。

最初なんて、HTML..?
なにそれって外国語みたいにチンプンカンプン(古い^^)
それが、少しは自己解決もできるように(なった気でいるだけでも、随分な変化)

感謝しています。
ありがとうございました。

vanillaice (Akira)
Akira
2018/04/18 (Wed) 00:28

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

新変数は私が気づいていない使い道があるかもしれませんね。
気づいたらまた記事にすることもあると思います ^^;
当面はこの形でやってみてください。
いつもありがとうございます。お疲れ様です :)

yuru
2018/05/11 (Fri) 22:59

オーバーレイ広告について

いつもお世話になります。
こちらでご質問する事ではないのかもしれませんが、自分なりに調べたのですが、分からなかったので、質問させてください。
今回ご質問させていただきたいのはスマホで見た時に出て来るオーバーレイ広告(画面上に移動しながら出る広告)の事についてです。

私のブログはスマホで見るとやはり表示されるのですが、Akiraさんのこのブログをスマホで見ても、オーバーレイ広告が表示されていませんよね??
どこを修正すれば、広告表示されないようにできるのでしょうか?
または、無料で利用する場合は、必ず、表示されるのでしょうか?
お手数ですが、教えていただけると嬉しいです。


vanillaice (Akira)
Akira
2018/05/12 (Sat) 12:52

To yuruさん

こんにちは。

広告を除去できるのは有料会員のみですので、管理画面左の「有料プラン」で内容を確認・契約という手続きでお願いします。
もちろん支払うかの検討が第一で。
ジャンルによっては通常と料金設定が異なりますのでご注意ください。
よろしくお願いします。

yuru
2018/05/12 (Sat) 22:28

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

やはり、そうでしたか、ご丁寧にお答えいただきありがとうございました!

vanillaice (Akira)
Akira
2018/05/14 (Mon) 17:23

To yuruさん(終了のご報告)

はい。ご一考ください。
よろしくお願いします (o'ω')ノ

-
2018/05/26 (Sat) 15:00

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/05/26 (Sat) 15:53

To Axis トップページカテゴリ説明文の件 内緒さん

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

カテゴリ3のCSS内容が
#catedesp:before {
content: "内容";
}
になっていますが正しくは

#catedesp3:before

です。赤字部分の3の数字が足りません。
よろしくお願いします。

hiroko
2018/05/26 (Sat) 16:10

To Akiraさん

早速のお返事ありがとうございます。!!!!
できました!!!
こんなことするの初めてなので感動です!!!!
有難うございますm(__)m

そして質問がsecretになってましたね。
失礼いたしました。
他の方とも質問のシェアをしてももちろん結構です……がこんな初歩的なミス
私だけですね。
有難うございます。

vanillaice (Akira)
Akira
2018/05/26 (Sat) 16:14

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

いえいえ。結構みなさん同じ躓きをなさってます(笑)
解決できて安心しました。
お疲れ様でした :)

-
2018/06/14 (Thu) 00:14

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/06/15 (Fri) 11:35

To プロフィール欄について 内緒さん

こんにちは。

> プロフィール欄の「anout」について〜

すみません。aboutの間違いです ( ̄∀ ̄;)
単なるマヌケな誤字でございます。
全然気づいていませんでした。お知らせありがとうございます。
お手数ですが n を b に変更してくださいね。ホント申し訳なーい ( ̄∀ ̄;)

-
2018/06/15 (Fri) 20:25

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/06/19 (Tue) 13:36

To プロフィール欄について 内緒さん(終了のご報告)

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

こちらこそ教えて頂かなければずっと気づかなかったと思います。
ありがとうございます :)

-
2018/06/30 (Sat) 12:03

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/06/30 (Sat) 12:36

To La_Vita ページ送りサムネイルの件 内緒さん

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

> 「La Vita」テンプレート専用の記事がまだ無いようですので、申し訳ありませんがこちらに質問させていただきました〜

ごめんなさい。承認されていることに気づいていませんでした ( ̄∀ ̄;)
質疑の継続があれば移動をお願いします。
サムネイルの件も記事本文で説明しています。

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

OGP設定を行っていないと、内緒さんは私のブックマークレットで第三者からブログカードを入手できても、逆に誰かが内緒さんのページをカードにしたい時に情報の取得ができませんので任意設定をONにしてください。

------
別件ですが、La_Vitaテンプレートのヘッダー画像はパララックス(視差効果)になっていますが、内緒さんのブログでは機能していません。
また、デフォルトの状態でスクリプトエラーは存在しませんが内緒さんのページでは発生しています。

アフィリエイトやアクセス解析を一旦外してどれに原因があるのかを確認してくださいね。
デフォルトテンプレートのパララックスの状態は上記リンク先のDEMO画面で確認できます。
よろしくお願いします。

-
2018/06/30 (Sat) 12:36

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/06/30 (Sat) 12:40

To La_Vita ページ送りサムネイルの件 内緒さん②

あらら。行き違いになってしまいました ^^;
では以降は専用記事でお願いします ('0')/

きろろ
2018/11/19 (Mon) 00:54

iPadで(o_o)

こんばんは、きろろです。
テンプレートなんですが、なぜだかiPadのサムネイル画像が表示されません。
Akiraさんに教わってスマホからは普通に表示されているのですが、
なにもしていないのに(o_o)
お暇な時でかまいませんので、見てあげてください。
お願いしますm(__)m

vanillaice (Akira)
Akira
2018/11/19 (Mon) 10:41

To きろろさん

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

まず、手元にiPadが無いので目視確認ができません。ごめんなさい。
iPhoneとiPadは基本的に同じOSですから、iPhoneで見られてiPadでダメ、という場合には各OSのバージョンを教えてください。いずれもSafariでの表示ですか?そちらも併せて教えてくださいね。

CSSに構文エラーがあります。
.another-title {
で検索すると1箇所あります。

border-bottom: 1px solid rgb(238,238,238);

カラーコードの後ろにセミコロンが必要です。
(ここは今回の件に直接関わりは無いと思いますが)

参考記事: よくあるCSSの記述ミス
https://vanillaice000.blog.fc2.com/blog-entry-769.html

OSのバージョン違いによるベンダープリフィックスの要・不要かなぁ、と思います。またはJSの問題か。
いずれにしろバージョンを教えてくださいね。夜にはiPadが戻りますので確認したいと思います。

------
あと別件ですが、iPadで閲覧することがお有りなら、上部のFC2検索バーが邪魔じゃないですかね (´・ω・`)
検索バーはレスポンシブではありませんので表示させていると画面が左右に振れてしまいます(検索バーがビューポートを超過するため)
なので非表示をおすすめします。

vanillaice (Akira)
Akira
2018/11/19 (Mon) 10:58

To きろろさん②

ごめんなさい。よく見たらいろいろおかしなことになってませんか(笑)

まず本来は</body>の前にあったはずのjQueryとeasingのスクリプトファイルがhead内に移動しています。
そしてlazysizesやunveilhooksなどの必須スクリプトファイルも無くなってますね。
何故ホワイ??(笑)

lazyloadingが不要と判断して削除されたんでしょうか。ちょっとよくわからないな (´・ω・`)
imgに付加しているはずのlazyloadというクラス名も意図的に削除されてますよね。
どんなカスタマイズを行ったのか、そしてその意図を教えて頂けませんでしょうか。

先回どんな質疑応答をどのページで行ったのか思い出せません。きろろさん覚えてらしたらURLを教えてください。
私が「jQueryはheadに移動しろ」とか言ったのかしら。ヤダ全然覚えてない(笑)
ソースを見る限り移動の意味などは無いように思いますがもしかして私?え。わかんない ( ̄∀ ̄;)
やっぱりテンプレート関係は場所を揃えないとダメですね。わけがわからなくなってしまう (´・ω・`)
よろしくお願いします。

-----
思い出しました。YouTubeでした。
https://vanillaice000.blog.fc2.com/blog-entry-780.html

このときには上記のような異変は無かったように思います。なんでこうなった (´・ェ・`)
これ一番言いたくないんですけど、再DLをお願いします(笑)
もうその方が良いと思います。この状態からの修正はかなり困難と思われる ^^;

------ 追記
きろろさん、ごめんなさい。今日私別宅に居て長男と会えませんのでiPadが無い ( ̄∀ ̄;)
明日以降しか確認できません。申し訳ない (*_ _)

きろろ
2018/11/20 (Tue) 19:54

了解しましたTo Akiraさん

なんなんですかね?
以前AkiraさんからiPhonでサムネイルが表示されていないとご指摘を受けた時は、
iPadで見ていたんですが、その時はちゃんと表示されていたので気づかなかったんです。
再ダウンロードがいいですかね?
一応いつも複製してから、カスタマイズしていたんですけど。
とりあえず再ダウンロードしますね( ̄^ ̄)ゞ

きろろ
2018/11/20 (Tue) 20:18

To Akiraさん

えーとですね。
前回iPhonでサムネイル画像が表示されてないとご指摘を受けたのは、YouTubeを飾ってみるの記事でした。
うーーーん、あの後何も触ってないんです。
と言うより、それまでiPadで見ていたんですが、異常がなかったので
iPhonのサムネイルが表示されてないと言われて??となったくらいなんです。
Akiraさん!
大変です!iPhonもサムネイル、表示されていません。
昨日まで表示されていたのに(T . T)
再ダウンロードします(o_o)

きろろ
2018/11/20 (Tue) 21:04

To Akiraさん

再ダウンロードをしてカスタマイズだけをしました。
jQueryは今回であきらめました(>_<)
これでiPhon,iPad,PC、三つともちゃんとサムネイル画像が表示されています。
うわーーん、なんでなんだろう。
個人的にはなにもいじってないんですけどね(..;)

vanillaice (Akira)
Akira
2018/11/20 (Tue) 21:32

To きろろさん

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

うーん。なんででしょう(笑)
ちょっとよくわかりませんが何かの拍子に何かが起こったとか… かな ( ̄∀ ̄;)

「jQueryをあきらめた」というのはどういう意味ですかね。jQueryは元々入ってますよ。

------
あと検索バーの件と、OGP設定しないとページ送りのサムネイルが出ないこともお伝えしておきますね。

きろろ
2018/11/22 (Thu) 19:01

To Akiraさん

なんだったのでしょうね、謎です。
Akiraさんにここはこうしてくださいね、と言われたまま書き換えていた? つもりだったのですが。
あきらめたのはcolorboxのことです。
colorboxになぜこだわるのかと申しますと、かっこいいのもあるんですけど
例えば画像。colorboxにしておけば右クリックでコピーできないじゃないですか。
あと、YouTube?
先に共有ソース?でしたっけ? あれさえ書き込まなければ重くないんですが
頭にYouTubeの埋め込みをしてからテキストずらずら書いていると、きろろのパソ、へんな動きをしてやだったんですよ。
だからcolorboxはつかっていたいなあ、と思ったのですが。
なんかcolorboxを埋め込むと変なことになるのであきらめたということです。

>あと検索バーの件と、OGP設定しないとページ送りのサムネイルが出ないこともお伝えしておきますね
これ、Akiraさんの記事を読んでいるのですがわかりません(>_<)
またもや、お暇な時でかまいませんのでよろしくお願いします。

vanillaice (Akira)
Akira
2018/11/22 (Thu) 21:43

To きろろさん

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

colorboxは正しく設置すればちゃんと動きますよ。ただきろろさんの書き方は廃止属性のrelなどが含まれていますのでいずれ綺麗に直したほうが良い、というのは以前からお伝えしていた通りです。
厳密には属性自体の廃止ではなく以前のような自由拡張の廃止という意味で、relに好き勝手な値を入れることは現在では許可されていません。

あとcolorboxの動画なんですが、私個人としてはあの形はあまり歓迎できないというか (´・ω・`)
colorboxはモーダル(ポップアップすると背面の操作が不能になる)ですから記事を読みながら動画を再生することができないですよね。
そして画像はフツーに保存できます(笑)
画像のコピーは基本的に完全に防ぐ手段というのはないですね。スクショ撮ってしまえば良いだけですし。

OGPは以下のリンクから。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#meta_tag

メタタグの設定 > OGPの設定「有効」

ここを有効にしておかないとSNSシェアなどもまともに表示されずただのリンクになってしまいます。
検索バーは
https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar

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

以上です。

きろろ
2018/11/25 (Sun) 01:09

To Akiraさん

Colorbox……
廃止属性と言われても、私の知識では追いつきません(−_−;)
relが廃止属性だと言われても、そうなのかあ……としか、無念(T . T)
OGPと検索バーに関しては了解いたしました。
毎度毎度、ほんとうにありがとうございます。
ただ、ここ2、3日は無理かも(T . T)
風邪をひきまして、寝たり起きたりを繰り返しています。
回復いたしましたら、直します!

vanillaice (Akira)
Akira
2018/11/25 (Sun) 03:50

To きろろさん

こんばんは。
colorboxは随分前に「こう書き直した方が良いですよ」ということでコピペできるようにコードを丸々お渡ししたはずですが、その後も古いコードをお使いになっていましたので私からは特にそれ以上何も言わなかったというか (´・ω・`)

で、colorbox導入の手引きをしているのではなくて、利用を止められるということなので「まぁ、それも良いよね」という意味で止めてもいいんじゃない?的な理由を述べただけですよ。
なのでrelがどうのこうのは理解する必要は無いです。
それこそ「へー。あっそ。」でOKです(笑)

検索バーとOGPについてもご自身が必要ないと思えば無理に行う必要はないですよ。
私は伝えるべきことを伝えるのみで強制などは致しません。

はい。ご自分のペースでどうぞ。
お大事になさってくださいね。

-
2018/11/28 (Wed) 09:15

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/28 (Wed) 10:47

To Axis独自ドメインSSL後の崩れの件 内緒さん

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

表示崩れですが、崩れているというよりもCSSが全く適用されていない状態です。
通常テンプレートCSSの呼び出しは
<%css_link>
という独自変数が利用されます。内緒さんのhtmlの中にもこの文字列があるはずです。これはサーバーが自動でCSSファイルのURLに変換処理を行います。

で、本来は
blog-imgs-サーバー番号.fc2.com/*/*/*/ユーザーネーム/css/xxxx.css
という形で返ってくるはずなんですが、内緒さんの場合

blog-imgs-サーバー番号-origin.fc2.com/*/*/*/ユーザーネーム/css/xxxx.css

こんな風に -origin が付いてるんですね。この-originはファイルの原本が置いてあるサーバーを意味しています。
独自ドメインを含む有料会員はCDNを利用した高速通信(原本のあるサーバーでなく距離的に近いサーバーに置いてあるコピー(キャッシュ)にアクセスすることで高速化します)を利用できるはずで、-originが付くことはないはずです。
ところが内緒さんの場合はCSSファイルのみならずJSファイルなど合計3つのファイルに-originが付いています。
それぞれのファイルは「許可されていません 403 forbidden」の状態ですからアクセス自体できないんですね。

というわけで、FC2プログラムの不具合だと思われますので運営へ直接お問い合わせをお願いします。
https://form1ssl.fc2.com/form/?id=15028

送信の際には
・CSSやJSファイルに-originが付いています
・ファイルを開くと403 forbiddenです
この2点を伝えるようにしてください。よろしくお願いします。
お手数ですが結果だけ教えて頂けると助かります。

-
2018/11/28 (Wed) 15:20

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/28 (Wed) 15:53

To Axis独自ドメインSSL後の崩れの件 内緒さん②

はい。よろしくお願いします。
これはすぐにでも対処してもらわないと困りますよねぇ (´・ω・`)
内緒さんだけなのかしら。それとも同じ目に遭ってる方がいらっしゃるのか ^^;

きろろ
2018/11/28 (Wed) 19:53

To Akiraさん

こんばんは、風邪治りました。
はやっているらしいのでAkiraさんもお気を付けてください。

>colorboxは随分前に「こう書き直した方が良いですよ」ということでコピペできるようにコードを丸々お渡ししたはずですが、その後も古いコードをお使いになっていましたので私からは特にそれ以上何も言わなかったというか (´・ω・`)
そう、そうなんです。Akiraさんにコピペできるようにコードをいただいたのですが、ポップアップしうなかったんですよ。で、私なりにAkiraさんの書いてくれたコードと見比べてみたんですが、私のほうのコードがなんか複雑? なんと言ったらよいのでしょうか?
とにかく、Akiraさんからいただいたコードではポップアップできなかったんです。

もしかしたら、設置の仕方から違うのでは? と最近では思うようになりました。
きろろのcolorboxはかなり前に、それこそAkiraさんのテンプレートをお借りする何年も前のものなので。
まあ、そろそろ廃止する方向性で考えています。

OGPと検索バーのほうは完了しました。ありがとうございましたm(_ _)m

vanillaice (Akira)
Akira
2018/11/29 (Thu) 16:17

To きろろさん

rel="xxx" だったものを class="xxx" に変えないと動かないですよ。ってもうご利用を辞めるのだからそれは良いか(笑)
OGPと検索バーの方、お疲れ様でした。いつもありがとうございます :)

きろろ
2018/11/30 (Fri) 00:24

To Akiraさん

はい、AkiraさんのYouTubeを飾ってみるで充分なのでw
いろいろとありがとうございました。
年内は忙しくなりますので、よっぽどのことがなければお邪魔しないと思います。
また来年もよろしくお願いいたしますm(_ _)m

くま
2018/11/30 (Fri) 13:57

To Akiraさん

Akiraさん、こんにちは!
原因が判明しました。
私が有料決済時のクレジットカードを変更していて、そのカードでの決済が反映されておらず、あのようなことになってしまっていたようです。
お騒がせいたしました、現在は正しい表示に戻りましたm(__)m
早急なご対応大変助かりました、感謝します!!
今後ともどうぞよろしくお願いいたします(•ᵕᴗᵕ•)⁾⁾ぺこ

vanillaice (Akira)
Akira
2018/11/30 (Fri) 15:10

To きろろさん

はい。こちらこそ良いお年を。ちょっと早いけど(笑)

vanillaice (Akira)
Akira
2018/11/30 (Fri) 15:11

To くまさん

こんにちは ('0')/

それも考えましたがそれでしたか(笑)
独自ドメインと有料会員の支払いって別々ですよね。コミコミにしてくれれば良いのに ^^;
原因がわかってホッとしました。お疲れ様でした ;)

NONONO
2019/04/11 (Thu) 00:45

エンターページを自分の好みのものだけ表示する方法とかはありますでしょうか?

vanillaice (Akira)
Akira
2019/04/11 (Thu) 01:34

To NONONOさん

円形のカテゴリ記事数が取得できなくなります。
どうしてもという場合はhtml内にある該当部位の独自変数を削除して特定のカテゴリURLやカテゴリ名やカテゴリNOをダイレクトに入れ、必要な数を複製してください。記事数表示はあきらめるか件数が増えるたびに書き換えるかです。
かなりの手間を要すると思いますので自己責任でお願いします。

NONONO
2019/06/14 (Fri) 00:01

To Akiraさん

早速のお返事ありがとうございます。!!!!
できました!!!
早速やってみたいと思います

-
2019/07/08 (Mon) 17:11

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/08 (Mon) 20:59

To Axisの件 内緒さん

こんばんは。

こちらはドロワーには切り替わりませんが大丈夫でしょうか。
で、本記事にあるように

注)

で検索(Ctrl + F)するとカスタマイズが想定される部位についてガイダンスが出てきますので、事前にご確認をお願いします。

・プロフィールのプラグインを削除(実際はプラグインではなくテンプレートhtmlに書かれている内容ですので個人設定による非表示不可です, テンプレートのhtml内から削除してください)
・SNS削除
・MENU内の不要な項目を削除

については既に記載されていますのでご確認ください。

-----
【プロフィール画像のサイズ変更】

#profile {
で検索するとスタイルシート内に1箇所あります。
その括りの

width: 200px;
height: 200px;

赤字部位を同数値に変更してください。
プロフィール画像は仮にプラグインを非表示にしていても、いろんな用途で利用されます(訪問履歴やOGPなど)ので、できれば設定しておいた方が良いですよ。

OGPというのはSNSシェアに用いられるシステムですからSNSシェアを除外するなら関係なさそうですが、本テンプレートでは個別記事のページ送りにサムネイル画像を出すためにOGP情報を用いています。
記事内に対象画像が無い場合にはプロフィール画像が表示されます。

なのでSNSシェアを除外するとしてもOGP設定は行ってください。以下のリンクから設定ページへ行けます。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#meta_tag

-----
【リンクの順序変更】

変更は行を入れ替えるだけです。ただしブラウザ上でカスタマイズする場合は以下のページ内容に気をつけてください。
参考記事: ナビゲーションにリンクを追加した後の見た目がおかしくなる方へ
https://vanillaice000.blog.fc2.com/blog-entry-647.html

以上です。よろしくお願いします。
(テンプレート内のガイダンスがわかりにくければその旨お伝えくださいね)

-
2019/07/09 (Tue) 17:21

管理人のみ閲覧できます

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

-
2019/07/09 (Tue) 18:23

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/10 (Wed) 11:18

To Axisの件 内緒さん(終了のご報告)

こんにちは。

> プロフィールの削除の件ですが、解決しました!〜

プロフィールはできればテンプレート内のものをお使いになると良かったですね。スマホでの表示負荷をごくわずかですが軽減させるような仕様になっています(パソコンではあまり変化ありません)
テンプレートに公式プラグインと重複する内容がある時、大抵の場合は意味があって製作者が入れています。プラグインの方はボタンひとつで簡単に非表示ができますがテンプレートのhtmlは「削除」ですから復元が困難です。
なのでこういうケースが今後もありましたら、「プラグインにあるものを入れているのは何故なのか」を製作者に直接お尋ねになると良いと思います。

お疲れ様でした :)

-
2019/07/10 (Wed) 17:58

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/10 (Wed) 23:39

To Axis SNSの件 内緒さん

こんばんは。

> 上部余白が広くなってしまい狭めたい〜

恐らくスマホでの見た目をおっしゃっているのだろうと思うんですが、余白が大きいのは記事が無いためです。プロフィール画像の上に記事が表示された時にはページ送りも表示されるようになりますので、ページ送りとの余白が必要です。
なのでテスト投稿などをされまして状態を確認してください。

> 記事内の「シェア」ボタンをなくしたい〜

<ul class="sns-navigation-ul">
で検索するとhtml内に1箇所あります。これを含み
</ul>
までを含んで削除です。

よろしくお願いします。

-
2019/07/11 (Thu) 07:07

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/11 (Thu) 12:16

To Axis SNSの件 内緒さん②

こんにちは。

>> html内に1箇所〜

とお伝えしたんですが、実際には2箇所でした。ごめんなさい。
今回の削除対象は近接に

注)SNSリンク不要の方ここから削除

と書かれて「いない」方です。二度手間ですみません。

-
2019/07/11 (Thu) 18:57

管理人のみ閲覧できます

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

-
2019/07/13 (Sat) 20:30

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/13 (Sat) 22:08

To Axisリンク等の件 内緒さん

こんばんは。

> お問い合わせの部分を一部カテゴリもしくは記事へ〜

お問い合わせ
で検索し、この文字列のすぐ上の行
<label for〜 省略
から
〜省略〜お問い合わせ</p>
までを削除。

削除した箇所に

<a href="遷移先アドレス">
<p>タイトル</p>
<p class="widget-description">副題</p>
</a>

上記内容を追加。

-----
> お問い合わせはサイド部分へ移動させたい〜

プラグインフリーエリアを利用して

<label for="contact-modal-trigger" id="contact-modal-trigger-label">Contact</label>
<p class="widget-description">お問い合わせ</p>

上記内容をプラグインhtmlに入力・保存。
テキストをどのように表示するか(見た目のこと)私の方では判りかねますのでご自身でスタイリングをお願いします。

また、上記内容はプラグインフリーエリアではなくテンプレートhtmlに直接入力もできますがhtmlが複雑になります。
なのでプラグインを利用し、他テンプレートに変更した際には機能しなくなりますので削除あるいは非表示化を行ってください。
よろしくお願いします。

あと、記事が1件しかありませんので内緒さんがどのような方針なのかが見えてきません。
このテンプレートは記事数・カテゴリ数が少ない場合は「向かない」という点を念の為お伝えしておきますね。

-
2019/07/14 (Sun) 06:54

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/14 (Sun) 12:31

To Axis モーダルの件 内緒さん

こんにちは。

> タイトルのフォントが反映されず〜

欧文フォントに「日本語」の概念はありませんので、同じ書体にするには英字タイトルにする必要があります。
そしてこのリンクは閲覧者が見てわかるテキストにしてくださいね。
「Title」では意味がわかりませんので、特定の記事に飛ばすのであれば記事タイトルにするなど、意味の通る内容になるよう工夫してください。

-----
> コンタクトというリンク部分が押しても反応せず〜

ひとつ作業を忘れていました。ごめんなさい。

<!-- 「Contact」用オーバーレイここから -->
で検索し、この文字列を含め
<!-- 「Contact」用オーバーレイここまで -->
まで(上記文字列含む)をカット (Ctrl + X)

すぐ下にある
<!--/index_area-->
の直下に
以下の内容を追加してください。

<!--not_index_area-->
ここにカットした内容をペースト(Ctrl + V)
<!--/not_index_area-->

赤字部分はペーストする前に追加してください。別にペースト後でも良いけど(笑)
ともかくペーストした内容を赤字で挟むようにしてください。

あと、<label>要素内に入っているテキスト部位しかリンクになりませんので、現状だと「メールはこちらから」の部分はリンクになりません。非常に押しづらいと思いますので以下の通り修正してください。

<label for="contact-modal-trigger" id="contact-modal-trigger-label">お問い合わせ<br>メールはこちらから</label>

下のp要素は削除。これはどうスタイリングするかによりますが、今の見た目のままで行くのであれば上記に修正した方が良いと思います。
よろしくお願いします。

-
2019/07/14 (Sun) 22:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/15 (Mon) 16:30

To Axis モーダルの件 内緒さん②

こんにちは。

> 赤字と同じものが記載されておりました。〜

他の部位は関係ありませんので指示通りの作業を行ってください。

<!-- 「About me」用オーバーレイここまで -->
<!--/index_area-->

<!--not_index_area-->
<!-- 「Contact」用オーバーレイここから -->
省略
<!-- 「Contact」用オーバーレイここまで -->
<!--/not_index_area-->
<!--not_index_area--><!--not_category_area-->
<!-- トップページここから -->


赤字は追加する内容、赤字に挟まれているのがペーストした内容、太字はもともと在る内容です。
よろしくお願いします。

-
2019/07/15 (Mon) 21:09

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/16 (Tue) 14:00

To Axis モーダルの件 内緒さん(完了のご報告)

こんにちは。

記号とか目が疲れますよね(笑)
修正できたということでお疲れ様でした :)

-
2019/10/06 (Sun) 12:49

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/10/06 (Sun) 14:37

To Axis背景変更の件 内緒さん

こんにちは。

> 下記のように背景を変更したのですが反映されません〜

変更内容の方は合ってます。原因は最後の作業にあたる「便宜上のスタイルを削除」がまだ手つかずの状態ですね。これを行えば作業完了です。

注)削除 or コメント化必須箇所

の部位を削除してくださいね。よろしくおねがいします。

-
2019/10/06 (Sun) 15:34

管理人のみ閲覧できます

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

ピルの個人輸入
2019/10/06 (Sun) 16:03

カテゴリーの背景変更について

カテゴリーの背景画像を変更したい場合、こちらの背景アドレスも変えなければいけないんでしょうか?
ここを変えてないのが原因でしょうか?よくわかっておらずすみません><

#index-category-list li:nth-of-type(5n+1) .cate-thumb {
background-image: url(https://blog-imgs-114.fc2.com/v/a/n/vanillaice000/slidesamplethumb1.jpg);
}

#index-category-list li:nth-of-type(5n+2) .cate-thumb {
background-image: url(https://blog-imgs-114.fc2.com/v/a/n/vanillaice000/slidesamplethumb2.jpg);
}

#index-category-list li:nth-of-type(5n+3) .cate-thumb {
background-image: url(https://blog-imgs-114.fc2.com/v/a/n/vanillaice000/slidesamplethumb3.jpg);
}

#index-category-list li:nth-of-type(5n+4) .cate-thumb {
background-image: url(https://blog-imgs-114.fc2.com/v/a/n/vanillaice000/slidesamplethumb4.jpg);
}

#index-category-list li:nth-of-type(5n) .cate-thumb {
background-image: url(https://blog-imgs-114.fc2.com/v/a/n/vanillaice000/slidesamplethumb5.jpg);
}

vanillaice (Akira)
Akira
2019/10/06 (Sun) 17:14

To ピルの個人輸入さん

> /* 注)カテゴリ画像とカテゴリ説明文*/
これらを削除であっていますか?

いえ。違います。二件目のコメントで記された内容の方も不測しています。
注)削除 or コメント化必須箇所
上記を目印にしてください。スタイルシート内に1箇所あるはずです。スクショに従って該当範囲を削除です。

https://file.blog.fc2.com/vanillaice000/miscellaneous/useraxisthumb----1000.png

-
2019/10/06 (Sun) 17:33

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/10/06 (Sun) 18:37

To Axis背景変更の件 内緒さん(完了のご報告)

ひとつ背景未設定のものがあるようですが、変更できているのを確認しました。先程の私のコメントの「不測」は「不足」の誤字でした。今更だけど(笑)
お疲れ様でした :)

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