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

共有テンプレート「Girlie（ガーリー）」

初心者の方向けに製作した共有テンプレート「Girlie（ガーリー）」が、本日承認・公開されました。
今回は、ヤプログを意識した女子風味を目指し、可愛らしくまとめ、トップページをリストタイプにしてみました。

仕様・取扱い説明

項目	詳細
テンプレートのコンセプト	他ブログからの移行者の方たちや、改造慣れのしない初心者の方向けに、作成にあたりました。
推奨利用ブラウザ	ChromeかFirefoxなど。IEでは、利用は可能ですが、製作者の意図したようには表示されない可能性があります。
トップページの仕様	要約表示タイプで、丸いサムネイルつき見出しのリストタイプです。 記事内に画像がない場合は、代替画像に「No Image」という表示がついたものが表示されます。 【テストブログでの例】 記事内に画像がないときの例です。
メッセージボード	管理画面のプロフィール紹介文に書いた内容が、トップページの一番最初のページでのみ、カラム部分の「お知らせ」として、表示されます。その他のページでは、サイドバーの所定の位置に戻ります。 この機能が不要な場合は→「お知らせ」機能の削除手順と、カスタマイズをして使う場合の説明
記事の「古い順表示」について	記事の「古い順表示」を選択されている場合は、メッセージボードの表示がされませんが、これが仕様なので、ご了承願います。
レスポンシブ	ブレイクポイントは、けっこう細かく設定しました。 「環境設定」から、「スマホ版を非表示」に設定して、ご利用ください。 そうしないと、モバイルでは、このデザインが反映されません。
OGP設定について	このテンプレートでは、個別記事ページの下のページ送りには、次や前のページに記事内に画像がある場合には、その画像をサムネイル画像として表示するようになっています。 ですが、「OGP設定」を、「有効」にしておいていただかないと、表示されません。 そのため、「環境設定」の中の「メタタグの設定」から、「OGP設定」を、「有効」に変えてください。 記事内に画像がない場合には、画像は表示されません。 なお、jsについては、universal-zero氏がはてなブログで公開されていたものをアレンジさせていただきました。
パンくずリスト	ナビメニューの下に、左寄せで設置しました。 親カテゴリには非対応で、子カテゴリの場合には、子のみが表示されます。 中央寄せで表示したい場合には、「パンくずリスト」と書いてある直下のコードを、以下に変えてください。 #breadcrumb{margin:0 0 20px;display:block;font-size:14px;text-align:center;}
リスト型ページャー	個別記事ページ以外のページャーには、ご本人の許可を得たうえで、hatena chips様のjavascriptを使用させていただきました。 FC2ブログ用の軽量なページネーションを作ったよ - hatena chips 今まで使っていたページネーションの仕様に少し不満があったので自作のものに置き換えました。割りと満足できるものになったのでスクリプトを公開します。難易度:... hatenachips.blog.fc2.com
改造について	破けたようなピンクの画像（使用画像のサイズは86px × 63px） 冠のようなシンボル画像（使用画像のサイズは157px × 66px） は、それぞれCSSの1箇所のurlを変えれば、全部が変わります。 ヘッダーにもなっている女の子の背景画像については、下のほうの女の子の背景画像の変更についてを参照してください。 なお、カスタマイズ方法については、基本的には、「free_spirit」のカスタマイズページをご参照ください（ただし、Girlieでは、作り込んでおり、各種の部分でかなり違うので、不明な点があれば、個別相談で）。 共有テンプレート「free_spirit」のカスタマイズについて 共有テンプレート「free_spirit」のカスタマイズ：葉っぱのアイコン画像を変える 共有テンプレート「free_spirit」カスタマイズ：メニューバーとフッターの文字色を変更 共有テンプレート「free_spirit」カスタマイズ：上に戻るボタンの背景色と文字色を変更
Google 英数フォント	Cabin Sketch - Google Fontsを導入、年月日部分に使用。
Google Material Icons	実際に利用するのはたったの数種類であることから、軽量なこのアイコンフォントを搭載。
コメント欄本人アイコン	埋め込み済み。訪問者用には、破けたようなピンクの画像を丸にしたもの。
コメント欄返信リンク機能	返信をクリックすると、投稿フォームへ移動し、自動で「Re:タイトル」が表示されるようになっている。
トラックバック	トラックバック利用可。
新投稿記事に２４時間の間New!という赤い文字を表示（トップページと個別記事ページ） 2019/9/28バージョンアップぶんより	使用させていただいたコードについては、「FC2ブログのテンプレート工房いたお様」より、メールにてご許可をいただきました。 新着記事に新着表示「NEW」マークを付けて目立たせる - FC2ブログのテンプレート工房 10plate.blog44.fc2.com
質問・相談等	ご相談は、随時お受けします。また、当方はプロではないので、無料のため、あまり混んでいる場合は、お待ちいただくこともあるかもしれません。 また、あまり大規模な改造で、当方が代替としてコードを全部書かなければならないようなケースは、遠慮させていただきます。
改造慣れしたブロガーさんの利用について	自力で改造をしていただければ、搭載した機能を利用しつつ、お好みの状態で使っていただけると思います。 ただ、HTML下部のjsを撤去すると、正常に動作しなくなりますので、jsは撤去しないでください。
不具合報告	不具合報告等は、随時歓迎いたします。 修正が必要な箇所が見つかれば、できるだけ、迅速に対処したいと思いますので、よろしくお願いいたします。
ファビコン	ファビコンについては、運営の指摘により、共有テンプレートに仕込むことは、認められないということなので、お引越しのそのあとは～FC2ブログでファビコンを設定してみよう～を参考に、ご自身で設置してください。
再配布	再配布は不可とさせていただきます。

