Bullet - ブログ内期間限定配布

投稿 2018年08月31日
42
ブログ内限定配布
FC2TemplateHTML5CSS3ResponsiveLimited

配布終了致しました

2018年8月現在私が個人的に利用しているテンプレートの共有リクエストがありましたので、ブログ内限定・期間限定 で提供したいと思います。
2018年8月末日までに DLをお願いします。 本作を共有テンプレートに申請することはありません。

  • ページ表示スピード強化版です
  • 上級者向け
  • カスタマイズサポートはありません

カスタマイズはかなり困難を極めると思いますので上級者向けです。
私の方では不具合報告だけ承ります。

当該テンプレートは作者が自身の都合や使い勝手のみを考えて制作したものがベースとなっています。
機能面・SEO面に於ける相違などを熟考された上で利用をご検討ください。

Bullet限定テンプレート
PCアイコン TBアイコン SPアイコン

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

名称 Bullet
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大900px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
GTmetrixスピードスコア
固有機能 ・ 画像ドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
このテンプレートのみの特殊機能
・ 目次自動生成(TOC)
・ lazyloading用画像アスペクト比事前指定
・ lazyloading用動画コンテナ
カスタマイズ サポート不可。自己責任でお願いします。
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
・ jQuery未導入(全てvanilla JS)
・ Font Awesomeスクリプト未導入(全てインラインSVG)
・ 個別記事プロフィール画像部位html修正必須(当該記事本文最終見出しを参照のこと)

valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
1カラム 1カラム 1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下

サンプル

Samples

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

注意点

Attention

共有テンプレートとして配布している従来の作品とは異なる特徴がいくつかありますので事前にご理解をお願いします。

head情報

「月・日別」「カテゴリ」「ユーザータグ」のページは noindex 指定にしてあります。
このページ種を検索結果の対象にする必要は無いと思っていますので除外。 「サイト内検索結果」「コメント編集」についてはどのテンプレートでも除外しています。

作者利用中のテンプレートは dns-prefetch による事前名前解決を用いていますが、各ユーザーに割り当てられている画像サーバー及び追加されるかもしれない外部サーバーの推測ができませんので取り除いてあります。

スムーススクロールJSの読み込みを遅延させています

ページ上部・下部などへページ内移動するボタンについては初回ローディング時にJS読み込みが行われません。
閲覧者による任意スクロールが発生した直後に読み込みますので、それまでボタンが押されないようスクロール前はボタン非表示にしてあります。

ただし個別記事上方にある コメント投稿フォームへの移動 につきましてはabove the fold(ファーストビュー)内にありますので、スクロール前に押されることもあります。
その場合には スムーススクロールは行われず瞬時移動 といった挙動になります。
これは不具合の類ではなく、レンダリングスピードとユーザー利便との天秤の結果ですのでご了承ください。

また、この処理によりTOCスクリプト側へのスムーススクロール内容追加が不要となりますので、TOCについてもJS, CSSなど今回は事前導入済みです。

有料アカウントを前提とした機能

有料会員向けの仕様に則った内容は全て削除済みです。

W3C validation

html内容はどのページ種もvalidですが、CSSについては variables (カスタムプロパティ)を利用していますのでエラーの指摘を受けます。
(まだ草案段階とみなされています)

また、html内、別タブで開くリンクには noopener noreferrer を指定してあります。
(こちらについては今後リリースする共有テンプレートにも追加するつもりでいます)
アフィリエイトリンクなどはこの形式を継承しない(つまり上記rel属性を追加しない)よう注意してください。
クリックカウントされなくなることがあります。

管理人用「記事編集ページリンク」

