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

投稿 2017年09月13日
48
テンプレート
HTML5CSS3RWD
Pinboardテンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新 2018.1.16

メンテナンスを行いました。
主な変更点は以下の通りです。

  • トップページの画像遅延読み込みプラグインをLazyloadからLazysizesに変更しました
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップのシンタックスをJSON-LDに変更しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

名称 Pinboard
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大1180px
サイド --- 270px
記事内で利用可能な見出しレベル 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
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
1カラム 1カラム 1カラム
下サイドメニュー 下サイドメニュー 下サイドメニュー

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

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

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

TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



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

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

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

全体幅調整の仕方
How to increase or decrease width of container

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

全体背景画像を変更される方
How to change the background image

該当箇所は

body:before

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

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

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

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

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

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

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

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

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

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

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

Microsoftブラウザでのスクロール動作について
About shaking scroll behavior in ie11

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

ナビゲーション
Important thing to be careful when adding links to navigation

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

navi breakpoint

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

(max-width: 850px)

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

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

トップページ記事の傾きについて
About rotation of article in top page

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

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

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

ドミナントカラー
Dominant colors

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

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

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

サンプル

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

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

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

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

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

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

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

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

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

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

48 COMMENTS

There are no comments yet.

きろろ  

お借りします

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

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

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

2017/09/14 (Thu) 00:33

きろろ  

およ?

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

2017/09/14 (Thu) 00:37

べえ  

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

Akira  

To べえさん

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

2017/09/15 (Fri) 08:02

Akira  

To きろろさん

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

--------

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

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

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

2017/09/15 (Fri) 10:43

きろろ  

To Akiraさん

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

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

2017/09/16 (Sat) 00:17

きろろ  

画像がですね……

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

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

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

2017/09/16 (Sat) 00:58

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

きろろ  

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

きろろ  

連投ですみません

静止画像は普通にどうさしているのですが、
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

Akira  

To きろろさん

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

2017/09/16 (Sat) 19:05

きろろ  

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

Akira  

To きろろさん

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

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

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

2017/09/17 (Sun) 09:04

きろろ  

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

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

きろろ  

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

Akira  

To きろろさん

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

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

2017/09/22 (Fri) 13:46

あトん  

スマホでの関連記事横スクロールについて

Akira様

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

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

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

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

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

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

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

2017/10/01 (Sun) 02:26

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

あトん  

ありがとうございます!

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

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

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

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

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

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

2017/10/01 (Sun) 14:06

Akira  

To あトんさん

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

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

2017/10/01 (Sun) 16:44

あトん  

入口について

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

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

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

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

2017/10/01 (Sun) 20:59

Akira  

To あトんさん

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

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

2017/10/01 (Sun) 21:29

あトん  

To:Akiraさん

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

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

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

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

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

それでは。

2017/10/01 (Sun) 21:48

Akira  

To あトんさん

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

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

2017/10/01 (Sun) 22:53

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

あやめ  

To Akiraさん

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

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

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

2017/10/08 (Sun) 21:52

あやめ  

To Akiraさん

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

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

2017/10/08 (Sun) 22:07

Akira  

To あやめさん(完了のご報告)

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

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

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

2017/10/08 (Sun) 23:32

成太郎  

INDEX要約文の文字数について

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

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

2017/10/21 (Sat) 10:28

Akira  

To 成太郎さん

ありがとうございます

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

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

2017/10/21 (Sat) 22:15

成太郎  

承知しました。

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

2017/10/25 (Wed) 00:43

liisaa  

トップページgrid-itemの表示について

こんばんは。はじめまして。
FC2にてテンプレート拝借しております。
とてもクールなテンプレートをありがとうございます。

使い始めてから、最近気づいたのですが、
トップに表示されるgrid-itemが6つではなく5つになってしまいました。
ソースを見たりしているのですが、テンプレート管理から修正できそうな箇所を発見できず、
どうやって直したらいいのかわからず、途方に暮れております。
ご多忙の中大変申し訳ございません。
何卒お力お貸しいただければ幸いです。
ご確認の程、よろしくお願いいたします。

liisaa

2018/01/16 (Tue) 19:40

Akira  

To liisaaさん

ありがとうございます ( ゚Д゚)ノ

記事の表示件数はテンプレートソース内設定ではなくブログ個人設定です。
以下の記事をご参照ください。

ご質問の前に「テンプレあるある」
https://vanillaice000.blog.fc2.com/blog-entry-220.html#object6

-------
別件ですが、liisaaさんは以下の記事の該当者です。

ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】
https://vanillaice000.blog.fc2.com/blog-entry-569.html

要点をまとめます
① レスポンシブデザインなのでスマートフォン版の設定は不要
参考記事
(内部リンク)
https://vanillaice000.blog.fc2.com/blog-entry-491.html
https://vanillaice000.blog.fc2.com/blog-entry-628.html
(外部リンク)
FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか?/ ぼっちん様
https://oops0011.blog.fc2.com/blog-entry-167.html

