vanillaice (Akira)

vanillaice (Akira)

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

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

名称 Pinboard
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大1180px
サイド --- 270px
記事内で利用可能な見出しレベル h2からh6
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大(Intense Images)
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ ヘッダー画像変更, 全体幅調整
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
1カラム 1カラム 1カラム
下サイドメニュー 下サイドメニュー 下サイドメニュー

長男がアメリカに帰る前に喧嘩してしまったあきらでございます (´・ェ・`)
あのやろう!!!
ごめんなさい。取り乱しました (*ノω・*)
や、でもうち基本仲良し親子なんで(笑)

ぴんぼーど
承認されました。ありがとうございます。

TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



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

・トップページの表示タイプ変更・レイアウト変更(要約表示から全文表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。

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

全体幅調整の仕方

デフォルトは全体像の最大横幅を 1300px に設定しています。
1300
で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。

全体背景画像を変更される方

カスタマイズガイダンスを入れるのを忘れました ←
該当箇所は

body:before

です。その中の background が全体背景画像の設定です。

デフォルトでは木目の画像を設定しており 繰り返し画像設定 になっています
。 同じく繰り返し画像を設定する際は シームレスの画像を準備 してください。 でないと継ぎ目ができてしまいます。
一枚画を背景にされます場合には、

background: url(画像アドレス) center center /cover no-repeat;

が適していますが、スマホではスクロールの度に画像が拡大・縮小を繰り返しますので煩わしいかもしれません(ブラウザのステイタスバーが出たり引っ込んだりするため)
できれば2種類の画像(縦長と横長)を用意し、スマホでは縦長画像に変更すると共に background-size の値を cover から 110% auto に変更するなどの処理が必要かと思います。
そして
cover値とbackground-attachmentのfixed値を併用しない
ようご注意ください。
でないとスマホでの背景がデタラメなことになります。

一人ひとりに付きっきりで指導するわけにいきませんので、この件に関してはご自身の知識の範疇でお願いします。
「難しい (;ωq`)」と思われましたら辞めておいたほうが無難です。

ページ遷移時のエフェクトについて

ページ遷移開始時と終了時にフェイドエフェクトを入れてあります。
なるべくページの読み込み時間に差し障りがないように仕上げたつもりですが、個人環境も左右されます。
フェイドがユーザビリティを損ねるとお考えになりましたらどうぞ削除してください。
トップページには画像の遅延読み込み(Lazyload)を採用しており、そちらについてはこのエフェクトとは無関係ですので残ります。
削除されます場合には

注)ページ遷移時フェイドエフェクト不要の方

で検索されますと該当箇所がhtml内に2箇所、CSS内に1箇所の計3箇所出てきますので、ガイダンスに従ってください。
エフェクトを入れている場合と入れない場合、それぞれのメリット・デメリットを記載しておきます。

フェイドエフェクトありフェイドエフェクトなし
表示速度若干遅くなる(速描画するとエフェクトにならないため遅延)速い
ページ表示時の様子フェイドイン後は整形済み(回線速度や記事内容の影響は受けます)表示位置などが不安定(ガクガクと変わることがある)
SEOへの影響特になし特になし

