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

curious_mind

共有テンプレート「curious_mind(キュリアス・マインド)」

写真ブログ向けに製作した共有テンプレート「curious_mind(キュリアス・マインド)」が、本日承認されました。
以下では、仕様の説明と、利用にあたっての留意事項などを説明します。

仕様・取扱い説明

項目詳細
テンプレートのコンセプトYahooからの移行者の方たちや、改造慣れのしない初心者の方で、自分のヘッダー画像を入れたり、好みの背景にしたい方をターゲットとして想定し、作成にあたりました。
FC2の共有テンプレートには、女性向けの優れたテンプレートが揃っていますので、同じようなものは必要はないと考えました。
また、FC2の使い方や、改造に慣れていない人を前提としていますので、ある程度、出来上がったものを提供しています。
推奨利用ブラウザChromeかFirefoxなど。IEでは、利用は可能ですが、製作者の意図したようには表示されない可能性があります。
トップページの仕様サムネイルつき見出しに、本文の抜粋がついたリスト状態です。
スマホでは、ワンカラムとなって、画像が上、タイトル等が下に移動します。
メッセージボード管理画面のプロフィール紹介文に書いた内容が、トップページの一番最初のページでのみ、カラム部分の「お知らせ」として、表示されます。その他のページでは、サイドバーの所定の位置に戻ります。

この機能が不要な場合は→「お知らせ」機能の削除手順と、カスタマイズをして使う場合の説明
記事の「古い順表示」について記事の「古い順表示」を選択されている場合は、メッセージボードの表示がされませんが、これが仕様なので、ご了承願います。
レスポンシブブレイクポイントは、けっこう細かく設定しました。
「環境設定」から、「スマホ版を非表示」に設定して、ご利用ください。
そうしないと、モバイルでは、このデザインが反映されません。
スマホ版を非表示
OGP設定についてこのテンプレートでは、個別記事ページの下のページ送りには、次や前のページのサムネイル画像が表示されるようになっています。
ですが、「OGP設定」を、「有効」にしておいていただかないと、表示されません。
そのため、「環境設定」の中の「メタタグの設定」から、「OGP設定」を、「有効」に変えてください。
metatag また、記事内に画像がひとつもない場合には、設定にもよりますが、おおむね、自分のプロフィール画像が表示されます。
なお、jsについては、universal-zero氏がはてなブログで公開されていたものをアレンジさせていただきました。
リスト型ページャー個別記事ページ以外のページャーには、ご本人の許可を得たうえで、hatena chips様のjavascriptを使用させていただきました。

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

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

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

サイドバーなどのタイトル部分の背景を変える場合