女の子の背景画像の変更について

画像の推奨サイズは、1480px × 1000px です。
大きな画像を用いますので、差し替える際には、一度、↓のような画像軽量化ツールにかけて、軽量化をすることを、おすすめします。

オンラインイメージ最適化ツール

OptimizillaはJPEGやPNGフォーマットのイメージを最小サイズに圧縮する、高性能のイメージ最適化ツールです。

imagecompressor.com

このテンプレートでは、演出として、

• 女の子の背景画像の上に、白い薄い半透明の膜を貼ってある。
• ブログタイトル部分では、文字をはっきり見せるために、ごく薄い黒っぽいグラデーションをかけてある。

という特徴があります。
そのため、背景画像を変える場合で、そういう演出が不要だという場合には、背景画像を変えるだけでなく、当該箇所のコードを削ってください。

注意事項

• このテンプレートでは、PC版で見た場合に、ブログタイトル部分の配色に、IEとその他のブラウザで、見え方に違いがありますが、これが仕様ですので、ご了承願います（IEでは解読されないプロパティがあるため）。
• このテンプレートでは、iPad（横幅768px）から見た場合に、フッター部分の見え方が違いますが、これは、iPadのブラウザの仕様（というかバグ）に合わせざるを得なかったものですので、これが仕様ですので、ご了承願います。

まとめ

今回は、ヤプログのような可愛らしいテンプレートを作ってみようということで、作成にあたりました。
できれば、こういうのが気に入ってくれるユーザーさんの目に留まって、快適なブログライフの一助になることを、願っています。

画像を四角にするカスタマイズ

画像を四角にするカスタマイズについて、お問い合わせをいただきましたので、以下に画像を表示します。
画像を丸くするためには、border-radius:50%; というコードを入れてありますので、その部分を削除すれば、四角になります。

トップページのサムネイル画像

コメント欄のアイコン画像（本人、訪問者）

個別記事ページ下のページャーのサムネイル画像

右下のトップへ戻るボタン

サイドバーのプロフィール画像

個別記事下の「関連記事」のサムネイル画像

アップデート

2019/9/3

スマホでの不具合報告のため。

• スマホ版で「記事タイトル」と「続きを読む」のタップ時のページ遷移ができない不具合のため、トップページでのセルホバー時の水玉模様の背景演出を削除。
• トップーページの最初のページの「お知らせ」部分のグラデーションが、スマホ版での見え方が汚いため、グラデをやめ、普通の背景色に変更。

再ダウンロードが可能な方は、お願いいたします。
お手数をおかけいたします。

【再ダウンロードが難しい場合】
この部分のコードを切り取って、下のほうに移動させてください。
この位置へ↓
メッセージボード上部のグラデーションの変更↓ 差し替え用コード↓

#message_notice{margin:0 0 15px;min-height:50px;display:flex;justify-content:center;align-items:center;background:rgba(235,216,216,.5);font-weight:bold;color:#888;padding:10px 0;}

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

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

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

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

2020/6/4配布終了

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

背景画像の変え方

1. まず、好みの画像を選び、用意する。そして、大きさは、1480px × 1000px にする。
2. その画像を、軽量化ツールにかけて、少しでも軽くする。Girlieで使用した画像の「重さ」は、約180KBだが、同程度にするか、画像の質を見ながら、あまりボケない程度に、できるだけ軽くする。
   軽量化ツール→オンラインイメージ最適化ツール
3. その画像を、FC2の画像フォルダからアップロードする。
4. そして、その画像のURLを、テンプレートのスタイル編集の以下の位置のURLと、差し替える。
   
5. Girlieでは、画像の上に、白い薄い膜と、文字を見やすくさせるための薄い黒い膜が貼ってあるので、差し替え後の画像によっては、それが不要であれば、お好みで、その「膜」を、除去する。
6. 青い「更新」ボタンを押す。
7. ブログを開き、背景画像の変更ができていれば、作業は終了。

ナビゲーションの３番目を書き換える方法（ねね様用）

一番最初の記事ページ「お問い合わせ」のページへのリンクに変えるということで、よろしいですよね。
その場合には、以下のようにしてみてください。

1. 管理画面から「テンプレート管理」を開く。
2. 上の枠「HTML編集」の枠の中で、以下の画像の場所を探してください。
   
3. そして、赤枠で囲んだ中のように、貼り換えてください。
   【貼り換え前】
   <li class="sp-hide"><a href="<%url>?xml" target="_blank" rel="noopener noreferrer">RSS</a></li>
   【貼り換え後】（別タブで開く指定。同タブで開く場合には、target="_blank"を削除。また、文字数に合わせて、paddingを調整してあります）
   <li><a href="/blog-entry-2.html" target="_blank" style="padding:0 15px;">お問い合わせ</a></li>
   もしも今後、「お問い合わせページ」を変えた場合には、hrefのURLだけを変えてください。
   
4. 下の青い「更新ボタン」を押す。
5. ブログを開き、できているかどうかを見て、実際にクリックをして確認してみる。
6. 以下のようにできていれば、作業は終了。