The other way round

ARTICLE PAGE

in テンプレート

Nostalgia

-24 COMMENT



名称 Nostalgia
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC --- 右/ ブラウザ縮小時 下
SP --- 右からスライド
記事幅 可変 最大1270px (内寸 1190px)
サイドバー幅 固定 300px (内寸 260px)
新着サムネイル表示 なし
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム スライド画像変更, テーマ色変更, 文字大きさ変更 etc.


valid-html5.png


更新履歴 2017.1.25


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

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


--------- 以下本文



更新履歴 2016.10.6


・ 微調整(リストのmarginなど細かな点)
・ ベンダープレフィックスの整理

「Nostalgia」「Little-thing」「Mocha」メンテナンスのお知らせ


更新履歴 2016.9.14


ブログタイトル下 サイト説明文の横幅を調整しました

ちょっと不親切な造りでした 申し訳ないです (*_ _)
以下の通り最大幅を 850px に制限しました



サンプルは294文字です
この部分はSEOにも関連しており 最適文字数は160文字前後 です
青く反転している部分でちょうど160文字ですので参考までに


更新履歴 2016.9.9


リストマーカーの位置を調整しました

参考記事
list-item横の隙間について


更新履歴 2016.7.30


カスタマイズのガイドがひとつ抜けておりました
対象ガイドは以下のものです

// 注)背景スライド画像指定

書いてありませんでしたので検索しても出てきません ごめんなさい ( ̄∀ ̄;)
追加致しましたので再DLで同じ文言でCtrl+Fキー検索して頂くか あるいは

$.backstretch

で検索して頂きますと その直下の行にある3つのアドレスが背景画像です
お手数おかけします よろしくお願いします


--------- 以下本文



