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

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

テンプレート ブログ内限定配布
2018/08/31
42
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWDLimited

配布終了致しました

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

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

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

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

Bullet限定テンプレート

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修正必須(当該記事本文最終見出しを参照のこと)
パソコン タブレット スマートフォン
1カラム 1カラム 1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下
Related post

Comments  42

-
2018/08/18 (Sat) 15:54

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/19 (Sun) 00:28

To rel属性の件 内緒さん

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

-
2018/08/19 (Sun) 01:09

管理人のみ閲覧できます

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

ねで始まりわで終わる名前
2018/08/19 (Sun) 07:12

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

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

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

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

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

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

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

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

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

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

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

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

ねで始まりわで終わる名前
2018/08/20 (Mon) 08:52

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

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

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

vanillaice (Akira)
Akira
2018/08/21 (Tue) 01:16

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

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

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

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

-
2018/08/22 (Wed) 12:08

管理人のみ閲覧できます

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

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

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/23 (Thu) 00:30

管理人のみ閲覧できます

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

-
2018/08/23 (Thu) 10:12

管理人のみ閲覧できます

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

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

To UTF-8の件 内緒さん

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

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

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

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

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

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

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

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

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

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

-
2018/08/23 (Thu) 13:44

管理人のみ閲覧できます

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

-
2018/08/23 (Thu) 15:54

管理人のみ閲覧できます

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

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

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

お手数おかけしました。

はい。頑張ってください :)

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

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

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

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

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

-
2018/08/24 (Fri) 12:23

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/25 (Sat) 13:48

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) 22:37

管理人のみ閲覧できます

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

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

To Bullet変数の件 内緒さん

ちょっと確認です。

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

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

-
2018/08/25 (Sat) 23:06

管理人のみ閲覧できます

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

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

To Bullet変数の件 内緒さん

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

靉霧(あいむ)
2018/08/26 (Sun) 13:50

No title

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

vanillaice (Akira)
Akira
2018/08/27 (Mon) 15:30

To 靉霧(あいむ)さん

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

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

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

靉霧(あいむ)
2018/08/28 (Tue) 19:47

To Akiraさん

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

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

To 靉霧(あいむ)さん

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

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

-
2018/08/29 (Wed) 20:32

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/29 (Wed) 23:28

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:55

管理人のみ閲覧できます

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

-
2018/08/30 (Thu) 10:54

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/30 (Thu) 16:07

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

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

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

-
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
2018/08/31 (Fri) 15:10

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

こんにちは ('0')/

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

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

To 深緑の女魔術師さん

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

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

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

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

alt="<%blog_name>">

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

-
2018/08/31 (Fri) 15:49

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/31 (Fri) 23:50

To Bullet検索の件 内緒さん

お疲れ様です。

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

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

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