alias-Jane - FC2ブログテンプレート

alias-Jane - FC2ブログテンプレート

テンプレート
2019/02/15 63
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS4 RWD
alias-Janeテンプレート

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

最終更新 2020.5.28
  • ページ送りのJSを修正
名称 alias-Jane
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大900px
サイド --- 最小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非対応
パソコン タブレット スマートフォン
変則2カラム 2カラム or 1カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下
更新履歴 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

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

更新履歴 2019.11.24
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再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 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-->
②について

#community" で検索するとhtml内に3箇所あります。3箇所とも #comment_form"変更

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

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

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

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

#comment_form {
  padding-top: var(--navi-width);
}
③について

<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:not(.relate-title) {
  margin: 1.9em 0;
}

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

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

えいりあす じぇーん
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

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設定「有効にする」

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

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない?」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...

ドミナントカラー

Dominant colors

root で検索されますとスタイルシート内に各種カラーなどがまとまって記載されています。
各々カラーコードを変更すると同じ色指定が行われている要素を一括で修正できます。

記事編集リンクについて

Location of edit icon

個別記事下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

ヘッダー背景画像変更

How to change header image

注)デフォルトヘッダー背景 で検索するとCSS(スタイルシート)内に 2箇所 あります。1つ目がタブレット・スマホ用、もう1つがパソコン用です。

ヘッダー画像の表示範囲がスマホでは 横長、パソコンでは 縦長 と真逆ですので別の画像を入れてあります。差し替える場合にもその点を考慮した画像選びを行ってください。

また、この背景は個別記事では各記事の代表画像(FC2サムネイル画像)あるいはOGP設定画像に切り替わります。全てのページで固定の背景を利用する場合には 注)個別記事ヘッダー背景画像ここから注)個別記事ヘッダー背景画像ここまで に挟まれているhtml内容を以下の通り修正してください。

<header id="header-banner">

ナビゲーションについて

Behavior about navigation

ナビゲーションの吹き出しやグリッドのマウスオーバー時のオーバレイはタブレットやスマホでは邪魔になりますので取り除いてあります。

また、下方向スクロール時にナビゲーションが非表示になるのはスマホのみです。パソコン・タブレットは画面が広いので対象外にしました。

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。コピー対象はhtml内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までです。

複製したhtml内容は以下の作業してから希望の位置へペーストしてください。

html冒頭の <div class="pager-wrapper" id="pager-wrapper"><div class="pager-wrapper"> に修正(id属性の取り除き)

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

Cautions before asking for something.

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

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

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

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

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

 63

There are no comments yet.
神谷 幸弥(さや)
投稿日のカレンダーの丸

おはようございます。
タイトルが分かりにくくて申し訳ありません。

記事の投稿日がカレンダーに反映してないように思えたので
border-radius: 50%;
の後に
border: 1px solid rgba(179,171,180,.5);
を付け足ししたのですが、大丈夫でしょうか?

2019/02/16 (Sat) 06:52
vanillaice (Akira)
Akira
To 神谷 幸弥(さや)さん

こんばんは (●'0'●)/

わー。そうでしたか。ご指摘ありがとうございます。
ちょっと今パソコン環境が無いもので時間が取れ次第修正しますね。
ボーダーの追加はその内容でOKです。お手数おかけします。

2019/02/16 (Sat) 17:46
そふぃあ
コメント欄の文字拡大について

こんにちは!素敵なテンプレートをありがとうございます。
早速使わせていただいておりますが、コメント欄に書き込まれた文字をワンサイズ大きくするには、CSSのどの部分を変更したら良いのでしょう?
以前は自力でsmallサイズからmiddleサイズに直せたのですが、今回はあれこれいじっても対応箇所を特定できなくて(汗)
お忙しいのに、素人すぎる質問で大変スイマセン。ご指導いただけたら嬉しいです。

追伸
本記事内のテンプレート「DOWNLOAD」のリンク先が古いものになっているようです。
ご確認ください。

2019/02/17 (Sun) 08:34
vanillaice (Akira)
Akira
To そふぃあさん

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

.arrow-box {
で検索されますとスタイルシート内に1箇所あります。その中の
font-size: var(--middle-font-size);
太字部位を任意の数値に変更してください。

例)
font-size: 1.4rem;

デフォルト設定は1.3remで13pxと同等です。一段階上げると14pxで1.4rem
単位はremでなくpxでも構いません。よろしくお願いします。

-----
DLリンクの件お知らせ頂きありがとうございます。全然気づいてなかった ( ̄∀ ̄;)
助かりました :)

2019/02/17 (Sun) 11:33
そふぃあ
変更できました!

こんばんは!
いつも的確なご指導さすがです。

希望通りに文字を大きくでき、とても見易くなりました。
どうもありがとうございました。

2019/02/17 (Sun) 20:33
vanillaice (Akira)
Akira
To そふぃあさん(完了のご報告)

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

安心しました。お疲れ様でした :)

2019/02/19 (Tue) 15:10
M
お借りしました!!

