Transit - ブログ内期間限定配付

2019年07月10日
ブログ内限定配布
33
HTML5 CSS4 Limited RWD Dark
Transitテンプレート

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

最終更新 2019.7.28
  • 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正

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

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

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

<li class="comment-btn-list"> で検索するとhtml内に4箇所あり、2つ目 が対象です。

<li class="comment-btn-list"><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a></li>

上記内容を以下の通り 変更

<li class="comment-btn-list"><!--comment_author--><!-- <!--/comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--/comment_author--></li>

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

名称 Transit
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大778px
サイド --- 最小280px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
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 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応

とらんじっと
今回は特殊仕様です。

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

Yahoo!ブログからお引越しされた方が苦労されているようで。いきなり「カスタマイズ」とか言われても… ねぇ (´・ω・`)
そこで今回は FC2ブログのシステムに慣れつつカスタマイズ導入編・初級編 ということで、極力簡単にカスタマイズできるようなものを作りました。そして明確なターゲットがあります。

  • 超初心者(htmlもCSSも全くわからない)
  • 記事に画像掲載が少ないため要約表示タイプへの変更をためらっている(トップがNo imageだらけになるから)

超初心者を想定していますので、今回は「すべきこと」「絶対にやってはいけないこと」を作業のコツなども交えながらお伝えしていきます。

まずはカスタマイズの指南をチェック

到るところにカスタマイズの手助け・指南を書いてあります。カスタマイズを行う前に、またご質問をされる前に必ず確認をお願いします。

今あなたが見ているページで特定の文字列を探すには

Ctrl + F キー

を利用してください。ブラウザのページ内文字列検索機能です。htmlやCSSというのは内容が長大ですから目視では到底探せませんし時間の無駄です。本テンプレートでは(というか私のテンプレートは全て)
注)
で検索すると出てきます。実際に検索してみて、自分が探している答えが記されていないか事前にご確認ください。

その中でも今回の最重要部位は

注)主要カスタマイズ用

と記されている箇所で、カスタマイズ濃厚箇所をひとつにまとめてあります。もうこれ以上簡単親切にはできない、というところまで細かくやってますので、作業の仕方さえわかればこのページの最上部に掲載した画像のように「白背景から黒背景へ」なども簡単にできるはずです。

カスタマイズで苦労するのは「何が対象で」「どこに在るのか」「どうやって見つけるか」なので、これらの手順を省けるだけでも難易度が下がると思います。下がると良いな ←

今回3種のCSSを配付しますが、この3種についても「主要カスタマイズ用」としてまとめられているものをいくつか変更しただけです。

--body-color: rgb(244,236,230);

変更するのは緑部位のみです。:(コロン) の前にあるハイフン2連続に続く文字列は変更してはいけません。また、最終の ;(セミコロン) を消してしまわないよう注意してください。これが消えると大災害を引き起こします(笑)

上記はカラーコード変更の例で10進数を用いていますが、#6桁数字 の16進数でも構いません。また rempx に置き換えても構いません。たぶんpxの方が馴染みがあって直感的に指定できるかもしれませんね。

単位を変更して良いのは「rem」から「px」のみです。それ以外は単位を変更したり、単位をなくしたりあるいは付け加えたりなどは行わないよう注意してください。

IE非対応です

カスタマイズの便宜も目的でしたので、そのためにはCSS4の利用が必須。レベル4に対応できないIEでは閲覧できません。「IEだから見られない」という方へはGoogle ChromeやFirefoxといった素晴らしいブラウザを全力で勧めてください。その方が対応するよりもよほど親切というものです。

ヘッダー画像の準備

ヘッダー画像は 2つ 用意してください。同じ画像のサイズ違いです。パソコン用は横1600px程度、スマートフォン用は横800px程度。横長のものを選ぶようにしてください。大きすぎるように感じるかもしれませんが、高dpiデバイス(解像度の高い端末)では画面サイズの2倍以上の実寸が無いとぼやけて見られたものではありません。現行のスマートフォンのほとんどが高dpiです。

とはいっても流石にスマホで横1600pxの画像は必要ありませんので、ページ表示への負担を減らすためにパソコン用とスマホ用を別で準備します。本来は共通にしても良いんですが、超初心者向けカスマイズということでアメだけでなくムチも必要(笑)

画像の容量は必ず削減してください。メガバイト級の画像をそのままヘッダーに設置してはいけません。画像のサイズ(横×縦)と画像の容量は別物です。解像度をできるだけ維持したまま容量だけを削減することは可能です(ロスレス圧縮)
以下はおすすめサイトです。

Tiny PNG
Squoosh

ともかくもう、今はページの速度が遅いと検索エンジンから正当に評価してもらえませんし、スマホのヘビーユーザーはとかくせっかちなものなのでブラウザバックされないよう容量は調整する、と。

--pc-background: url(ここのアドレスを差し替える);

緑の部位以外は変更しないよう気をつけてください。アドレスを変更するだけです。

カテゴリなどのページはテキストのみリスト形式です

Yahoo!ブログではそんな感じだったのでは。要約タイプの場合「トップ」「カテゴリ」「月・日別」「タグ」のページ種では共通デザイン、というのが多いのですが、今回は変えました。なにせ「サムネイルが足りないよぅ (;ωq`)」な方へ向けて作ったものなので(笑)

