attention admin about comments trackbacks you may also like

Stoic FC2ブログテンプレート

2016年02月11日
テンプレート
46
HTML5 CSS3 RWD
Stoicテンプレート

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

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

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

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

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

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <footer class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </footer> まで(この文字列も含む)を以下の内容に 変更

<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;
}
②について

<!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">コメント投稿</h3> までを 削除

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

上記のような形になっていれば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箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

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

.inner-contents {
  margin: 20px 0;
}

.inner-contents p {
  margin: 1.9em 0;
}

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

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2019.1.9
  • Font Awesomeを廃しインラインSVGに変更
  • jQueryを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • Pinterest, はてなブックマークのシェアアイコンを追加
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • YouTube動画レスポンシブ設定用CSSを追加(独自クラス)

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

更新履歴 2018.3.9
  • iOS11.2.6でモーダルが開かない件修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)にアップグレード
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示

iPhoneでの不具合修正も含まれます ので是非アップデート(再DL)をお願いします。

更新履歴 2017.12.17

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

Stoic(Blue/ Brown)大規模メンテナンスのお知らせ - テンプレ不具合・修正など

Stoicテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2017.1.13

・RSS新着サムネイルを削除しました 関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.2.26

不要コード削除
IE8以下等のレガシーブラウザご使用中の方へアップグレードを促すの啓蒙コードが記されていました
(私が個人的に使っている自作ものです)
いつも公式へはコードを外して申請しておりますが 消し忘れました ( ̄∀ ̄;)
これのことです ↓
sample
申し訳ございませんemoji

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

グレートストイックが!!! 。゚(´。∩ω∩`。)゚。
(How to train your dragon) ← わかる方いますか。

すといっく ぶるー/ ぶらうん ( ゚Д゚)ノ
此度は超シンプル 初心者の方向け(たぶん)

サンプル

Samples

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

StoicBrown
Sample トップ
Sample リスト
Sample 個別

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

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

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

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

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

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

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

How to reverse the direction of rows

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

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

ドミナントカラー

Dominant colors

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

Blue

rgb(26,36,47) グラデーション濃色
rgb(154,177,199) グラデーション淡色, リンク色, ボーダー色, ページ移動ボタン など

Brown

rgb(151,145,146) グラデーション濃色
rgb(218,208,198) グラデーション淡色, リンク色, ボーダー色, ページ移動ボタン など

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

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

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(46)

There are no comments yet.

ひろし

2016/02/11 (Thu) 14:33

正解は

ヒックとドラゴン(笑)
息子坊主と映画行きました^^
コメントできて良かったw

Akira

2016/02/11 (Thu) 17:49

To ひろしさん

ピロリン。おはおー (´・ω・`)

ピロリンで合ってますよね? ←
前訪問者さんに勘違いですっごい気安くリコメしちゃったよ。
ピロリンったらっ! みたいな(笑)
大体ひろしって何なのよ誰なのよ(笑)

まさかあんな展開が待っているとは。
想定外すぎて号泣 (/_;)

tak

2016/02/12 (Fri) 17:00

イタリック

ご無沙汰しております。

指定範囲のテキストをイタリックにしたいのですが、
普通に<i>~</i>ではイタリックになりません。
どうすればよろしいでしょうか?
ご教授をお願いいたしますm(_ _)m

Akira

2016/02/13 (Sat) 14:47

To takさん

えー マジですか
ちょっと確認しますね。お待ち下さい。

Akira

2016/02/13 (Sat) 14:58

To takさん

今確認しました。
スタイルシート(CSS)の中に

i {
font-style: italic;
}

が無いと斜体にならないのですが、該当のテンプレートには入ってます。
で、もしかして「日本語」を斜体にしたい、ということでしょうか。
BeHappyテンプレの日本語フォント指定は「meiryo」なのですが、このフォントに斜体はありませんです (´・ω・`)
英字フォントは斜体がデフォルトで存在するものがほとんどですが、日本語フォントはそのフォントの実装状況によります。
(開発元が作成しているかどうかによる)
meiyoフォントの斜体というのは無いんです。

斜体を優先したいということであれば、meiryoフォントを避けて他のフォントに変更する必要があります。
おすすめは「游ゴシック(ゆう ごしっく)」ですが、Windowsだと若干かすれ気味 (´・ω・`)
Macだととっても綺麗で見易いです。
こちらは斜体が用意されています。
変更されるのであればCtrl+Fキー検索