AKIRA様

ご無沙汰しております。ゆうらりHappySmileのMです。

とても格好いいテンプレだったので、これまでお世話になったEmpty-streetからこちらに乗り換えさせてもらいました!!

あと、最近の「爆速」と「黒背景」の記事。とても参考になりました。ありがとうございます。

とくに、爆速の記事で、インラインCSSの直書きの記述が参考になりました。ファーストビューのインライン化は以前やったことがあったのですが、可能な限り記述するのはボクにとって目から鱗でした。

さっそく自分で全部書きに挑戦してみたのですが、どうしてもbodyのCSSコードだけW3Cのエラーが出てしまいまして...
やむを得ず、そこだけスタイルシートに残しました(;^ω^)何だか少しだけページスピードが速くなった気が?!

こちらのテンプレを使って「黒背景化」にも挑戦してみました。

やっぱり、テキスト色で色々と苦しみました(;^ω^)とくに大変だったのが、ol ulのテキスト色の調整で、1色に統一化させるとさまざまな箇所で不具合が生じてしまい、個別に設定するのに四苦八苦してしまいました。

これからは、alias-Jane & 黒背景でブログ運営していきます!

ありがとうございます。

2019/03/02 (Sat) 10:23
vanillaice (Akira)
Akira
To Mさん

お久しぶりですー ('0')/

CSSのインラインは注意点もありまして。初回アクセス時は速く感じるんですが、htmlに直書きした内容というのはキャッシュが効きませんのでローディングの度に解釈することになります。外部ファイルはキャッシュされますから二度目以降は寧ろ外部ファイル化の方が速くなるんですね。もちろん最近のブラウザは処理が高速ですから体感がものすごく違う、といったことはありません。

そして爆速の方はservice workerという仕組みも使っていて、事前にキャッシュを数ページ分作成しています。2〜10ページぐらいかなぁ(ちゃんと調べてません, ごめんなさい)と思います。なのでインラインで二度目以降でも速いんですね。
キャッシュの威力というのはかなり大きく、爆速テンプレ = キャッシュ使い倒しテンプレ と言えるかと思います。

-----
黒背景変更は文字色が一番苦労しますね。今後は逆に白背景に戻すことも考慮しながら色指定を行ってくださいね。特にcurrentColorの使いどころは多いと思います。

2019/03/02 (Sat) 13:28
M
To Akiraさん

Akira様

お返事ありがとうございます。

そうだったんですね!!一時期、cssの外部ファイル化をやってたんですけどね(;^ω^)

ブラウザキャッシュの設定に挑戦した時期もあったんですけど、ワードプレスでよくやってる.htaccessファイルというのがFC2では上手く出来なくて断念したことがあります(;^ω^)

爆速はキャッシュのカスタマイズもしているんですね!でも、爆速ってインストールしてもテンプレの編集画面がないので...

アドセンスとか貼りつけてるボクなんかには全く縁がなさそうです(;´・ω・)

currentColorの使いどころ。いろいろと研究してみます。ありがとうございます!!

2019/03/02 (Sat) 15:09
vanillaice (Akira)
Akira
To Mさん

htaccessはFC2ブログでは使えないですね。
爆速テンプレートがカスタマイズ可能になる日は来ないと思いますし、デザイン面でもかなり割り切らないと、という感じです。
アフィリエイトはやらない、デザインはそんなに気にしない、という方にはおすすめ。それ以外の方にはおすすめできない(笑)

2019/03/02 (Sat) 16:41
M
To Akiraさん

Akira様

ご返信ありがとうございます。

やっぱりFC2ブログでは使えなかったんですね。これでスッキリしました(;^ω^)

ありがとうございます!

2019/03/02 (Sat) 23:19
M
コメント一覧のボタン表示について

Akira様

お忙しい中たびたび失礼いたします。

上記のブログページでコメント欄を見ていたら、私(M)のコメントの部分の「TO -さん」というボタンに変な表示がされているのですが、原因がわかりますでしょうか?

W3Cのエラーチェックによると「属性間にスペースがありません」と出るのですが、HTMLに記述している<%comment_name>に問題があるのでしょうか?

その場合、何か代替策はありますでしょうか?

2019/03/03 (Sun) 06:38
vanillaice (Akira)
Akira
To Mさん

こんばんは。

管理画面で返信を行うとそうなります。FC2システム側が管理人名をクラス名として出力してしまうのでおかしくなってしまいます。
これを避けるには
・返信は該当ページ上で行う
・返信用JSを利用しない
のいずれかです。

JSを取り除くには onclick="add_str(this);" が含まれているli要素の一行を削除。
続いて
function add_str(arg)
で検索し、上記文字列から
.value+=arg.title}
までを削除。

JSを削除した場合には閲覧者の簡単返信(タイトル自動入力及びコメントフォームまでの自動スクロール)が無効になります。よろしくお願いします。

2019/03/03 (Sun) 20:21
M
To Akiraさん

Akira様

