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

vanillaice (Akira)

vanillaice (Akira)

AnotherDayテンプレート
AnotherDayテンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新 2018.3.10

不具合修正及び大規模なメンテナンスを行いました。
主な変更点は以下の通りです。
iOSの件がありますので アップデート(再DL)を強く推奨します。
お手数おかけします。

  • iOS11.2.6でモーダル検索が使えなくなる件の修正
  • トップページ各記事にサムネイル表示を追加
  • 画像遅延読み込みの導入(トップページ及び個別記事の一部)
  • 個別記事タイトルの見出しレベルをh2からh1へ昇格
  • 構造化マークアップ導入(個別記事のみ)
  • FC2ブログ新変数実装による管理人コメントのプロフィール画像表示(遅延読み込み対象)
  • floatレイアウトからflexレイアウトへの変更
  • フォントサイズ指定にrem単位を導入
  • 全記事リスト(Index)にもnewマークが付くようになりました
名称 AnotherDay
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大792px
サイド --- 280px
記事内で使える見出しレベル h2からh6まで
構造化マークアップ(個別記事のみ) BreadCrumbs(パン屑リスト)
BlogPosting
GTmetrixスピードスコア
推奨カスタマイズ 背景画像変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下(デバイス幅依存) サイドメニュー --- 下
過去の更新一覧
更新履歴 2017.9.21

SSL化に伴う混在コンテンツ排除

更新履歴 2017.1.25

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

更新履歴 2016.10.11

不具合修正
● Windows10 IE11及びMicrosoft Edgeのスクロールバグに対処

メンテナンス
● 全体レイアウトの再調整
● 一部JS動作をCSSに切り替え --- 若干の軽量化
● 関連記事サムネイルの整形
● ベンダープレフィックスの整理
●その他微調整

Windows10でスクロールした際に背景画像がガクガクと震えるバグを再度hackしました
根本的な修正はMicrosoftの対応待ちです
ご迷惑をおかけします よろしくお願いします

不具合修正及びメンテナンスに伴い
当該ページ内容を大幅に修正しておりますことをご了承ください

更新履歴 2016.9.9

● リストマーカーの位置を調整しました
参考記事
list-item横の隙間について
● 最優先フォントを游ゴシック体に変更しました
● 主要公式プラグインの整形を行いました

更新履歴 2016.1.9

フッター構造を変更しました
タイトルタグを微調整しました(SEO対策)

更新履歴 2015.9.22

iOS9 リリースに伴い スマホ・タブレットではColorbox起動させないよう修正しました
Colorbox適用版は記事の半ほどに掲載しています
配布終了致しました

更新履歴 2015.9.9

・ 公式化に伴うOGP削除
・ 画像の縦横比が狂う問題を改善
FC2検索バーがタブレットでレイアウトを壊す問題に対処
(FC2より注意されましたので元に戻しました)

リリース済テンプレ随時更新のお知らせ

更新履歴 2015.8.27

2015.8.27現在 修正版を公式から配信しております
詳細は以下の記事にて
AnotherDay修正のお知らせ

ご迷惑おかけします よろしくお願いします (*_ _)

更新履歴 2015.6.5

iOS Safari でブラウザバックするとホワイトアウトする問題があったため
現在は修正版をリリースしておりますのでご参照ください

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

あなざでぃ あじゅーる(空色)
あなざでぃ もーぶ(桃色)

今回も画像抽出タイプです ( ゚Д゚)ノ
2015.5.16 承認されました sawaさんお知らせあざす!

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


mauve
Sample トップ
Sample 個別
DOWNLOAD


FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数変更
・テンプレートと無関係なプラグインの導入

カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします

左右カラム入れ替えの仕方
How to reverse the direction of rows

#float-container で検索されますとCSS内に4箇所出てきます。最初のものが対象です。
この括りの padding: 40px 60px 80px; の直下に flex-direction: row-reverse; を追加。

続きまして #primary で検索されますとCSS内に2箇所出てきます。こちらも最初のものが対象です。
この括りの margin-right: 40px; 緑部分 right を left に変更。
以上2手順です。

背景変更について
How to change background image

デフォルトでは PC用背景とタブレット・スマホ用(モバイル)背景を分けています。
PCでは横長画像、モバイルでは縦長画像を、といったような縦横比を変更しつつさらに背景表示のCSS内容も切り替えを行っています。
CSS切り替えについてはiPhoneのステータスバー対策です。
スクロールでバーが非表示になることによって画面縦サイズが変更になるため、通常の背景指定では画像がスクロールのたびに拡大・縮小を繰り返し非常に煩わしい。その対策です。