個別記事につけている「記事編集」のページへ飛ぶリンクですが、こちらは常に悩みのタネというか (´・ェ・`)
「管理人のみ表示する」変数がありませんので、閲覧者にも押せてしまいます。
こちらのテンプレートでは画面左にあるプロフィール画像をリンクにしてあります。
また、一般閲覧者が気づきにくいようマウスオーバーのカーソルも非表示にしてあります。

トップページ最初の1ページ目の挙動

Google Chromeのみ、スライダーとlazyloadingが共存しているとlazyloading側の画像表示が遅れます。
Chromeのバグ報告にも上がっていますので、こちらについてはスクリプトエラーや不具合の類ではなくGoogleサイドの修正待ちでお願いします。
SEOやスピードテストで問題視されることはありません。

IE閲覧者への警告・啓蒙

IE閲覧者に対しMicrosoft Edgeへの移行及びその他モダンブラウザへの切り替えを啓蒙するバナーを表示するようにしてあります。

導入済みスクリプトとCSS

implemented Javascript and CSS

追加による重複が発生しないよう、事前導入してあるJSを最近の記事内容と照合も含めお伝えしておきます。

JS (関連CSS含む, 関連html含まず)

  • TOC
  • スムーススクロール(TOC含む)
  • Lazylsizesメイン
  • Lazysizes動画(YouTube)
  • LazysizesLQIP
  • Luminous
  • コメントツールバー(コメント投稿フォームの絵文字などのツール)
  • jQueryファイル
  • Font Awesome JS

見出しを目次化するスクリプト(プラグインなし)【toc】の紹介

追記 2018.7.13 ----- 記事末尾にVanilla JS(jQueryなしネイティブJS)のコードを追加しました。 ----- 追記ここまで ちょっと見切り発車というか、リクエストがありましたので書きますが、私自身導入して間がないですし全ページの修正を済ませたわけではありません(笑) 見出しを目次化するためのJS。一般的に toc と呼ばれます Table Of Content 目次のことを英語表現ではテーブルオブコンテントと言い、そ...

lazysizesで掲載したYouTubeがiOSで再生できない件について

うーーん。これは困りました (´・ω・`) lazysizesで遅延読み込みを指定しているYouTubeがiPhoneで再生できないようです。 「YouTubeが」「iOSで」と書いていますが、その他動画サービス及びAndroid OSでは未検証なのでこの表現を取っています。 パソコンでの再生は問題ありません。あくまでもiPhone (´・ェ・`) 再生ボタンをクリックすると この動画は再生できません と表示されます。 私の制作したテンプレート...

Lazy loadingにLQIP画像を利用してユーザービリティを高める

FC2ブログでLazysizesを利用していることを前提とした記事です。 画像のLazyloadingではオリジナル画像が出てくるまで閲覧者が画像の存在に気づかない場合があります。 初期表示にLQIP(Low Quality Image Placeholder, ロー クオリティ イメージ プレイスホルダー)を設定しておくと、その問題点を緩和することができます。...

超軽量画像拡大スクリプトLuminousをFC2で使う方法

画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。 FC2ブログで利用するための各ファイル導入の仕方、コードの書き方などのベーシックな内容に加え、速度強化用のコード記載の仕方や画像が拡大できることをわかりやすくするための追加CSSなど。 初心者向けになるべく事細かに説明したいと思います。 今回は...

CSS

  • lazyloading用画像事前アスペクト比固定
  • lazyloading用スピナー
  • 画像スマホ横全画面
  • 画像タイル
  • ブログカード

Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法

正直あんまりおすすめではない (´・ω・`) すすめない理由は 要素が増える めんどくさい 記事内でstyle属性あるいはstyle要素を必ず使う必要がある pタグ内の画像はどうする(セマンティクス面) こんなところでしょうか。 特に要素が増えてしまう点ですね。無駄なラッパーが増えるというか。 結局は自身の記事内容の管理能力であったり理解力であったりに関わってきますので、html初心者にはおすすめしません。 ...

lazy loadingで画像が出る前にローディングスピナーを表示させる方法