ただし「検索結果」にはやはり画像と文章があった方が良いと思いますので、以下のような形にしてあります。

各ページ種の 記事表示件数 は個人設定で行います。

「記事の設定」ページ

リンクの追加や変更

こちらはスタイルシートではなくhtmlの方です。注)予備リンク で出てきます。予備のリンクとして About と入れてあります。不要ならば確実に削除してください。

無効・不要・空のリンクをそのまま放置する方が多いのですが、リンクと思しきものが記載されていれば必ず押す人が出てきます。訪問者を苛立たせたり戸惑わせたりしないために不要なものは綺麗に削除してください。

行単位での削除や移動にはコツがあります。基本はコピー&ペーストです。

    <!-- グローバルナビゲーション -->
    <nav id="horizontal">
      <div id="navi-scroll">
        <ul id="navi-item">
          <li><a href="<%url>">ホーム</a></li>
          <li><label for="category-modal-trigger" id="category-modal-trigger-label">カテゴリ</label></li>
          <li><a href="<%url>archives.html">全記事リスト</a></li>
          <li><a href="#">ABOUT</a></li><!-- 注)予備リンク, ABOUTのテキストを適宜修正+リンクアドレスを # と差し替え, 不要の方この一行削除 -->
          <li id="sp-hide"><a href="<%url>?xml" target="_blank" rel="noopener noreferrer">RSS</a></li>
          <li id="search-navi"><label for="search-modal-trigger" id="search-modal-trigger-label">サイト内検索</label></li>
          <li><a href="<%server_url>control.php">ログイン</a></li>
        </ul>
      </div>
    </nav>
    <!-- グローバルナビゲーションここまで -->

上記は実際の内容と同じものです。リンクを増やしたければ

<li><a href="<%url>">ホーム</a></li>

あたりを複製すると良いと思うんですが、みなさんどうやってコピーします?こうやると良いですよ ↓

ドラッグ選択範囲わかりますかね。コピーしたいもののお尻(文末, この場合は</a>の右側)から頭へ向かってマウスを動かします。文頭から文末ではなく逆です。そして文字が途切れたところで左クリックを離すのではなく、上の行のお尻まで を選択します。そしてマウス右クリック ではなく キーボードの

Ctrl + C

でコピーです。リンクの複製ではなく削除であれば、同じ範囲をドラッグ選択後 Delete キー押下です。