背景画像を変更されます方は、同種2サイズ の画像(横長と縦長)を準備されるか、めんどうな場合は1種横長で以下のガイダンスを目印に指定箇所を削除してください。

注)タブレット・スマホ用背景

1サイズで揃える場合は必ずこの削除処理を行なってください。でないとデフォルトの背景がそのまま居残ります。

2サイズを準備される方は、iPhone Xがかなり縦長ですので、以下のデフォルト画像を目安に作成してください。

アスペクト比で書いてもたぶん逆に難しいと思いますので見た目・大体の感じで ^^;
おさらいすると、2サイズ用意する方は横長と縦長を。
1サイズの方は指定箇所を必ず削除。
1サイズの場合には繰り返しますがスクロール時の背景拡大・縮小が避けられない、というのを念頭に。

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

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

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

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

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

You may also like

Comments 47

There are no comments yet.

sawa  

承認されましたね

Akiraさん、こんにちは ^^

テンプレート、承認されてましたよ~ いまFC2覗いて来ました(笑)
おめでとうございます。
早速DLさせて戴きました ^^

2015/05/15 (Fri) 14:03 | EDIT | REPLY |   

Akira  

To sawaさん

あ。ほんまや(笑)
お知らせと、いつもありがとうです ヽ(`▽´)/

2015/05/16 (Sat) 00:30 | EDIT | REPLY |   

ぶーこ  

はじめまして

とても素敵な作品ですね。
ダウンロードさせていただきました。

ところで質問なのですが
『続きを読む』と折りたたみ式のものを見かけた事がありますが
こちらのテンプレートで設置可能でしょうか?
もし可能ならばどのように設置すれば良いのでしょうか?

2015/05/16 (Sat) 02:18 | EDIT | REPLY |   

Akira  

To ぶーこさん

こんばんは ( ³ω³ )(半分寝てます)

「続きを読む」の折りたたみを『個別記事内で』という解釈でよろしいでしょうか。
今回はトップページは要約するタイプにしていますので、たぶんそういうことかな?と思います。
でも一応確認(笑)
お返事頂けましたらscriptの書き方載せますね。
明日運動会あるから何時になるか… ( ̄∀ ̄;)

2015/05/16 (Sat) 03:22 | EDIT | REPLY |   

ぶーこ  

To Akiraさん

おはようございます。
はい。そのとおりです。
お忙しい中すみません。
お時間がある時で構いませんので
宜しくお願いします。

2015/05/16 (Sat) 11:42 | EDIT | REPLY |   

Akira  

To ぶーこさん

大変遅くなりましたー!
今記事内に記載しましたので、お試しくださいませ!

しばらくこちらのテンプレに設定しておきます。
ボタンの見た目等 これと全く同じものにするには、
記事にある通りの記述内容でオッケーです。

2015/05/16 (Sat) 19:47 | EDIT | REPLY |   

ぶーこ  

To Akiraさん

お疲れの中、早々の対応
ありがとうございます。
今スマホから拝見していますが、スマホからでも折り畳み見れました。

作業してみます。

2015/05/16 (Sat) 21:25 | EDIT | REPLY |   

ぶーこ  

ありがとうございます。

できました。
ありがとうございました。

ところで、1つ質問なのですが(上手く説明できるか不安ですが)
リンクが貼ってあるところにマウスがくると、私のPCでは矢印から手のマークにかわりますが
今回、折り畳みを設置したところでは何も変化がないのですが…
なぜでしょうか?

上手く説明できなくてすみません。

2015/05/16 (Sat) 23:03 | EDIT | REPLY |   

Akira  

To ぶーこさん

ちゃんと伝わっておりますので大丈夫ですーe-257
「read more」の部分は「リンク」ではないので、自動でカーソルが指マークになることはありません。
指マークに変更するには、記事にしました内容の more_design クラスに対して指示を書いてください。
以下の通り ↓

.more_design {
cursor: pointer;
}


これでカーソルは変わります。
で、ボタンの上だけでなくボタンの行の横幅いっぱいを認識範囲にしてありますので、ボタン上でなくでも開きますしカーソルも変わります。
リンクなどはボタン上だけで良いんだけれども、折りたたみの場合はたぶん横幅全体の方が閲覧される方にとっては親切かと思います。

こちらのテンプレも変更しておきましたのでご確認くださいませ。

2015/05/16 (Sat) 23:14 | EDIT | REPLY |   

Akira  

To ぶーこさん

一応書いた方が良いかな?
トリガーの認識範囲(カーソル認識・折りたたみのスイッチ認識)をボタン上だけにするには、ちょっとまた手間がかかります。

まず

#more_h {
display: inline;
}


こちらがボタンへの指示。
これを書くことによって、ボタンが左以外に寄せられなくなります(これまでの記述だけでは、という意味です)ので以下を追加。

#more {
text-align: right;
}


もちろん center の指定でも構いません(左の場合は何も書かなければ勝手になります)。

さらに、ボタン周りの「上下」に空白をつけることができなくなりますので、以下も追加。

#showmore {
padding-top: 数字px;
text-align: left;
}


padding-topをつけておかないとボタンと追記の書き出し文章との間に空白行ができません。
20~30pxあたりが妥当だと思います。
それから、
text-align: left;
をつけないと追記の文章が全て「右」寄せになりますので、左に戻すのであればこちらも書きます。
(追記以降は右寄せってのもおもしろいかもしれません)

2015/05/16 (Sat) 23:26 | EDIT | REPLY |   

Akira  

To ぶーこさん

まとめ。

今ここと同じ状態にするには以下の通りです。

.more_design {
cursor: pointer;
}

#more {
text-align: right;
}

#more_h {
display: inline;
}

#showmore {
padding-top: 30px;
text-align: left;
}



範囲認識を横いっぱいにするのならば、2つ上のコメント内容までで留めてくださいね。

------------

んで、ぶーこさん、ごめん。
他のみなさんもだけど。

別の箇所でちょっと私のミスがe-259
最新記事ご覧頂けると助かります。
申し訳ございませんe-263

2015/05/16 (Sat) 23:31 | EDIT | REPLY |   

ぶーこ  

To Akiraさん

本当にありがとうございます。
手のマークにできました。

運動会でお疲れのところ、本当にありがとうございました。

2015/05/17 (Sun) 00:35 | EDIT | REPLY |   

Akira  

To ぶーこさん

良かったです!
こちらこそお手数おかけしました。
お疲れ様でしたe-454

2015/05/17 (Sun) 00:40 | EDIT | REPLY |   

バニラ  

いつも素敵なテンプレートをありがとうございます。
ところで、ブログのトップページには「read more」で記事が折りたたまれていますが
Capriciousのように記事の全部をトップに表示させるにはどうしたらいいでしょうか?
お時間のある時にでも教えていただけますと幸いです。
何卒よろしくお願いいたします。

2015/05/23 (Sat) 10:00 | EDIT | REPLY |   

Akira  

To バニラさん

ありがとうございますe-257

>トップページを全記事表示に

大きな修正になりますので、複製を取ってからどうぞ。

Ctrl + F で以下を検索


<div class="pager">
<div class="pagenation"></div><!-- 円形ページナビ -->
</div>

<div id="main-contents">

<!--topentry-->
<section class="element-item">
<div class="stuff">
<h3 class="posted_title">
<a href="<%topentry_link>"><%topentry_title><!--body_img--><i class="fa fa-camera"></i><!--/body_img--></a>
</h3>

<ul class="information_ul">
<li class="disp">
<a href="<%topentry_link>"><span class="font_assign"><%topentry_year> <span class="month<%topentry_month>"></span> <%topentry_day>  <%topentry_youbi>  <%topentry_hour>:<%topentry_minute>:<%topentry_second></span></a>
<!--allow_comment-->
<li class="disp">
<a href="<%topentry_link>#community"><span class="font_assign">Comment <%topentry_comment_num></span></a>
<!--/allow_comment-->

<!--deny_comment--><!--/deny_comment-->

<!--allow_tb-->
<li class="disp0">
<a href="<%topentry_link>#track"><span class="font_assign">Trackback <%topentry_tb_num></span></a>
<!--/allow_tb-->

<!--deny_tb--><!--/deny_tb-->

<script>
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>


</ul>

<div class="description">
<%topentry_description>
</div>

<div class="readMore">
<a href="<%topentry_link>"><span class="font_assign more_btn">Read more</span></a>
</div>

</div><!--/stuff-->
</section>
<!--/topentry-->

</div><!--/main-contents-->


<!--/not_titlelist_area-->
<!--/not_search_area-->
<!--/not_edit_area-->
<!--/not_permanent_area-->



上記を丸っと差し替えます ↓


<div class="pager">
<div class="pagenation"></div><!-- 円形ページナビ -->
</div>

<!--topentry-->
<article class="stuff">
<h3 class="posted_title">
<a href="<%topentry_link>"><%topentry_title><!--body_img--><i class="fa fa-camera"></i><!--/body_img--></a>
</h3>

<ul class="information_ul">
<li class="disp">
<a href="<%topentry_link>"><span class="font_assign"><%topentry_year> <span class="month<%topentry_month>"></span> <%topentry_day>  <%topentry_youbi>  <%topentry_hour>:<%topentry_minute>:<%topentry_second></span></a>
<!--allow_comment-->
<li class="disp">
<a href="<%topentry_link>#community"><span class="font_assign">Comment <%topentry_comment_num></span></a>
<!--/allow_comment-->

<!--deny_comment--><!--/deny_comment-->

<!--allow_tb-->
<li class="disp0">
<a href="<%topentry_link>#track"><span class="font_assign">Trackback <%topentry_tb_num></span></a>
<!--/allow_tb-->

<!--deny_tb--><!--/deny_tb-->

<script>
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>


</ul>

<div class="contents">
<%topentry_body>


<div class="readMore">
<a href="<%topentry_link>"><span class="font_assign more_btn">Read more</span></a>
</div>

</div><!--/contents-->
</article>
<!--/topentry-->



<!--/not_titlelist_area-->
<!--/not_search_area-->
<!--/not_edit_area-->
<!--/not_permanent_area-->

2015/05/23 (Sat) 10:57 | EDIT | REPLY |   

Akira  

ここまででトップページに「追記より前」の文章が表示されるようになります。
追記以降も掲載するのであれば、差し替え後に

<div class="readMore">
<a href="<%topentry_link>"><span class="font_assign more_btn">Read more</span></a>
</div>


上記の部分を削除した後に以下を加えます。




<!--more-->
<div id="more">
<%topentry_more>
</div>
<!--/more-->



こうした場合には、read more ボタンではなく、記事タイトルから個別記事へジャンプするような形です。
read more のボタンは無くなります。
ボタンを残される場合には マウスオーバーで下線が出てしまいますので、気になるようでしたらCSSソース(テンプレ管理画面「下」)の末尾に


.readMore a:hover {
text-decoration: none;
opacity: .6;
}



また、追記以降を折りたたみにされる場合には当該記事内容をお読みくださいませ。

2015/05/23 (Sat) 11:03 | EDIT | REPLY |   

バニラ  

早速教えていただきありがとうございました!
おかげさまで表示できました。
これからも素敵なテンプレート、期待しています。
本当にありがとうございます。

2015/05/23 (Sat) 11:10 | EDIT | REPLY |   

Akira  

To バニラさん

早っ!(笑)
こちらこそありがとうございます。
お疲れ様でしたe-454

2015/05/23 (Sat) 11:14 | EDIT | REPLY |   

とんがり  

こんにちは、とても素敵なテンプレートをありがとうございます。
初歩的な質問で申し訳ないのですが、よろしければお時間のあるときに、お返事いただけましたら幸いです。

(1)個別ページ最下部に表示される「Latest posts」からのリンクが「別窓」になっているのですが、これを「同窓リンク」に変えることはできますでしょうか。

(2)記事編集ツールでサムネイル挿入している画像が、「target="_blank"」とタグでは入っているにもかかわらず、全て「同窓」になります。
このテンプレートの画像挿入の設定そのものが、自動的に同窓リンクになるようになっているのだとは思うのですが、「記事内に挿入している画像」のみを「別窓リンク」に変えることはできますでしょうか。

以上、お手数をおかけしますが、方法があればよろしくお願いします。

2015/05/24 (Sun) 19:17 | EDIT | REPLY |   

Akira  

To とんがりさん

お手数おかけします (*_ _)
どちらも可能ですので、以下の方法をお試しください。

(1) Latest postsの別タブリンクをやめる(同ページ内で表示)

以下の箇所をCtrl + F キーで検索

for(var j=0,l=linkBlank.length;j<l;j++){

赤字の部分を変更し、下の通りにします ↓

for(var j=0,l=linkSelf.length;j<l;j++){

--------------------

(2) target_blank を機能させる

以下を検索

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
});
</script>


一行追加して、下の通りに

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
});
</script>



両手順をして頂くと、Latest postsは同窓リンクに。
target_blank指定したURLは別窓リンクになります。
お手数おかけします。
よろしくお願いしますe-257

2015/05/24 (Sun) 20:03 | EDIT | REPLY |   

とんがり  

こちらこそ、お忙しい中お手数をおかけしてしまい、申し訳ありません<(_ _)>
両方とも、無事に修正できました。
早急かつ丁寧にご対応下さいまして、どうもありがとうございました!

2015/05/24 (Sun) 20:25 | EDIT | REPLY |   

Akira  

To とんがりさん

いえいえ。とんでもございません。
ご指摘頂きまして助かりました。
他にも同じことを望まれている方もいらっしゃると思いますので、
記事内に追記しておきました。
ありがとうございますe-454

2015/05/24 (Sun) 22:13 | EDIT | REPLY |   

ぱぴくる♪  

Top記事冒頭部の文字数

Akiraさん こんにちは。
素敵なテンプレートをDLさせていただきありがとうございます。
初歩的で申し訳ございませんが・・・
トップページに表示される記事冒頭の文字数(read moreより前の部分)を1~2行に少なくしたいのですが、
お時間あるときで構いませんので、よろしくご教示お願いします(*^_^*)


2015/06/02 (Tue) 11:59 | EDIT | REPLY |   

Akira  

To ぱぴくる♪さん

ありがとうございますe-257

> 要約記事の文字数を減らしたい

これはアレですかね?
FC2の規定というか、仕様として

・「追記」前の文章で かつ 最大200文字

というのがあるのですが、追記前にたくさん文章を書いたとしても要約表示は少なめ
(100文字程度?) にしたい。
という意味で合ってますでしょうか。
もしくは
「追記の前に書く分を減らせば良いだけ?
のどちらなんだろう(笑)

後者ならばぱぴくる♪さんの文章構成だけで良いんだけども、前者の場合にはJavascriptで文字数を制御する必要があります。

ちょっと待ってね。

2015/06/02 (Tue) 22:46 | EDIT | REPLY |   

ぱぴくる♪  

To Akiraさん

お忙しくらっしゃるのに、私が何にもわかってなくて煩わせてしまってますね(^_^;)

>というのがあるのですが、追記前にたくさん文章を書いたとしても要約表示は少なめ
(100文字程度?) にしたい。
という意味で合ってますでしょうか。


こちらです。
記事内文章が少ない場合(個別記事ではスペースで引き伸ばしてます)、トップページでオチまで表示されちゃうので。
関西圏ですみません(笑)

お借りしているテンプレートは”AnotherDay_azure”です。

ド素人故…とっても面倒なお願いでしたら断わってください(笑)

2015/06/02 (Tue) 22:58 | EDIT | REPLY |   

Akira  

To ぱぴくる♪さん

了解ですーe-257
そんなに難しいことではないので少しお待ちくださいねe-247

2015/06/02 (Tue) 23:03 | EDIT | REPLY |   

Akira  

To ぱぴくる♪さん

手順数2 です。
いずれもhtmlソース内での作業です。
まずCtrl + F キーで以下の文字列を検索します

<div class="description">
<%topentry_description>
</div>

この一番上の行に一部追加で以下の通り(コピペでどうぞ)

<div class="description overflow-text">
<%topentry_description>
</div>


description の後ろに半角スペースひとつ(全角不可) 開けて、
overflow-text

次にソース最後方に
</body>
という箇所がありますので、その「直前」に

<script>
$(function() {
var count = 100;
$('.overflow-text').each(function() {
var thisText = $(this).text();
var textLength = thisText.length;
if (textLength > count) {
var showText = thisText.substring(0, count);
var insertText = showText;
insertText += '<span class="omit">…</span>';
$(this).html(insertText);
};
});
});
</script>


数字の 100 の部分を200以下の数字で設定してください。
100~150ぐらいが良いんじゃないかしら。
よろしくお願い致しますe-257

2015/06/02 (Tue) 23:17 | EDIT | REPLY |   

ぱぴくる♪  

To Akiraさん

遅くまで・・・ありがとうございます(*^_^*)
助かりました♪
素敵なテンプレートをたくさんありがとうございます。

2015/06/03 (Wed) 00:14 | EDIT | REPLY |   

Akira  

To ぱぴくる♪さん

できたかな?
こちらこそありがとうです ٩( 'ω' )و

2015/06/03 (Wed) 10:05 | EDIT | REPLY |   

ぱぴくる♪  

ありがとうございました。

思い通りのTOPになりました(*^_^*)
随分文字数は少なくしちゃいましたが…
お手数お掛けしまして、ありがとうございました♪

2015/06/04 (Thu) 10:08 | EDIT | REPLY |   

Akira  

@ぱぴくる♪さんへ

できたようで良かったですー。
皆さん好みは色々だもんね。
いやホント、勉強になります。

ご報告ありがとうございますヾ( ̄∀ ̄☆)

2015/06/04 (Thu) 12:07 | EDIT | REPLY |   

Candy  

画像のサイズ

素敵なテンプレートを発見!
と2つ前の記事からAnother Day_azureを使わせていただいています。

もしかしたらどこかに書かれているのかもしれませんが、発見できませんでしたので、質問させていただきます。

画像のサイズは自動的に一定のサイズに修正されますか?
ブログ内の画像は439×329になっています。
今までは、元サイズ640×480を560×420にブログの記事のところで修正をしていました。

560×420位のサイズにしたいのですが、大きくするにはどうすればいいでしょうか?
記事を書くところでは修正できずでした。
記事幅を広げる(やり方不明です)と画像も大きくなるかもですが

すみませんが、お時間のある時に教えていただけるでしょうか。
よろしくお願い致します。

2015/07/31 (Fri) 14:46 | EDIT | REPLY |   

Akira  

To Candyさん

ありがとうございますe-257

>画像サイズの件

画像のサイズは特に揃えるような指定は行っておりません。
ただ、レスポンシブデザインですので、ブラウザを縮小するなどして画面幅が狭くなったときには自動リサイズがかかります。
(そうしないとオーバーフロー(ボックスからはみ出てしまうこと)してしまいます)

記事横幅の内寸は最大660pxですので、ご希望の数値で十分収まるかと思います。
で、Candyさんの記事を拝見しますと、実際に画像横幅の最大値が650pxになっており、そのように表示されています。
ブラウザ幅が縮小されると画像も小さくなるよ、というところでのちょっとした勘違いではなかろうか、と思います。

2015/07/31 (Fri) 17:28 | EDIT | REPLY |   

Candy  

To Akiraさん

早速お返事いただいてありがとうございます。
ああ、何という私の勘違い!
仰るとおりです。
画面を一杯に開いていないために、当然画像も小さくなっていただけでした。
そこでプロパティを見ても意味がなかったのですね。
設定と違ってる。なんて思ってしまった。
まったく~私!
何たる初心者!

記事内で大きくしてみても、プレビューで見ると変わって見えなかったのは
ほんの少しの変化に私が気が付かなかったということなのだと思います。

Akiraさんはとっても素敵なテンプレート作られますね~。
秋になったらまた雰囲気の違うのを使わせていただきたいと思っております。

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

2015/07/31 (Fri) 22:12 | EDIT | REPLY |   

Akira  

To Candyさん

良くある勘違いです。
私もいまだにある(笑)
すっごい単純なミスとか((((笑)

嬉しいお言葉もありがとうございます! ヽ(`▽´)/