lazyloadingは 画像が表示されるタイミングが遅くなる わけですから、せっかちスクロールをされると画像の存在に気づいてもらえないかもしれないよね。 ということでこれまでにいくつか対策を書いてきました。 本記事は以下のリンク先記事双方の内容を実践している方に向けたtipsです。 Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法 - カスタマイズ正直あんまりおすすめではない (´・ω・`) ...

アメーバブログの【スマホでは画像は画面横いっぱい、テキストは余白あり】をFC2でやってみよう

昨日ははてなブログさんのレイアウトを真似てみましたが、今回はアメーバさんを。 アメブロではスマホ版でこんな感じになります 通常の掲載 画像の横幅を画面幅と同等に 画像は画面幅(ビューポート)いっぱい、テキストの左右にはちゃんと余白がありますので読みづらくありませんよね。 ビミョーにトレンドというか、シャレオツ化計画進行中のYahoo!ブログスマホ版もこういっ...

はてなブログの【写真をタイル状に並べる】をFC2でやってみよう

はてなブログさんの機能パクりというか。 まぁ、パクリ…(笑) つってもweb上では当たり前にあるレイアウトですが、やろうと思った(紹介しようと思った)のははてなさんの機能紹介を見たからなのである意味パクりかもしれんな (´・ω・`) 複数の写真を横一列に並べて貼り付けられるようにしました - はてなブログ開発ブログ記事編集画面(PC版)の編集サイドバーにある「写真を投稿」タブから写真を貼り付ける際に、複数の写真を...

ブログカードのブックマークレットを作成しました

SSL化後の悩ましい作業のひとつ。 ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。 かといって はてなブログカード はSSLに対応できてないですし。 私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑) そしてEmbedlyは非常にカスタマイズし辛いんですね。 ほとんどできないと言っ...

TOCをご利用になる方は 記事内の見出しを h2 から作成してください。
記事を書く際にに記載するhtmlは

<nav id="toc"></nav>

見出しへ戻るリンクは自動表示されませんので、必要な箇所に

<div class="back-toc" style="font-weight: bold;"><a href="#toc">目次へ戻る&uarr;</a></div>

を記載します。

スライダーについて

About carousel slider.

各カテゴリページ遷移用ですが自己責任でカスタマイズで変更して頂いても構いません(カスタマイズのご相談は承りません)

必要な画像のサイズ

  • 縦長 横210px --- スマホ通常dpi用
  • 縦長 横360px --- スマホ高dpi/ パソコン通常dpi兼用
  • 横長 横780px --- パソコン高dpi用

画像の差し替えについてはファイルアドレス末尾に ---210 ---360 ---780 と付いていますのですぐわかると思います。

カテゴリは自動抽出されません。必要な件数をご自身でコピペして増やしてください。
デフォルトではサンプルとして5件分入れてあります。
修正必須箇所は

  • 画像アドレス --- 3種7箇所/ 1件
  • リンク先アドレス(カテゴリURL) --- 1箇所/ 1件
  • カテゴリタイトル --- 1箇所/ 1件

デフォルト画像は私のFTPサーバーを通しています。必ず差し替えをお願いします。

スピードスコアテストについて

How to avoid low score on speed test.

ページの実際のスピード(fully loaded time)は回線環境が安定していれば概ね1秒台あるいはそれ以内で表示されるはずですが、スピードスコアテストの性質上、通常ディスプレイ(低dpi)サポートが行われていない場合には大きな減点となります。
対策については以下の記事を参照してください。

GTmetrixスピードスコア D66%からA100%にするために行ったこと

個別記事ではなく トップページ 対策に的を絞ったお話です。 FC2ブログのシステム上、要約表示タイプ のテンプレートは表示スピード自体は速くともスコア的には低くなります。 利用する 独自変数 に左右されますので、解像度の低い画像(サムネイル専用画像)を出力する変数を用いればそこそこのスコアは出せますが、高解像度ディスプレイ(高dpi)上のスケーリングに関する問題が生じます。 今回の対策は以下のような指針に従...

上記の方法は 画像サーバーが変更になる場合がある(サーバー番号変更) ことを理解した上で行ってください。
実際に変更された場合には番号違いサーバーの画像は一切表示されなくなりますので、JSによるURL書き換えあるいは新サーバーへのアップロードし直しという作業が発生します。
その代わり プラグインなどにJSエラーやhtmlエラーなどの問題が無く、また Google Analyticsの掲載が無い 場合には100%が取れます。