body

の中の

font-family: 省略;

上記を下記に修正。

font-family: '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo';

これまで書かれました文章も全て游ゴシックに置き換わりますので、その点にも留意してお決めくださいね。

* こちらの記事末尾に追記しておきました ↓ *

http://vanillaice000.blog.fc2.com/blog-entry-310.html#object4

tak

2016/02/13 (Sat) 23:59

游ゴシック

ありがとうございます。

以下のように書き換えてみました。

body { /* 注)基本フォント関連 */
font-size: 15px;
color: rgb(51,51,51);
line-height: 1.7;
font-family: '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo';
}

これで<i>~</i>で範囲を指定して(日本語)いますが、斜字体になりませんです。

Akira

2016/02/14 (Sun) 01:22

To takさん

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

斜体にしたい箇所はどこなんでしょうか。
トップページであればどうしようもありません。
何故ならトップページの「要約記事」形式は、個別記事内容から一切のhtmlを省いた形での表示になります。
これはFC2の仕様です。

改行が削除され、htmlは取り除かれ、最大200文字

これが要約表示
<%topentry_description>
の特徴です。
ですから部分的な文字色や大きさなどの変更もできません。
総括的な変更ならば可能です。
つまり「全ての文章を斜体」という形。

この要約表示を仮に通常の表示(書いた記事内容をそのまま踏襲)に変更されますと、
トップページの記事の揃いは崩壊します。
それが故の「要約」です。
要約表示全て斜体で構わない、という場合はCSSソース末尾に以下を追加

.element-description {
font-style: italic;
}

よろしくご理解のほどお願い致します (*_ _)

tak

2016/02/14 (Sun) 09:29

お世話になります。

イタリックにしたい部分は
http://sgourmet.blog94.fc2.com/blog-entry-2361.html
の冒頭部分(私の記憶が~初訪問となった。)です。
(トップページの要約部ではないです。)

で、スマホのサファリとスマホのクロームではイタリックに出来ましたが、
PCのクロームではイタリックになっていないのです。

履歴キャッシュクリアもしましたが。。。

これはPCのグーグルクロームに問題があるのでしょうか?
PCはwindouws 7です。

何度もすいません。お手数ですが、よろしくお願いいたします。m(_ _)m

sawa@Akiraジャーマネ

2016/02/14 (Sun) 10:23

takさんへ

takさん、初めまして ^^

私のPCのGoogleChromeからは「私の記憶が確かならば、」~「20年越しの今回が初訪問となった。」までの文字列はキチンとイタリック体で表示されておりますよ ^^

Windows10
GoogleChrome バージョン 48.0.2564.109 m

の環境です。

* スクショの追記です

https://gyazo.com/c8a8f6bd64cc5ccaa2e9e8c6b76911bd

Akira

2016/02/14 (Sun) 12:44

To takさんTo sawa@Akiraジャーマネさん

ジャーマネありがとうー!
そういう情報とっても助かる!

ごめんなさい。
先にOS確認すれば良かった。
遊ゴシックってWindows8からでした(笑)
7なら入ってないからmeiryoのままだね ( ̄∀ ̄;)

斜体ができるフォントっていうと他に何があるかなー (´・ω・`)
お馴染みのmspゴシックぐらいしか思い浮かばない。
ちょっとアレでソレなフォントですよね。見た目が ( ̄∀ ̄;)

出先でiPhoneなのでまた後ほど参ります!

Akira

2016/02/14 (Sun) 14:14

To takさん

もうこんな感じにするしかー (´・ω・`)
スクショ

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/ar29ry_zpsjqy2urwq.jpg

使用フォント
font-family: 'ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'MS Pゴシック', serif;

説明
まず「斜体にできる文字」が前提
Macではヒラギノ明朝 Pro W6
WindowsではMS Pゴシック

ヒラギノ〜はWindowsにはインストールされていません。
そしてMS〜はMacにインストールされていません。
ですからそれぞれ異なるフォントですが、指定が必要。
Macの指定が先、Windowsが後、の順序。
Macは英文指定も必要なのでふたつ入ってます。