コピーしたものをペーストするときは、例えば「RSS」の下に追加するならば、RSSの後ろの</a>のお尻にカーソルを併せてEnter キー押下 ではなく お尻にカーソルを合わせたらそのまま

Ctrl + V

でペーストです。

このやり方が最短最速でミスが発生しません。要素の頭の位置もちゃんと揃っていますよね。みなさん大抵改行してからこの 要素同士の頭の位置を揃えるためにスペースを連打してしまう んですね。しかも 全角で。htmlやCSSを編集する時に全角文字(スペース含む)使っちゃダメですよ。絶対に。特にスペースは目に見えませんので気づきにくいんです。全角打ったらhtml構文即死です。場合によってレイアウトも崩れます(地味に, だからさらに気づきにくい)

上手くペーストできたらあとは href="ここに遷移先アドレス"ホーム のテキストを書き換えます。

あとナビゲーションに入れるリンクは 厳選してください。あれもこれもなんでもかんでも入れるのではありません。ここはグローバルナビゲーションと言って、サイト内の主要なページを行き来するためのもの です。

カテゴリ数が20も30もある方がナビに全部リンクを入れてしまうことがあるんですが、もうそいうことはしない。今回はすぐにカテゴリ一覧を見られるようにモーダル(クリックすると全画面で表示される)を入れてあります。その代りパンくずリストの記載を省きました。FC2ブログの階層はそんなに深くないのでカテゴリ用モーダルだけで十分かと思いまして。構造化マークアップで検索ロボット用パンくずリストは入れてあります。

あとついでですが、Yahoo!で言う「マイページ」はFC2の「管理画面」にあたります。ですがFC2は非常に開けたサービスで、検索からたどり着くユーザーも結構多いんですね。つまり「FC2開設者ではない人」が閲覧する可能性がYahoo!と比べて高いんです。アカウント非所有者が管理画面へのリンクを押すと、FC2ブログアカウント取得を促すページへ誘導されます。そのためFC2ブロガーにしか通じない「管理画面」ではなく「ログイン」という表現を取っています。

ここは好きに変更して構いません。事のついでにweb一般事情を絡めて説明しているだけのことです。ただFC2ブログで「マイページ」とは言いませんので、変更するとすれば「管理画面」「Admin」になるかな、と思います。

記事編集リンク

旧Yahoo!ブロガーさんはこれが必要ですよね。自分の記事を読んでいる時に誤字に気づいたら即編集ページへ、というやつです。本テンプレートでは 個別記事下のプロフィール画像 がリンクになっていますのでクリックしてご確認ください。わかりづらくしているのはわざとですよ。誰にでも押せてしまうので目立たないようにしているのです ^^;

個別記事下プロフィール

プロフィール文にドカドカと長文を放り込むと後々難儀ですよ、ということで短文・端的な文章構成をおすすめします。プロフィール文に動画とか大量の画像とかはちょっとどうかと思う次第。本テンプレートで「バランスがちょうど良い」と思われる文章量が恐らく程よい加減だと思います。長文は公式プラグインの「フリーエリア」へどうぞ。

とはいえプラグインと同じ文章がデフォルトですから、書き換えたい方は 注) で検索をされまして、探し当てましたらガイダンスに従ってください。

また、プロフィール画像については 500〜600px四方の正方形 が最適です。縦長、横長ではなくプロフ画は正方形が最適解。後々になって自分が一番困らなくて済むのが「正方形」です。

2種類のタグ

旧Yahoo!ブロガーさんはどうだろ。現時点でタグを指定している方は少ないかも。とりあえず、自ブログ内で同じタグがついた記事をまとめたページに遷移するのが記事タイトル下のものです。

記事フッター付近にあるタグは外部ページ、つまりFC2のタグポータルページへの遷移です。同じことに興味を持っているユーザーさんを探せるかもしれませんので、交流を大事にするYahoo!ブロガーさん向けに入れておきました。削除可能です。見た目をハッシュタグと同じにしておきましたのでFC2と関係の無い一般の方でも用途はわかると思います。