対策を取らない場合のスコアはGTmetrixがDスコア60%前後、Page Speed InsightsではAスコア90%前後です。

対策する場合は

<!--body_img-->
<img class="grid-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" alt="<%topentry_title>">
<!--/body_img-->

上記内容を以下の内容に変更します。
(x は不特定文字列です)

<!--body_img-->
<picture>
  <source media="(max-width: 414px)" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/<%topentry_no>---640.jpg 2x, https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/<%topentry_no>---380.jpg 1x">
  <source media="(max-width: 900px)" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="<%topentry_image_url> 2x, https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/<%topentry_no>---380.jpg 1x">
  <img class="grid-image lazyload" src="<%topentry_image_url>" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="<%topentry_image_url> 2x, https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/<%topentry_no>---380.jpg 1x" alt="<%topentry_title>">
</picture>
<!--/body_img-->

本作は「サイト内検索結果ページ」も72px四方の小サムネイルは利用せず、原寸画像へのlazyloading適用になっています。
こちらも対策するには search_area 内の

<!--body_img-->
<img class="lazyload search-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" alt="">
<!--/body_img-->

上記内容を以下の通り修正。

<!--body_img-->
<img src="https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/<%topentry_no>---150.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/<%topentry_no>---380.jpg 2x, https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/<%topentry_no>---150.jpg 1x" class="lazyload search-image" alt="">
<!--/body_img-->

ナビゲーション左のブログタイトルについて

About blog name in navigation

あまりに長いブログタイトルを想定した作りにはなっていません。
スマホ横320pxを念頭にフォントサイズで調整を行うか、ロゴ画像を設定するなどの対処を行ってください。
画像に変更する場合には 縦20px前後 で作成し、CSSに

#statusbar img {
  vertical-align: middle;
}

を追加。

関連記事リストについて

About related articles

ブログ個人設定「テンプレート変数のみ」以外を想定していませんのでこの指定以外はまともなスタイリングが行われません。
設定を「テンプレート変数のみ」に変更してご利用ください。

* このリストのサムネイルは原寸が非常に小さいため不鮮明ではありますが、メインコンテンツではないので妥協しています。

FC2検索バーについて

About FC2 search bar

ページ最上部への検索バー表示を想定していません。非表示にしてご利用ください。

ダウンロード

Download Here!

終了致しました。

くれぐれも jQueryとFont Awesomeが無い こと、上級者向けカスタマイズ難易度高 を念頭に。
いつもありがとうございます ('0')/

【重要!】個別記事プロフィール画像変更

Be careful when you change the user photo in article

個別記事の左側に固定されているプロフィール画像は 高dpiでは自動出力、低dpiは手打ち です。
変更しておこうと思って忘れました ←
みなさんのプロフィール画像の原寸がいくつなのか不明ですが、ブログ環境設定で行った指定は高dpiと捉え、低dpi用に 60×60の小サイズ別画像を指定するようにしてください。

<div id="article-info"> で検索するとhtml内(zipフォルダ内のtxtファイル)に1箇所あります。その直下に

<a href="https://admin.blog.fc2.com/control.php?mode=editor&amp;process=load&amp;eno=<%topentry_no>" target="_blank" rel="noopener noreferrer" style="cursor: none;"><img id="article-author" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="<%image> 2x, https://blog-imgs-115.fc2.com/v/a/n/vanillaice000/20180723220138417.png 1x" alt="<%author_name>"></a>

緑が低dpi用の画像URLです。
ここを処理しないと低dpiのデバイスから閲覧した際に 私(Akira)の画像が出てしまいます。
ここが説明不足でした。すみません。

この部位については低dpiを指定しておかないとabove the foldに入ってますのでスピードテストの減点対象です。それ故にこういった処理をしています。
必ずご自身のプロフィール画像に変更をお願いします

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

42 COMMENTS

There are no comments yet.

-  

管理人のみ閲覧できます

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

2018/08/18 (Sat) 15:54
vanillaice (Akira)