2015/08/02 (Sun) 00:50 | EDIT | REPLY |   

alfa  

はじめまして!

素敵なテンプレートがたくさんあってその中でもこちらを使わせていただきました!
ありがとうございます!

初歩的な質問かもしれず申し訳ないのですが、
akiraさんのテンプレート内ではテーブルタグは使えない仕様なのでしょうか?

当方、見出しのような感じで度々テーブルタグを使っていたのですが、
反映がされないようでして…。
akiraさんのほかのテンプレートに変えてもほかのものでも反映がされないようでした。

お忙しいところお伺いしてしまって申し訳ありません、
お時間がある際にでも返答頂ければ幸いです。

よろしくお願いいたします。

2015/12/15 (Tue) 00:36 | EDIT | REPLY |   

Akira  

To alfaさん

ありがとうございます

> tableについて

結論から言うと「使えます」
ただし正しいソースを覚えて頂く必要があります。
どんな形態の表かにもよりますけれど、雛形を用意しています。
ちょっと説明長いかと思いますがご容赦ください。

現況のweb標準のhtmlバージョンは「5」です。
私のテンプレートは全てこのhtml5で作成しています。
それ以前のhtmlバージョンは4.01。
FC2エディターの規格はこちらの旧バージョンである4.01をベースに造られてます。