サイドメニュー「プロフィール」「新着記事リスト(サムネイル付き)」

公式プラグインにはプロフィールがあり、デフォルトですから開設時に既に表示されていますし、新着記事リストも公式プラグインにあります。テンプレート製作者が「明らかにプラグインと重複するのに入れている何か」には意味があります。今回の意味は lazyloadが適用されている 点です。lazyloadというのは画像のアクセスを遅延させることでページの表示スピードを上げる、というものです。スマホなど小さな画面ではサイドメニューは下に下がりますので、初回のローディングでは画面内に入って来ません。画面外にあるならば一度にアクセス(通信及びダウンロード)する必要はありませんよね。スクロールして画面に入る直前に取得すれば良いわけで。要は負荷の分散です。

というわけなのでテンプレートhtmlからの削除ではなく プラグインの非表示 をおすすめします。プラグインはテンプレートの仕様によって表示したり非表示にしたり、その都度考慮すべき内容ですから、「プラグインの順序移動の仕方がわからない」「表示・非表示の切り替えがわからない」という方はこの機会に覚えてください。

「プラグインの設定」ページ

OGP設定を有効化

個別記事には前後ページのサムネイル画像が出るようにしてありますのでOGP設定を行ってください。
* OGP = SNSシェアなどに利用されるもの, このプロゥトコルでもって情報を正しく伝えることができる

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

レスポンシブ設定

もうこれは 当たり前。スマートフォン版の使用を停止して環境を整えましょう。スマートフォンで閲覧できなくなるという意味じゃないからね?パソコンとスマホで同じテンプレを表示させるという意味です。たくさんの利点がありますが今回は割愛。

「スマートフォン版の表示設定」無効

本テンプレートの製作理念

画像の掲載が少なく、要約表示テンプレートにするとNo imageが並んでしまう。その難点は確かにありますね。とはいえ サムネイル画像設定必須の時代 と言っても過言ではありません。代表画像の設定はSEOにも関わっています。SEOというか、諸々のチャンスを手にできるかどうか、という感じでしょうか。

ですから今後はできるだけ代表画像を設けるようにすると良いですね。FC2ブログの場合は記事内に画像を掲載せずとも アイキャッチ画像 機能を使えばOGPやトップページだけに画像を表示することができます。