ご返信ありがとうございます。

そうだったんですか!!ボクは今まで管理画面で返信してました(;´・ω・)

これからは該当ページで行なうように心がけます。

親切に教えて頂いてありがとうございました!!ペコリ(o_ _)o))

2019/03/03 (Sun) 21:17
vanillaice (Akira)
Akira
To Mさん

はい。プログラム同士がぶつかってしまうので申し訳ないです。
お疲れ様でした :)

2019/03/03 (Sun) 23:32
M
To Akiraさん(返信不要)

Akira様

いつもご親切に対応して頂き、本当に助かっています。

ありがとうございますm(__)m

2019/03/04 (Mon) 01:03
M
何度も何度もすみません

Akira様

何度も何度も質問ばかりしてしまい、大変申し訳ありません。

alias-JaneのCSSをすべて外部ファイル化したいのですが、
「body」の部分をスタイルシートの編集画面から動かすと、
ページが白くなってしまったり、いろいろ不具合が生じてしまいます(汗)

何か私の方で致命的なミスでもやらかしてしまってるでしょうか?

2019/03/15 (Fri) 21:35
vanillaice (Akira)
Akira
To Mさん

> alias-JaneのCSSをすべて外部ファイル化したい〜

CSSはもともと全て一つの外部ファイルになってますよ。

> 「body」の部分をスタイルシートの編集画面から動かすと〜

bodyの部分のCSSを別にするということですか?ごめんなさい。ちょっと意味がよくわらからないです。一つのファイルにまとまっているものをわざわざ分ければ通信リクエストが増えるだけですし、CSSは通常DOM(html)よりも先に読み込まれますのでページが白くなるといったことは無いと思うのですが。うーん。状況が見えないです。ごめんなさい。

----
もしかして「外部ファイル化」ではなく「インライン化」の間違いですかね。

----
無駄な作業になるといけませんので先回りして書いておきます。
「インライン化」の間違いだと解釈し、
「body部位をスタイルシートから抜き出してインライン化(head内にstyle要素として記載)したい」という意味だとします。

<head>
<style>body{省略}</style>
<link rel="stylesheet" href="<%css_link>" media="all">
</head>

こういうことをするという目的ならばこれは意味がありません。
CSSはいずれにしろDOMよりも先に取得され、CSSのパース中はDOMのパースは行われません。
上記の形ならCSSファイルを読み込んで全てを一度に処理するところを、わざわざ一部のみ別で処理し、その後通常のCSSファイル読み込みを行うという二段階になるだけでスピード対策にはなりません。寧ろ無駄が生じます。

メインCSSファイルを遅延読み込みさせるというのならわかります。
ただしメインCSSの遅延はかなり精査しないとレイアウト描画(レイアウトフロー)がDOMの描画に間に合いませんので、一瞬htmlだけの画面が表示されその後並び替わって綺麗なページになる、といったことが起こり得ます。

スピード改善を目的とするならば
CSSを全てインライン化する(初回ロード対策)
or
above the fold(ファーストビュー)に関連する内容のみインライン、残りはhtmlの最終で遅延(JS)取得
のいずれかになると思います。
私の限定テンプレート「Bullet」は後者です。

2019/03/15 (Fri) 21:50
M
To Akiraさん

Akira様

お返事ありがとうございます。

現在、body以外のcssはheadの部分にすべて記述しているのですが、headにstyleタグでインライン化したcssと、スタイルシートの編集画面に残ってるbodyの記述をすべてFTPに移したい、ということです。

うまく説明できなくてすみませんm(_ _"m)

2019/03/15 (Fri) 22:06
vanillaice (Akira)
Akira
To Mさん

恐らくFTPサーバーにアップロードするとエラーが生じます。FTPは「アップロードが楽」というだけでそれ以外なんのメリットも無いですよ。これもドメインの問題です。
画像程度ならFTPで良いんですが、ページ全体に係るファイル(JS, CSSなど)は通常の画像サーバーにアップロードしてくださいね。

2019/03/15 (Fri) 22:10
M
To Akiraさん(お返事不要)

Akira様

お返事ありがとうございます!!

そうなんですね!!勉強になりました(o*。_。)o

さっそく試してみます。

いろいろありがとうございました!!

2019/03/15 (Fri) 22:20
vanillaice (Akira)
Akira
To Mさん(終了のご報告)

念の為ですが、テンプレート編集画面の「スタイルシート」欄に記載した内容は自動で画像サーバーにアップロードされますので、その部位をカットで消去して新たにアップロードする必要はありません。自動でやってくれることを手動でやることになるだけで何の変化も生じません。
要するにデフォルトの状態に戻すということになりますね。

お疲れ様です :)

2019/03/15 (Fri) 22:26
vanillaice (Akira)
Akira
To Mさん(追記「重要」)

今気づきましたがipの入れ方が間違っています。

最新バージョンは1.2.1です。そしてtype属性にmoduleの値がないと機能しません。バリデートエラーになりますがこのプラグインの場合はmoduleにしておかないと実現できないので致し方ありません。
公式ページで再度確認してくださいね。

