


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 右 (デバイス幅依存) | サイドメニュー --- 下 |
- 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要素を最新バージョンのそれと差し替え。
本ページの内容は2019年1月18日メンテナンス以降のバージョンが対象です。
海外ドラマの録画が溜まりに溜まっているあきらでございます (´・ェ・`)
あくしす
承認されました。ありがとうございます。
サンプル
Samples
カスタマイズのコツ
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設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
スクロールアンカーについて
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> <%rcomment_name> <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; 緑部分 right を left に変更。
以上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'●)/
There are no comments yet.