Akira  

To rel属性の件 内緒さん

そうですね。適用する内容だけ見極めて頂ければ。
ブログカードの場合は問題は生じないと思いますのでその処理で大丈夫です。
よろしくお願いします (o'ω')ノ

2018/08/19 (Sun) 00:28

-  

管理人のみ閲覧できます

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

2018/08/19 (Sun) 01:09

ねで始まりわで終わる名前  

Akiraさんおはようございます。こちらのテンプレートをリクエストした者です。お礼を鍵コメで申し上げるのもどうかなと思いつつ、オタク向けブログへ見ている方を誘導するのも気が引けたので変な名前で失礼いたします。

こちらのテンプレート、まさしく理想のデザインなので、お借りできることになり非常に嬉しいです。うっかり削除してしまった時のために自分のDropboxにもzipファイルをアップしました。大事に使わせていただきます。本当にありがとうございます。

詳細な説明をしてくださっていること、TOCを始めから入れてくださっていることから、何とか自力でカスタマイズできるかなと思います。HTMLとCSSについてググりつつ頑張ります。

もし不具合が見つかったら鍵コメリンク付きで報告に参ります。今回は本当にありがとうございました!

2018/08/19 (Sun) 07:12
vanillaice (Akira)

Akira  

To rel属性の件 内緒さん(終了のご報告)

おはようございます (●'0'●)/

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

2018/08/20 (Mon) 00:28
vanillaice (Akira)

Akira  

To ねで始まりわで終わる名前さん

おはようございます ('0')/

サポート外にしてごめんなさいね。
注意点なんですが、各要約記事の通常dpiについては任意だとして、スライダーの方はデバイス分岐を前提にソースを書いています。
で、自身の所有していないデバイスは目視確認ができないですよね。
それがサポートできない理由でもあります。
今回この分岐内容にミスがあると対象デバイスでは画像の表示が行われませんので、よくよく注意しながら作業してくださいね。
よろしくお願いします

2018/08/20 (Mon) 00:32

ねで始まりわで終わる名前  

アドバイスありがとうございます!To Akiraさん

スライダーに設定する画像アドレスを間違えないように気を付けます。幸い、タブレットもスマホも持っているので、パソコンと合わせて3種類のデバイス全部から確認しようと思います。

Akiraさんのこちらのブログに右クリック検証を使うことでお手本にさせていただきますm(__)m

2018/08/20 (Mon) 08:52
vanillaice (Akira)

Akira  

To ねで始まりわで終わる名前さん

お疲れ様です ('0')/

デバイス種やデバイスサイズではなくデバイスの画面解像度(dpi)での分岐なんですね。
おそらくタブレットとスマホは高dpiだと思います。パソコンが通常dpiならば全部チェックできますが、retinaや4K, 5Kの高dpiであった場合にはパソコンなど大きい画面の低dpiでどう見えているのか目視する術が無いわけなんです。
念の為説明しておきますね。

お返事お気になさらず。ありがとうございます

2018/08/21 (Tue) 01:16

-  

管理人のみ閲覧できます

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

2018/08/22 (Wed) 12:08
vanillaice (Akira)

Akira  

To UTF-8の件 内緒さん

こんばんは ('0')/

FC2ブログのhtml内容は変数が含まれますので、エディター側からすれば不明あるいは不正な文字列です。
なのでhtml拡張子ではなくtxt拡張子にしてあるのですが、それでもダメな場合には一旦ブラウザに放り込み、そこから全選択&コピペでどうでしょう。
一度お試しください。

どの部位が置き換えられたのかスクショでは不明なので、この方法でもダメな場合はお手数ですが対象箇所のスクショを頂けると助かります。
よろしくお願いします。

-----
内緒さんは結構カスタマイズを頻繁にされているようなのでCrescent EveからSublime Text3への乗り換えをおすすめします。

DLリンク
https://www.sublimetext.com/3

日本語化などの手間がありますがCrescent〜よりも遥かに高度で使いやすいはずです。
Brackets でも良いと思います。Sublime〜より動作が重たいけれどこちらもおすすめ。

