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

Classicaテンプレート

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

名称
Classica
くらっしか
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
全文
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Roboto
Playfair Display
Great Vibes
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.18
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2023.8.5
  • IE用対応終了
  • Font Awesomeの利用を停止
  • 個別記事ページ送りに前後記事サムネイル表示を追加
  • jQueryの利用を停止
  • スクロールアンカーJSの利用を停止
  • カスタムプロパティ導入
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

カラム入れ替え、記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再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-pager-image");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-pager-image");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要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

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

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

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

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

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

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

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

①について

<div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め </svg></a></span> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<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内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h2 class="another-title">Leave a reply</h2> までを 削除

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

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

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。このすぐ上にある </div>削除

</form>
</div>
</article>
<!-- コメント投稿ここまで -->

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

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

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

<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 {
  margin: 1.9em 0;
}

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

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

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

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

更新履歴 2018.3.27
  • ページmiddle(menu)ボタンが機能しない件を修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • ベンダープリフィックスの整理
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示

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

【Classica】ページmiddleボタンが動作しない件修正とFont Awesomeのアップグレード

【Classica】ページmiddleボタンが動作しない件修正とFont Awesomeのアップグレード

ごめんなさい。私のポカでございます (;´Д`) 症状 ・ページmiddle(menu)ボタンを押しても何も起こらない 原因 ・ページ内移動のhref値に指定するID名の間違い 上記内容を修正すると共に、Font Awesomeをバージョン4(CSS)からバージョン5(JS)に変更しました。 Font Awesomeについては フォールバック(後方互換)を入れていません ので、個人記事内の旧FA記述内容に表示上の影響が出ることがありますので事前にご...

更新履歴 2018.1.10

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

Classicaメンテナンスのお知らせ

Classicaメンテナンスのお知らせ

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

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

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

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST PAGE DEMO
画像クリックでデモ画面へ
ARTICLE 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設定「有効にする」

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

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事ヘッダー下の管理人アイコン をクリックすると別タブで開きます。

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

Cautions before asking for something.

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

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

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

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

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

-
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

管理人のみ閲覧できます

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

vanillaice (Akira)
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

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/09/22 (Fri) 21:22

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

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

-
2017/11/14 (Tue) 07:46

管理人のみ閲覧できます

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

-
2017/11/14 (Tue) 08:23

管理人のみ閲覧できます

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

vanillaice (Akira)
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

管理人のみ閲覧できます

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

vanillaice (Akira)
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

初めまして。

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

vanillaice (Akira)
Akira
2017/11/18 (Sat) 22:03

To 俊樹さん

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

ロビンソン
2018/03/25 (Sun) 15:22

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

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

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

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回記述されています。

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

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

To ロビンソンさん

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

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

彩光
2019/02/08 (Fri) 09:35

リンク幅

突然の質問すいません。

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

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

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

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

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

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

To 彩光さん

こんにちは。

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

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

ホームページ担当K
2019/09/19 (Thu) 16:18

表示に時間がかかる

いつもお世話になっております。
とても素敵なデザインで何度も使わせて頂いております。

さて、当方ホームページ仕様にトップページをカスタマイズしましたからか
表示がとても遅くてどうしたものかと思っています。
特にスマートフォンから見る時遅いようです。
何か良くない書き方をしてしまったのでしょうか・・・

解決策が検索してもなかなか解らず、こちらにお伺いしました。
お忙しいと存じますがもしお時間がございましたら
ご意見下さるとうれしいです。
どうぞよろしくお願いいたします。

vanillaice (Akira)
Akira
2019/09/19 (Thu) 17:07

To ホームページ担当Kさん

こんにちは ('0')/

表示が遅い原因は「アルバムプラグイン」です。以下の記事をご参照くださいね。
解消するにはこのプラグインを削除する以外方法はありません。

参考記事: 公式プラグインの「アルバム」はめちゃくちゃ重たい
https://vanillaice000.blog.fc2.com/blog-entry-886.html

よろしくお願いします。

ホームページ担当K
2019/09/27 (Fri) 14:48

To AkiraさんTo Akiraさん

お返事遅くなって申し訳ありません。
ただ今了解致しました!!
なるほど!!!!
ありがとうございます。今から修正致します。
ありがとうございました!!!感謝感激

vanillaice (Akira)
Akira
2019/09/28 (Sat) 22:02

To ホームページ担当Kさん

こんばんは。

はい。一度ご確認ください。それでも感覚的に遅いと感じられる場合には本記事内の手順に従ってページ遷移時のローディングエフェクトを削除してみてください。意図的に数秒かけてページを表示する仕組みになっています。
よろしくお願いします。

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