FC2ブログの「全記事一覧」のページはアクセスに時間のかかるページです。
キャッシュ生成されていない初回アクセス時には ページ遷移する前にフェイドが解消されてしまう ことがあります。
ページ遷移がフェイドの終了までに間に合わなかった際に発生しますが、タイムアウト設定は必須 ですのでご容赦くださいませー (´・ω・`)

追記 2017.9.16

LightboxやColorboxなどが起動しない方へ

ページ内で画像を拡大するためのスクリプトの代表的なものが LightboxColorbox ですが、これはページ遷移エフェクトと衝突しますので起動できないかと思います。
エフェクトの仕組みと対処法をご説明します。

本作のページ遷移エフェクトは、ページ内に存在する全ての a要素 が対象になっています。 a要素の基本は【ページ遷移】なわけですが、ページが遷移する直前、つまりリンクをクリックした直後にフェイドアウトが発生します。

リンククリック

.4秒かけてフェイドアウト発生

.4秒後にページ遷移

遷移後に.4秒かけてフェイドイン

こういう流れです。
aタグ、つまり【リンク】の基本は【ページ遷移】ですので、全てのaを対象とする必要があります。つまり
aタグがエフェクトのトリガー(きっかけ・合図)になっています。 ただし target="_blank" 指定(別タブ表示)されているリンクについては予めエフェクト対象外にしてあります。

LightboxやColorboxは同じくaタグを起動のトリガーに設定する仕様です。
これが衝突の原因。
一方はページ遷移直前のフェイドアウトエフェクトを発生させ、もう一方は画像拡大のために指定されたエフェクトを発生させようとします。

● 対処法
1. Lightbox/ Colorbox用aタグに target="_blank" を指定
2. aタグのLightbox/ Colorbox用クラス名をページ遷移エフェクト対象から除外する設定を行う

1だと記事内での対象要素全てに修正が必要になりますので、2がおすすめです。

手順
① Lightbox/ Colorboxのトリガーになるクラス名を把握
② 以下の内容を検索

<!-- 注)ページ遷移時フェイドエフェクト不要の方ここから削除 2/3 -->

③ 上記内容を目印に、直近にある

$('a:not([href^="#"]):not([target])')

を編集し、以下の通り

$('a:not([href^="#"]):not([target]):not(.ここにクラス名)')

例) Colorbox用トリガー (クラス名は仮です)
<a href="画像アドレス" class="expand"><img src="画像アドレス" alt=""></a>

$('a:not([href^="#"]):not([target]):not(.expand)')

トリガーが複数ある場合は同じ要領で全て除外します。

例) 画像用トリガーの .expand と YouTube用のトリガー .youtube を除外 (クラス名は仮です)

$('a:not([href^="#"]):not([target]):not(.expand):not(.youtbe)')

こうして遷移エフェクト対象から除外すれば起動するようになります。
.expand や .youtube と書け、という意味ではないですよ。書き方を示すために私が仮につけたクラス名にすぎません。
クラス名が全ユーザー同じということは有りえませんので、必ずご自身が利用しているクラス名を確認し、それを指定してください。

Lightbox系に限らず、aタグをトリガーに用いるプラグインについては等しくこの方法で対処できます。

------ 追記ここまで。以下本文

Microsoftブラウザでのスクロール動作について

IE11及びEdge向けhackのJSを入れてあります。
z-indexにネガティブの値を持つfixed要素が含まれるとスクロールがガクガクして閲覧に耐えませんので、Microsoftゴミブラウザだけを対象にスムーススクロールを強制排除しています。
(ページ内移動のスムーススクロールではなく、ブラウザ本体のそれのことです)
ただし、記事中あるいはサイドメニューなどに iframe要素 などが含まれている場合、スクロールで該当部位に差し掛かった時にはやはりガクガクします。
iframeを利用していそうなものとしては YouTubeなど動画コンテンツの埋め込み, ブログカード など。
Microsoftが修正しない限り根本的解消は無理ですのでご理解頂けると助かります。

ナビゲーション

● ナビゲーション内リンクについて
ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。
文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に各1箇所、計2箇所ヒットします。
それぞれの

(max-width: 768px)

緑の部分 768 を 大きな数字に変更 してください。
この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。

● Aboutについて
こちらは予備リンクです。
誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください。
不要であれば削除。

該当部位検索

注)予備リンク

カスタマイズ

<li><a href="ここにリンクアドレス">テキスト</a>

デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。

トップページ記事の傾きについて

CSSのrotateを用いていくつかの記事を傾けています。
高解像度ディスプレイ「ではない」画面ではテープ部分の日付がぼやける
という既知の問題があります。
デバイスがMacで、かつGoogle ChromeあるいはFirefoxをご利用の方はほぼ影響ナシ。
Windowsの場合はいかなるブラウザでも起こり得ます。
(Windowsではアンチエイリアスの操作ができないため)
現役スマートフォンのほとんどは高解像度ディスプレイですので気にならないと思います。
この「ぼやけ」が気になる方は傾き自体を無くす選択をお願いします。
それしか方法が無い ^^;

注)トップページ記事の傾き不要の方

のガイダンスに従って取り除く作業を行ってください。

ドミナントカラー

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

rgb(101,69,31) 基本リンク色
rgb(200,200,200) ヘッダー部 Welcome to〜 の文字色
rgb(21,21,21) ナビゲーション背景色 など
管理人コメントと訪問者コメントを分ける方

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

サンプル

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

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

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

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

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

* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
みなさんいつもありがとうございます (●'0'●)/

関連記事

Comments 32

There are no comments yet.
きろろ  
お借りします

承認されたんですね(^^)
お借りします!

Akiraさん……
なんか、きろろの目がおかしいんです。
レンズをかえてから、目がかゆくてかゆくて(T_T)
○○シティ併設の眼下で見てもらったら、
「アレルギーじゃない?」って言われて、アルジオンを処方されたんですよ
先生は「1dayのほうがいいよ」と言ってくれたんですが、
ソフトはすぐに乾燥して、焦点が合わなくなるんです。

で、今日も一日ハードでお仕事をしていたんですが、
やはり目がかゆくてかゆくて。
以前使っていたハードに変えるとなると、また出費が(T_T)
Macが遠くなっていきますよ。

2017/09/14 (Thu) 00:33 | EDIT | REPLY |   
きろろ  
およ?

今回のテンプレートは画像を載せていない記事は
Noimageと表示されるんですね。
やばし、ここのところ画像を載せていないw
対処方法とかありましたら、ご教授お願いいたします。

2017/09/14 (Thu) 00:37 | EDIT | REPLY |   
べえ  
No title

こんにちは。いつもお世話になっています。

コピペして更新日をVelonica に組み込んでみたのですが、
この関数は2014年7月22日ごろより以前は対応していないようです。
それ以前については「-0001年11月30日」が取得されます。

参考URL
http://beebaku.blog88.fc2.com/blog-date-201407.html

2017/09/14 (Thu) 11:40 | EDIT | REPLY |   
Akira  
To べえさん

わー。そうなんですか ( ̄∀ ̄;)
私は過去記事が2年前しか無いので確認ができないのですが。
過去日時で投稿してみたところ、更新日付にしっかり今日の日付が出てました(笑)
当たり前っちゃ当たり前なんですけどね。
せめてFC2ブログのサービス開始日(2004年?)までサポートして欲しいですよねぇ (´・ω・`)
それはさておき、情報をありがとうございます。