2019/03/15 (Fri) 22:41
M
To Akiraさん

Akira様

お返事ありがとうございます!!

ボクもちょっと気になってました(;^ω^)

F12を押すと、何やら警告らしきものが出ていたので...

moduleのtype属性については、W3Cで消しなさいと表示されたので、削除してしまいました。

さっそく修正してみます。

助けて頂いてありがとうございます!!

2019/03/16 (Sat) 04:44
vanillaice (Akira)
Akira
To Mさん

こんにちは (o'ω')ノ

はい。moduleを指定しているのが一番のキモの部分なので削除しないように注意してくださいね。
いずれにしろipの作者さんご自身が「コンバージョンを1% UP」という控えめな表現をしていますので過度な期待は禁物です ^^;
preloadやprefetchはドメインの統一がボトルネックになり、FC2ではなかなか難しいところです。

スピード対策についてはFC2ブロガーの ぼっちんさん も取り組んでおられます。彼の書いている内容がFC2ブログでの正攻法ではないかと思いますので参考までに。

https://oops0011.blog.fc2.com/blog-category-23.html

2019/03/16 (Sat) 15:22
M
To Akiraさん(お返事不要)

Akira様

こんにちは(^^)

ありがとうございます!!

勉強します(^o^)丿

2019/03/16 (Sat) 19:41
mojorum
ヘッダー背景画像サイズの最適値について

Akira さん、はじめまして。
とても素敵なテンプレートなのでありがたくお借りしました。
ありがとうございます。

スマホのテンプレートを変えるにあたり、調べているうちに「レスポンシブ」や「SSL化」という事に気付き、こちらのブログの各記事がとても参考になり拝読しております。

表題の件ですが
早速、ヘッダー背景画像を変えさせていただきました。
その際の、ヘッダーの画像のサイズ…
スマホ用は横長、PC用は縦長ですが、それぞれ最適なサイズは何ピクセル(×何ピクセル) が適当でしょうか…?

初歩的な質問で恐縮です、、

あ、それと、こちらのブログを当方のブログのリンク欄に表示させていただきましたが、よろしかったでしょうか…?
テンプレート使用にあたる注意事項から、そのように理解しましたので…

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

2019/04/19 (Fri) 11:10
vanillaice (Akira)
Akira
To mojorumさん

こちらこそありがとうございます :)

> それぞれ最適なサイズは何ピクセル

閲覧者のブラウズサイズはまちまちですから「これで完璧」という数値はありませんが、デフォルトの画像は
PC --- 600px × 1000px
SP --- 700px × 700px
です。参考までに。
解像度の問題はこの横サイズ(pc 600, sp 700)で大丈夫だと思います。画像のオブジェクト(画像の主体となる肖像物)の位置についてはどうしても「それなりに」という感じになりますね。誰がどんなサイズで見ているかは予測がつきませんので仕方の無いことです。

-----
> 注意事項から、そのように理解しました〜

禁止事項としてテンプレートのフッターにある「designed by Akira」の部分がバックリンクですので、これをそのままにして頂ければOKです。リンクの追加(リンク登録)については登録も削除もご自由になさってくださいね。リンク登録を強制しているわけではありません(笑)
お気遣いありがとうございます :)

2019/04/19 (Fri) 17:30
mojorum
To Akiraさん

Akira さん、こんばんは
早速の丁寧なご返信ありがとうございます:D

デフォルトのサイズ、参考になります…! スマホでぽちぽちブログ更新を再開し始めまして、PCを立ち上げておらず…後ほどチェックして手直ししてまいります(^-^;

そうでしたか、、いちばん下に表示されているバックリンクの部分のことだったのですね。了解しました。

リンク登録は、素敵なテンプレートをご提供いただいておりますので、このまま登録させていただきます^^ 。

(忙しくてついつい、放置していた当方のブログですが運営にあたり、色々と勉強していかなアカンなぁ…と認識を新たにしております(^^; )

ありがとうございます♬
(ご返信には及びませんので…:) )

2019/04/19 (Fri) 20:26
-
管理人のみ閲覧できます

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

2020/04/29 (Wed) 09:42
vanillaice (Akira)
Akira
To alias-Janeモーダルの件 内緒さん

こんにちは。ありがとうございます :)

「モーダルが反応してしまう」というのは具体的にどういった現象でしょうか。

・クリックしていないのに表示されてしまう
・ローディング時に一瞬表示される --- 最近のchromiumではレンダリングの様子が見えてしまうことがあります。キャッシュが作成されると解消されます。バージョンアップによる修正待ち。
・別の何か

スクリーンショットなどがあれば助かるのですが。あとは環境をお知らせください。
例)
Mac OS10.15.4 Catalina, Firefox最新
iOS13.3.1, Safari最新
など