4.01から5に移行するにあたり、多くのタグが淘汰(廃止)されており、
その中には<table>の構成である cellspacing や cellpadding なども含まれます。
これら廃止タグはhtml5のテンプレートでは利用できない、と思ってください。

現在の正しいtableの書き方はこちら ↓

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

上記記事内容に一部追加しておきますので、一度ご覧ください。
常に一定のソースをお使いなのであれば私の方で新規格に整形し直しますので、鍵付きでソース内容をお伝えくださいね。

2015/12/15 (Tue) 09:26 | EDIT | REPLY |   

alfa  

さっそくのお返事ありがとうございました!

過去記事にも記載されていたのですね、見落としからのお手数おかけしてしまって申し訳ございません。
慣れで旧HTMLを使ってしまっていたこちらのミスでした。
akiraさんの丁寧な記事のおかげで無事テーブルタグも反映することができました!


akiraさんのテンプレートはどれもオシャレすぎてどれにするかすごく迷いましたが、
しばらくはこちらのプレートを愛用させて頂こうと思います。
これからもオシャレなテンプレート、楽しみにしています!

本当にありがとうございました!

2015/12/15 (Tue) 14:51 | EDIT | REPLY |   

Akira  

To alfaさん

なかなか最初はちょっと戸惑いもあり、難しく感じるかもしれません。
慣れれば大丈夫だと思います(笑)