2017/09/15 (Fri) 08:02 | EDIT | REPLY |   
Akira  
To きろろさん

アレルギー、大変ですね。
私もしょっちゅうアレルギー性結膜炎になりますです (´・ω・`)

--------

今回のトップページは画像が主体ですので、サムネイル必須のレイアウトと言って良いかと思います。
全文タイプをご利用の方はあまりサムネイルを気にかけないでしょうから、切り替えるとき悩みますよね(笑)

対策としては各ページに画像を添付するか、アイキャッチ画像指定を行うかしかないです (´・ω・`)

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-567.html

2017/09/15 (Fri) 10:43 | EDIT | REPLY |   
きろろ  
To Akiraさん

こんばんは、(^^)
お返事ありがとうございました。
アイキャッチ設定ですね。了解いたしました。

アレルギー性結膜炎……
それが酷い状態で、上の瞼を裏返すと……
なんとブツブツができているんですよ。
これが痒い、もうレンズが入っている状態で思わず目をこすりそうになるんですよ。
ぶつぶつが治まるまで、レンズは入れてはいけないと言われたので、
悲しいかな今は魚眼のような眼鏡をかけております(T_T)

2017/09/16 (Sat) 00:17 | EDIT | REPLY |   
きろろ  
画像がですね……

こんばんは、きろろです。

あのですね、Pinboard。
画像がですね、全面表示されてしまうんですよ。
colorboxで表示されないんです。
見ていただけますでしょうか?

よろしくお願いします<(_ _)>

2017/09/16 (Sat) 00:58 | EDIT | REPLY |   
Akira  
To きろろさん

きろろさん、こんにちは ( ゚Д゚)ノ

ちょっと時間が無いので簡単な説明と、以降の返信遅くなるかと思います。
colorboxのトリガー(aタグに付けた起動用クラス名)はcpModalで合ってますでしょうか。
<!-- 注)ページ遷移時フェイドエフェクト不要の方ここから削除 2/3 -->
を目印に、以下の通り編集してください。

$('a:not([href^="#"]):not([target]):not(.cpModal)')

赤字が追加部分です。
あと、colorbox用CSSのURLが消失しているようです(404 not found)
こちらも併せてご確認お願いします。

2017/09/16 (Sat) 12:33 | EDIT | REPLY |   
きろろ  
To Akiraさん

こんにちは、きろろです。

>colorboxのトリガー(aタグに付けた起動用クラス名)はcpModalで合ってますでしょうか。
あってます。以前からずっと使い回してきたものですからw