私の環境では問題になりそうな挙動というのは見当たりません。
Mac Catalina, Google Chrome, Firefox, Brave, Vivaldi, Safari 全て最新
今自宅滞在中ではなくWindows環境がありませんので未検証です。夜間であればwin検証可能です。ごめんなさいね。

ブラウザ・OS共にはバージョンを必ずお知らせくださいね。
よろしくお願いします。

2020/04/29 (Wed) 13:12
-
管理人のみ閲覧できます

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

2020/04/29 (Wed) 15:05
vanillaice (Akira)
Akira
To alias-Janeモーダルの件 内緒さん②

お手数おかけしております。確認が取れました。
原因はご指摘の通りで「bodyがブラウザ画面の高さよりも小さいため」です。モーダルを背面に回すこともできるんですが、アニメーションの都合がよく有りませんので、今回は「フッターを常に最下部に固定」する処置を取りたいと思います。今フッターが上に上がってますよね。それを上がらないようにします。同時に本件も解消できます。

ご面倒ですが再DLをお願いします。修正箇所が多めなので恐らく個人カスタマイズを再現する方が楽ではないかと思います。
よろしくお願いします。

2020/04/29 (Wed) 20:18
-
管理人のみ閲覧できます

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

2020/04/30 (Thu) 09:04
vanillaice (Akira)
Akira
To やままちさん(完了のご報告)

こんにちは。
こちらこそせっかくカスタマイズ済みにも関わらずお手数おかけしました。
ありがとうございます。お疲れ様でした :)

2020/04/30 (Thu) 11:02
らいおんへっどらびっと
右側下の3つの四角を変えたい…という件で

大変お世話になっております。テンプレート使わせて頂いております。
とってもおしゃれでシンプルな、わかりやすいものをありがとうございます。
日々ブログを更新させて頂いている次第です。
素人ながらなんとかやっています。
そこで、一つお教えいただきたく…
右側下の方に四角が3つ出てきます。「上矢印」「メニュー」「下矢印」。
パソコンの画面ではほとんど下の方にあり、しかも画面は横長で広いですから全く気にならず。
しかし、スマホで見た時に…
やはり右下の方にあるんですが、記事を読む時に2文字くらいかかってしまう、私が使ってるスマホ(アンドロイド)ですと。
上にスクロールすればいいんですけれど…
そこでお教えいただきたくメールしました。
1.四角の大きさを小さくする方法
2.スクロールしたあと、手を離してしばらくすると四角が消える
など、何か良い方法があればお教えいただきたくよろしくお願いいたします。
プログラムに関してははっきり言ってよく分かりません。
英単語も、ひとつひとつ調べながらやっています。

2020/05/08 (Fri) 09:44
vanillaice (Akira)
Akira
To らいおんへっどらびっとさん

こんにちは。ありがとうございます :)
* ページスクロールボタンの件

> 1.四角の大きさを小さくする方法〜
> 2.スクロールしたあと、手を離してしばらくすると四角が消える〜

1については可能です。
2についてはJS内容変更の必要が生じますのでご容赦ください。

-----
【サイズ縮小】

* サイズを小さくすると押しづらくなる可能性はあります。

#pagetop,

を目印に検索するとスタイルシート内に1箇所あります。このルールセット内

width: 40px;
height: 40px;

赤字部位40の数値を小さくしてください(同数値指定)
サイズ縮小されると MENU の文字がはみ出ますので、先程の #pagetop, のすぐ上にある #page-scroll のルールセット内

font-size: 11px;

こちらの赤字部位の数値も小さく変更。
以上です。よろしくお願いします。

2020/05/08 (Fri) 17:13
らいおんへっどらびっと
ご返答ありがとうございます… さっそくに…

To Akiraさん
早速のご返答ありがとうございます。
とても分かりやすい説明で素人の私にも… すぐにプログラムを変更することができました。
色々試してみました。確かに小さくするとかなりタッチしにくいですし、MENUの文字もかなり見にくくなってしまいます。
でも、ちょっとやってみたかったので… とりあえずはこの状態でいこうと思います。
まさか、問い合わせをした日に、ご返事をいただけると思っていなかったので…
我が国の政府の対応とはちがい… すいません関係ない話をしました。
本当にありがとうございます、これからもどうぞよろしくお願いいたします。

2020/05/08 (Fri) 19:56
vanillaice (Akira)
Akira
To らいおんへっどらびっとさん(完了のご報告)

こんばんは ('0')/

そうですね。文字は収まりきらないと思います ^^;
記号に変えるというのもひとつの手ですが、直感的ではなくなってしまいますね。
現状で良いということなのでこれで様子をみてくださいね。
お疲れ様でした :)

2020/05/08 (Fri) 22:09
らいおんへっどらびっと
また、教えていただきたい事がありまして…

お世話になっております。テンプレートを使わせて頂いている者です。前回、5/8に質問させて頂いた者です。

今回も、お教えいただきたいことがありましたものですから、メールさせていただきました。

早速ですが… 