本テンプレートは FC2ブログで一般配付されている要約タイプテンプレートへ切り替える前の試験的テンプレート と捉えて頂きたいと思います。カスタマイズが極力簡単に済むようにした代わりにソースコードは非合理的・非効率なものになりました。それでも良いと思うんです。ソースの効率とか言われてもな (´・ω・`)
って感じだし(笑)

FC2ブログの要約タイプで取得できる記事内容の文字数は 200文字 で改行などが取り除かれますので文章は全て横一列に繋がります。ですから200文字というのはちょっと多すぎると思うんですね。トップで読むとしてもせいぜい2〜3行じゃないかと思います。なので多くの製作者は文字数に制限をかけ、80文字程度にしてあることが多いかな、と思います。

ですが今回は 200文字って大体このぐらい というのを感覚で掴んでもらいたいので制限をかけずそのまま表示しています。

あとグリッドデザインのように「サムネイル + 文章」という構成のものが整然と並んでいる場合、サムネイルの無い記事は見逃されやすいかもしれません。縦(高さ)自体も小さくなりそれだけでも存在感が薄れてしまいますし、やっぱり画像は目が行きやすいですよね。なので今後の方針としては「大事な記事にはサムネイルをつける」と良いと思います。その比較対象もして頂ければなぁ、と。

代表画像は 横1200px が最適です。それ以下のサイズにならないよう意識すると良いでしょう。そしてできるだけ容量の削減を。
* 写真ブロガーさんなど解像度にこだわりのある方から反発があるようですが、個人の事情とは関係なく一般的な意見を述べているだけですから、意に沿わない場合はスルーしてください。

そしてあとは 追記の使い方 ですよね。追記を上手く使えるようになるとやれ全文だ、やれ要約だ、と悩まなくて済みます。本文に全てを記載してしまっているがために要約しか選択肢が無くなってしまうわけです。

こういった方針面の諸々なども考えながらお使い頂ければ幸いです。そして環境が整いましたらまたテンプレートを選び直すもよし。もちろんそのままお使い頂くもよし。カスタマイズ便宜は図りましたがスペックを落としたわけでもSEOを無視したわけでもありませんのでそこはご心配なく(笑)

2019年8月末日までの限定配付です

今回「html(1) + スタイルシート(3)」で提供したいと思います。htmlは共通でデザインが3つあるよ、ってことですね。これらのデザインはここで記した「カスタマイズ主要部位」のいくつかを操作しただけです。ヘッダー画像や色合いが違うと印象も随分変わりますよね。

設定の仕方は、既に入手済みのどのテンプレートでも良いので、それを 複製 してください。そして 名称を変更 し、htmlとスタイルシートの全内容を削除

ファイルはブラウザで開くことができますので、開きましたら

Ctrl + A で全選択
Ctrl + C でコピーしたのち空になっているテンプレート編集画面へペースト。htmlとCSSの場所を間違えないよう注意してください。

拡張子が .txt になっている方を HTML編集 の方へ。拡張子 .css の方が スタイルシート編集 の方へ貼り付ける内容です。 スタイルシートは3種類入っています。それぞれのファイル名で内容の察しはつくと思いますので、どれかひとつを選んでください。htmlは共通なので、スタイルシート内容の差し替えでデザインの着せ替えができます。

DOWNLOAD

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

Cautions before asking for something.

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

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

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

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

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

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 33

There are no comments yet.

janedoe1471  

2019/07/11 (Thu) 00:26

3種類も

そうですか、3種類、自然派とバイク派と女子風味、ほぼこれでもう、網羅できる、みたいな。
これは、かなり活躍しそうです。
うちのコミュでも、大々的に宣伝しなければ。
あとなんか…宣伝方法があれば。
ありがとうございました^^

-  

2019/07/11 (Thu) 00:37

管理人のみ閲覧できます

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

-  

2019/07/11 (Thu) 07:49

管理人のみ閲覧できます

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

-  

2019/07/11 (Thu) 09:43

管理人のみ閲覧できます

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

Akira  

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

To janedoe1471さん

こんにちは ('0')/

「FC2はhtmlの知識が無いと無理」と感じている方が少しでも減ると良いのですが ^^;

Akira  

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

To 誤字の件を指摘頂いたお二方

こんにちは ('0')/

訂正しました。ありがとうございます。
というかお二人ともお久しぶりです(笑)

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

-  

2019/07/11 (Thu) 14:26

管理人のみ閲覧できます

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

-  

2019/07/11 (Thu) 15:26

管理人のみ閲覧できます

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

janedoe1471  

2019/07/11 (Thu) 16:36

To Akiraさん

個別記事の下に、紹介文を置いたのですね、これは、いいかも。
はてなブログなんかでも、こういうふうにするのが、流行っていますね。たぶん、ここ1~2年だと思いますが。
なるほど、こういうやりかたでも、自己アピールができるというか、そもそも、WordPressとかでも、これは流行っていますよね。
Transitは、画像なし記事の多い方には、かなり喜ばれるのではと。
これだったらもう、Paul Craig Robertsのように、文章だけのブログでも、OKですね。
Transitは、かなり、画期的だと思います。

Akira  

2019/07/11 (Thu) 19:29
vanillaice (Akira)

To 見出しデザイン等の件 内緒さん

こんばんは ('0')/

はい。新しい記事を出したら非表示にしようと思ってまして。関係の無い方にとってはあまり気持ち良い内容ではないですよね。
あと内緒さんは流れを変えようと思って敢えて公開にしてくれたんだろうなぁ、と思っています。

デザインの方はいくつか思いつけば掲載します。後回しになってごめんなさいね。

Akira  

2019/07/11 (Thu) 19:32
vanillaice (Akira)

To Transitの件 内緒さん

こんばんは ('0')/

お役に立てたなら幸いです。
動作不良や何か気になる点があればお気軽にお申し出くださいね。
ありがとうございます :)

Akira  

2019/07/11 (Thu) 19:42
vanillaice (Akira)

To janedoe1471さん

こんばんは ('0')/

はい。いくつかのテンプレートではそんな感じにしています。
問題はやっぱり文章量ですよね。あんまり言うと指図になってしまいそうでなかなか啓蒙が難しいと実感しております(笑)

-  

2019/07/11 (Thu) 20:03

管理人のみ閲覧できます

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

そふぃあ  

2019/07/12 (Fri) 10:34

コメント文字の大きさ変更について質問

Akiraさん いつもお世話になっています。
素敵なテンプレートの数々、ありがとうございます。

たくさんの注釈をつけていただいたのに、やっぱり自己解決できずに困っています(汗)
ひとつ質問させてください。
コメント欄の文字の大きさが私には少々小さくて、もうワンサイズ大きくしたいと思います。
何処を変更すればコメント欄のフォントサイズが文字が大きくなるのでしょう?(1.4remくらいが希望サイズです)
よろしくお願いします。

Akira  

2019/07/12 (Fri) 11:30
vanillaice (Akira)

To 見出しデザイン等の件 内緒さん②

> 実は今も〜

えー。なんのことだろう。察しが悪くてすみません (∵`)