:not(.cpModal)')を追加したら、表示されました。ありがとうございます<(_ _)>

ところで……
>あと、colorbox用CSSのURLが消失しているようです(404 not found)
>こちらも併せてご確認お願いします。

はい、確認いたしました。
確かに404になっていました!
でも、Akiraさんからお借りしているテンプレートすべてを調べてみたのですが、
すべて404になっているんですよぉe-350
だけど普通に動作しています?
なんででしょうか?

ファイルアップを確認したところ、ちゃんとファイルはありました。
謎です……

2017/09/16 (Sat) 17:08 | EDIT | REPLY |   
きろろ  
連投ですみません

静止画像は普通にどうさしているのですが、
YouTubeがだめですね。全画面表示になっています。
いつもは
<a class='youtube' href="http://www.youtube.com/embed/「YOUTUBEの動画ID」rel=0&wmode=transparent"><img src="「サムネイル画像」" width="「幅」" height="「高さ」" /></a>
で書いております。
いちおう、参考に張っておきますね
http://riokusunoki.jp/blog-entry-3.html

ほかのテンプレートで動作の確認をしたところ、Akiraさんのテンプレートはすべて普通にYouTubeは動作しているんですが、
Pinboardだけが動作していません。
あ、無理に動作しなくてもいいですから。
一応お知らせまでにw

きろろのスクリプト自体がおかしいんだと思いますので(^0^;)

2017/09/16 (Sat) 17:28 | EDIT | REPLY |   
Akira  
To きろろさん

記事に追記しておいたのでご覧くださいね。
CSSファイルについてはまた後程お返事します。
よろしくお願いします。

2017/09/16 (Sat) 19:05 | EDIT | REPLY |   
きろろ  
To Akiraさん