DLリンク
http://brackets.io/

Crescent〜もとても良いエディターなんですけどね。
いろいろやっている(やれる)内緒さんには物足りないかもしれません。
こちらはお時間のある時にでも検討してみてくださいね。

2018/08/22 (Wed) 22:35

-  

管理人のみ閲覧できます

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

2018/08/23 (Thu) 00:30

-  

管理人のみ閲覧できます

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

2018/08/23 (Thu) 10:12
vanillaice (Akira)

Akira  

To UTF-8の件 内緒さん

こんにちは (●'0'●)/

Sublime Text3なら開けましたか?
慣れると作業効率がグンと上がると思います。
注意点。
ファイル比較のプラグインは使わない方が良いと思います。
Compare to viewとかなんとかだったかdiffなんとかだったかSublime mergeとかなんとかだったか、名前忘れちゃいましたけど、これ使うと全く関係ない部位のタグがおかしなことになります。</body>が</body になったりとか。</head>が</head になったりとか。
何故かブラケットが消されてしまう。これで以前ハマった (´・ェ・`)
なのでもう絶対使わない(笑)
(もしかしたら修正されているかもしれませんが)

-----
内緒さんもBreaking bad観てらしたんですね。
全然関係ないけど昨日娘が観てたドウェイン・ジョンソンが元いじめられっ子CAIエージェント、って役柄の映画にジェシー・ピンクマン出てた(笑)
そして「じぇしーぴ」って入力したらジェシー・ピンクマンってちゃんと変換候補出た(笑)

BadfingerのBaby Blue、この歌詞まさしくウォルターのことですよね ( ̄∀ ̄;)

2018/08/23 (Thu) 13:03
vanillaice (Akira)

Akira  

To Bullet個別記事プロフィール画像の件 内緒さん

こんにちは (●'0'●)/

これごめんなさい。私の説明不足でした。
ここも高低dpiで振り分けているので、プロフィール画像の自動出力を書き換えて別画像にしておこうと思って忘れました 。(゚うェ´゚)゚。

記事本文に追記しましたのでご確認ください。
(配布ファイルを変更しようかと思いましたが、説明の修正が必要になるのでこのままにしておきます)

----
ってことはChromeは高dpiの方を拾ってるってことなんですかね (´・ω・`)
そういう理屈になりますよね。
え?どゆこと?(笑)
私のパソコンもスマホも高dpiなのでどのブラウザから見ても内緒さんの画像が出てるんです。なので確認のしようがなくて申し訳ないです (´・ェ・`)

2018/08/23 (Thu) 13:08

-  

管理人のみ閲覧できます

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

2018/08/23 (Thu) 13:44

-  

管理人のみ閲覧できます

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

2018/08/23 (Thu) 15:54
vanillaice (Akira)

Akira  

To Bullet個別記事プロフィール画像の件 内緒さん(完了のご報告)

お手数おかけしました。

はい。頑張ってください

2018/08/23 (Thu) 23:05
vanillaice (Akira)

Akira  

To UTF-8の件 内緒さん(完了のご報告)

良かったです。
いろんな便利機能がありますので是非使いこなしてくださいね。

-----
相方はスカイラーにムカつくって言ってました。
えー。でも私スカイラーの気持ちわかるよ (´・ェ・`)
男と女とでは感じ方が違うのですね(笑)

私今好きなドラマがほとんど待ち状態なんですよね。
Game of thrones, Major crimes6, i Zombie, Bates motel, Endeavour などなど。
実はPrison breakは未見です。相方と次男が見てましたが私は見ていない(笑)
Homelandって政治色が強いですかね。どうも苦手で ^^;
相方はHouse of cardsにハマってました。ケビン・スペイシーは好き(干されたけど)なのに政治ドラマだから見てない ^^;

2018/08/23 (Thu) 23:14

-  

管理人のみ閲覧できます

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

2018/08/24 (Fri) 12:23
vanillaice (Akira)

Akira  

To Bullet border色指定の件 内緒さん