お手数おかけしました。
こちらこそありがとうございます

2015/12/15 (Tue) 14:58 | EDIT | REPLY |   

Candy  

プロフィールの写真

いつもお世話になっています。
プロフィールの下に入る円形のところの写真ですが、いつの頃からか、ボケてしまいます。
水色のazureの方にしても同じです。
今、ボケたのを入れたままにしました。

どういう事なのか、私にはさっぱりで・・・
何とか直したいのですが、お教え下さいませ~。
よろしくお願いいたします。

2017/11/03 (Fri) 16:16 | EDIT | REPLY |   

Akira  

To Candyさん

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

プロフィールに用いている画像の原寸が横50px縦38pxしかありません。
円形部分は150pxですので、拡大されてぼやけています。
対処としてはプロフィール画像の原寸を大きいものに変更する以外にありません。
表示範囲は150px四方ですので、倍の300pxをおすすめします。

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

よろしくお願いします。

2017/11/04 (Sat) 10:03 | EDIT | REPLY |   

Candy  

To Akiraさん

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

プロフィール設定の画面からのアップロードがなぜか出来なかったので
600px以上の画像をファイルアップロード画面からアップロード・URLを貼り付けて
解決致しました。
ありがとうございました!

2017/11/05 (Sun) 10:22 | EDIT | REPLY |   