こんばんは。
早速、記事の追加ありがとうございます。
追記どおりに$('a:not([href^="#"]):not([target]):not(.expand)に書き直してから
記事を<a href="画像アドレス" class="expand"><img src="画像アドレス" alt=""></a>で表示しようとしたんですが、ポップアップされません。
Akiraさんの言わんとしていることはよくわかるのですが、
うーーん、どうにもきろろにはお手上げの状態です。
なんせずっと、テンプレートを変えるたびにコピペしてきただけなので。
お恥ずかしい限りです。
YouTubeも
$('a:not([href^="#"]):not([target]):not(.expand):not(.youtbe)も
同じ場所に書き直そうと思ったのですが、
スプリクトの終わり? 塊がわからなくて編集できませんでした。
うちの場合は$('a:not([href^="#"]):not([target]):not(.cpModal):not(.youtbe)?
うん、多分そうなんだろうと思いながら、ならどこにこれを入れればよいの?
もはや、頭の中は混乱するばかりw

わざわざ追記文まで書いていただいて、ほんとうにすみませんでした。

2017/09/17 (Sun) 01:16 | EDIT | REPLY |   
Akira  
To きろろさん

おはようございますー (o'ω')ノ

自分が利用しているクラス名を入れてください。
記事内のクラス名は説明のため便宜上付けただけです。
きろろさんのトリガークラスは画像については cpModal なわけですから、それを入れないと。
同じようにツベやiframe等も全てクラス名を確認し、それを除外指定してください。
追記内容を一部修正しましたので再度ご確認お願いします。
対象箇所の範囲も少し拡げましたので、元の状態をしっかり把握して修正を行ってください。

CSSファイルの方は今は読みこみができているようです。

2017/09/17 (Sun) 09:04 | EDIT | REPLY |   
きろろ  
To Akiraさん

うーーん、今回は無理みたいです;w;

ちょっとひらめいたのですが、やはり違っていたw
<!-- 注)ページ遷移時フェイドエフェクト不要の方ここから削除 2/3 -->
<script>$(function(){$('a:not([href^="#"]):not([target]):not(.cpModal):not(.youtbe)').on('click',function(e)~~
と、繋げてみたのですがAkiraさんのいう意味と違っていたようですね。

>同じようにツベやiframe等も全てクラス名を確認し、それを除外指定してください。
うん? これは記事に書くスクリプトのことでしょうか?
htmlの中をなめるように見たのですが……
なにか大きな勘違いをしているような気がして。

検索でiframeを入力すると、
きろろが組み込んだスクリプトと、
テンプレートのCSSにあるiframeが出てくるんですよねぇ。

なのでHTMLのスクリプトのほうをいじってみたんですが、お手上げですw
悔しいな、非常に悔しい。
なんか喉元で出てきそうで、言葉が出てこないようなそんなもどかしさですw
もう少し粘ってみますw

あ、それからブログ内限定のテンプレートをお借りしました<(_ _)>
これで今のところ、Akiraさんのテンプレートはお借りしているのかしらw
以上、ご報告でした<(_ _)>

2017/09/18 (Mon) 00:57 | EDIT | REPLY |   
Akira  
To きろろさん

これより2日ほどパソコンを開ける環境下に居りませんので、ColorboxのJS内容についてはきろろさんご自身で確認をお願いします。

で、きろろさんのコメントを拝見しますと、
.youtube
ではなく
.youtbe
になってます。
私が記事中で u を欠落させた誤字と同じなんですよね。
ということは、きろろさんは私の記事からコピペをしているということになります。
コピペでは動作しませんよ。
ご自分が使っているクラス名
を入れることが絶対条件なのですから。
私はきろろさんがyoutubeのポップアップに利用しているクラス名が何かは知りません。
ですから「自分で確認してください」とお願いしました。

ちょっと1から細かく説明しますね。

●Colorboxというのは画像だけでなく、動画やiframe要素などもポップアップできますよね。
そのポップアップのためのJSというのはきろろさんが書いているはずです。
どこかのサイトからのコピペだとしても、それはきろろさんが決めたコード内容なんです。
そのコードの中には画像用のクラス名や動画用のクラス名を何にするかが決めてあるはずです。
その内容は私を含む他の人間にはわかりません。
いや、わかるけども、今私はパソコンを開けませんので調べられません(笑)
で、自分の書いたコード内容というのは例えコピペだとしても自分で責任を持たないとダメですよ。
クラス名やアイディー名というのはもともと個人が好きに決めるものなので、きろろさん自身がちゃんとそれを把握しておかなければ。

●iframeの意味
アイフレーム(インラインフレーム)というのは、他のサイトの内容の一部をそっくりそのまま自分のページに表示させるためのhtmlタグです。
よく使われるのは動画の埋め込みや、商品のリストなど。
ツベを掲載するにはiframeだけでなくembedというタグを使う方法もあります。
Colorboxでは、多種多様なiframe要素とyoutubeとを分けています。
youtubeは利用頻度が高いので、わざと分けているわけです。
youtube以外のiframeはiframe用のクラス名を設けているはずです。
ツベ以外でiframeを使うことが有るのか無いのかはきろろさんにしかわかりません。
使っていないのならば定義する必要はありません。

● >記事に書くスクリプトのことでしょうか〜

Colorboxを使うときに記事内にスクリプトを書くことは無いと思いますよ。
スクリプトというのはJS(Javascript)のことです。
書き出しは必ず
<script>
です。
記事内に書かないですよね?

● トリガーの意味
画像をリンク付きで掲載するには

<a href="画像アドレス"><img src="画像アドレス"></a>

こうですよね。
でもこれだけではColorboxは絶対に起動しません。

<a href="画像アドレス" class="xxx"><img src="画像アドレス"></a>

こうしてクラス名を書いているはずです。
上記はスクリプトではありません。htmlです。
このクラス名が「トリガー」です。
ツベのポップアップでも必ず専用のクラス名を書いているはずですので、それを除外設定にしてください、という意味です。
そしてそのトリガーとなるクラス名はきろろさんがご自身でしっかり把握をしてください。

● > HTMLのスクリプトのほうをいじってみた〜

今回ColorboxのJSについては一切修正はしません。
修正するのはテンプレートに入っているページ遷移エフェクト用のJSのみです。

ともかくきろろさんがすべきことは、
「ポップアップのために記事内でaタグ内にくっつけているクラス名がなんなのか」をちゃんと調べることです。
普段からColorboxをお使いであれば、画像やツベのhtmlをどう書いているかは自分が一番よく知っているはず。
それを除外指定するという作業ですよ。
くれぐれも今回の作業はこのページの記事中にあるサンプルコードのコピペではできません

よろしくお願いします。
頑張って(笑)

2017/09/18 (Mon) 01:45 | EDIT | REPLY |   
きろろ  
To Akiraさん

二日間、お留守だそうで。
ご報告までに

できましたe-349

http://riokusunoki.jp/blog-entry-3.html

私、日本語の読解力にかけているのかしら、もしかしてe-350

うちのclass名は静止画像がcpModalで
YouTubeはそのまんま.youtube

動作しなかったのは……
はい、ごめんなさい。コピペしたせいです。
Akiraさんがuの字を欠落させているとは思いもせず……
だって、絶対にAkiraさんがまちがえるはずがないもの……、と思い込んでおりました<(_ _)>

これが正解
$('a:not([href^="#"]):not([target]):not(.cpModal):not(.youtube)')
アホだな、私は(T_T)
ちゃんとnotって書いてあるじゃないですか……
どこにYouTubeを入れ込むのか、必死に考えていましたよ(爆)

あー、これで落ち着いて眠れる。はぁ……
しかし、すごいな。
Akiraさんの頭の中を覗いてみたくなりましたよ(^^)

2017/09/19 (Tue) 00:57 | EDIT | REPLY |   
Akira  
To きろろさん

お返事遅くなりましたー!

本来なら「これこれこうして書いてください。」とするところですが、なにせ忙しくー ( ̄∀ ̄;)
お手数おかけしました。
完了したということなので安心しました

2017/09/22 (Fri) 13:46 | EDIT | REPLY |   
あトん  
スマホでの関連記事横スクロールについて

Akira様

はじめまして、"あトん"と申します。

ステキなテンプレートの製作、いつもご苦労様です。

半年ぶりにFC2に里帰りし、Akira様のテンプレートで内装工事(カスタマイズ)を行ってます。

1つどうすれば良いのか悩んでいる表示部分があり、ご相談のご連絡です。

スマホ(iPhone)で表示すると関連記事が複数あると、横スクロールになります。

縦に関連記事を全表示したいのですが方法が分からなく、ヒントを頂けないでしょうか。

お暇な時で良いので、ご返事頂けると嬉しいです。

2017/10/01 (Sun) 02:26 | EDIT | REPLY |   
Akira  
To あトんさん

ありがとうございます

> 縦に関連記事を全表示したい〜

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul li

で検索して頂くとCSSソース内に3箇所あります。
最初のものを目印にしてください。
文字で書くと却ってわかりにくいのでスクショでご確認頂き、該当箇所を削除してください。

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

よろしくお願いします。

2017/10/01 (Sun) 12:51 | EDIT | REPLY |   
あトん  
ありがとうございます!

Akira様、休日にも関わらずフォローありがとうございます。

お手間を取って頂きスミマセン。

教えて頂いた部分を削除すると、横スクロールを外すことができました。v-424

修正後、関連記事が二列でテキスト領域が狭かったので、
width:100%;に変更し、スッキリ読みやすくなりました。v-410

ところで、トップページがカテゴリ別の入り口に変わりましたね。
このような表示は見たことがなかったので、勉強になります。

これからも宜しくお願い致します。

2017/10/01 (Sun) 14:06 | EDIT | REPLY |   
Akira  
To あトんさん

お手数おかけしました。
カテゴリ入り口のテンプレート、みなさんが戸惑わなければ良いのですが ^^;

こちらこそよろしくお願いします

2017/10/01 (Sun) 16:44 | EDIT | REPLY |   
あトん  
入口について

Akiraさん、新しいテンプレート斬新で素晴らしいです!

もし、要望を1つ言っていいなら、右上のBOLG更新順の表示をもっと目立つようにし、
パララックススライダー(新着記事)が左上に表示されると
Goodかなと思いました。

自分でテンプレを作るスキルがないのに、勝手なこと言ってしまいましたが、
Akiraさんのデザインセンスの良さには、毎回脱帽してます。

一ファンとして応援してます。

2017/10/01 (Sun) 20:59 | EDIT | REPLY |   
Akira  
To あトんさん

こんばんは。
アドバイス感謝します。いつでも歓迎です

全体レイアウトを見たかったので先んじて変更しましたが、スライダー部位は新着記事を予定していました。
パララックスではありませんが。
今ちょうど修正し終わってあトんさんのコメントを拝見しました(笑)

2017/10/01 (Sun) 21:29 | EDIT | REPLY |   
あトん  
To:Akiraさん

Akiraさん、わざわざのご返事ありがとうございます。

新着記事のプレビュー表示、Goodです。v-360v-360v-360

1つ言い忘れたのでですが、AboutMeのプップアップも素晴らしいです。v-218

はてなブログでは、Proでないと固定ページが使えないのですが、
Akiraさんのテンプレの仕掛けの方がセンスがあって、こちらの方が良いです。

だいぶ酔いv-275がまわって来たので、この辺で失礼します。

それでは。

2017/10/01 (Sun) 21:48 | EDIT | REPLY |   
Akira  
To あトんさん

はてなさんはproで固定ページが作れるようになったそうですね。
少し前にオフィシャル(開発ブログ)で拝見しました。
FC2ブログは今のところ無いんですよね。
ですからレイヤーを駆使して賄うしか ^^;

はい。ゆっくりおやすみください。
またアドバイス頂ければ幸いです

2017/10/01 (Sun) 22:53 | EDIT | REPLY |   
Akira  
To あやめさん(移動先)

https://vanillaice000.blog.fc2.com/blog-entry-443.html#comment4307

> トップページにサムネイル画像が表示されません〜

原因は「文字デパ」のスクリプト(JS)です。
* JS = Javascript(ジャバスクリプト)

トップページはローディングが遅くならないよう、画像にJSの「lazyload」という遅延読み込みを採用していますが、その動作を文字デパのJSが阻害しています。
ページのローディングが非常に遅いのも文字デパが原因です。
そして文字デパはSSL化対応になっていませんので、仮に今後あやめさんがブログをSSL化した際には利用できなくなります(混在コンテンツ)

対処
① レイジーロードを辞める
② 文字デパを辞める

このいずれかです。
SSL化の予定が無い、ということならば文字デパ採用でも良いと思います。
レイジーロードを辞める場合にはhtml内容の修正が必要です。
そしてローディングがさらに遅くなるという点を事前にご理解くださいね。
①と②どちらの方法を取られるかをお伝えください。
お返事の如何によって方法をお伝えします。
よろしくお願いします。

2017/10/08 (Sun) 15:21 | EDIT | REPLY |   
あやめ  
To Akiraさん

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

②の文字デパを辞めようと思います;

お忙しい中申し訳ありません、宜しくお願いします…!

2017/10/08 (Sun) 21:52 | EDIT | REPLY |   
あやめ  
To Akiraさん

連投ごめんなさい。
文字デパのホームページへ行って、文字デパを今のブログで使わないように設定したら
表示されるようになりました…!!;w; わぁい…!!

ご親切に沢山教えてくださって、ありがとうございました! 大事に使わせて頂きたいと思います。

2017/10/08 (Sun) 22:07 | EDIT | REPLY |   
Akira  
To あやめさん(完了のご報告)

自己解決されたようでお手数おかけしました。

日本語フォントというのはとっても重たいんですね (´・ω・`)
JSで読み込む場合には欧文フォントの何倍もの負荷がかかります。
部分的に使用する程度なら良いと思いますが、全文適用だとたぶん閲覧者はとても読み辛い ^^;

好みのフォントを利用できないのは残念で、諦めて頂いた格好になることをお詫びしますね。
作業お疲れ様でした

2017/10/08 (Sun) 23:32 | EDIT | REPLY |   
成太郎  
INDEX要約文の文字数について

初めて、連絡させていただきます。
FCを通して本テンプレートを見つけ、「イケてるテンプレート」と直感し、利用させていただいています。
ありがとうございます。
ブログ初心者ですが、標記についてご教示ください。
本テンプレートにおける「INDEX」において、投稿記事の要約文が各記事に17文字分しか表示されません。
1記事に対し、100文字から200文字程度を表示させることは可能でしょうか。
FC2にて独自ドメインを取得し、gooブログから引っ越し中です。
ちなみに、1記事毎にカット&ペーストを繰り返して引っ越し作業しています。
*FC側
http://blog.nextplain.net/archives.html

宜しく、お願いいたします。

2017/10/21 (Sat) 10:28 | EDIT | REPLY |   
Akira  
To 成太郎さん

ありがとうございます

> 「INDEX」において〜1記事に対し、100文字から200文字程度を表示させる〜

残念ですがFC2ブログの全記事リストに於いてはできないんです。
本文はFC2ブログ独自変数を用いて出力しますので、文字数の多いものを制御することはできてもその逆は不可なんですー (´・ω・`)
お力になれず申し訳ない (*_ _)

2017/10/21 (Sat) 22:15 | EDIT | REPLY |   
成太郎  
承知しました。

お手数おかけしました。
残念ですが、承知しました。
ありがとうございます。

2017/10/25 (Wed) 00:43 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