Akira  

2019/07/12 (Fri) 11:33
vanillaice (Akira)

To そふぃあさん

そふぃあさん、こんにちは ('0')/

> コメント欄のフォントサイズ〜大きく〜

.comment-body
で検索し、
font-size: var(--middle-font-size);
の赤字部位を 1.4rem に変更するか、
var(--large-font-size)
に変更してください。
よろしくお願いします。

----- 追記
今設定しているテンプレート(Blowing)でスマホのヘッダー画像が表示されていません。
そふぃあさんの個人環境は
・無料会員
・画像高速表示無効(広告非表示によるDNSサーバー利用不可)
なので、画像アドレスには origin の文字列がついていると思います。
で、原因なんですが、「同じ画像を同じ名称のままアップロードした」というご記憶ありませんでしょうか。
Aのファイルを一旦削除し、再アップロードした場合も同様です。

原因が上記でないとしても、画像の名称を変更して再アップロードし、改めてそのURLに変更してみてください。
こちらのテンプレート(Transit)に切り替えるのであればこの作業は不要です。

いずれにしろ画像の名称(ファイル名)には注意し、上書きをしたり同名ファイルのアップロードをしないようにしましょう。
これはFC2のサーバーのシステム上の都合です(笑)

-  

2019/07/12 (Fri) 11:52

管理人のみ閲覧できます

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

Akira  

2019/07/12 (Fri) 12:02
vanillaice (Akira)

To 見出しデザイン等の件 内緒さん③

えっと。どれのことだろ(汗)
なんかすみませんホント ^^;

----- 追記
あー。わかった。わかりました。たぶん(笑)
どんだけ鈍いんだって話(笑)

そふぃあ  

2019/07/12 (Fri) 12:53

To Akiraさん(完了報告)

早速のお返事ありがとうございます。
いつも小さな質問してスイマセン。とても助かります。

スマホ版のご指摘もありがとうございます。
今朝まで何事も無かったので、テンプレート設定でいじっていて不具合が出たのだと思います。
実は以前にもスマホ版だけ画像が無くなることがあり、複製したものを使うとまた画像がでてきていたのです。
今も同じ作業をしてみましたら、自分のスマホからは画像が確認できるようになりました。