こんにちは (o'ω')ノ

はい。その処理でOKです。
CSSに限らずJSのvarやsvgのuseやFC2の独自変数も同じですが、変数というのは予め定義をしておかないと利用できません。
ですから単純に移設しただけでは機能しません。

例)
root {
--xxx: white;
--yyy: 40px;
}

.zzz {
border: 1px solid var(--xxx)
margin-top: var(--yyy);
}

-----
Walking dead は長男が観てますね。
私ホラー好きですしゾンビものも好きで、なおかつノーマン・リーダスも大好き(映画の処刑人が大好き)なのに何故か触手が動かない ( ̄∀ ̄;)
2話観ました。でも3話目に手が伸びない… なんでだろ( ̄∀ ̄;)

2018/08/25 (Sat) 13:48

-  

管理人のみ閲覧できます

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

2018/08/25 (Sat) 22:37
vanillaice (Akira)

Akira  

To Bullet変数の件 内緒さん

ちょっと確認です。

> rootの記述部分を参照して、不明だった部分も部分も修正できました〜

この部分なんですが、root部分も移植したという意味でしょうか。
それとも変数部分をダイレクトな記述に変更したという意味でしょうか。
後者なら良いんですがCSS variablesはIE(全バージョン)では使えません。
CSSを拝見したところ var の文字列は無いようなので(var要素は別です)たぶん大丈夫だとは思いますが、念の為 ^^;

2018/08/25 (Sat) 22:56

-  

管理人のみ閲覧できます

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

2018/08/25 (Sat) 23:06
vanillaice (Akira)

Akira  

To Bullet変数の件 内緒さん

了解です。安心しました(笑)

2018/08/25 (Sat) 23:09

靉霧(あいむ)  

No title

Bulletの期間限定配布、ありがとうございます。
Akira様の制作されるテンプレートはどれも素敵で、FC2に出戻るきっかけになりました。
中でも、Axis、Empty-street、Juvenile、La_Vitaのデザインや機能が気になり、拝借し、色や画像を変更しておりました。
Bulletにも挑戦してみたくダウンロードいたしましたところ、予想以上に記述が多く驚きましたが、なんとか画像の入れ替えやカテゴリメニューの設定もできました。
丁寧な解説をご用意くださり、本当にありがとうございます。
また、今回Bulletに切り替えたことで、<h○>タグや<p>タグと<div>タグの違いを段落前後の空きなどから理解でき、使い分けを意識するようになりました。
この程度の浅学さでBulletをお借りするのは申し訳ない気もいたしますが、予想以上にブログ内を巡りやすくなったのが嬉しく、使わせていただこうと存じます。
(もちろん、他のAkira様制作のテンプレートにも時々着替えて楽しみたいです^ ^)
本当にありがとうございます。今後も学ばせていただきます。

2018/08/26 (Sun) 13:50
vanillaice (Akira)

Akira  

To 靉霧(あいむ)さん

こんにちは (●'0'●)/
ご丁寧にありがとうございます。

Bulletでは記事タイトルがh1になっていますので、今後は記事内見出しをh2から書かれることをおすすめします。
過去記事修正は大変でしょうから「今後」ということで。

お言葉励みになります。ありがとうございます

2018/08/27 (Mon) 15:30

靉霧(あいむ)  

To Akiraさん

はい、ぜひh2から使わせていただきます。
それに、見出しの装飾や画像のドロップシャドウにも挑戦してみます^ ^
(Akira様のブログは、1つを理解すると関連記事の内容も解り始めるので嬉しいです)
ご助言ありがとうございます。

2018/08/28 (Tue) 19:47
vanillaice (Akira)

Akira  

To 靉霧(あいむ)さん

こんばんは (o'ω')ノ

こちらこそありがとうございます

2018/08/28 (Tue) 22:19

-  

管理人のみ閲覧できます

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

2018/08/29 (Wed) 20:32
vanillaice (Akira)

Akira  

To Bullet ナビゲーションロゴの件 内緒さん

こんばんは (o'ω')ノ