スクショご覧頂いて、文章の横幅が随分違うと思います。
これはWindowsのMS〜がプロポーショナルフォントだからです。
プロポーショナルフォント = 等幅でないフォント

Windowsの文字がきちゃないのはもう仕方ないです。
Windowsのフォントレンダラ(フォントの描画)にはアンチエイリアスの機能がありません。

実装の仕方
Ctrl+Fキー検索

i {
font-style: italic;
}

ここにフォント指定追加で以下の通り。

i {
font-style: italic;
font-family: 'ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'MS Pゴシック', serif;
}

日本語(和文・和字)には根本的に斜体という概念がありません。
ですから斜体が用意されているフォントというとかなり限られてきますね (´・ω・`)
用途・用法についても和文では斜体の定義がありません。
(英文にはitalicとobliqueそれぞれ用途があります)
ということで、判読性だけお考え頂ければ良いのかな と。
一度お試しくださいませ。

----- ここから余談

気になったこと。
おせっかい炸裂(笑)

Windows10の無償アップグレードは期限付きなのですが、アップされなくて良いのかな、と思って(笑)
何らかのお考えがあってWindows7維持を選択されたのであれば余計なお世話ですので捨ておいてください (・ω・)ゞ

tak

2016/02/15 (Mon) 22:14

OS10

Akiraさま
いつ時もお世話になり大変恐縮です。
OSが原因だったのですね。考えがいたりませんで大変失礼いたしました。
7に拘っているのは使用しているソフトが10になった場合の動作保証がイマイチ不安な事にあります。
時期を見てアップグレード等も考えます。
ありがとうございました。ご教授を賜り感謝いたします。

-

2016/02/16 (Tue) 09:37

管理人のみ閲覧できます

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

-

2016/02/16 (Tue) 12:10

管理人のみ閲覧できます

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

Akira

2016/02/16 (Tue) 12:36

To takさん

OSのせいというか、事前に確認を怠った私のせいというか(笑)
二度・三度のお手間になってしまいました。ごめんなさい (*_ _)

後はどうされるかご検討くださいませ。
お疲れ様でした

* ジャーマネもご協力ありがとうございます。
今後もよろしくお願いします(笑)
いや、ホント助かります。
ご意見や実証サンプルは多いほうがありがたいです

Akira

2016/02/16 (Tue) 12:40

To Noir スマホ版への切り替えの件 内緒さん

ご迷惑おかけしております (*_ _)

削除対象は見つかったということですので、その部分は削除して頂いて問題ないです。
誘導バナーは出るけれども、切り替わらないということですよね。
うーん。何故だ (´・ω・`)

バナータップでローディングしている様子はありますでしょうか。
それともタップ自体が無反応な感じでしょうか。
それを教えて頂きたいのと、ご利用のデバイス名を併せてお知らせください。
お手数おかけします。

(私の環境 iPhone5 iOS7/ iPhone6 iOS9 では問題なく遷移しました)

あともう一点ご確認ください。
パソコンからトップページを開いて頂きますと、ブラウザアドレスバーにブログの正規URLが表示されているかと思います。
私の場合ならば
http://vanillaice000.blog.fc2.com/
このアドレス末尾に
?sp
を付け足して以下の通り
http://vanillaice000.blog.fc2.com/?sp
これでローディングしてみてください。
スマホ版が表示されなければ、スマホ版の方に問題があるかもしれません(設定含む)。
(私はスマホ版非表示ですのでサンプルになりません(笑))

-

2016/02/16 (Tue) 14:04

管理人のみ閲覧できます

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

Akira

2016/02/16 (Tue) 14:09

To 新規テンプレの件 内緒さん

ありがとうございます
こちらまだ全然調整中です(笑)
まだ大きな調整ひとつ抱えてるけど進んでない。
なかなかまとまった時間が取れず... ( ̄∀ ̄;)
3月ぐらいになりますかね。たぶん (´・ω・`)

-

2016/02/16 (Tue) 18:58

管理人のみ閲覧できます

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

Akira

2016/02/16 (Tue) 23:41

To モバイル版バナーの件 内緒さん

そうでしたか。良かったです

> モバイル版誘導バナーの縮小について

これはFC2が用意しているものですので、もしかしたらダメかもしれません。
ちょっとわかんない(笑)
非表示は良くて整形はダメなわけ???
ってのが他にもあるんですよ。意味不明な掟が!(笑)
モバイルボタンなんで付けなかったんですかね?私 (´・ω・`)
いつもつけてるのに ( ̄∀ ̄;)