質問1、ブログの最初の画面で、背景画像の下の方に、Facebook、Twitter、ピンタレスト、インスタの丸いものが4つあります。これを消したい(非表示)のですが、どうしたらいいでしょうか?(背景画像を目立たせたいので…)

質問2、見たい記事のアイコンをクリックすると、記事がでてきます。下にスクロールすると、コメント入力欄があって… その下に、小さい画像とタイトル付きの「更新順」、「同カテゴリ」とあります。
この、「更新順」と「同カテゴリ」を消したい(非表示)のですが、どのようにしたらいいでしょうか?(記事の中でいろいろリンクさせているので… & コメント入力欄のすぐ下にカテゴリを…)

本日、この「更新順」「同カテゴリ」を自分で何とかやろうと思って、やったのですが… 見事に失敗。プログラム自体が作動しなくなっちゃいまして… 初期の状態に戻しました。私には、無理だと判断し、メールさせて頂いた次第ででございます。

お忙しい中、大変申し訳ありませんが、よろしくお願いいたします。

2020/07/26 (Sun) 20:43
ススム
To らいおんへっどらびっとさん

こんばんは、はじめまして。
役不足ですが、Akiraさんに代わり返信させていただきます。
まずテンプレートの管理画面でご利用中のテンプレートを複製して、元の方で編集しないようにご注意ください。

>質問1

HTML内の<!-- 注)SNSリンク不要野方ここから削除 -->から<!-- 注)SNSリンク不要野方ここまで削除 -->までを、この両方の行を含めて削除してください。

>質問2

HTML内の<!-- 個別記事ページナビ -->から<!-- 個別記事ページナビここまで -->までを、この両方の行を含めて削除してください。

HTML内で見つからないときは、文字列をコピーしてCtrl+Fで検索すればヒットします。
削除する際には、最初の行の文字列の前のスペースから最後の行の文字列の後のスペースも含め、行単位で選択してから削除されることをおすすめします。
編集したテンプレートを適用して確認のうえ、ご希望通りになっていればそのままご利用できます。

2020/07/26 (Sun) 23:30
らいおんへっどらびっと
To ススムさん

お忙しい中、ご返答ありがとうございます。
早速、メールを見ながら編集しました。色々、アドバイスしていただきありがとうございます。テンプレートは複製してからやりました。 

「SNSリンク不要…」は、無事消すことができました、ありがとうございます。

もうひとつの、「個別記事ページナビ」というのが、Ctrl + F で検索しても見当たりません。個別記事というのはありましたが、個別記事ページナビ、という言葉が見当たりません。申し訳ありませんが、よろしくお願いいたします。

2020/07/27 (Mon) 18:03
ススム
To らいおんへっどらびっとさん

こんばんは。

<!-- 個別記事ページナビ -->という行は、HTML内のかなり下の方にあります。
画像右端のスクロール位置を参考に、探してみてください。

https://blog-imgs-141.fc2.com/l/i/f/lifeisfantastic/alias-Jane-html.jpg

2020/07/27 (Mon) 22:26
-
管理人のみ閲覧できます

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

2020/07/28 (Tue) 11:19
-
管理人のみ閲覧できます

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

2020/07/28 (Tue) 11:25
らいおんへっどらびっと
To ススムさん

ご返答ありがとうございます。

結論から言いますと、アドバイスの通りやりましたら、全て出来ました。ありがとうございました。

「個別記事ページナビ」という文字が、検索してもヒットしなかったのには原因がありました。私が、 HTML内をいろいろとやっていた時に、おそらく謝って消してしまったのではないかと思っております。それを疑いましたので、削除し、改めて新規で、テンプレートを追加しました。

まっさらな、その HTML を見てみると… ありました。「個別記事ページナビ」という文字が… 

「テンプレートを複製して、編集してください」という言葉が、身に染みた次第でございます。

色々とありがとうございました。もし、また何かありました時は、どうぞよろしくお願い致します。

2020/07/28 (Tue) 18:50
ススム
To らいおんへっどらびっとさん

こんばんは。
お役に立てて何よりです。
スタイルシートの該当部分も削除できますが、見た目だけならこれで良いと思います。
もし気になるようなら、またお尋ねください。

2020/07/28 (Tue) 21:35
vanillaice (Akira)
Akira
To らいおんへっどらびっとさん, To ススムさん

こんにちは。お返事大変遅くなりました (*_ _)

解決済、ということで大丈夫でしょうか。
らいおんへっどらびっとさん、お疲れ様でした。
ススムさん、今回もご協力ありがとうございました :)

2020/07/29 (Wed) 13:42
らいおんへっどらびっと
To Akiraさん

はい、色々アドバイスいただきまして… 解決済みでございます。
ありがとうございました。

2020/07/29 (Wed) 17:57
vanillaice (Akira)
Akira
To ページ送りの件 内緒さん

こんばんは。
そうでしたか(笑)
いえいえ。ご質問ではないですし記事のことはどうぞお気になさらず。

全然関係無いんですが、Line of duty のシーズン5を友人に送ってもらったので鑑賞中です。
まだご覧になっていなければ是非 :)
(netflixでシーズン4まで視聴できます)