> ロゴ画像が一旦グローバルナビゲーションのボトムラインにくっついた状態に表示され〜もし最初から中央に表示させる方法があれば〜

スタイルシート内ではなくhtml内に記載してください。
.navi-item a で検索するとhtml内に2箇所出てきます。1つ目の.navi-item aの直前に
#statusbar img{vertical-align:middle}
を追加。改行など入れないように注意してください。
スタイルシート内は放置するか削除します。
(残しても問題は起きませんが無駄な指定です)

Bulletはスピード強化版なのでabove the fold(ファーストビュー)に関わる要素へのCSSはスタイルシートではなくhtml内に直接記すようにしてくださいね。
スタイルシートの読み込みを後回しにすることでレンダリングスピードを上げています。
よろしくお願いします。

----- 別件

個別記事の左に固定してあるプロフィール画像について説明が抜けていて後で追加したので、内緒さんに伝わっているか心配していましたが、ちゃんと読んで頂いたようで安心しました。
ごめんなさいね ^^;

2018/08/29 (Wed) 23:28

-  

管理人のみ閲覧できます

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

2018/08/29 (Wed) 23:55

-  

管理人のみ閲覧できます

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

2018/08/30 (Thu) 10:54
vanillaice (Akira)

Akira  

To Bulletスライダーの件 内緒さん

こんにちは (●'0'●)/

こちらは私もそうなります ^^;
非アクティブ状態が続いたり(他タブを開いてページから離れる, ブラウザから離れて他アプリケーションを操作するなど)するとなるみたいです。
slider image disappear (or vanish)で調べると出てくるのですが、未だ解決に至らずという感じみたいです。
なのでswiper(スライダーのプラグイン)側のアレでソレですよね (´・ω・`)
こちらについては今の所どうしようもありません。そして閲覧者の非アクティブは頻繁に起こることではないので当面は目を瞑って頂けると助かります(汗)

2018/08/30 (Thu) 16:07

-  

管理人のみ閲覧できます

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

2018/08/30 (Thu) 18:46

深緑の女魔術師  

テンプレお借りします

深緑の女魔術師です。

うっかりダウンロードし忘れるとこでした。
いつも素敵なテンプレート提供ありがとうございます。
難しすぎて使えないかもですがお借りしますね。

以上です。

2018/08/31 (Fri) 12:35

-  

管理人のみ閲覧できます

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

2018/08/31 (Fri) 13:55

-  

管理人のみ閲覧できます

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

2018/08/31 (Fri) 14:20
vanillaice (Akira)

Akira  

To Bulletスライダーの件 内緒さん(終了のご報告)

こんにちは ('0')/

ご理解頂きありがとうございます。私の方でもこの件は追っていこうと思います。
ありがとうございます

2018/08/31 (Fri) 15:10
vanillaice (Akira)

Akira  

To 深緑の女魔術師さん

こんにちは。
ご丁寧にありがとうございます

2018/08/31 (Fri) 15:31
vanillaice (Akira)

Akira  

To Bulletロゴ画像の件 内緒さん

> こんにちは ('0')/

alt="<%blog_name>">

ブラケットが抜けているのでimg要素が完結していません。
それで直ると思います(試していませんので「たぶん」です)

2018/08/31 (Fri) 15:33

-  

管理人のみ閲覧できます

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

2018/08/31 (Fri) 15:49
vanillaice (Akira)

Akira  

To Bullet検索の件 内緒さん

お疲れ様です。

そうですね。検索フォームが不要ならば削除してプラグインを導入するなどで対処をお願いします。

----
スマホ広告は元からトップページでも表示されていますよ。
ブラウザには各ポリシーがあって、例えば同じiPhoneでもSafariではトップに広告が出ますがFirefoxでは出ません。
AndroidのChromeではほとんど広告は出ないんじゃないでしょうか。
トラッキング防止設定のできるブラウザも多いです。

FC2では基本的にどのページにも広告を出す設定にしてあるはずですが、個人環境に左右されているという感じだと思いますよ。

2018/08/31 (Fri) 23:50