というわけで追加しました。
お手数ですが再DLして頂くか、カスタマイズされているようでしたら以下の手順でお願いします。
Ctrl+Fキー検索

<li class="header_li"><a class="navButton" href="<%url>archives.html">Title list</a>

上記を含んで同じものが3つ縦に並んでいるはずですので、その3つの並びのどこかに以下を追加

<li class="header_li"><a class="navButton" href="<%url>?sp">Mobile</a>

お好きなところに入れて貰えばOKです。
修正版では RSS へのリンクの「下」に入れてあります。
お手数おかけします。
よろしくお願いします (*_ _)

あゆ

2016/02/17 (Wed) 08:39

Akira様

おはようございます。
大変お手数お掛け致しました。
とても綺麗な仕上がりに大満足です。

完璧。

この一言に尽きます。
理想通りのテンプレートでした。

カスタムする必要無し、素晴らしい世界観ですね♡

有難う御座いました( *´艸`)

Akira

2016/02/18 (Thu) 00:35

To あゆさん

いえいえ。こちらこそ。
貴重なお時間頂きました。
ありがとうございます

けいこ

2016/03/07 (Mon) 00:09

テンプレートお借りしました~

こんにちは、はじめまして。
素敵なテンプレートばかりで目移りしまくりましたが、こちらのstoicをお借りしました。

ブルーの方のシンプルさに引かれたのですが、色はブラウンが良かったので、色を入れ替えてしまいました(^^;

実は最初、パライソを使わせてもらったんですが、カルーセルはずしたりあれこれしてたら、なんだかえらいことになってしまい、初心者は下手に手を出してはいかん、と反省し、シンプルな、そのままの形で使わせてもらえるのにしました!

憧れのレスポンシブwebデザインなのですが、
私のブログは文章中心なので、スマホで読んでくださってる方が多いようですので、スマホ専用テンプレートも残しておくべきなような気がして…

悩みは尽きません、またお知恵をお借りするかもしれません。
そのときはどうぞよろしくお願いいたします。

お邪魔しました!

Akira

2016/03/07 (Mon) 08:45

To けいこさん

ありがとうございます

でね カスタマイズして頂きましたのに、大変申し訳ないのですけれど。
こちらの記事をお読みください ↓

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

けいこさんの場合には「個別記事のページ送り」の左右アイコンですね。
ユニコード表記が機能せずに文字列として表示されてしまっています (/_;)
せっかく色の変更をされてますので、FC2の修正が入りましたらバックスラッシュを「追加」する形が望ましいと思います。
ですから現在のソース内容はそのまま保存しておいてください。
でもって、申し訳ありませんがちょこちょことこちらのブログ覗いてください ( ̄∀ ̄;)
お声かけ頂きましたら修正方法をお伝えします。
もー ホント申し訳ない

Akira

2016/03/07 (Mon) 08:57

To けいこさん

ごめんなさいね。
自分の要件だけ慌ててお伝えしてしまいました ( ̄∀ ̄;)

レスポンシブデザインは一つのアプローチですので、これが大正解!というものでもありません。
個人の好みの問題もあります(笑)
個人的にはFC2のスマホ版はあまり出来がよろしくないな、と思うところがあり (´・ω・`)
ページ遷移が多すぎる気がします。
コメントするのに専用ページへ。
コメント読むのに専用ページへ。
これとってもナンセンスだと思うんですけど(笑)
同じページで全部できんのかーい! 的な (・ω・)
あまり直感的ではないんですよね。
なのでどうも制作意欲が沸かず、ひとつ作っただけでスマホ版は放置(笑)
広告もちょっと多すぎだろう... ( ̄∀ ̄;)

てんてん

2016/03/14 (Mon) 21:34

何度もすみません。

こっちに書いてありました!
すみませんでした!
これからやってみます!あっちのコメントはパスワードを入れ忘れたので消せなくてすみません><
画像を入れたらどうなるのか不安でしたがサンプルを見てかっこいい!と思いました!
すごく考えて造られているんだな〜ってもう、もう、ひたすらの感動ですっ!
ありがとうございました!

Akira

2016/03/16 (Wed) 10:48