2020/07/29 (Wed) 20:11
らいおんへっどらびっと
To ススムさん

いろいろアドバイスを頂き、ありがとうございました。

新たな質問があるのですが… よろしくお願いいたします。 

質問1
スタイルシートという言葉は、聞いたことがありますが、内容はよくわかりません。
見た目以外で、どのようなことが起きているのでしょうか?気になってしまって… もし、お教えいただければと思い、メールしました。

質問2 
ブログの右側の下の方に、ページスクロールボタンがあります。四角が3つ(サイズは変更5/8のアドバイスにて)。

初期画面(ホーム画面)のときは、すべてのボタンが作動します。
しかし、画像をクリックし、記事を表示したとき、真ん中のメニューのボタンが作動しません、クリックしてもそのまま動かず。
最上部へ行くボタンと、最下部へ行くボタンは作動しています。

5/8のときは、3つ正常に動いていました。

お忙しい中、もうしわけありませんが、よろしくお願いいたします。

2020/07/29 (Wed) 20:39
vanillaice (Akira)
Akira
To らいおんへっどらびっとさん

こんばんは。

まず、ススムさんは善意で回答されていますので、彼のブログへ直接のお問い合わせされるのはお控えくださいね。念の為(事前に)お伝えしておきます。
そしてススムさんには回答を行う義務はありませんし、この質問が目に止まらないこともありますので予めご了承ください。
今私が忙しいものですから質問になかなかお返事できずご迷惑おかけしております。ごめんなさい (*_ _)

質問1
スタイルシートというのは簡単に言えば「デザイン」の指定です。この文字は赤色、ですとか、こことここの間は20pxの余白、ですとか、ボタンの形は四角、といったことです。
htmlの方は「文書の意味づけ・定義」でデザインではありませんが、大まかな配置は行われます。デザインと区別して言えば「レイアウト」や「段組み」です。
htmlに対してデザインを指定していますので、内容にミスが無ければ放置でも構いません。
例えばhtmlに

<div class="xxx">あいうえお</div>

とあり、スタイルシートに

.xxx {
font-size: 10px;
}

とある場合は xxx というクラス名を持つhtml要素はフォントサイズが10pxになります。
そこで
<div class="xxx">あいうえお</div>
というhtml自体が削除されて存在しなくなった場合、スタイルシートの指定は「マッチする要素無し」として無視しますので影響はありません。ススムさんの言われる「見た目だけならこれで良い」というのはそういう意味です。
余分な内容が含まれるとページの表示速度に影響することがありますので、そこを重視する場合はスタイルシート内のCSSも削除した方が良いんですが、今回の件については触らない方が良い(触らず残しておいた方が良い)と思います。

-----
質問2

スムーススクロールボタンが機能しない原因は恐らくプラグインのhtml構文エラーです。こういった事象が起こった場合には、当該ページの「DEMO」を開いてデフォルトのテンプレートと見比べて頂き、明らかに見た目や挙動が異なる場合にはその原因のほとんどが

・記事内で利用したhtmlの構文エラー(手打ちせずともエディターのツールを利用すればそれは「htmlの利用」です)
・プラグイン内容(html, CSS, JS)のエラー
・テンプレートカスタマイズ時のミス

です。
現状でスムーススクロールボタンの見た目も崩れていますので、以下の手順で原因の特定をお願いします。

【1】全てのプラグインを非表示にする
【2】プラグイン非表示状態でボタンの形状が正常になるか確認する(DEMOで正しい形状を要確認)
【3】形状が正常化したらプラグインを1つづつ表示させ、その都度ページをリロードして再度形状が崩れないかどうか確認

特定のプラグイン表示時に形状が崩れたらそれが原因です。
プラグイン内容の修正はまた別の話なので、まずは原因の特定をお願いします。
(時間が無くこちらでできなくて申し訳ないです)

2020/07/29 (Wed) 21:55
らいおんへっどらびっと
To Akiraさん

返答ありがとうございます。
まずは、お詫びさせてください。ススムさんの件は、申し訳ありませんでした。

忙しい中、たくさんのアドバイスが書いてあり、とても感謝しております。

ちょっと時間がかかりそうなので、まずは、お詫びと、お礼のメールを、と思いまして。

2020/07/29 (Wed) 22:15
ススム
To らいおんへっどらびっとさん

こんばんは。
ご指名をいただき、再びAkiraさんに代わりお答えさせていただきます。

>質問1

