Greetings - FC2ブログテンプレート

投稿 2018年08月27日
8
テンプレート
FC2TemplateHTML5CSS3Responsive
Greetingsテンプレート
PCアイコン TBアイコン SPアイコン

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

名称 Greetings
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大858px
サイド --- 280px
記事内で使える見出しレベル h2からh6まで
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
GTmetrixスピードスコア
*サムネイル対象画像横500px前後の場合
固有機能 ・ 画像ドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
要約ページ --- 1カラム, サイドメニュー表示なし
その他ページ --- 2カラム
要約ページ --- 1カラム, サイドメニュー表示なし
その他ページ --- 2カラム
要約ページ --- 1カラム, サイドメニュー表示なし
その他ページ --- 2カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下(デバイスサイズ依存) サイドメニュー --- 右 or 下(デバイスサイズ依存)

海外ドラマは観まくっているのに日本のドラマは全く知らないAkiraでございま (´・ω・`)
いやマジで日本のドラマ全然全くわからん。俳優さんとかも ^^;

ぐりーてぃんぐす

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • テンプレートと無関係なプラグインなど導入のお手伝い
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズのお手伝い

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

旧ブラウザ向け啓蒙コードについて - カスタマイズ

GirlOnWire リリース時から提供させて頂いてます『旧ブラウザ利用者に向けてアップグレードを促す』ための啓蒙ソースコードですが今回 表示される画像を変更しました変更したのは「解像度」のみアップグレードのハイパーリンクに使用しているブラウザアイコンが対象です高解像度ディスプレイ向けに画像解像度自体を調整しました無駄だなー と思いつつ作業(笑)高解像度ディスプレイでアクセスしているということは比較的新しい機種...

コード書き出しの <!--[if lt IE 9]><!--[if IE]> に変更すると「全てのIE」が対象になります。

左右カラム入れ替えの仕方

How to reverse the direction of rows.

#main-container で検索されますと4箇所ヒットします。
4つ目padding: 0 30px; の直下に flex-direction: row-reverse; を追加。
続いてその直下にある #primarymargin-right: 40px; 緑部位 right を left に変更。

ドミナントカラー

Dominant colors

root で検索されますとスタイルシート内に各種カラーなどがまとまって記載されています。
各々カラーコードを変更すると同じ色指定が行われている要素を一括で修正できます。

ページ送りサムネイルについて

About thumbnails in pager

個別記事ページ送りのサムネイル画像を表示するにはブログ個人設定で OGP設定を有効化 してください。
メタタグの設定

jQueryとFont Awesomeについて

About jQuery and Font Awesome.

デフォルトではOFF設定になっていますので必要な方はそれぞれ
注)jQuery必要な方コメント解除
注)Font Awesome必要な方コメント削除
で検索し、コメント状態を解除してください。
jQueryは現時点で最新の3.3.1、Font Awesomeも同じく最新の5.2.0(JS)です。

コメント解除の仕方
<!-- 内容 -->
緑部分削除。

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

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

8 COMMENTS

There are no comments yet.

AzTak  

画像を連続表示する際に少しだけ間をあけたいのです

初めまして。先日から、greetingsを使用させていただいています。

画像を連続表示する際に少しだけ間をあけたいのです。できれば、その画像の外枠を青線で囲みたいと思っています。
このテンプレートではどういう風に行えばよろしいのでしょうか?

2018/09/16 (Sun) 16:42
vanillaice (Akira)

Akira  

To AzTakさん

ありがとうございます

各個別記事に掲載した画像の「下」に空白を設けたいという意味に捉えてよろしいでしょうか。
スタイルシート(テンプレート管理画面下段)の末尾に以下を追加。

#inner-contents img {
margin-bottom: 数値px;
border: 1px solid blue;
}

赤字の数値はご自身の希望の数値を入れてください。10〜20あたりが妥当かと思います。
AzTakさんの場合は記事下に「関連記事リスト」を「表示しない」設定にされていますので上記内容だけでOKですが、今後サムネイル画像付きで「表示する」設定に変更された場合にはその画像にも青い罫線がついてしまいますので、さらに以下の内容を追加してください。

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail img,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg {
border: 0;
}

------
ブログ個人設定で「OGP」を有効化されますと各記事のページ送りに前後記事のサムネイルが表示されるようになります(サンプルは当該記事本文に掲載しているリンク先(ARTICLE DEMO)でご覧頂けます)
設定画面
https://admin.blog.fc2.com/control.php?mode=setting&process=2#meta_tag

現在はOGPがOFF設定になっています。強制ではありませんのでご自身で決めてくださいね。
よろしくお願いします。

2018/09/17 (Mon) 01:05

AzTak  

有難うございました

すべてうまくいきました。これで、私のブログをアクセスした人も喜んでくれるかと思います。
今後ますますの活躍を祈っています。

2018/09/17 (Mon) 07:54
vanillaice (Akira)

Akira  

To AzTakさん

こんばんは。
ご希望に添えましたら幸いです。
励みになるお言葉もありがとうございます。
お疲れ様でした

2018/09/17 (Mon) 22:14

AzTak  

もう一つご教授ください

中文字、小文字で複数行になる場合、行間を少し狭めたいと思います。
どういうふうに指定したらよいか、お教えください。

2018/09/18 (Tue) 16:37
vanillaice (Akira)

Akira  

To AzTakさん

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

まず確認ですが、
使用する文字の大きさによって自動で行間調節を行うといったことはできませんので、AzTakさんが記事内で文字を大きくあるいは小さくする・しないに関わらず一定の行間を指定することになります。

記事行間指定

でCtrl+Fキー検索されますと対象箇所が出てきます。1.9 の数値をご希望のものに(小さい数値に)変更してください。
単位はつけません。1.6ならば文字の大きさの1.6「倍」という指定です。自身のフォントサイズの「何倍」という意味ですね。1.6〜1.7ぐらいが良いかもしれません。

------
文字の大きさに応じた行間設定は

<span style="font-size: 1.3em; line-height: 1.4;">通常よりも大きい文字、行間も狭くする</span>

こんな感じでその都度指定するようにしてくださいね。
よろしくお願いします。

2018/09/18 (Tue) 21:06

AzTak  

またまたありがとうございました

記事行間指定を"1.6"にして私の好みの感じにすることができました。

実はここかなあと思って、値を変更してみてはいたのですが、プレビューボタンでは効果が確認できず、迷いに迷っていました。先に更新ボタンを押して、出来栄えを確認したら、意図したとおりになっていました。そういうものなんですねえ。
後半の記述分は、よほどのこだわりがなければ必要ないんだとよくわかりました。

2度にわたってお手数をお掛けして申し訳ありませんでした。本当にありがとうございました。

2018/09/18 (Tue) 23:28
vanillaice (Akira)

Akira  

To AzTakさん(完了のご報告)

こんばんは (●'0'●)/

ブラウザはキャッシュ(履歴)が残りますのでテンプレートの修正を行った後は思い切って「更新」で上書きをしないと確認できないことが多いんです。

修正できたということでお疲れ様でした。
また何かありましたらお気軽に

2018/09/19 (Wed) 03:21