To てんてんさん

どうぞお気になさらず(笑)
こちらこそありがとうございます

Masami

2016/03/19 (Sat) 03:27

No title

Akiraさん、初めまして。

StoicBrown、シンプルかつ上品でとっても素敵です!!

早速気に入って使わせていただいているのですが、
ヘッダーにあるアーカイブ検索とカテゴリ検索をできれば無くしたいのですが、可能でしょうか?

また、記事タイトルの下のカテゴリーとコメント数表記を記事の下に持って行きたいのですが、可能でしょうか?

大変恐縮ですが、修正方法を教えて下さると幸いです。
よろしくお願いします!

Akira

2016/03/19 (Sat) 12:05

To Masamiさん

ありがとうございます

① アーカイブ・カテゴリ検索の削除
② 記事タイトル下インフォを記事下へ移動

上記2点手順ご説明します

------- ①
Ctrl+Fキー検索

<div id="select-wrapper">

こちらを目印に</header>のすぐ上の</div>までを削除
スクリーンショットを見ながらどうぞ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/aoirffwa_zpssp9qegyg.jpg

------- ②
Ctrl+Fキー検索

こちらは以下のコメント欄が同じ要件ですのでご参照ください。

http://vanillaice000.blog.fc2.com/blog-entry-323.html#comment1525


よろしくお願いします

Masami

2016/03/19 (Sat) 17:05

Akiraさん、お忙しい中、早速の返信をありがとうございました!!

とても分かりやすい説明で、
PCにはかなり疎い私ですが、何とか無事に修正ができました!
ありがとうございました!

もう一つだけ、
トップページのタイトルを左側に置きたいのですが、
修正方法を教えていただけますか?

何度も恐縮ですが、どうぞよろしくお願いします!

Akira

2016/03/20 (Sun) 18:03

To Masamiさん

既出のご質問の件修正完了とのことで安心しました

> トップページタイトルを左寄せ

タイトルは「各記事のタイトル」でお間違いないでしょうか。
この該当箇所Ctrl+Fキー検索

.element-title

3箇所出てきますが、一番最初のものが該当です。
その項目の

text-align: center;

という一行を削除すると左寄せになります。
よろしくお願いします ( ゚Д゚)ノ

Masami

2016/03/22 (Tue) 01:08

Akiraさん、こちらも修正できました!!

本当に何度もご丁寧にありがとうございました!
Akiraさんのテンプレート、大切に使わせていただきますね(^^)/

Akira

2016/03/22 (Tue) 15:48

To Masamiさん

いえいえ。こちらこそありがとうございます。
修正作業お疲れ様でした

madameゆか

2017/12/16 (Sat) 15:00

はじめまして

StoicBrownのシンプルでお洒落なテンプレート大切につかわせていただきます(*^^*)
PCの知識もない私ですが。。。
ほかの方の質問にとても分かりやすく説明されている様子を見てコメントさせていただきました
ほかの方の質問を見ながら記事タイトルを左に寄せることは無事に完了しました(嬉)

質問1
コメント欄の私のハンドルネーム表示がおかしなことになっています
例えば…12月3日の記事のコメント欄をご覧くださいませ

最終的には画像も入れたいと思っているのですがAkiraさまのように画像も入れれるよう頑張りたいです!!

質問2
コメント欄の下の新着記事は取ることができますか?

質問3
カテゴリー内の文字の大きさを小さくする方法を教えてください

