配付終了致しました。
Transitテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
- 個別記事ページナビ iOS14でサムネイルが時折表示されない件修正
【ページナビ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.getElementById("pager-prev-image");og.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.getElementById("pager-next-image");og.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.getElementById("pager-prev-cate-image");og.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.getElementById("pager-next-cate-image");og.style.backgroundImage="url("+og_i+")"})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>script要素を1つから3つ分割に変更しています。
| 名称 | 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非対応
|
過去の更新一覧
- ページ送りのJSを修正
詳細については以下のページをご確認ください。
カテゴリページクエリの件は不具合ではなく仕様
えーと。まぁタイトルの通りです(笑) 「カテゴリページのみ最初の1ページ目にクエリが付かないのは不具合ではないか」という件ですが、結論としては 仕様 ということで確定です。...
<li><a href="'+base+0+ext+'">1</a></li>で検索するとhtml内に1箇所あります。この部位を以下の内容に変更してください。
<li><a href="<!--not_category_area-->'+base+0+ext+'<!--/not_category_area--><!--category_area--><!--page_area--><%firstpage_url><!--/page_area--><!--/category_area-->">1</a></li>- FC2アクセス解析を入れている場合にテキスト返信ボタン押下で返信タイトルが2度出力される問題の修正
詳細については以下の記事をご確認ください。
【重要】弊テンプレートのコメント返信JSを修正します
FC2アクセス解析と衝突する ことに気が付きまして(汗) そのための修正です。FC2アクセス解析を利用していない方には無関係ですが、弊テンプレートをご利用中のユーザーさんは是非ご一読をお願いします。...
【修正の仕方】
(a.type,arguments.callee)}); を目印に検索し、そのすぐ後ろにある function から </script> のすぐ手前にある arg.title} までを以下の内容と差し替えます。
function changeTextValue(e){document.getElementById("subject").value=e};
続いて class="btn-a" href="#comment_form" を目印に検索すると2箇所あります。それぞれ目印のすぐ後ろにある onclick から title="To <%author_name>さん" までを以下の内容と差し替えます。1つ目と2つ目の差し替え内容が異なりますのでご注意ください。
ひとつめ
onclick="changeTextValue('To <%comment_name>さん');" title="<%comment_name>さんへ返信"
ふたつめ
onclick="changeTextValue('To <%author_name>さん');" title="<%author_name>さんへ返信"
以上です。お手数おかけします。
- 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
【重要】テンプレートの変更点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>以上です。よろしくお願いします。
とらんじっと 
今回は特殊仕様です。
画像クリックでデモ画面へ
画像クリックでデモ画面へ
画像クリックでデモ画面へ
Yahoo!ブログからお引越しされた方が苦労されているようで。いきなり「カスタマイズ」とか言われても… ねぇ (´・ω・｀)
そこで今回は FC2ブログのシステムに慣れつつカスタマイズ導入編・初級編 ということで、極力簡単にカスタマイズできるようなものを作りました。そして明確なターゲットがあります。
- 超初心者(htmlもCSSも全くわからない)
- 記事に画像掲載が少ないため要約表示タイプへの変更をためらっている(トップがNo imageだらけになるから)
超初心者を想定していますので、今回は「すべきこと」「絶対にやってはいけないこと」を作業のコツなども交えながらお伝えしていきます。
まずはカスタマイズの指南をチェック
到るところにカスタマイズの手助け・指南を書いてあります。カスタマイズを行う前に、またご質問をされる前に必ず確認をお願いします。
今あなたが見ているページで特定の文字列を探すには
Ctrl + F キー
を利用してください。ブラウザのページ内文字列検索機能です。htmlやCSSというのは内容が長大ですから目視では到底探せませんし時間の無駄です。本テンプレートでは(というか私のテンプレートは全て)
注)
で検索すると出てきます。実際に検索してみて、自分が探している答えが記されていないか事前にご確認ください。
その中でも今回の最重要部位は
注)主要カスタマイズ用
と記されている箇所で、カスタマイズ濃厚箇所をひとつにまとめてあります。もうこれ以上簡単親切にはできない、というところまで細かくやってますので、作業の仕方さえわかればこのページの最上部に掲載した画像のように「白背景から黒背景へ」なども簡単にできるはずです。
カスタマイズで苦労するのは「何が対象で」「どこに在るのか」「どうやって見つけるか」なので、これらの手順を省けるだけでも難易度が下がると思います。下がると良いな ←
今回3種のCSSを配付しますが、この3種についても「主要カスタマイズ用」としてまとめられているものをいくつか変更しただけです。
例
--body-color: rgb(244,236,230);
変更するのは緑部位のみです。:(コロン) の前にあるハイフン2連続に続く文字列は変更してはいけません。また、最終の ;(セミコロン) を消してしまわないよう注意してください。これが消えると大災害を引き起こします(笑)
上記はカラーコード変更の例で10進数を用いていますが、#6桁数字 の16進数でも構いません。また rem は px に置き換えても構いません。たぶんpxの方が馴染みがあって直感的に指定できるかもしれませんね。
単位を変更して良いのは「rem」から「px」のみです。それ以外は単位を変更したり、単位をなくしたりあるいは付け加えたりなどは行わないよう注意してください。
IE非対応です
カスタマイズの便宜も目的でしたので、そのためにはCSS4の利用が必須。レベル4に対応できないIEでは閲覧できません。「IEだから見られない」という方へはGoogle ChromeやFirefoxといった素晴らしいブラウザを全力で勧めてください。その方が対応するよりもよほど親切というものです。
ヘッダー画像の準備
ヘッダー画像は 2つ 用意してください。同じ画像のサイズ違いです。パソコン用は横1600px程度、スマートフォン用は横800px程度。横長のものを選ぶようにしてください。大きすぎるように感じるかもしれませんが、高dpiデバイス(解像度の高い端末)では画面サイズの2倍以上の実寸が無いとぼやけて見られたものではありません。現行のスマートフォンのほとんどが高dpiです。
とはいっても流石にスマホで横1600pxの画像は必要ありませんので、ページ表示への負担を減らすためにパソコン用とスマホ用を別で準備します。本来は共通にしても良いんですが、超初心者向けカスマイズということでアメだけでなくムチも必要(笑)
画像の容量は必ず削減してください。メガバイト級の画像をそのままヘッダーに設置してはいけません。画像のサイズ(横×縦)と画像の容量は別物です。解像度をできるだけ維持したまま容量だけを削減することは可能です(ロスレス圧縮)
以下はおすすめサイトです。
ともかくもう、今はページの速度が遅いと検索エンジンから正当に評価してもらえませんし、スマホのヘビーユーザーはとかくせっかちなものなのでブラウザバックされないよう容量は調整する、と。
--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シェアなどに利用されるもの, このプロゥトコルでもって情報を正しく伝えることができる
レスポンシブ設定
もうこれは 当たり前。スマートフォン版の使用を停止して環境を整えましょう。スマートフォンで閲覧できなくなるという意味じゃないからね？パソコンとスマホで同じテンプレを表示させるという意味です。たくさんの利点がありますが今回は割愛。
本テンプレートの製作理念
画像の掲載が少なく、要約表示テンプレートにすると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は共通なので、スタイルシート内容の差し替えでデザインの着せ替えができます。
* 配付終了につきダウンロードリンクを削除しました *
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.