② サイトアドレス(h1)のテキストリンクがクローキング対象(隠しリンクにあたります)

③ ヘッダーの背景とブログタイトルが融合しているのでデバイス画面幅によってはブログタイトルが完全に見切れる

そして背景指定CSSの
background: url(アドレス) center center / 1180px 266px no-repeat;
太字部分は画像のサイズを指定する役割ではありませんので使い方が違います。
(ちょっと説明が難しいですが、「サイズ」指定ではなく「比率」の指定に近いです)
ブラウザの横幅をマウスで狭めてみてください。タイトル。背景共に見切れていくのがわかると思います。
パソコン画面サイズ、閲覧ブラウザサイズは人によってまちまちですから、ブログタイトルや背景はどのポイントでも見きれないような処理が必要です。

対策する・しないはお任せしますが、現状良くはないですね (´・ω・`)
一応お知らせしておきます。

2018/01/16 (Tue) 20:46

liisaa  

To Akiraさん

早々にご返信くださりありがとうございます!
いろいろと至らぬ点がありすみません・・。
質問の前のテンプレあるある、まずそこを読めずすみませんでした。

この後仕事のため、すぐに対応できませんが、
いただいたご指摘点、直していきます。
HTML・CSSまだまだ勉強中のため、もしかしたら読んでもわからない場合またご質問差し上げるかもしれませんが、
まず一人で頑張ってみます。

ありがとうございます!

2018/01/16 (Tue) 21:20

Akira  

To liisaaさん(終了のご報告)

はい。画像の修正は作り直しになりますので大変かと思いますが、頑張ってください。
お疲れ様です

2018/01/17 (Wed) 20:59

huugetu  

全記事リストの序文の文字数について

いつもお世話になっております。
去年もいろいろご相談させていただきました者です。

全記事リストは、記事の題名と 序文が20文字表示されていますが、この文字を多くするためにはどこを直せばよいでしょうか。
すみません、よろしくお願いいたします。

2018/06/28 (Thu) 12:56
vanillaice (Akira)

Akira  

To huugetuさん

こんにちは。こちらこそお世話になっております。

全記事リストの文字数についてはFC2の独自変数を利用しておりサーバーサイドの処理ですので、取得文字数を変更することはできません。
取得した文字をCSSで制限する(減らす)ことはできても増やすことは許可されていません(サーバーへのアクセス権限(php利用権限)が無いため)
よろしくお願いします。

2018/06/29 (Fri) 10:29

huugetu  

ありがとうございます

そうなんですね。わかりました。ありがとうございます。

2018/06/30 (Sat) 06:50
vanillaice (Akira)

Akira  

To huugetuさん(終了のご報告)

こんにちは。
ご期待に添えずごめんなさいね。
お疲れ様でした

2018/06/30 (Sat) 12:17

-  

管理人のみ閲覧できます

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

2018/10/11 (Thu) 10:10
vanillaice (Akira)

Akira  

To Pinboardナビの件 内緒さん

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

> スマホ表示の『ナビゲーション』の黒い部分の『横三本線』の部分を〜日本語表記にしたい〜

<div class="mobile-toggle">
で検索するとhtml内に1箇所出てきます。その直下に
<span></span>
<span></span>
<span></span>
と3行並んでいますので3行とも削除し、日本語のテキストに置き換えてください。

続いて
/* navi breakpoint 2/2 */
で検索するとCSS内に1箇所出てきます。
以下のキャプチャを参照しながら作業なさってください。

https://file.blog.fc2.com/vanillaice000/capture/cappinedi.png

-----
> FC2以外で(例えばWordPressなどで)〜

個人的なお仕事は引き受けていないんです。お役に立てずごめんなさいね。

2018/10/11 (Thu) 14:02

-  

管理人のみ閲覧できます

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

2018/10/12 (Fri) 01:11
vanillaice (Akira)

Akira  

To Pinboardナビの件 内緒さん(完了のご報告)

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

白文字の方が読みやすい気がしますがお任せします。
お疲れ様でした :)

2018/10/16 (Tue) 00:51

-  

管理人のみ閲覧できます

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

2018/10/16 (Tue) 10:58
vanillaice (Akira)

Akira  

To Pinboardナビリンクカラーの件 内緒さん

こんばんは ('0')/

スクリーンショットがちょっとわかりづらかったでしょうかね。もう一度掲載しておきます。
https://file.blog.fc2.com/vanillaice000/capture/cappinedi.png

color: white;
を追加しないと文字色変わりませんので追加してくださいね。
よろしくお願いします。

2018/10/16 (Tue) 22:07

-  

管理人のみ閲覧できます

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

2018/10/17 (Wed) 05:42
vanillaice (Akira)

Akira  

To Pinboardナビリンクカラーの件 内緒さん(完了のご報告)

こんにちは。
お出来になったということで良かったです。
お疲れ様でした :)

2018/10/17 (Wed) 15:53