知識もないのに(^-^;要求が多くて申し訳ありません
どうぞよろしくお願いいたします(*^^*)

Akira

2017/12/16 (Sat) 15:35

To madameゆかさん

ありがとうございます ('0')/
出先から取り急ぎの返信です。

Stoicテンプレートは本日メンテナンス予定です。
デザイン上の大きな変更はありませんが、そちらを再DLして頂いた方が良いと思います。
深夜になると思いますので明日の朝には提供できるかな、という予定です。

コメント欄についてはこちらをご確認ください。
https://vanillaice000.blog.fc2.com/blog-entry-220.html
(リストの下から3つ目)

よろしくお願いします。

* メンテナンス作業を終えましたら改めて返信致します。

madameゆか

2017/12/16 (Sat) 15:45

ありがとうございます♪

まぁ早速のお返事。。。しかも出先から?!ありがとうございます♪

メンテナンス後に改めてダウンロードさせていただきます
このままでも私的には不都合ではないのでAkiraさまのお時間のある時で
お急ぎいただかなくても大丈夫です

Akira

2017/12/16 (Sat) 17:46

To madameゆかさん

お手間取らせて申し訳ないです。
今日ちょっと娘と一日デート中なのですみません ^^;
また改めます (o'ω')ノ
(このコメントへの返信は不要です)

Akira

2017/12/17 (Sun) 02:36

To madameゆかさん(改めまして)

最新版アップデートしました。

記事
https://vanillaice000.blog.fc2.com/blog-entry-630.html
DL
https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45082

------
質問2についてはデフォルトで外しました。
質問3の

> カテゴリー内の文字の大きさを小さくする方法を教えてください〜

これが具体的にどこのことを指しているのかがわかりません。
該当ページのURLを教えてください。
よろしくお願いします。

--------
コメント返信についての追加です。
ページ内での自動タイトル入力を削除されます場合には、コメント下の「reply」が機能を失いますので、以下のスクショを参照しながらhtml内容を修正してください。
(どんな機能かを事前に確認した上でお願いします)

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

-------
それから、madameゆかさんさんはこの記事の該当者です ↓

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

上記記事内容の「おまけ」に該当しています。
問題対象要素は枠付きのランキングバナー掲載部分。
要素にidまたはclass名がついていればJSでの一括修正ができるのですが、残念ながら付いていませんので手作業で一つづつ修正するしかありません。
こういったhtml要素を記事内で利用される場合は事前にidやclass名をつけておくことをおすすめします。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-344.html

(「プラグインに〜」という内容で書いていますが記事内要素でも同じです)

madameゆか

2017/12/17 (Sun) 16:26

再ダウンロードさせていただきました

お忙しい中メンテナンスいただきありがとうございました(*^^*)

早速再ダウンロードさせていただきました
そして「おまけ」記事も読ませていただき新しい記事から2日分のみ(^-^;修正してみました
過去記事については折々...手作業で(^-^;修正していこうと思います
【idやclass名】。。。つけておくと一括で直せるんですねφ(..)メモメモ

【読んでいただける方】のことを全く考えていませんでした。。。お恥ずかしいv-356

再ダウンロードさせていただいたうえでまたまた質問させてください
前回の【質問1】について
管理画面からではなくブログ画面からコメントをすることにしました
『ご質問の前に・・・』をきちんと読まずに質問してしまいました。。。申し訳ありません
コメント欄の管理人のプロフィール画像がうまく表示されません
.name madameゆか :before {
content: "";
background: url(http://blog-imgs-45.fc2.com/m/a/d/madameyuka222/20121210155125b6cs.jpg) center center /cover no-repeat; }
どこが間違っているのか。。。まったくわかりませんe-258

前回の【質問2】について。。。ありがとうございました

前回の【質問3】についてです。。。説明不足で申し訳ありません
各記事の文字サイズとプロフィールなどのサイドバーの文字サイズはそれぞれ指定することは可能ですか?

質問4
以前こちらのコメント欄でutakoさんが質問されていた件です
記事タイトルは昨日再ダウンロード前は左寄せできたのですが
http://photozou.jp/photo/show/1196295/252988762
再ダウンロード後
.element-titleを検索し一番最初のあとの【text-align: center;】が見つけられませんv-356

また各記事タイトル下のカテゴリーやコメントを記事下に右寄せにしたいと思いますが
<div class="element-header"> で検索しても以前コメント欄にあったようなスクリーンショットが出てきません
http://photozou.jp/photo/show/1196295/252988756

まとめ。。。希望としては以下のように3点変更してみたいです!!
http://photozou.jp/photo/photo_only/1196295/252988770

基本的なことがわかっていないのに本当にわがままばかりで申し訳ありません
どうぞよろしくお願いいたします

Akira

2017/12/17 (Sun) 17:15

To madameゆかさん

再DLの件、お手数おかけしました。

> コメント欄の管理人のプロフィール画像がうまく表示されません〜

htmlやCSSの「半角スペース」には意味がありますので、好き勝手に入れて整形して良いものではありません。

×
.name madameゆか :before

.namemadameゆか:before

nameの後ろのスペース及び:before前の半角スペースは不要というよりも、入れてはいけません。
基本的にソースコードはコピペしたら変更すべき箇所以外はそのまま利用してスペースなどは入れないでください。

------
utakoさんへの返信は旧仕様に則ったものですので、今回のメンテ後内容と照らし合わせができません。
せっかく参照して頂いたのにごめんなさいね。

> 記事タイトルの左寄せ

.element-title {
でCtrl+F(Windows)/ Command+F(Mac)キー検索。
text-shadow: 2px 4px 3px rgba(0,0,0,.1);
の直下に以下の内容を追加

text-align: left;

続いて
header-info {
で検索。
font-size: 1.2rem;
の直下に以下の内容を追加

text-align: right;


--------
> 記事内フォント大きさ変更

以下の内容をCSS末尾に追加

.inner-contents {
font-size: 数値px;
}


単位はremでもpxでもOKです。
remを使用する場合は
13px = 1.3rem, 14px = 1.4rem
といったように小数点が必要です。

---------
> サイドメニューのフォント大きさ変更

#secondary {
で検索、その括りの中の
font-size: 1.3rem;
赤字の数値を変更してください。
単位もろとも消去してのpx指定も可。

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

madameゆか

2017/12/17 (Sun) 19:02

重ね重ね。。。

重ね重ね素早い対応ありがとうございました

各記事タイトル左寄せ&カテゴリーetc...右寄せできました!!
ありがとうございました

コメント欄のプロフィール画像。。。勝手に(^-^;入れていた半角も削除しましたが
未だ表示できません
画像サイズ等に問題ありでしょうか??

サイドメニューのフォントの大きさ変更できました!!
・・・が
記事内フォントの大きさが変わらないような気がします
ちなみに現在は18pxで指定しています

申し訳ありません
よろしくお願いいたしますm(__)m

Akira

2017/12/17 (Sun) 20:16

To madameゆかさん

アイコン変更・フォントサイズ変更のいずれもカスタマイズ時に元のCSSにあった記号が一つ消されてしまったことが原因です。

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

現時点で
.shadow-attachment {
box-shadow: 0 1px 4px rgba(0,0,0,.4);

.namemadameゆか:before {

上記のようになっていますので、

.shadow-attachment {
box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.namemadameゆか:before {

赤字の記号を追加してください。

ところで18pxというとかなり大きい気がしますが大丈夫でしょうか。
スマホでの見え方を確認した上で変更してくださいね。
(スマホでは文字が大きすぎると却って読みづらいです。一目で入ってくる情報量が少ないため閲覧者側の情報処理能力が落ちます)
でもまぁ、18pxなら良いか。20pxとかは個人的にやめてほしい ^^;
よろしくお願いします。

madameゆか

2017/12/17 (Sun) 20:43

ありがとうございました

Akiraさま。。。丁寧に教えていただきありがとうございました

無事にできました~~\(^o^)/
感謝の気持ちでいっぱいです(*^^*)

Akira

2017/12/17 (Sun) 21:02

To madameゆかさん

安心しました

madameゆかさんだけでなく、はみ出してる方多いですよ。かなり多いです(笑)
スマートフォンを意識すると記事の書き方も変わります。
そしてこれからはそうでないといけないですね (´・ω・`)
早く気づけば早く対処できる、と。そゆことです (´・ω・`)

-------- 追記
記事のフォントを14pxに設定されましたでしょうか。
ならばデフォルトが14pxですので記述が無駄です。
ホントにわずかばかりですがページの読み込みに影響しますので削除をおすすめします。
すっごいわずかなので体感できませんが、無駄は無駄です(笑)
(同じサイズ指定だとしてもマッチングと上書きの作業が行われます)

素姓乱雑

2018/01/18 (Thu) 19:17

表示位置を変更できますか?

Genericを使わせていただいています。
現在では本文と「続きを読む」の間にスポンサーサイトがあって
本文と「続き」が離れているので、「続き」があると認識されないので
困っています。できるだけ近づける方法はないでしょうか。
たとえば、本文の後に「続きを読む」が来て
その後にスポンサーサイトが表示されるとか。よろしくご教示ください。

Akira

2018/01/18 (Thu) 19:21

To 素姓乱雑さん

申し訳ないんですがコメント欄にあるお約束事をお読み頂けないものでしょうか。
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
よろしくお願いします。

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

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