この画像は、クリックで画像ページへ飛びます(もっと大きな画像で見たい場合)↓
サイドバーなどのタイトル部分の背景 消す部分↓
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,linear-gradient(90deg, #1b1b1b 10px, transparent 10px),linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);background-color:#555;background-size:12px 12px
  • ↑これを、例えばだけれど「#333」などと変える。
  • その直後には、「;」が残っていなければならない。
  • この部分には、複雑な演出をしてあるので、これだけの分量になっているが、これすべてが、「色番号」と同じ意味合いである。

まとめ

今回は、主に、Yahoo移行者さんのうち、カメラが好きな方を意識して、製作に当たりました。
が、このテンプレートは、何関係のブログかというテーマを絞っていないので、わりあいと、汎用性があると思います。
できれば、多くのユーザーさんの目に留まって、快適なブログライフの一助になることを、願っています。

アップデート

2019/7/12新機能追加

  • 動画横幅対応
  • 内緒コメント非表示
詳細は→拙テンプレート新機能追加によるバージョンアップのお知らせ

2019/8/16記事内見出し関係の修正

2019/8/15までにダウンロードした方が対象。
詳細は【お知らせ】拙テンプレートの修正について

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

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

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

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

2020/6/4配布終了

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

コメント

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

-

2019/07/15 16:18 編集返信
Janedoe1471
To -さん
どういたしまして。
こちらこそ、拙テンプレートをご利用いただいて、光栄です^^

janedoe1471

2019/07/15 17:43 URL 編集返信
curious_mind準備中です
Janedoe1471さん、はじめまして。
curious_mind、お借りしてます。ありがとうございます。

ず~っと、自分のブログが「保護されていない通信」「安全ではありません」と表示されていて、気にはなっていたのですが、頻繁に更新もしていないので、見て見ないフリをしていました。
しかし、このご時世、在宅時間がたっぷりできたので、あれこれイジってみました。FC2のSSL設定だけでは、解決できず、デベロッパーツールで、調べると、エラー箇所が点在。
ならば、心機一転、新しいテンプレートを使ってみようと、全体の雰囲気、センスや、ほしかった機能がスマートに装備されていてるcurious_mindを選択しました。

この数日、いろいろ、テンプレートのアレンジをしているのですが、解決できないトコロがあるのです。
ブログ本文のタイトルと画像・動画の埋め込み素材を左配置にしたい。そして、画像周りの余白設定を除き、画像や動画素材の説明文章を画像に沿うかたちで配置したい、ということで、頑張って、HTML/CSS知識はありませんが、それらしいトコロを変えてみました。まず、

.blog_entry_title{min-height:80px;font-weight:bold;padding:10px 0;text-align:left;font-size:24px;}

にして、タイトルは、左寄せになりました。そして、

.blog_entry img{max-width:100%;height:auto;display:block;margin: 0em 0em -1em }

と、画像の下余白を、マイナス行間にすると、画像の説明文は、画像に沿うように文字が並ぶようになりました。

あと、アマゾンとYouTubeの埋め込み素材も左寄せ配置、説明文も余白なしで、レイアウトされるようになりましたが、Spotifyの埋め込み素材だけは、反応せずセンター位置のまま。直下の説明文の行間余白もキープされた状態。
そこで、Spotifyの埋め込みを動かすため、iframeの設定を

.blog_entry iframe{display:block;margin: 0em 0em -1em;max-width:100%;}

と、下部行間を狭めるつもりで、実行してみると、Spotify埋め込みが左寄せになり、説明文もマイナス行間に、アマゾン埋め込み&文字列も、問題なし。。。しかし、
今度は、YouTubeに影響が。YouTubeの埋め込み配置は左寄せなのですが、直下の説明文字は、また1行間ほど余白に離れてしまいました。

なにぶん知識がないので、すっきり解決せずにお手上げです。あちらをたてれば、こちらがたたず。ちょっと、頭を冷やしたいと思います。

とりあえず、画像と埋め込み素材の左寄せは、どうにかできたので、このあと、プラグインの手直しをして、近々curious_mindを本使用して、各ページの景色をチェックしたいと思っています。フォントが今までより大きくなったので、文章レイアウトも気になりますし、古い記事上のYouTube動画なども消失したままなので、家の片づけをしながら、のんびり、YouTube下の余白の狭め方を考えつつ、対処したいと思います。

お手すきの時、もし、アドバイスなど頂けるようでしたら、大変助かります。
長々と失礼しました。

demi zoe

2020/05/10 22:11 URL 編集返信
Janedoe1471
Re:curious_mind準備中です
そうですか、拙テンプレートに目を留めていただき、ありがとうございます。
とりあえず、curious_mindが適用されていない状態ですと、具体的なことが言えませんので、適用をされてから、またご相談いただければと思います。
また、Youtubeの埋め込みについては、拙テンプレートでは、以下↓の方法をおすすめしています。それは、レスポンシブ対応にするためです。
https://janedoe1471.blog.fc2.com/blog-entry-267.html

拙テンプレートは、すべてのデバイスをひとつのテンプレートで済ませるように、レスポンシブで作っておりますので、記事内の配置なども、基本的には、それを意識しています。

ですので、記事内の配置についても、レスポンシブという前提で考えていただくほうがよく、そして、Youtubeの埋め込みについては、埋め込みタグから貼っていただければ(↑)横幅対応になるようになっています。
記事内の各コンテンツの位置については、もちろん、変えられますので、curious_mindを実装されたあとに、またご相談に乗らせていただきたいと思います^^
よろしくお願いいたします。

Janedoe1471

2020/05/11 00:04 URL 編集返信
Re:Re:curious_mind準備中です
こんにちは、

この1か月、「YouTube埋め込み」下の1行ほどの余白の削除に、悪戦苦闘していました。
スタイルシートのそれらしいトコロをいろいろ変えては反応をみる、をくりかえしてみましたが、解決できず。
とりあえず、不本意な状態なのですが、実装してみました。

様子を説明すると。。。2019年3月21日の記事(https://demizoerock.blog.fc2.com/blog-entry-574.html)をのぞいていただくと、わかりやすいかもしれません。画像や埋め込み素材の下に、その「説明文(アーティスト名・タイトルなど)」が、添うようにしたかったワケです。

現在のCSSは、
.blog_entry img{max-width:100%;height:auto;display:block;margin: 0 auto -1em 0; }
.blog_entry iframe{display:block;margin: 0 auto -1em 0;max-width:100%;}
にしています。
Amazon (img)・Spotify (iframe)・BBC動画 (iframe)・画像 (img)は、左寄せにして「説明文(アーティスト名・タイトルなど)」を、直下に添えることができました。

しかし、どうしてもYouTube (iframe)だけは「埋め込み」と「アーティスト名・タイトル」の間に、行間が空いてしまいます。その余白の為、「アーティスト名・タイトル」が「記事本文」に寄ってしまい、行の並びが紛らわしい印象になってしまっているのが気になって。。。ブログ記事にYouTubeを多用しているので、非常に悩ましいトコロです。(ため息)

おじゃましました。しばらく頭を冷やしてから、また頑張ってみます。失礼します。

demi zoe

2020/05/23 11:04 URL 編集返信
Janedoe1471
Re:Re:Re:curious_mind準備中です
そうですか、Youtubeの下の一行分の余白の件ですね。
調べてみますので、しばらくお待ちください。

Janedoe1471

2020/05/23 13:53 URL 編集返信
Janedoe1471
Re:Re:Re:curious_mind準備中です
お待たせしました。
youtubeの下に余白を作らないということですと、以下の画像の箇所を、以下のように、修正をしていただければと思います。
https://blog-imgs-138.fc2.com/j/a/n/janedoe1471/youtube_2020052318265647a.png

margin:1em auto 0
にすることで、下に向かったmarginは、ゼロになりますので、よろしくお願いいたします。

Janedoe1471

2020/05/23 18:29 URL 編集返信
Re:Re:Re:Re:curious_mind準備中です
早速のご回答、ありがとうございます。

うっ、動きましたっ!余白が狭まりましたっ!うれしいっ!
video_outerが、そうでしたかぁ。。。

ご指示いただいた margin:1em auto 0 で、最初、様子をみてみましたが、
よりYouTube下のきわきわに文字を配置するため、img、iframeの余白数値に合わせるため、
margin:1em auto -1emにしてみました。

本当にありがとうござます。お手数おかけしました。
では、よい週末を。。。

demi zoe

2020/05/23 22:06 URL 編集返信
Janedoe1471
Re:Re:Re:Re:Re:curious_mind準備中です
そうですか、うまく行ってよかったです^^
demi zoeさんも、よいご週末を^^

Janedoe1471

2020/05/24 01:33 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

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

更新通知登録ボタン

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

検索フォーム