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

2017年08月25日
テンプレート
32
HTML5 CSS3 RWD
Classicaテンプレート

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

最終更新 2019.1.19
  • Font Awesomeを廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

不具合修正ではありませんので旧バージョンのままでもお使い頂けます。

名称 Classica
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大782px
サイド --- 272px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 なし(インラインSVG)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 動画縦横比固定
・ 見出しデザイン(手書き風, ドッグイヤー, カール) 使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 IE非対応
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右
(デバイス幅依存)
サイドメニュー --- 下
更新履歴 2018.3.27
  • ページmiddle(menu)ボタンが機能しない件を修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • ベンダープリフィックスの整理
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示

詳細は以下のリンク先でご確認ください。

【Classica】ページmiddleボタンが動作しない件修正とFont Awesomeのアップグレート - テンプレ不具合・修正など

ごめんなさい。私のポカでございます (;´Д`) 症状 ・ページmiddle(menu)ボタンを押しても何も起こらない 原因 ・ページ内移動のhref値に指定するID名の間違い 上記内容を修正すると共に、Font Awesomeをバージョン4(CSS)からバージョン5(JS)に変更しました。 ...

更新履歴 2018.1.10

メンテナンスを行いました。
詳細は以下のページでご確認ください。

Classicaメンテナンスのお知らせ - テンプレ不具合・修正など

Classicaテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

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

右手人差し指の爪が折れてキーボードが超打ちづらいあきらでございます (´・ェ・`)
マジで凹む (´・ェ・`)

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

サンプル

Samples

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

カスタマイズのコツ

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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

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のファイルと干渉しないはずです。

全体幅調整の仕方

How to increase or decrease width of container

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

記事背景色指定

I won't recommend you to add background color to article

デフォルトでは記事のアウトラインに色指定をしていません。透明(transparent)ですので全体背景色がそのまま記事背景色になります。記事背景に色をつけて全体背景と区別する、あるいは全体背景に画像を設定するなどのカスタマイズは比較的ポピュラーかと思いますが、本作は非推奨です
特に記事背景になにかしようと思うとめちゃくちゃ苦労することになります。色だけでなく z軸の操作 が必要です。
「z軸… なんやそれ (´・ω・`)」
と思われましたら辞めておいたほうが無難です。

ページ遷移時のエフェクトについて

About loading animation

ページ遷移開始時と終了時にフェイドエフェクトを入れてあります。
なるべくページの読み込み時間に差し障りがないように仕上げたつもりですが、今回は 全文表示タイプ ですので個人環境にかなり左右されます。

FC2ブログのトップページ【全文表示タイプ】の難点を語る - カスタマイズ