4ヶ月ほども前に購入したツムツム編みぐるみがいまだに完成しないあきらでございます (´・ω・`)
しかも一緒に作っている娘のものと 大きさがいたく違うのは何故なのだ





えー? 何故ゆうぇにぃ〜〜〜? ( ̄∀ ̄;)
(ちなみにちっさい方が娘の)



のすたるじあ
旧作 nostalgia の改訂版です 27日申請予定 審査通過しました ありがとうございます
(DEMOが繰り返し背景になっていますが 実際はフルスクリーン固定です クリックして実物をご確認ください)



ENTER PAGE DEMO
TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・背景はフルスクリーンのスライド(変更可)
・擬似エンターページつき
・トップページはメイソンリーレイアウト
・エンターページ以外は右にサイドバーが出ます
注) でCtrl+Fキー検索されますとカスタマイズのガイドが出てきますので 作業を始める前に一度ご確認ください


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更 位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更


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




旧作 nostalgia について


旧作は頭文字が小文字の n でした
今回大文字の N に変更しました
旧作につきましては配信を終了させて頂くことに致しました
使用プラグインなどがスマートフォンであまり上手く動作しないな という感じでしたので
修正の意味も含め新たにリリース致します
見た目が大きく変わることはありませんが 細かい部分でいろいろ変更が入っています
htmlの構造やJava scriptの動作などはもう全くの別物になっております
旧作をお使い頂いている方はDEMO画面からよくよくご確認頂きまして 切り替えする・しない のご判断をお願いします



スライド背景変更


Ctrl+Fキー検索

// 注)背景スライド画像指定

htmlソース内終盤にあります
画像の増減は 最後のスライドだけ末尾にカンマなし
それ以前のものは末尾にカンマが必要ですのでお間違いのないようにお願いします

最初の1枚目だけCSSソース側にも記載が必要です(表示ラグを無くすための処理)
検索

/* 注)背景スライド最初の1枚 */

上記を目印にURLを差し替えてください
デフォルト画像は全てpublic domain(著作権不在)ですのでそのままお使い頂いても問題ありません



トップページのメイソンリーについて


メイソンリーレイアウトの特徴は
必ずしも左 → 右 → 左下 → 右下 の順が時系列を守るとは限りません
レンガ状に綺麗に配置することを優先としたレイアウトです
画面幅が縮小されて記事が縦一列になった際には 時系列通りに並べ替えを行います



No image画像変更


記事内の然るべき箇所に画像が存在しない場合に代替として表示するNo image画像
トップページには出てきません
表示対象ページは以下の通り

・検索結果
・関連記事リスト(サムネイル(アイキャッチ)を「表示する」を選択している方限定)

ソース内該当箇所は

blog-imgs-93.fc2.com/v/a/n/vanillaice000/Nostalgianoimage.jpg

CSSソース内に2箇所あります
別の画像を指定することも可能です
サイズ・縦横比不問ですが 今回トップページには表示されませんので大きな画像を準備する必要はありません
長辺200px程度でOKです

デフォルト画像 (200✕124 5KB public domain)



画像上の白いオーバーレイとNo imageのテキストは自動で乗ります



関連記事リストの表示について


アイキャッチを「表示する」に設定されている方



アイキャッチを「表示しない」に設定されている方



ブログ個人設定の状態で自動で切り替えられます



ドミナントカラー


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

例) 51,51,51



rgb(51,51,51) 基本文字色
rgb(129,134,155) 基本リンク色, ドロワーハンバーガーボタンの色(スマホのみ), コメントsend/ deleteボタンホバー時背景色, ページ送り背景色 など
rgb(156,118,134) 基本リンクホバー時文字色, エンターページ上部ナビ現在地 円形背景色, 日付文字色, コメントsend/ deleteボタン背景色, ページ送りホバー時背景色 など



管理人コメントと訪問者コメントを分ける方


デフォルトはグレー背景アイコン
サンプル




CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)




ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


みなさんいつもありがとうございます ∩(´∀`∩
関連記事

TemplateFC2HTML5CSS3Responsive

24 Comments

ミロ  

// 注)背景スライド画像指定

// 注)背景スライド画像指定
これはこの文言を command+Fすればいいのでしょうか?
申し訳ないのですが、見つかりません(涙)
すみませんがご教授いただければと思います。

2016/07/30 (Sat) 23:44 | EDIT | REPLY |   

Akira  

To ミロさん

大変失礼致しました。
確かにガイドが抜けておりました
カスタマイズ前でしたらお手数ですが再DLして頂くか
あるいはページ内検索(Windowsは Ctrl+Fキー検索, Macは Command+Fキー検索)

$.backstretch

この下の行にある3つのアドレスが背景画像です。
お手数おかけします。
よろしくお願いします (*_ _)

2016/07/31 (Sun) 00:46 | EDIT | REPLY |   

太郎  

こんばんは、素晴らしいテンプレートですね(^^♪

ひとつ質問させてください。
背景の画像について出来るだけ容量の軽いものを使いたいのですが、
全画面で表示されるので、結構粗くなってしまいます。
BetweenNeoで使われてる網目のようなマスクを掛ければ、アラが飛んで良い感じになると思うのですが、
これはどうやって掛けているのでしょうか(こんな感じのです→#)

よろしくお願いします。

2016/08/16 (Tue) 23:05 | EDIT | REPLY |   

Akira  

To 太郎さん

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

> 全画面背景のアラをごまかしたい(マスク)

まずオーバーレイに利用する画像の準備ですけれども、よくよく検討して頂かないとですね、
基本的には細かいドット柄を敷き詰めるわけなので、画面はかなり暗くなります(黒の場合, 白は逆)。
BetweenNeoで利用しているマスクを流用されても構いませんが、ご想像頂いている以上に暗くなると思ってもらった方が良いです ^^;
難ありだと思われましたらご自身で画像探しを頑張る ╭( ・ㅂ・)و ̑̑
(背景透過のPNGあるいはGIFを探します)
Ctrl+Fキー検索(CSSソース内です)

body:before

こんな感じになってます ↓

body:before {
content: "";
display: block;
省略
}

このすぐ「下」に以下を追加

body:after {
content: "";
display: block;
background: url(//blog-imgs-88.fc2.com/v/a/n/vanillaice000/pattern_20160101014629b86b.png) center center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -900000;
}

アドレスはBetweenNeoと同じPNG画像ですのでとりあえずこのままコピペして様子をご確認ください。
OKならばそのままお使いくださいませ。
よろしくお願いします。

2016/08/17 (Wed) 00:34 | EDIT | REPLY |   

金  

此方で宜しいのですね

丁寧に、質問場所を示してくれてありがとうです。
此処を見ると、記事の目次(?)の上に
綺麗な画像が有りますね
之が「アイキャッチ」何や
う~~ん・・・
之も素敵やね
之は、他者の方々に迷惑掛らんで出来るのかな?

其の内、説明有ると思うけ
何時でもエエケ、待ってます

「プロフィールアイコン」は、如何やら
他者様に迷惑(特に金みたいに何も出来ない人は)掛ったらアカンので
やめる事にします

本来の「アイキャッチ」は、出来るのであれば
宜しくです。

金の好きな「女性画像」が貼れたら嬉しく思います

2016/09/01 (Thu) 16:05 | EDIT | REPLY |   

Akira  

To 金さん

今書いてるとこ ( ゚Д゚)ノ

迷惑がかかる という方が正しいかどうかわからないけど。
基本的にFC2ではプロフアイコンをコメント横に表示できるようにはなってないんです。
私のアイコンが表示されてるのは、私が表示できるように操作してるからです。
つまり「テンプレートの仕様」

これ裏ワザ的実装なので、まずは基本仕様を理解しないことには
いくら説明しても理解できないと思う。
なので今一生懸命書いてる(笑)
できるかできないか、やるかやらないかはそれを読んでから決めたら良いよ。
今決めなくても(笑)

=======

この記事の一番上に表示されているのは
「アイキャッチ」
… と言えないことはないんだろうけど、ここは個別記事なので
「記事に貼り付けてある画像」って感じかな。
サムネイル = アイキャッチ という意味で捉えるのならば「違う」と言っても良い。
ちょっと難しいだろうか (´・ω・`)

ここ開いてみて ↓

http://vanillaice000.blog.fc2.com/blog-category-5.html

記事一覧が出てて、その右横に丸い小さい画像が付いてるよね。
これが「サムネイル画像」です。
正しいサムネイルの意味も含めて書いていますので待っててね。

2016/09/01 (Thu) 16:12 | EDIT | REPLY |   

Akira  

To 金さん

まずひとつめ。
あちらの書庫に

FC2やweb一般でのいろんな「呼び名」「名称」

のタイトルでUPしました。
次はまた夜書きますヨン様 (o'д`o)ゝ
ちょっと店に顔出してくる(笑)

2016/09/01 (Thu) 17:24 | EDIT | REPLY |   

金  

いってら~~~~!

金は、後回しでエエヨ
お仕事頑張ってね!(*^_^*)

2016/09/01 (Thu) 18:26 | EDIT | REPLY |   

金  

先程の説明(人''▽`)ありがとう☆です

「管理人ハンドルネーム 」は
やっぱ、止めておきます
何処のソースを弄うのかもわからんし
オカシゲに金がソース弄うて、折角の素敵なテンプレートに
支障が出たら、嫌やもん
別に、今の侭でエエです

で、設定は説明通りにしました(と、金は思うとります( ;∀;))

お手間掛けまして、有り難うでした。(人''▽`)☆

2016/09/02 (Fri) 21:31 | EDIT | REPLY |   

Akira  

To 金さん

おっつっつ (o'д`o)ゝ

はい。お任せします ( ゚Д゚)ノ
また明日覗きに行きますー!

2016/09/03 (Sat) 00:16 | EDIT | REPLY |   

えるて  

素敵なテンプレートをありがとうございます


FC2で素敵なブログだな…と思う人の7割8割の方が
Akiraさんのテンプレートをお使いになっていて、
「よし!わたしも」と
今日から使わせて頂いております。

ブログ名が長いので
ディスプレイによっては2行に渡ってしまい、
フォントサイズを下げないと
頭でっかちに見えちゃうな、と
考えあぐねております。

スタイルシートの
#blog-titleのフォントサイズを変えてみたのですが
上手く行きません。

お忙しいところ恐縮ですが、
教えて頂ければ有難いです。

2016/09/18 (Sun) 17:29 | EDIT | REPLY |   

Akira  

To えるてさん

ありがとうございます

> ブログタイトル折り返しの件

以下のページに調整の仕方が載っていますのでご参照ください。
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object22

Nostalgiaテンプレでの該当箇所は 2箇所 あります。
Ctrl+F(Windows)/ Command+F(Mac) キー検索


<a href="<%url>" id="text-effect"><%blog_name></a>


<a href="<%url>" id="text-effect"><%blog_name></a>

①はトップページ最初の1ページ目のみに大きく表示されるタイトル
②はその他ページで小さく表示される方のブログタイトル
です。
それぞれ赤字部分を修正してくださいね。
よろしくお願いします ( ゚Д゚)ノ

2016/09/18 (Sun) 22:20 | EDIT | REPLY |   

えるて  

きゃ~ >_<

「よくある質問」も確認しないまま
安直に質問して
申し訳ありませんでしたっ >_<

その上次の質問で
大変恐縮なのですが、
ブログタイトルの表示において
アルファベットと日本語の
フォントサイズを変更することは可能でしょうか?

ブログタイトルの長さが仇になって
日本語の部分が重く見えてしまうので
アルファベットより小さくしたいのです。

お手隙の際にでも
お返事頂ければ幸いです m(__)m

2016/09/19 (Mon) 10:50 | EDIT | REPLY |   

Akira  

To えるてさん

大丈夫ですー。
お気に病まれませんよう ^^;

> 欧文フォントと日本語フォントの大きさを分ける

結論を先に言いますと「できません」
で、申し訳ございません。
私「エフェクト」の存在をすっかり忘れておりました。
先回お尋ねの「<br>を入れて折り返しを操作する件」についても
今回の「フォントのサイズを分ける件」についても、
エフェクトを取り除く必要があります。
これはJSの関係上致し方ないことですので、そこをまずどうされるかお決めくださいね。
選択肢

① ブログタイトルフォントを操作する = 右からスライドインするエフェクトを排除
② ブログタイトルフォントの操作はしない = エフェクト温存

======== ①を選択される場合の手順

現在のフォントサイズ指定をまずおさらいしてくださいね。
トップページ最初の1ページ目でのブログタイトルのご説明です。
Nostalgiaはレスポンシブデザインですので、画面幅に応じてブログタイトルフォントも徐々に小さくなるよう指定しています。
現在のえるてさんの指定は

パソコンなど画面が大きいとき --- ここだけ指定の形式が異なりますので注意
42px

画面横幅1350pxを下回った時
32px

画面横幅1050pxを下回った時
27px

画面横幅730pxを下回った時
22px


上記の通り。
ですから修正すべき箇所は4箇所です。

#index-blog-title {

でCtrl+F(Windows)/ Command+F(Mac) キー検索 されますと4つヒットします。
縦並びに書いてありますのですぐ見つかると思います。
最初の42pxの部分は

font: bolder 42px/1.2 'Playfair Display', 省略;

こうなってます。42の部分がフォントのサイズ。
あとの3つはそれぞれ

@media screen and (max-width: 数字px) {

で括られています。
まずパソコンでの見た目を決めて(なるべく大きいブラウザサイズで)
少しづつ小さく調整し、最終的に画面730pxの時点で22pxになるようにされると良いと思います。

=====

この段階では欧文と日本語のフォントは同じです。
これから日本語フォントの方を小さくする処理に入りますが、その前にhtmlソース内から以下の項目を削除。
検索

<script src="//blog-imgs-82.fc2.com/v/a/n/vanillaice000/lettering_compress.js"></script>

上記を目印にひとかたまりの部位を削除します。
スクショでご確認ください。

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

さらにCSSソース内から以下を見つけます。
検索

#index-blog-title a,

この項目の

visibility: hidden;

削除です。

=====

続いて日本語フォントの処理。
検索

<h1 id="index-blog-title">

このすぐ下がこうなってますよね ↓

<h1 id="index-blog-title">
<a href="<%url>" id="text-effect">欧文 日本語</a>
</h1>

この段階で<br>による行指定が可能になります。

<h1 id="index-blog-title">
<a href="<%url>" id="text-effect">Fleursdeschamps<br>なげいれの花<br>二十四節気七十二候</a>
</h1>

こんな感じだと仮定して。
これを以下の通り直します。

<h1 id="index-blog-title">
<a href="<%url>" id="text-effect">Fleursdeschamps<br><span id="change-font">なげいれの花<br>二十四節気七十二候</span></a>
</h1>

=======

ここからCSS修正ですが、少し煩雑ですので注意して作業をすすめてください。

最初にフォントサイズを決めて行きました。
こんな感じになっているかと思います ↓
(一番最初の形式が異なるものはひとまず置いておきます)

@media screen and (max-width: 1350px) {
#index-blog-title {
font-size: 35px;
}
}

上記に追加で

@media screen and (max-width: 1350px) {
#index-blog-title {
font-size: 35px;
}
#change-font {
font-size: 日本語フォントの大きさpx;
}

}

これを3つ全てに行います。
欧文よりも小さくされるならば、上にあるfont-sizeよりも小さな数字を。
最初の形式違いのものについてはスクショの箇所に

スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/29fuhaio_zpse4n2ifcw.jpg

これを追加 ↓

#change-font {
font-size: 日本語フォントの大きさpx;
}


=========

以上です。
かなりややこしい作業ですが、まずはエフェクトをどうされるかご検討頂きまして、
作業する・しないをお決めくださいね。
最初のご質問時に気がつきませんで申し訳ありませんでした。
さぞお悩みになられたことと思います。
ホントごめんなさいね

ちなみに私が拝見して
「バランスが悪いなぁ」
という印象はありませんけどもね。
この辺りは個々の感性、というところでしょうか。
あと、お花素敵すぎ(笑)
憧れます ( ゚Д゚)ノ

2016/09/19 (Mon) 21:20 | EDIT | REPLY |   

えるて  

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

お忙しいのに
ほんとにほんとに丁寧に教えてくださって
ありがとうございました >_<

一晩悩みましたが
エフェクトの魅力は捨てがたく、
日本語のフォントのみを小さくすることは諦めました。

大きなディスプレイを使用する際
アルファベット部分より
日本語の方が大きく立派に見えるのが気になるので
とりあえずPC用のフォントサイズを改めて下げてみました。

フォント幅が狭いゴシック系の物を指定して
存在感を薄めようか…
などと思ってもみたのですが、
結局は閲覧なさる環境に依存するので
標準添付されているフォント内では難しく
諦めるしかないかなぁ、と思っている次第です。


丁寧に説明してくださって
本当にありがとうございました。

取り急ぎ御礼申し上げますです



2016/09/22 (Thu) 01:05 | EDIT | REPLY |   

Akira  

To えるてさん

わー ( ̄∀ ̄;)
こちらに頂いたコメントを見逃して後回しになってしまいました。
ごめんなさいね (*_ _)

欧文フォントと日本語フォントは元よりフォルムが全く違いますので、組み合わせると全く大きさが違う、といったものも。
この辺り毎回大変苦労してたりします ヽ( ̄д ̄;)ノ
折れて頂く形になり申し訳ないです。

最終手段としては、ブログタイトルに指定されている欧文フォントをやめて
日本語フォントの游ゴシック体で揃える方法もあります。
ただしアルファベットは美しくありません。
それでも見た目のバランスは整うのではないか、と思います。
もしその方法を取られるのであれば
#index-blog-title の

font-family

の一行を削除してください。
よろしくお願いします。

2016/09/22 (Thu) 23:32 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/16 (Thu) 23:15 | EDIT | REPLY |   

Akira  

To centerタグの件 内緒さん

ありがとうございます。
とっても嬉しいですー

> 電子書籍のアフィリエイトタグがセンタリングできません〜

これはサイドメニューのプラグイン、で合ってますでしょうか。
今私の方でもやってみましたが、フツーにセンタリングされました (´・ω・`)
でね、ちょっとというかかなりうろ覚えなんだけども。
私も前にそんなことが起こった… ような気がする (´・ω・`)
や、でも記憶の捏造かもわからん(笑)
確かプラグインのソースに <div style="text-align: center;">〜</div>
って書いても左に寄ったままで、なんで? e-447
ってことがあった… ような。
どうしたかというとたぶん、一旦プラグインフリーを削除して新しく入れ直したらできた。
ような気がする ( ̄∀ ̄;)
再現ができないのでなんとも言えませんが、一度やってみてください ^^;

それかですね、プラグインについては位置合わせを設定できますので、
該当ソースから <center>〜</center> を外して
<a href="アドレス"〜〜〜〜 省略
に直し「コンテンツの文字設定」で中央を選んでもOKです。

スクショ
http://blog-imgs-102.fc2.com/v/a/n/vanillaice000/w9fh9ewa.jpg

プラグイン限定ですが、この方法でも大丈夫ですよ。
FC2のシステムが自動で<div style="text-align: center;">を追加してくれます。
追加される対象要素が違いますが、問題ありません。

==========

> 見だしの追加〜

こちらは独自クラスですので記事を書かれる際に特定の文字列を書いて頂く必要がありますが、全く同じものでよければ以下の通りです。
CSSソース末尾に追加してください。

--- 一旦削除 ---

使い方(書き方)は以下のページをご参照ください。
よろしくお願いします (●'0'●)/

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


======

ごめんなさい。一旦書きましたが、Nostalgia用に調整しないとダメなんだった。
少しお待ちくださいね。

======

調整してみましたけれど。
Nostalgiaの記事背景は不透明度がついてるんですよね。
で、手書き風のものは問題なく表示されますのでご利用頂けます。
強調の<mark>も大丈夫です。
見だしのdog earとカールに難あり (´・ω・`)
それを調整して以下の通り注意点があります。

● dogear
右側の折れ部分はツギハギしていますので、文章が横目いっぱいになった際、右側の空きが左側の空きよりも若干大きいです。
そんなに気にはならないと思いますけれど、一応お伝えしておきます。

● カール
こちらはテンプレ全体の構造上、本来は
記事背景 > 見だしカール下シャドウ > 見だし
になるところが
見だしカール下シャドウ > 記事背景 > 見だし
と、順番が入れ替わってます。
シャドウが記事背景よりも「下位」になりますので、とても薄い(笑)
けど付いているのがわからないほどではないと思います。
構造上こうしておくのが一番良いと思いますのでこのままで ←

あとは双方見だし背景を何色にするのか、というのもあります。
白… かなぁ (´・ω・`)
グレー系だとわかりにくいかもです。
そちらについては色々試してみてください。
丸投げっぽくてすみません ^^;

以下をCSS末尾に追加

/* 手書き風 */
.freehand {
border: 3px solid rgb(230,230,230);
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
padding: 1em;
font-size: 15px;
font-weight: bold;
}

/* dog ear */
.dogear {
margin-right: 16px;
position: relative;
padding: 1em 0 1em 1em;
background-color: white; /* 背景色 */
color: rgb(51,51,51);
font-size: 15px;
font-weight: bold;
}

.dogear:before {
content: "";
margin-top: 16px;
width: 16px;
background-color: white; /* .dogearの背景色と同じものを指定 */
position: absolute;
top: 0;
right: -16px;
bottom: 0;
}

.dogear:after {
content: "";
width: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: transparent transparent rgb(240,240,240) rgb(240,240,240); /* rgb(240,240,240)が折れ曲がり部分です */
position: absolute;
top: 0;
right: -16px;
}

/* カール */
.curl {
background-color: rgb(240,240,240); /* 背景色 */
padding: .5em .75em;
position: relative;
font-size: 15px;
font-weight: bold;
}

.curl:before,
.curl:after {
content: "";
width: 30%;
height: 50%;
position: absolute;
bottom: 8px;
z-index: -1;
box-shadow: 0 10px 15px black;
}

.curl:before {
left: .3em;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.curl:after {
right: .3em;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}

/* 強調 */
mark {
background: linear-gradient(transparent 60%, yellow 60%);
font-weight: bold;
}


コメントを太字にしておきます。
ガイダンスであり、かつ、重要部分ですので意識しながら作業をお願いします。
わかりにくければお尋ねくださいね。
よろしくお願いします。

====== 余談

ところで、Stay goldの作者さんは貧乏神の漫画と同じ方でしょうか。
私、美容室で読んで号泣して美容師さんを超狼狽させたんですけど(笑)
違うかな? ^^;

2017/03/17 (Fri) 19:10 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/17 (Fri) 22:35 | EDIT | REPLY |   

Akira  

To centerタグの件 内緒さん ②

わー。そうでしたか。
私の早とちりで申し訳ないです。

簡単に言うと、
● 原因
ブロックレベル要素だから
● 対処
<div style="text-align: center;">〜</div>
で挟むのではなく
<div style="margin: 0 auto;">〜</div>
で挟んでください。

text-align というプロパティは「ブロックレベル内のインライン」に対して使うプロパティです。
今回の内緒さんのウィジェットは、
「横幅が200pxのブロックレベル要素で、中に画像などのインライン要素が入っている」
という説明でわかるでしょうか。
ブロックレベル要素全体を動かすには text-align ではなく margin を使います。
一度お試しくださいね。
二度手間になって申し訳ない。

======

dog ear の件は「折れて三角になっている部分」でしょうか。
/* rgb(240,240,240)が折れ曲がり部分です */
のコメントが付いている部位が該当です。
ここをもう少し濃い目の色にされると良いと思います。

======

余談の件。
それです。それです(笑)
合ってた ╭( ・ㅂ・)و
絵の雰囲気を見てもしかして、と。
作者さんのお名前もなんとなく覚えてたっぽい(笑)
何気なく手にしましたけど、すっごい泣けました ^^;
我慢できんかった(笑)
あー。教えて頂いたので私これ(貧乏神の)買っちゃうかもわからん((((笑)

2017/03/17 (Fri) 23:08 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/18 (Sat) 13:53 | EDIT | REPLY |   

Akira  

To centerタグの件 内緒さん ③

またしても私の伝え方がよくなかったです。
肝心な「どこに記載するか」をちゃんと書いてませんでした。
margin: 0 auto; の対象は「width指定が行われているブロックレベル要素」ですので、

<div id="creative" style="margin: 0 auto; 〜省略〜">

ここですー。
私の説明を読み返すと、既存ソースを丸っと挟んでそこにmargin: 0 auto;
ってとれますよね。
申し訳ないです (´・ω・`)

で、とりあえず追加作業はまだ置いといてください。
次の要件を先に。

> 一括で置換

それは可能です。
可能ですが、この先テンプレートを変更するたびにJSコードを恒久的に移植する必要は出てきます。

・ JSでのhtml操作はページ表示が遅くなる原因になる
・ ChromeがJSのdocument write とその関連コードをいずれブロックするのではないか… という噂あり(現在は「低速回線(2G)などの時はJSの実行をブロックします」という警告が出ます。「低速回線では」の縛りが外れた時がちょっと怖い)

上記2点に納得ができるようでしたら利用しても良いと思います。

</body> の直前に以下を追加。

<script>
$('center').replaceWith(function() {
$(this).replaceWith('<div style="text-align: center;">'+$(this).html()+'</div>');
});
</script>


これはテキストのセンタリング処理です。
アフィリエイトのセンタリングはCSSで行います。
幸いなことにidが付与されていますので、CSSでできます。
これが無いとできないんですよね。今回はラッキーです (o'ω')ノ
CSSソース末尾に以下を追加。

#creative {
margin: 0 auto;
}

で、これホントはアカンですよ (´・ω・`)
creative がクラス名でなくアイディー名なんですね。
id名というのはページ内に一つしか存在してはいけないルールなんです。
クラスは複数でOKというか、複数要素のために使うのがクラスです。
一つの記事に#creativeがたくさんあるのでバリデートはエラーになっちゃいますね (´・ω・`)
でもアフィリエイトだから仕方ないのかなー?
idとかの操作もダメなのかしら。

で、こちらも一応idからclassへの変更がJSでできるのですが、バリデートは通りません。
なので書き換えないといけない!(笑)
振り出しに戻っちゃう… ( ̄∀ ̄;)
バリデートを気にされないのであれば大丈夫ですよ。
centerタグを使うよりは全然良いと思います(笑)

まとめ
● 既存のログに対してはJSでタグの置換を行う
● これから書く記事についてはcenterの利用避けて、手入力で<div style="text-align: center;">〜</div>と全体コンテンツを挟む。
● テンプレート変更時にはJSコードの移植とCSSスタイリングの移植を忘れない。
● 可能であればアフィリエイトのidをclassに変更して今後はそちらを利用する。

=====

今記事を書いている最中で、そちらで align属性についても触れています。
既にご存知の通りalignも廃止属性です。
センタリングの仕方と廃止属性alignについては最新記事を御覧くださいね。
まだ書き終わってないけど ←

2017/03/18 (Sat) 15:36 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/18 (Sat) 17:58 | EDIT | REPLY |   

Akira  

To centerタグの件 内緒さん ④

出来てますね。
安心しました。

それから、ご紹介ありがとうございますー(笑)
私「魔法がとけて〜」のお話し知らないです。
えー!なんで? ( ̄∀ ̄;)
なんとか版やらなになに版やらの違いでしょうかしら。
すっごい損した気分なので購入しようと思います(笑)
ありがとうございます。
お疲れ様でした

2017/03/18 (Sat) 23:03 | EDIT | REPLY |   

Leave a comment

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