Akira  

2019/07/12 (Fri) 13:08
vanillaice (Akira)

To そふぃあさん(完了のご報告)

> 小さな質問して〜

いえいえ。これもやっぱ必要かなぁ、と思ってガイダンスを追加してzipファイルも差し替えました。
(そふぃあさんが再DLする必要はありません)
ご意見助かります :)

そふぃあ  

2019/07/12 (Fri) 17:31

To Akiraさん

本当にいつも気配りしていただいて、感謝でいっぱいです。
テンプレ―トが出る度に素敵過ぎて目移りばかりです(笑)
ありがとうございます&これからもよろしくお願いします。

Akira  

2019/07/13 (Sat) 21:57
vanillaice (Akira)

To そふぃあさん

そふぃあさん、こんばんは ('0')/

こちらこそ励みになります。ありがとうございます :)

そふぃあ  

2019/07/15 (Mon) 13:55

サイト内検索欄について

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

前回の質問時に気が付けばよかったのですが…
「forest」を使わせていただきはじめ、サイト内検索が白地に白文字っぽいことに気が付きました。
改善していただけると有難いです。

Akira  

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

To そふぃあさん

そふぃあさん、こんにちは ('0')/

大変失礼しました。
#search-modal-input {
で検索し、その括りの
color: white;
赤字部位を修正して以下の通り。

color: var(--overlay-font-color);

これで黒字になります。私の修正忘れです。
お手数おかけします。よろしくお願いします。

そふぃあ  

2019/07/15 (Mon) 20:06

To Akiraさん(完了報告)

こんばんは。
お休みのところ、早速のお返事ありがとうございます。
無事に黒文字に修正できました。
この度もお世話になりました。

Akira  

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

To そふぃあさん(完了のご報告)

そふぃあさん、こんにちは ('0')/

度々ご面倒おかけします。
いつもありがとうございます :)

hige  

2019/07/19 (Fri) 17:52

ちょっと素朴な質問

 いつも見逃せないAkira氏の記事。
 お世話になっております。

 副幹事も難しいです。

 で、Transitのこの記事は削除されずに残るんでしょうか。

Akira  

2019/07/21 (Sun) 12:56
vanillaice (Akira)

To higeさん

higeさん。こんにちは ('0')/

記事自体は残しますがダウンロードリンクは削除します。
副幹事というのはコミュニティのことかしら。お疲れ様です :)

hige  

2019/07/21 (Sun) 18:23

ありがとうございました

記事の件は了解しました。

副幹事というのは、そうです、コミュニティの事です。

立花家蛇足  

2019/07/29 (Mon) 20:09

お礼

利用させていただきます。
懇切丁寧に解説されているので助かります。
まずはお礼まで
蛇足 拝

Akira  

2019/07/30 (Tue) 01:23
vanillaice (Akira)

To 立花家蛇足さん

こんばんは。ご丁寧にありがとうございます。
IE非対応であるという点だけよくよくご検討くださいね :)

かなかな  

2019/08/17 (Sat) 00:36

ありがとうございました。
難しすぎて・・・四苦八苦していますが、なんとかやってみます。

Akira  

2019/08/18 (Sun) 20:23
vanillaice (Akira)

To かなかなさん

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

ちゃんと設定できている様子で安心しました。
ダウンロードしたり解凍したり、ということろからしてもしかしたら初めてだったかもしれませんね。
カスタマイズについては今すぐしなければいけないわけではありませんので、必要が生じた時にでもこのページを参照してくださいね。
(Aboutのリンクだけは今のうちに外した方が良いと思います)

あとはOGP設定とスマホ版表示「表示しない」の2つの設定だけ行うと良いですね。
お疲れ様でした :)

コメント投稿

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)