「遅い」とか「重たい」とかいうアレですね (´・ω・`) FC2の個人ブログの トップページ は大別して2種あります。 全文表示タイプ 要約表示タイプ これ私がこんな風にいつも表現していますが、FC2ブログで正式名称があるかどうかはわかりません。 web一般での表現です。 全文表示というのはこんな ↓ 要約表示というのはこんな ↓ 見た目も大きく違いますが、特徴も比例して全く異なります。 ...

トップページの記事数がとても多い + SNSボタンをたくさん入れいる
という方はもしかしたらローディングが遅いと感じるかもしれません。
また、表(table)を多く掲載されている方も同様(tableは描画が遅い要素です)
フェイドがユーザビリティを損ねるとお考えになりましたらどうぞ削除してください。ただしhtml描画(レンダリング)というのは一度にパッと整形してくれるわけではありません。ローディング完了後に要素がガクガクと… 「なんか頑張って描いてるなぁ」という印象になるかと思います。
削除されます場合には

注)ページ遷移時フェイドエフェクト不要の方

で検索されますと該当箇所がhtml内に2箇所、CSS内に1箇所の計3箇所出てきますので、ガイダンスに従ってください。エフェクトを入れている場合と入れない場合、それぞれのメリット・デメリットを記載しておきます。

フェイドエフェクトあり フェイドエフェクトなし
表示速度若干遅くなる(速描画するとエフェクトにならないため遅延) 速い
ページ表示時の様子フェイドイン後は整形済み(回線速度や記事内容の影響は受けます) 表示位置などが不安定(ガクガクと変わることがある)
SEOへの影響特になし 特になし

ローディングスピナー、というか円ではないのでローディングバーでしょうかね。こちらの色は変更できます。
.cssload-loading で検索、5箇所ヒットするうち最初のものが対象です。
background: rgb(166,159,142);
緑の部位をお好きなカラーコードに変更してください。

ローディングのエフェクトを温存する方はトップページ1ページあたりの記事表示件数ともよく相談してください(個人設定で変更できます)
全文表示タイプは 追記 を上手く利用しないとめちゃくちゃ重たくなることがあります。

ナビゲーションについて

About loading animation

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

navi breakpoint

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

(max-width: 768px)

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

● Aboutについて
こちらは予備リンクです。誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください不要であれば削除。

該当部位検索

注)予備リンク

カスタマイズ

<li><a href="ここにリンクアドレス">テキスト</a>

デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。

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

How to reverse the direction of rows

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

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

ドミナントカラー

Dominant colors

以下が基本色調です。
数字の部分だけを抜き出してCtrl+Fキー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51

rgb(166,159,142) 基本リンク色 など
rgb(226,219,202) 記事フッターSNSシェアアイコン背景色 など

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

Cautions before asking for something.

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

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

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

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

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

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 32

There are no comments yet.

-  

2017/08/28 (Mon) 08:08

管理人のみ閲覧できます

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

Akira  

2017/08/28 (Mon) 13:16

Classicaヘッダーの件 内緒さん

こんにちは ( ゚Д゚)ノ

現在の問題を整理しますね。
① スマホでコンテンツが画面幅を超過している(画面が左右に振られる = NOT mobile friendly)
② スマホの狭い画面だと画像内のオブジェクト(左右)が出てきてくれない(見切れている)

この2つかと思います。
その前に「オブジェクト」という若干失礼な言い方でごめんなさいね。
内緒投稿ですので書いて良いものかわかりませんので敢えてこの表現を使わせてください。

--------- ①の原因

画面幅を超過させている原因は「画RSS」というプラグインです。
こちらの横幅指定が 420px という固定幅指定ですが、スマホの画面は小さいものだと320pxしかありません。
320pxしかないところへ420px固定のものを収めてしまえば当然超過します。
このプラグインの細かな仕様は存じませんが、「レスポンシブタイプ」があればそれを。無ければ「横幅カスタマイズ」で270pxで作成してください。
で、今後FC2ブログはSSL化する予定になっていますが、その暁にはこちらのプラグインは利用できなくなります(scriptファイルがhttpだから)
提供サイトがhttpsでの提供をしてくれれば別ですが。
恐らく今年の9月にはFC2ブログがSSL化します。
一応お知らせしておきますね。

--------- ②の原因

画像のオブジェクトが見切れる件については、選んだ画像にちょっとやはり無理があるかな、と思います。
画像というのは必ず縦横比があります。
そしてそれを収める場所(ヘッダー)にも縦横比があります。
それぞれ異なる縦横比のものがぴったり収まるというのは物理的に不可能です。
Classicaのヘッダー画像はどう表示しているかと言うと、「画像の中央を常に基準として表示」ということをやってます。
この表示基準位置は水平・垂直共に変更はできますが、内緒さんの画像の場合にはオブジェクトが「左」と「右」の両方なんですよね。
なので水平を右に合わせてしまえば左は完全に見切れます。
左に合わせれば今度は右が見切れます。
レスポンシブは固定幅と違い、全く異なる画面サイズのことも考えながら製作しなければいけません。
画像選びも然り。
おすすめはオブジェクトが中央に位置しているものなのですが、それが可能どうか(代替画像があるかどうか)を一度ご検討ください。
よろしくお願いします。

画像位置合わせの参考記事(本文中ほどにあります)
http://vanillaice000.blog.fc2.com/blog-entry-565.html

-  

2017/08/29 (Tue) 08:12

管理人のみ閲覧できます

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

-  

2017/08/29 (Tue) 08:16

管理人のみ閲覧できます

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

Akira  

2017/08/29 (Tue) 23:03

To Classicaヘッダーの件 内緒さん

お疲れ様です ( ゚Д゚)ノ

拝見しました。
以前よりはずっと良くなったかと思いますが、欲を言えばもう少し中央に寄せてあげた方が良いのかな、と。
そして2枚の写真をカットしてくっつけたことで明度がくっきり異なってますよね。
この2つのオブジェクトを敢えて同化させたくない、はっきり分けたい、というご希望であれば今の状態でも良いと思います。
逆に中央が区切りのようになっているのが気になると思うのであれば、それなりの画像編集が必要です。
・それぞれをもう少し中央に寄せる
・明度を合わせた上で区切りがわからないようにする(2枚を1枚のように溶け込ませる)

で、2枚の写真の原本を頂ければ(元画像をFC2にアップロードしてURLを教えてください)、私の方で編集しますけれど。
本来こういったことはしませんが、忍びないのとさほど時間のかかる作業ではないのでもしご希望があれば今回はお受けします。
お任せしますので、必要ないと思われましたらスルーしてくださいね。
よろしくお願いします。

-  

2017/08/29 (Tue) 23:29

管理人のみ閲覧できます

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

Akira  

2017/08/30 (Wed) 00:21

To Classicaヘッダー画像編集の件 内緒さん

横1800pxで作成しました。
容量は58.7KBまで削減してあります。

--- 削除しました ---

必ずDL → 自身のサーバーへアップロード してお使いくださいね。
DLが終わりましたらこちらのURLは消去しますのでお知らせください。
背景は無地で、2オブジェクトを溶け込ませるだけにしておきました。
取り敢えずスマホでも見切れは発生しないよう調整してあります。
イメージが壊れていなければ良いのですが。
もしお気に召さなければ無理に使用する必要はないのでその点お気遣いなしでお願いします (o'ω')ノ

-  

2017/08/30 (Wed) 06:24

管理人のみ閲覧できます

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

Akira  

2017/08/30 (Wed) 16:18

To Classicaヘッダー画像編集の件(完了のご報告)

良かったです。安心しました。
作業お疲れ様でした

ナオ  

2017/08/30 (Wed) 18:45

ありがとうございました(^^)

Akira  

2017/09/03 (Sun) 22:18

To 足達さん(移動先 二度目)

http://vanillaice000.blog.fc2.com/blog-entry-545.html#comment4047

改めまして、間違えちゃってホントすみません。
検索すべきは

<div class="entry-comment">

です。
削除範囲はスクショでご確認ください。
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capturea9uyhdfewoth.jpg

大変失礼を致しました。
貴重なお時間を無駄にしてしまい申し訳ない限りです (*_ _)

足達  

2017/09/03 (Sun) 22:20

こんばんは。
気づかない私も私なので、気になさらないでください。
こちらこそ2度手間で申し訳ないです、

Akira  

2017/09/03 (Sun) 22:27

To 足達さん

どれほど悩まれたかと思うともう… ホント土下座レベルで申し訳なく… ( ̄∀ ̄;)
これに懲りずよろしくお願いします (*_ _)

-  

2017/09/21 (Thu) 19:45

管理人のみ閲覧できます

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

Akira  

2017/09/22 (Fri) 14:18

To Classicaプロフィール画像の件 内緒さん

お手数おかけしております。

> プロフィール画像が拡大表示されているので原寸大表示にしたい〜
> 画像拡大スクリプトの部分を削除してみたのですが変化がなく〜

画像拡大スクリプトというのは、テンプレートの固有機能のことです。
このページ内の一番上に掲載している画像をクリックして頂くと、画像が全画面表示されます。
その機能をご利用頂けますよ、ということです。

プロフィール画像の該当CSSは別ですので、以下の手順で修正をお願いします。


.plugin-myimage
でCtrl+F(Windows)/ Command+F(Mac)キー検索。

width: 200px;
height: 200px;


を削除。


.plugin-myimage img
を検索し

.plugin-myimage img {
width: 100%;
}


を削除。

------

画像の原寸が100px四方しかありませんので、そのまま100pxで表示させるのであればスマホや高解像度ディスプレイのパソコンではひどくぼやけてしまいます。
そちらについては下記のページをご参照ください。

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

よろしくお願いします。

-  

2017/09/22 (Fri) 16:29

管理人のみ閲覧できます

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

Akira  

2017/09/22 (Fri) 21:22

To Classicaプロフィール画像の件 内緒さん(完了のご報告)

内緒さんの場合は容量よりもサイズですかね。
今すぐどうこうしなきゃいけないものでもないですし、気になった時に「そう言えば何かそんなこと聞いたな。」ぐらいで思い出して頂ければ(笑)
作業お疲れ様でした

-  

2017/11/14 (Tue) 07:46

管理人のみ閲覧できます

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

-  

2017/11/14 (Tue) 08:23

管理人のみ閲覧できます

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

Akira  

2017/11/14 (Tue) 15:38

To Classicaカスタマイズの件 内緒さん

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

> デフォルトの設定のままだと画像が暗すぎる感じがするので、少し明るくしたい〜

#header-banner:before
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂きますとCSSソース内(管理画面下段)に1箇所ヒットします。
その括りの

background-color: rgba(0,0,0,.3);

赤字の .3 が不透明度設定です。
0で完全透明(色なし)、1で完全不透明(完全「黒」)です。
.3 よりも数字を小さく(.2 あるいは .1)することで明るくなります。
このマスクはブログタイトルを読みやすくするための処理ですが、マスク自体が不要という場合には

#header-banner:before {
内容
}

を全て消去してください。
白系がメインの背景画像ですので、マスク無しだとブログタイトルがかなり見辛くなるかもしれません。
(一応ブログタイトルテキストにも同系色同化を回避する処理はしていますが)
その際にはブラウザ幅を徐々に小さくしていくことで背景の表示位置が変わりますので、どこかのポイントであまりに読みづらい・読めない、といった場合には再考をお願いします。
(マスクの再設定 or ブログタイトル色変更など)

レスポンシブデザインですので、一定の横幅だけでカスタマイズを行わないようご注意ください。
スマホ専用版を設定していらっしゃいますが、本来はスマホ版を「非表示」にしPCと共通でお使い頂くのが理想です。強制は致しませんけれど。

--------
> 記事の下にあるSNSのボタンは消す事ができないのでしょうか〜

できますよ。
<!-- 注)記事下SNSシェアボタン不要の方ここから削除 -->
を目印に検索し、該当位置を特定してください。
htmlソース内(管理画面上段)にあります。
言葉だとわかりづらいと思いますので以下のスクショと照らして作業してください。

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/capturedelete888w9r8th.jpg

ここまでの処置で残ったアイコンは左に寄ります。
右に寄せたい場合には追加作業として
.entry-footer-sns-ul {
で検索するとCSS内に1箇所あります。
その括りの
text-align: center;
の直下に

flex-direction : row-reverse;

を追加することで右寄せになります。

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

-  

2017/11/14 (Tue) 16:54

管理人のみ閲覧できます

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

Akira  

2017/11/14 (Tue) 16:58

To Classicaカスタマイズの件 内緒さん(完了のご報告)

お出来になったということで安心しました。
スマートフォン非所有者の方でも見え方の確認ができるサイトをご紹介しています。
参考までに

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

お疲れ様でした

-  

2017/11/14 (Tue) 17:18

管理人のみ閲覧できます

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

俊樹  

2017/11/18 (Sat) 18:28

初めまして。

多少カスタマイズして利用させて頂いております。
シンプル且つ文字が読みやすく気に入っております。
疑問点が浮上しましたら質問させて頂きますね。

Akira  

2017/11/18 (Sat) 22:03

To 俊樹さん

ありがとうございます。
はい、何かありましたらお気軽にお尋ねください

ロビンソン  

2018/03/25 (Sun) 15:22

いつもお世話になります。
Classicaテンプレートを利用させていただいています。
スマホ画面でのページスクロール中段のmenuボタンが動作しなくなっています。
iPhoneXでのバグかと思いましたが、PCでブラウザの幅を小さくしても同様です。
デフォルトの状態でも動作しないので、カスタマイズが原因ではないと思います。

お時間のある時にでも、ご確認よろしくおねがいします。

Akira  

2018/03/25 (Sun) 16:01
vanillaice (Akira)

To ロビンソンさん

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

確認しました。これは単純に私が指定ID名を間違えているのが原因です。
ごめんなさい ( ̄∀ ̄;)

html内に
href="#aside-container"
というのがありますので、赤字部分を修正し以下の通り。
href="#secondary"

お手数ですがこれで修正できるはずです。
公式ページは今夜にでも書き換えますね。よろしくお願いします。

ロビンソン  

2018/03/25 (Sun) 16:20

ありがとうございます、修正できました。

ロビンソン  

2018/04/03 (Tue) 23:20

お世話になります。

スタイルシート内の個別ページ送りで
#nextentry-title {
right: 0;
padding-right: 82px;
}
が2回記述されています。

この部分を弄る人は少ないとは思いますが、たまたま気がついたのでお知らせします。

Akira  

2018/04/04 (Wed) 23:59
vanillaice (Akira)

To ロビンソンさん

ロビンソンさん、こんばんは ('0')/

あー。ホントですね。
次回アップデート時に修正しようと思います。お知らせありがとうございます

彩光  

2019/02/08 (Fri) 09:35

リンク幅

突然の質問すいません。

当方かなり無知ですので、お教授いただければ幸いです。

記事下のFacebookやTwitterへのリンクの項目が、Googlleで見ると正常なのですが

IEでみると右にかなりはみ出しています。

対処方法を教えてもらえないでしょうか。

よろしくお願い申し上げます。

Akira  

2019/02/08 (Fri) 12:10
vanillaice (Akira)

To 彩光さん

こんにちは。

説明ページにieのアイコンが含まれないテンプレートはie非対応なのでご了承くださいね。
今全テンプレートのメンテナンスを終えまして全テンプレートie非対応にしました。お知らせの記事はこれから書くところです。ご迷惑おかけします。

.entry-footer-sns-ul li
で検索すると
flex: 1 1 0;
というのがありますので
flex: 1 1 0%;
と後ろに%をつけてみてください。ただこの部分が直るとしても他の部位(svgなど)は崩れたままなのですみません (´・ェ・`)

コメント投稿

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

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