attention admin about comments trackbacks you may also like

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

2015年10月28日
テンプレート
20
HTML5 CSS3 RWD
Jingleテンプレート

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

最終更新 2019.8.3
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め <div class="icon-position"> のすぐ上にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">Leave a comment</h3> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<p class="visitor-name"><%comment_name>&nbsp;&nbsp;<script>a="<%comment_url>",""!=a&&document.write('<a href="'+a+'" target="_blank" rel="nofollow noopener noreferrer"><i class="fas fa-link"></i></a>');</script></p>
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->"><%comment_name></p>

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

.inner-contents { で検索するとスタイルシート内に1箇所ありますので padding: 20px 0;margin: 20px 0;変更

続きまして、スタイルシート末尾に以下を 追加

.inner-contents p {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

名称 Jingle
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大790px
サイド --- 280px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 あり(v5.6.3 CSS)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右
(デバイス幅依存)
サイドメニュー --- 下
更新履歴 2019.1.22
  • Font AwesomeのCSSバージョンを5.6.3にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • UA判別のJSを削除しCSSに変更
  • Pinterest, はてなブックマークのシェアアイコンを追加
  • SNSホバー時の背景色を各社ブランドカラーに変更
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • パンくずリストを導入
  • 構造化マークアップを導入

不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、パンくずリスト・構造化マークアップの導入など比較的大きな追加変更が含まれます ので是非アップデートをご検討ください。

更新履歴 2018.1.16

大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。

定番テンプレート7作品メンテナンスのお知らせ - テンプレ不具合・修正など

以下のテンプレート7作に於いて大規模なメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。 Sakura_daylight Sakura_daylight2 Sakura_nightglow Capricious Ranchu OnTheGround Jingle...

更新履歴 2017.9.22

SSL化に伴うURL正規化

更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2016.10.12

メンテナンス
・ 全体レイアウトを再調整しました
・ カテゴリなど一部ページをリスト形式に変更しました
・ 主要公式プラグインの整形
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整

ブログタイトル下のナビゲーションはリンクの増減を想定して製作しておりません(ごめんなさい)

更新履歴 2016.1.8

フッター構造を変更しました
タイトルタグを微調整しました(SEO対策)

更新履歴 2015.11.20

Windows10 Internet Explorer11及びMicrosoft Edgeで 固定した背景画像がブレるバグに対処

本記事内容は2019.1.22アップデート以降が対象です。

じんぐる

ぽんぽんと連続してリリースしてしまいましたが、うかうかしてると冬になってしまいますもので (´・ω・`)

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

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

  • サイドバーの形状変更
  • トップページの表示タイプ変更(全文表示から要約表示へ変更、グリッド並び数変更 など)
  • レスポンシブを固定幅化
  • カラム数・配置変更
  • 今回は左右カラム入れ替え非推奨です(ポイント画像がabsolute配置のため)
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

背景色変更

How to change the background color

背景の色を変更して頂けます。雪の柄ごと画像を丸っと取り替えたい方は一つ前の秋バージョンをベースにしてください。

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

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

雪の画像はそのままで背景色だけ変更する方法
まずスタイルシート内の body:before を探してください。

-ms-linear-gradient(top, rgb(187,203,216), rgb(232,234,236));
-webkit-linear-gradient(rgb(187,203,216), rgb(232,234,236));
-moz-linear-gradient(rgb(187,203,216), rgb(232,234,236));
-o-linear-gradient(rgb(187,203,216), rgb(232,234,236));

デフォルトがグラデーションになっていますのと、ブラウザごとに記述方法が異なるもんですからベンダープリフィックスというのが付いてややこしいものになっておりますが、グラデーションを採用するのならばデフォルト内容をサンプルとして
rgb(187,203,216)
これが上部の色指定、そして
rgb(232,234,236)
こちらが下部の色指定で上から下にかけて切り替わるグラデーションになってます。
色合いを変更されます際には上下2色を全て差し替えてください。rgb値での10進数指定をしていますが #6桁数字 の16進数でも構いません。

単色にされる場合には一旦上記内容全て 削除 されまして(他の文字列を巻き込み削除しないよう注意)、指定したい色コードをこんな風に入れてください(濃紺 を16進数指定する例) ↓

#1a0945;

背景色を変更されました際にはテキストの色なんかも変えてくださいね。読めなくなっちゃうので。

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

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(20)

There are no comments yet.

snow miy  

2015/11/02 (Mon) 09:51

ランキングバーナーの位置が・・・

冬versionもとっても素敵ですね♪早速使わせていただいています。

そこでおかしな現症が。
各ランキングに登録していて、そのバーナーを記事の最後、拍手の前に設置しています。
FC2のブログの確認からや直接アクセスすると問題はないのですが、Facebookやランキングのサイトからアクセスすると、バーナーが一番最後にきてしまいます。

HTML編集で<%topentry_body>と<!--more_link-->の間に入れています。
これまでもこの場所に追記して問題なく表示されていました。入れる場所がいけないのでしょうか。

お手数ですが解決法を教えてください。
よろしくお願いします。

Akira  

2015/11/02 (Mon) 12:00

To snow miyさん

ありがとうございます ( ゚Д゚)ノ

FBから辿ると位置が変わっている、ということでしょうか。
え?違う? ( ̄∀ ̄;)
ちょっとこの情報だけではなんとも... イメージができない(笑)
とりあえず、記述場所はそれで合ってます(<!--more_link-->の直前)
個人設定の拍手の位置なのですが、
「more link の後ろ」になっているかどうか一度ご確認ください。
これが「前」になってると位置が逆転します。

状況が掴めないのでお返事待ちにしておきますね。
申し訳ないですー!

snow miy  

2015/11/03 (Tue) 13:02

確認が…

早速のお返事ありがとうございます。

「FBから辿ると」ということで間違いありません。
うまく説明できずごめんなさい。
同じく各ランキングサイトからでも同様なことになります。

拍手の位置ですが、FC2の「環境設定」の「ブログの設定」で行っているので、「more linkの後ろ」なのかの確認が…(;´д`)
すみません💦 ど素人で💦

ブログはこちらです。
http://miy100.blog.fc2.com/

ご面倒おかけしますが、ブログ内のランキングやFBから辿ってみてご確認いただけないでしょうか。
申し訳ございませんが、よろしくお願いします_(_^_)_

Akira  

2015/11/03 (Tue) 13:22

To snow miyさん

あー。なるほど。わかりました。
えっとですね、やはり個人設定の方を修正して頂く必要がありそうです。
FBから辿ると「個別記事」へジャンプします。
で、現在Snow miyさんの「トップページ」では拍手を含めFB等のSNSボタン関連がランキングよりも「後」に。
個別記事では逆転して「前」になってます(ご確認ください)。

環境設定 > ブログの設定 > 拍手ボタンの設定
この一番下の項目に「拍手ボタンの表示位置」というのがありますので、ここを「追記リンクの後」に変更お願いします。

snow miy  

2015/11/04 (Wed) 08:21

変更してみました

度々の質問で申し訳ございません(´;ω;`)

ご指示通り「追記リンクの後」にしようと設定を見たところ、「後」になっていました。
もう一度「後」のまま更新をしてみましたが変わりありませんでした…(当然かな💦)

急いではおりませんので、他になにが影響しているのかわかりましたら教えてください。
よろしくお願いします_(_^_)_

Akira  

2015/11/04 (Wed) 09:16

To snow miyさん

ごめんなさいね。
私がFC2の仕様を勘違いしておりました。
そうかー ( ̄∀ ̄;)
FC2の拍手はJavascriptでFC2が後付けをするわけですが、追記リンクの「前」「後ろ」しか選べないですよね。
で、その位置の判定はバナーなどを無視します(当然っちゃー当然ですが)ので、こういう逆転現象が起こるようです。
ちゃんと調べなかった私のミスです。
お手間取らせてしまい申し訳ない (*_ _)
以下の方法をお試しください(JSで挿入します)

</body>

の直前に以下を追加

<script>
$(function() {
$('<div style="text-align:center; margin: 30px auto;">バナー関連ソースコード</div>').insertBefore('.fc2_footer');
});
</script>

これなら確実だと思います。
バナーの位置合わせ(水平)はセンターにしてあります。
寄せを変更する場合には

text-align: ここにleftright;

バナーの垂直方向の余白指定が

margin: 30px auto; ですので、
もっと余白を取りたければ 30 を大きくしてください。
一度お試し頂きまして、不備があるようでしたらお申し付けください、

きろろ  

2015/11/05 (Thu) 01:13

息子さんのご入学おめでとうございます<(_ _)>

お祝いがすっかり遅くなって申し訳ありません<(_ _)>
改めて、ご入学おめでとうございます!(^^)!

Jingle、クリスマス用にDLさせていただきました。
それから、Faint。承認されていたんですね~
こちらもDLさせていただきました。
colorboxの導入は今回、私でもできました!(^^)!

で、質問なんですが……
こちらに書いてよろしいのか、判断にまよったのですが……
トップ記事に書かせていただきます。

Faintのサイドバーなんですが。
HOME,Index,任意のリンクしか表示されないんです。

任意のリンクはカテのことですよね?
タグとか、FC2のプラグイン(リンク)とかが表示されないのはなぜなんでしょうか(>_<)

お暇な時でかまいませんので、レクチャーをお願いいたします<(_ _)>

snow miy  

2015/11/05 (Thu) 09:34

うまくいきません(´;ω;`)

丁寧な説明をしていただきありがとうございました。

早速追加してみました。
「バナー関連ソースコード」に各ランキングのコードを入れればいいのですよね。
試してみたのですが何も表示されませんでした…

何度も回答ありがとうございました。

今のままでも十分満足していますので、引き続き使用せさてもらいます(*^-^*)
春の桜バージョンから季節ごとに使用させてもらっています。
今後も繰り返し使用していくつもりです♪

お手数おかけしました。
ありがとうございました。

Akira  

2015/11/05 (Thu) 10:33

To snow miyさん

お時間いただいておりますー!

今バナーの方のコードをチェックしましたが、こちらの構文の方にちょっと問題が ^^;
アンカー(リンク設定)が重複していたり、入れてはいけないところに</ br>が入っていたり。
で、私の方で整形し直しました。
スクショ ↓

--- 削除しました ---

これで問題がなければ、JSを含めたコード内容は以下の通りです(</body>直前に貼り付け)

--- 削除しました ---

バナーの方を修正していますので、コード内容は要保存です(他の方のテンプレートでも使えます)
リンクのアドレスだけ抜いてありますので、確認されまして正しく入力してください(3箇所)
お試しくださいませ ( ゚Д゚)ノ

(ご本人のスクショ確認が終わりましたら、スクショ・コード共に削除しますのでお知らせくださいね。)

Akira  

2015/11/05 (Thu) 10:36

To きろろさん

あらー。お返事がテレコになっちゃった!
きろろさんごめんね ( ̄∀ ̄;)

えと。左にあるのは「ヘッダー」です。
サイドバーは右側に収納されております。
右上ハンバーガーボタンクリックでプラグイン全部出てきますー。
ちょっとわかりにくかったね。ごめんなさいね ^^;

長男への祝辞ありがとうです (`・ω・́)ゝ
あんな発音でよく受かったなー と(笑)

snow miy  

2015/11/05 (Thu) 13:18

(;'∀')

早々の回答ありがとうございます!
しかも隅々まで確認していただいて…💦

やっぱり私が間違っていたのですね(;'∀')
全くの素人なのでネットで調べてなんとかやってみたといった具合で。
お恥ずかしい限りです。

送っていただいたもので問題ないのでコピーして貼り付けてみました。
でも、ダメでした。とほほ。

</body>は一番最後ですよね。
そもそも入れる場所を間違っていたりしてΣ(゚д゚lll)ガーン

コードはしっかりコピー取らせてもらいました!
削除してOKです!

念のため各ランキングのアドレスをお送りします。

【村】
"http://art.blogmura.com/glassart/ranking.html"

【ランキング】
"http://blog.with2.net/link.php?1638860:1771"

【FC2】
"http://blogranking.fc2.com/in.php?id=893947"


これで最終にしますね。
ご迷惑おかけします(o_ _)o))

Akira  

2015/11/05 (Thu) 15:16

To snow miyさん

今動作確認しました。
表示もされ、リンクも問題なくクリックできました。
もしかして「プレビュー」画面のみでの確認ではないでしょうか。
「更新」をしてご確認くださいね。
コード内容もう一度載せます。
今後はアドレスも入れてありますが、URL超過で送信できませんので●を入れてあります。
貼り付けの際に忘れずに削除お願いします。

<script>
$(function() {
$('<div style="text-align:center; margin: 30px auto;"><div><span style="color:#ffccff">★-★-★-</span> <span style="color:#666666">下のボタンをクリックしてね♪</span><span style="color:#ffccff">-★-★-★</span></div><div><span style="color:#FFFF00">★-★-★-</span><span style="color:#666666"><u>ランキングの応援お願いします</u></span> <span style="color:#FFFF00">-★-★-★</span></div><div><a href="ht●tp://art.blogmura.com/glassart/ranking.html" target="_blank"><img src="http://art.blogmura.com/glassart/img/glassart88_31.gif" width="88" height="31" alt="にほんブログ村 美術ブログ ガラス工芸へ" style="padding: 5px 0;"></a></div><div><a href="ht●tp://blog.with2.net/link.php?1638860:1771" title="ガラス工芸・グラスアート ブログランキングへ"><img src="http://image.with2.net/img/banner/c/banner_1/br_c_1771_1.gif" width="110" height="31" style="padding: 5px 0;"></a></div><div><a href="ht●tp://blogranking.fc2.com/in.php?id=893947" target="_blank"><img src="http://blogranking.fc2.com/ranking_banner/a_01.gif" style="padding: 5px 0;"></a></div><div style="text-align: right; padding-top: 5px;">みなさんの応援が励みになります<span style="color:#FF0000">♥</span></div></div>').insertBefore('.fc2_footer');
});
</script>

記述場所スクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/html/%202015-11-05%2015.11.00_zpswxv0bovj.jpg~original

snow miy  

2015/11/05 (Thu) 17:08

できました♪\(^o^)/

ありがとうございます!
思い通りのものとなりました(*^▽^*)
完璧です‼

大変お手数おかけしました(^▽^;)

来年も引き続き季節ごとに使用させてもらいます♥

本当にありがとうございました!
感謝・感謝です(人''▽`)☆

きろろ  

2015/11/06 (Fri) 00:13

見落としてました(>_<)

Faint、右側にメニューバーがありました(>_<)
すみません~~~、見落としておりました。

早速のお返事ありがとうございました。

ちなみにFaintもJingle、MaBelleも
今回、Akiraさんのcolorbox.cssをlinkの最後に追加して
/bodyの直前に私の使っているスクリプトをコピペしてみました。

不思議なんですよ……
3つのテンプレート、すべて正常に動作するんです。
target_blankを使わないで、class="cpModal" title="No Title"のコマンドで動くんですよ。
ツベも同様です。なんで GirlOnWireが動作しなかったのか不思議です。

一応お知らせしておきますね。

私の早とちりで、お騒がせしました<(_ _)>

Akira  

2015/11/07 (Sat) 09:26

To snow miyさん

お返事遅くなりましたー!
できましたか。安心しました。
こちらこそ勉強させて頂きました。
ありがとうございますe-454

Akira  

2015/11/07 (Sat) 09:29

To きろろさん

遅くなりました (*_ _)
たぶんエフェクトの関係じゃないかと。
target_blank指定でエフェクト不適用、とかなんとかを私がやっているもので ^^;
毎度お手数おかけします。
いつもありがとうですー (/・ω・)/

さっちぃ  

2017/12/02 (Sat) 18:36

ヘッダーにメッセージ

こんばんは。
今頃になって、このjingleのテンプレに気付きました。
クリスマス用に使用させて頂きます。

ど素人なのでトンチンカンな質問になると思いますが…
ヘッダー内のブログ名の左上辺りにメッセージ文的なものを入れることは可能でしょうか?
例えば、All-about-usのWelcomeみたいなものです。
『Merry christmas』や『Happy New Year』等アレンジして入れることが出来ると良いなと思いましたので。
そりゃあ、無謀だよ!って言われそうですけど…

それから、記事の飾りの葉っぱ?の画像ですが、消す方法は明記してあったのですが、替えることは可能でしょうか?

Akira  

2017/12/02 (Sat) 20:26

To さっちぃさん

こんばんは ( ゚Д゚)ノ

> ヘッダー内のブログ名の左上辺りにメッセージ文的なものを入れることは可能でしょうか?〜

htmlソースの
<div id="blog-name-container">
の上に

<div id="任意の名称">テキスト内容</div>

を入れ、CSSソースに

#任意の名称 {
内容
}

を追加すればできますが、どの位置合わせにするかで難易度が変わります。
中央に寄せる場合には短いテキストであれば特に問題はないと思いますが、左寄せ・右寄せだと難易度が上がりますね。
レスポンシブですから全体幅(メインカラム + サイドカラム)との体裁があります。
また、ブレイクポイント設定(画面幅に応じてCSS内容を変更する)も必要になってきます。

-------
> 記事の飾りの葉っぱ?の画像ですが〜替えることは可能でしょうか〜

できますが、差し替える画像によります。
デフォルトと縱橫サイズが全く同じであればURLを変更するだけです。
この部分は position: absolute というCSSを利用していますが、absoluteは少しでも数値設定を間違えるとスマホでモバイルフレンドリーになりません。
現在のデフォルトが
right: -22px;
top: -40px;
で、特に right: -22px; は守らないとスマホで画面超過します。
この数値を守れるのであればそんなに難しくはないと思います。
(right指定の許容数値は -22pxなのでそれを超える数値、例えば -25pxなどに設定しないようにしてください。
要するにこれ以上右には寄せられないよ、という意味です。)

加えて、absoluteは今回のパターンで言うと記事タイトルと重なる可能性があります ので、そうならないようタイトルの方に右のpaddingを設けています。
デフォルトの画像よりも横サイズが大きい場合にはこのpadding値を大きくする必要があります。
該当箇所は
.entry-ttl

padding: 0 70px 10px 0;
の赤字部分ですので、差し替える画像と重ならないよう数値変更してください。

---------- 追記

現在のページの状態を拝見しました。
背景画像を変更されていますが、その内容では全画面背景にはなりません。
私のパソコンは比較的画面が大きいので、背景画像の「右」と「下」がかなり寸足らずの状態です。

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/capturebackground89283th.jpg

body:before

display: block;
含み、その行から
position: fixed;
含まずその上までを一旦全て削除し、

background: url(アドレス) center center /cover no-repeat;

にすれば全画面になりますが、現在の使用画像では解像度が足りないように思います。
最低でも横1500px程度は必要。
この設定だとスマホでスクロールのたびに画面がガクガクしますので、

background: url(アドレス) center center /auto 110% no-repeat;

にするとガクつきはなくなりますが、拡大率は上がります。

横については repeat-x にする方法もありますが、現状の画像ですとシームレスではありませんので継ぎ目が目立つと思います。
こちらのテンプレートは背景設定が特殊ですので、本文中の但し書きの通り背景画像を取り替える場合にはOnTheGroundからの改変をおすすめします。

https://vanillaice000.blog.fc2.com/blog-entry-237.html

ただ、使用画像の特徴を見ると全画面表示には適さないですよね。
こういうタイプは「上」と「下」を別の画像で用意してどちらも見切れが起こらないようにするのが通常です。
ポイントが上下だけですので、間の白い部分は無駄というか表示負荷がかかるだけなので。
上ポイント画像 + 白背景色 + 下ポイント画像
にするのが最適解ではあります (´・ω・`)

全画面背景の特徴
https://vanillaice000.blog.fc2.com/blog-entry-569.html
https://vanillaice000.blog.fc2.com/blog-entry-566.html

さっちぃ  

2017/12/03 (Sun) 11:18

To Akiraさん

こんにちは。

ナント!背景から問題有りだったんですね。知らなんだ…
画像を取り替えてみたのですが、どんな具合になってますかね?
これでも寸足らずだったら、デフォルトのグラデーションを変更して使います。

葉っぱの画像の件、了解しました。
メッセージ文の件は、挑戦してみます。

Akira  

2017/12/03 (Sun) 23:59

To さっちぃさん

こんばんは ( ゚Д゚)ノ

そうですね。見切れなどなくなりましたので良いと思います。
ただし cover値を採用されましたので、タブレット・スマホでスクロールをし始めると同時に背景が若干拡大されます。
そちらについてはスマホの特徴(ステータスバーの状態)とプロパティの特徴との絡みですので、実際に目視確認をしてくださいね。
(ちなみに私はそれほど苦になりません)
お疲れ様です

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)