Akira  

To Candyさん

こんにちは。
アップローダーたまにおかしいですよね ^^;
お疲れ様でした

2017/11/05 (Sun) 15:19 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/13 (Tue) 23:49 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To AnotherDayアップデートの件 内緒さん

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

> TOPの要約文が表示されているページで、記事内に画像が無い(サムネイルの画像が無い)記事だと要約文が全く表示されない〜

これなんですが、申し訳ないです。私実は一度ファイルを間違えて上書きしてしまったんですね。
慌ててすぐ修正したのですが。
その際にダウンロード数が増えていないか確認したつもりだったのですが(被害者が居ないかどうか(笑))、内緒さん恐らくその間違ったファイルの状態でDLされたんだと思います。
すみませーん!ホントに(汗)

大変申し訳ないのですが、公式配布ページで再度「プレビュー」をクリック、要約文が表示されることを確認されましたら再DLをお願いします。
ホントにごめんなさい (_ _;)

> ページ内スクロールボタンの形を変更したい〜

#pagetop,
で検索されますとCSS内に1箇所あります。その括りの
border-radius: 50%;
の一行を削除して頂くと四角になります。

ご迷惑おかけします。よろしくお願いします。

2018/03/14 (Wed) 00:14 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/14 (Wed) 00:45 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To AnotherDayアップデートの件 内緒さん(完了のご報告)

こんにちは。
貴重なお時間を浪費させてしまいごめんなさいね。
お出来になったということで安心しました。
こちらこそありがとうございます

2018/03/14 (Wed) 14:11 | EDIT | REPLY |   
カスタマイズ Q&A 質問時の注意 テンプレート