スタイルシートの件は、私の書き方が思わせぶりでした (苦笑)
テンプレートの管理画面で、「HTML編集」の下にもうひとつ「スタイルシート編集」があります。
「HTML編集」はページ内の文章や画像などの要素を追加・削除する部分で、「スタイルシート編集」は、それらの要素のサイズや色などの視覚効果を指定する部分です。
ですから、HTML内から削除した要素に関しては、スタイルシートからも削除出来る事をお伝えしました。
もしスタイルシートを編集する際はテンプレートを複製の上、くれぐれも慎重に作業してください。
トップページのSNSボタンに関する部分は、スタイルシート内にあるheaderという見出しの下の文字列の中の/* sns */という行から、
.h-hatena:hover {
background: rgb(61,142,216);
color: white;
}
までです。
個別記事ページナビに関する部分は、スタイルシート内のpagerという見出しの下から/* article */という行を探して、その行から/* titlelist */という行のひとつ上の行までです。

一旦投稿します


2020/07/29 (Wed) 22:47
ススム
To らいおんへっどらびっとさん

続きです。

>質問2

これはHTML編集で個別記事ページナビを削除したので、個別記事でのMENUボタンで指定している#pager-wrapperというセレクタが存在しないことが原因です。
HTML内をCtrl+Fで#pager-wrapperという文字列を検索すると1箇所ヒットします。
その部分を#secondaryに書き換えることで、正常に作動すると思います。

スタイルシートの編集は、見つけにくければ無理せずそのままの方がいいかも知れません。

2020/07/29 (Wed) 22:58
ススム
To Akiraさん,To らいおんへっどらびっとさん

>Akiraさん

こんばんは、お世話になります。
投稿の前にAkiraさんのコメントに気が付きましたが、殆ど書いた後だったので投稿しました。
お気遣いありがとうございます。
たまたま気がついて、私でも答えることが出来る内容だったので、口出ししてしまいました (笑)
もし余計なコメントがあれば削除してください。

>らいおんへっどらびっとさん

私は全然構いません、お役に立てたのなら良かったです。
ただし、AKiraさんの代わりに答えてくれる人は私以外にもいらっしゃいますから、次回からは指名はご容赦願います。
もしご指名いただいても、答えられないと恥ずかしいですから (爆)

2020/07/29 (Wed) 23:15
vanillaice (Akira)
Akira
To らいおんへっどらびっとさん, To ススムさん

こんばんは。ススムさん、ご協力ありがとうございます :)

今パソコンから閲覧して確認しました。カスタマイズされてたんですね。
更新履歴 2020.3.23でページ送り複製可能にするための処理を行っています。それ以前のカスタマイズ内容をそのまま引き継がれたので形状が崩れていた、ということです。プラグインではなく。既に行っていましたら余計な作業になり申し訳ないです。

ページ送りはFC2ブログ自体のシステム変更もあり、大きな修正になっていますので、今回再DLして頂いたということで良かったです。

ススムさん、お調べ頂いて助かりました。ありがとうございます :)

2020/07/29 (Wed) 23:32
vanillaice (Akira)
Akira
To ススムさん

いえいえ。ホントに助かります。
さきほどもスマホで急ぎながら回答したので的を得ない内容になっていました。
らいおんへっどらびっとさん、ごめんね ^^;

ご負担になってもいけないと思い書きましたが、らいおんへっどらびっとさんはどうぞ必要以上に気に病まれませんようお願いします。
ススムさんは「きっと気づいて答えてくれるだろう」と思いましたが、丸投げになってもいけないので一応書きました(笑)

2020/07/29 (Wed) 23:37
らいおんへっどらびっと
To ススムさん

返答ありがとうございます。
まずは、お詫びさせてください。指名して返信してしまったことを… 申し訳ありませんでした。

本題とは関係ないのですが…
「メールしました」と、私は言っていましたが、違いますね… 「投稿しました 」ですね。

忙しい中、たくさんのアドバイスが書いてあり、とても感謝しております。

ちょっと時間がかかりそうなので、まずは、お詫びと、お礼のメールを、と思いまして。

2020/07/29 (Wed) 23:42
ススム
To らいおんへっどらびっとさん

Akiraさんのコメントは、私に気を使ってくれただけで、お詫びされるほどではないですよ。

ご自身のブログを好きなようにカスタマイズするために、いろいろ調べたり質問するのは普通ですから。
そうやって知識を身に着けて、自分だけのカスタマイズを楽しめれば、ブログへの愛着も強くなりますし。
私の説明は文章が長すぎるので、ゆっくりと楽しみながらお試しください (笑)

2020/07/29 (Wed) 23:59
らいおんへっどらびっと
To Akiraさん To ススムさん

Akiraさん、ススムさんが、何度か投稿しているのを見て… なにか言いたくなりまして…

とりあえず、私が言えるのは…

色々とありがとうございます。これからもよろしくお願いします。

2020/07/30 (Thu) 00:32
らいおんへっどらびっと
To Akiraさん To ススムさん

メニューボタンは正常に作動しました。
スタイルシートの件、メニューボタン件、色々ありがとうございました。

2020/07/30 (Thu) 19:46
ススム
To らいおんへっどらびっとさん

こんばんは。
正常に作動したということで、何よりです。

私が言うのもなんですが、あまり気を使いすぎたり萎縮することなく、困ったときは質問するのが一番だと思います。

2020/07/30 (Thu) 21:30

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

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

テンプレート