共有テンプレート「Bonbori」の仕様説明

ぼんぼり

共有テンプレート「Bonbori(ぼんぼり)」

初心者の方向けに製作した共有テンプレート「Bonbori(ぼんぼり)」が、本日承認・公開されました。
今回は、トップページがリストタイプで、遊び心のある和風のテンプレートを目指してみました。
以下では、仕様の説明と、利用にあたっての留意事項などを説明します。

また、このテンプレートでは、トップページに10件ぶん程度を並べて、閲覧者さんが記事を選びやすいようになることを想定して、作っていますので、「環境設定」から、表示件数のほうを、変更されることをおすすめします
admin2

仕様・取扱い説明

項目詳細
テンプレートのコンセプト他ブログからの移行者の方たちや、改造慣れのしない初心者の方向けに、作成にあたりました。
また、和風のテンプレートは、少ないので、そういう意味でも、こういう感じのものを作ってみようと思いました。
推奨利用ブラウザChromeかFirefoxなど。IEでは、利用は可能ですが、製作者の意図したようには表示されない可能性があります。
トップページの仕様要約表示タイプで、丸いサムネイルつき見出しのリストタイプです。
記事内に画像がない場合は、ぼんぼりの代替画像に「No Image」という表示がついたものが表示されます。
【テストブログでの例】
記事内に画像がないときの例です。
ぼんぼり代替画像
メッセージボード管理画面のプロフィール紹介文に書いた内容が、トップページの一番最初のページでのみ、カラム部分の「お知らせ」として、表示されます。その他のページでは、サイドバーの所定の位置に戻ります。

この機能が不要な場合は→「お知らせ」機能の削除手順と、カスタマイズをして使う場合の説明
記事の「古い順表示」について記事の「古い順表示」を選択されている場合は、メッセージボードの表示がされませんが、これが仕様なので、ご了承願います。
レスポンシブブレイクポイントは、けっこう細かく設定しました。
「環境設定」から、「スマホ版を非表示」に設定して、ご利用ください。
そうしないと、モバイルでは、このデザインが反映されません。
スマホ版を非表示
OGP設定についてこのテンプレートでは、個別記事ページの下のページ送りには、次や前のページに記事内に画像がある場合には、その画像をサムネイル画像として表示するようになっています。
ですが、「OGP設定」を、「有効」にしておいていただかないと、表示されません。
そのため、「環境設定」の中の「メタタグの設定」から、「OGP設定」を、「有効」に変えてください。
metatag 記事内に画像がない場合には、設定にもよりますが、おおむね、プロフィール画像が表示されます。
なお、jsについては、universal-zero氏がはてなブログで公開されていたものをアレンジさせていただきました。
パンくずリストナビメニューの下に、左寄せで設置しました。
親カテゴリには非対応で、子カテゴリの場合には、子のみが表示されます。
中央寄せで表示したい場合には、「パンくずリスト」と書いてある直下のコードを、以下に変えてください。
#breadcrumb{margin:0 0 20px;display:block;font-size:14px;text-align:center;}
リスト型ページャー個別記事ページ以外のページャーには、ご本人の許可を得たうえで、hatena chips様のjavascriptを使用させていただきました。

FC2ブログ用の軽量なページネーションを作ったよ - hatena chips

今まで使っていたページネーションの仕様に少し不満があったので自作のものに置き換えました。割りと満足できるものになったのでスクリプトを公開します。難易度:...

改造について今回は、けっこう作り込んでおり、このヘッダー画像ありきのデザインなので、あまり改造向きではありません。
変えるとしたら、ぼんぼりのアイコン画像とか、背景色とか、「帯部分」の模様とか。
あとは、特に気になる箇所があって、変更したいということであれば、個別相談で。
  • ぼんぼりのアイコン画像
    ぼんぼりのアイコン
    は、CSSの1箇所のurlを変えれば、全部が変わります。また、推奨画像サイズは、300px × 300pxのpngで、縦横比が同じなら、だいたいOKです。
  • 背景色は、お好みで自由に変更。ただし、文字が白なので、なるべく暗い色のほうが適。
なお、カスタマイズ方法については、基本的には、「free_spirit」のカスタマイズページをご参照ください(ただし、Bonboriでは、ヘッダーの画像差し替えは、おすすめできないのと、トップページの仕様が微妙に違うことと、その他の部分で微妙に違うので、不明な点があれば、個別相談で)。
Google 英数フォントSpecial Elite - Google Fontsを導入、年月日部分に使用。
Google Material Icons実際に利用するのはたったの数種類であることから、軽量なこのアイコンフォントを搭載。
コメント欄本人アイコン埋め込み済み。訪問者用には、ぼんぼりのイラスト画像。
コメント欄返信リンク機能返信をクリックすると、投稿フォームへ移動し、自動で「Re:タイトル」が表示されるようになっている。
トラックバックトラックバック利用可。
新投稿記事に24時間の間New!という赤い文字を表示(トップページと個別記事ページ)
2019/9/28バージョンアップぶんより
使用させていただいたコードについては、「FC2ブログのテンプレート工房いたお様」より、メールにてご許可をいただきました。
質問・相談等ご相談は、随時お受けします。また、当方はプロではないので、無料のため、あまり混んでいる場合は、お待ちいただくこともあるかもしれません。
また、あまり大規模な改造で、当方が代替としてコードを全部書かなければならないようなケースは、遠慮させていただきます。
改造慣れしたブロガーさんの利用について自力で改造をしていただければ、搭載した機能を利用しつつ、お好みの状態で使っていただけると思います。
ただ、HTML下部のjsを撤去すると、正常に動作しなくなりますので、jsは撤去しないでください。
不具合報告不具合報告等は、随時歓迎いたします。
修正が必要な箇所が見つかれば、できるだけ、迅速に対処したいと思いますので、よろしくお願いいたします。
ファビコンファビコンについては、運営の指摘により、共有テンプレートに仕込むことは、認められないということなので、お引越しのそのあとは~FC2ブログでファビコンを設定してみよう~を参考に、ご自身で設置してください。
再配布再配布は不可とさせていただきます。

まとめ

今回は、和風のテンプレートを作ってみようということで、assemblyをベースに、作成にあたりましたが、結果的に、けっこう作り込んで、ぼんぼりのヘッダー画像ありきのデザインになりました。
できれば、こういうのが気に入ってくれるユーザーさんの目に留まって、快適なブログライフの一助になることを、願っています。

アップデート

2019/09/28大規模バージョアップ

詳しくは→共有テンプレートのバージョンアップについて - 共有テンプレートをご覧ください。

2020/5/19リストタグ関係のCSS修正

リストタグ関係の修正をしました。
詳細は→拙共有テンプレートの一部修正について(リストタグ関係)

2020/6/4配布終了

2020/6/4配布終了しました。

コメント

コメント(0)
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム