Pinboardテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | Pinboard |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事幅 | メイン --- 最大1180px サイド --- 270px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | あり(v3.4.1) |
| Font Awesome導入 | あり(v5.6.1 CSS) |
| Lazyloading導入 | あり |
| 構造化マークアップ | 個別記事のみ 「BreadcrumbList(パン屑リスト)」 「BlogPostiong」 |
| Page Speed Insigtsスコア |
|
| 固有機能 |
・ 画像にドロップシャドウ ・ 見出し装飾(手書き風, ドッグイヤー, カール) ・ 動画縦横比固定 使い方詳細はARTICLE DEMOを参照 |
| 推奨カスタマイズ | 左右カラム入れ替え, 色調変更 |
| ライセンス |
Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 1カラム | 1カラム | 1カラム |
| サイドメニュー --- 下 | サイドメニュー --- 下 | サイドメニュー --- 下 |
- iOS14でサムネイルが時折表示されない件修正
- FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
- jQueryを3.6.0にアップデート
カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。
【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。
<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("prev-pager-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("next-pager-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("circle-left");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("circle-right");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>var start_pos=0;$(window).scroll(function(e){var a=$(this).scrollTop();if(a>start_pos){$('.side-pager-left,.side-pager-right').removeClass('appear')}else{$('.side-pager-left,.side-pager-right').addClass('appear')}start_pos=a});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>script要素を1つから3つ分割に変更しています。
【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。
過去の更新一覧
- ページ送りのJSを修正
- コメント返信のJS変更
- jQueryを3.4.1にアップデート
- 個別記事ページ送りの複製を可能にしました
複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する
- パーマリンク設定導入に伴う個別記事URL正規化
- パーマリンク設定導入に伴うページ送り変更
- コメント主のリンク表示用JS及びデザインの変更
- 独自クラス.curlのIE向け調整
- 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
- 受信コメント一覧とコメント投稿フォームのセクションを統合
- コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
- 記事範囲上下の余白を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-->続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更。
<ul class="comment-info">
<li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>)
<!--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"><i class="fas fa-arrow-up"></i></a>
<li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>続きましてスタイルシート末尾に以下の内容を 追加。
.comment-info li {
display: inline-block;
}
.comment-info li:not(:last-of-type)::after {
content: "|";
margin: 0 .4em;
}#community" で検索するとhtml内に2箇所あります。2つとも #comment_form" に 変更。
続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除。
<!--/comment--> <form action="./" method="post" name="comment_form" id="comment_form">
上記のような形になっていればOKです。
続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </article> の上と下に一つづつ </div> がありますのでこの2つを 削除。
</form> </article> <!-- コメント投稿ここまで -->
上記のような形になっていればOKです。
続いてスタイルシート末尾に以下の内容を 追加。
#comment_form {
padding-top: 40px;
}
<div class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)
<div class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に
.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}
こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。
スタイルシート末尾に以下を 追加。
#inner-contents {
margin: 20px 0;
}
#inner-contents p:not(.relate-title) {
margin: 1.9em 0;
}記事内でp要素を利用している方向けなので必要がある方だけどうぞ。
以上です。よろしくお願いします。
- Font AwesomeのCSSバージョンを5.6.1にアップグレード
- jQueryのバージョンを3.3.1にアップデート
- レイアウト関連CSSの追加及び一部削除
- 個別記事下ページ送りの仕様変更(軽量化含む)
- 管理人コメントにプロフィールアイコンを自動出力
- Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
- はてなブックマークシェアアイコン追加(Google+と差し替え)
- 個別記事「記事編集リンク」をSNSアイコン並びからSNSアイコン上「Posted by ハンドルネーム」に変更(閲覧者に気づかれにくいようカーソル非表示にしてあります)
- サイドメニュー部プロフィール画像の幅制限解除(元画像依存, 最大値はサイドメニューの横幅と同等)
- 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。
【重要】テンプレートのアップデートについて, Font Awesomeについて
既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...
メンテナンスを行いました。
主な変更点は以下の通りです。
- トップページの画像遅延読み込みプラグインをLazyloadからLazysizesに変更しました
- リセットCSSを最小限にし、一部CSS内容を圧縮しました
- フォントのサイズ指定にremを導入しました
- 構造化マークアップのシンタックスをJSON-LDに変更しました
不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。
本ページの内容は2018年12月16日メンテナンス以降のバージョンが対象です。
長男がアメリカに帰る前に喧嘩してしまったあきらでございます (´・ｪ・｀)
あのやろう！！！
ごめんなさい。取り乱しました (*ﾉω・*)
や、でもうち基本仲良し親子なんで(笑)
ぴんぼーど 
承認されました。ありがとうございます。
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
カスタマイズのコツ
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
スマートフォン版の表示設定「利用しない」
レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。
検索バーの設定「利用しない」
タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。
メタタグの設定 > OGP設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
スクロールアンカーについて
About scrolling ancho
左右いずれかのカラムの縦(高さ)が一方よりも短いときにスクロールで画面外へ流れていかないようストップがかかります(スクロールアンカー)
現時点で以下のような注意点があります。
- 「特定のプラグインやウィジェットのJS内容 + Google Chromeのグリッチ」でChromeブラウザ上でプラグイン・ウィジェットが表示されなくなる
- アフィリエイトによってはスクロールアンカーへの掲載禁止
特定のプラグインに該当する具体的なものは「FC2動画」「FC2カウンター」「アフィリエイト」など、JSで内容を取り込むタイプのものです。表示されない、という症状が出ている場合には スクロールアンカーの解除を行ってください。
注)スクロールアンカー不要の方 で検索すると該当部位が出てきますのでガイダンスに従って削除をお願いします。
全体幅調整の仕方
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ブログの「全記事一覧」のページはアクセスに時間のかかるページです。キャッシュ生成されていない初回アクセス時には ページ遷移する前にフェイドが解消されてしまう ことがあります。
ページ遷移がフェイドの終了までに間に合わなかった際に発生しますが、タイムアウト設定は必須 ですのでご容赦くださいね (´・ω・｀)
ナビゲーションについて
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) | ナビゲーション背景色 など |
削除可能なJSについて
Delete specific JS if you want to
特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。
【FC2検索バーを利用しない人は削除】
<!-- 注)FC2検索バー非表示の方ここから削除可 -->
各々上記を目印にガイダンスに従って削除。
個別記事ページ送りを複製する方へ
Cautions when copying pagination in permanent page
2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
みなさんいつもありがとうございます (●'0'●)/
がまわって来たので、この辺で失礼します。
There are no comments yet.