自作テンプレート更新情報

Jan 26 , 2018

久しぶりのテンプレートネタです。

最近ナチュログの仕様が変わったみたいで(zero21keiさんに教ええもらうまで気が付きませんでした...（汗)）、ボクの作ったテンプレートではスマートフォンでの表示の時にヘッダーのボックスが縦に長くなってしまうようになりました。

さらにスクロールしてもずっと表示されたままで、ただでさえ狭いスマートフォンの画面を占有しすぎてコンテンツが見にくくなってしまっているので、今回対策を施してみました。

問題のボックスは、ナチュログが提供しているスマートフォン用のテンプレートには表示されていないので、ボクのテンプレートにもスマートフォンではボックスは小さく。そして表示はされるけどスクロールすると消えるようにしました。

スマートフォンだけの変更でタブレット、PCでの画面では見た目の違いはありません。

お手数ですが、以前からテンプレートをご利用いただいている方はCSSだけでいいので貼り付けなおしてください。
ただ確認した所、利用してもらっている方全員が表示がおかしくなっているわけじゃないので、一度ご自身のブログを見てから適用させるかどうか判断してみてください。

ぽちっと応援お願いします。

にほんブログ村

人気ブログランキングへ

テンプレートをご利用の方はこちらからどうぞ

バージョン1のテンプレート

Sep 12 , 2016バージョン1紹介記事

1.下記リンク先ページのテンプレートをそれぞれの箇所に貼り付けて保存してください。
2.ブログ環境設定で、タブレットテンプレートを利用する・スマートフォンテンプレートを利用するのチェックを外してください。

バージョン2のテンプレート(ガーリー)

Jan 13 , 2017バージョン2紹介記事

1.下記リンク先ページのテンプレートをそれぞれの箇所に貼り付けて保存してください。
2.ブログ環境設定で、タブレットテンプレートを利用する・スマートフォンテンプレートを利用するのチェックを外してください。

バージョン3のテンプレート(クール)をご希望の方はこちらからどうぞ

Jan 13 , 2017バージョン3紹介記事

1.下記リンク先ページのテンプレートをそれぞれの箇所に貼り付けて保存してください。
2.ブログ環境設定で、タブレットテンプレートを利用する・スマートフォンテンプレートを利用するのチェックを外してください。

僕が公開しているテンプレートは完成品ではないです、不具合などがあれば更新していきますので、たまにはテンプレート更新履歴をのぞいてみてください。

また、テンプレートの改造などはご自由にどうぞ。
ただ、申し訳ございませんが改造などの際のサポートなどは行っておりません。
ご了承くださいませ。

最後に、僕はウエブデザイナーでも何でもございません。
趣味の領域で作成したテンプレートなので、テンプレート運用に関わるサポートはございません。
が、何かしらテンプレートの不具合があれば一緒に解決策を探っていきたいとは思っています。
このテンプレートで気になったことなどがあればお問い合わせください。

また、本職の方で「ここの記述はおかしい・ここはこうした方がいい」などアドバイスなどがあれば、大歓迎でお待ちしておりますので、どしどしコメントください。

お約束ですが、ご使用の際は自己責任でお願いします。
テンプレートの利用で不具合など生じても当方では責任は負えませんのでよろしくお願い致します。

また、このテンプレートは古いブラウザには対応していません。あしからずｗ

同じカテゴリー（テンプレート）の記事

自分のブログをもっと見やすく、テンプレートネタまとめ(2020-04-02 17:55)

スマホで見たときに見やすいテンプレート(2019-09-06 19:10)

ナチュログの記事に過去記事へのリンクをスマートに入れる方法(2019-02-06 16:45)

ライブドア相互rssカスタム　at自作テンプレート小ネタ(2017-02-22 19:19)

自作テンプレート小ネタ(2017-02-20 17:14)

ブログカスタマイズでブログ愛を高めよう！ヘッダーの背景画像変更方法(2017-01-23 19:06)

この記事へのコメント

こんばんは。
うちの奥さんから「ブログが見にくい」と私に対してクレームが入り困ってましたが、速攻で対応して頂ありがとうございました。

ちなみにこの記事の内容は、先日の変更箇所と同じですか？
別の場所も修正されているのなら、こちらの修正を再度設定します。

zero21kei

2018年01月26日 20:04

こんばんは〜

いつもながらサポートしないといいつつ、更新していただいてありがとうございます（笑）

といいつつ、幅広に占有していたナチュログのヘッダーは、私の環境では自然治癒しました。
ん、何故なんだろう？

Egnath

2018年01月26日 20:24

ediさん、こんばんは。先日は色々と有難うございました。せっかく素敵に変身させて貰っのに、突然見づらくなってしまったので、ナチュログサポートに問い合わせした所でした。サポートからの返信は下記の通りです。

『こちら先日ヘッダー部分に情報を追加させて頂いたため発生したものと思われます。テンプレートを改修して共通のものとされている方もいらっしゃると思いますのでこちら幅が狭い場合の情報を整理させて頂きました。一度ご確認頂くようお願いいたします。』とのことでした。

もしも検討違いのコメントでしたら遠慮なく削除お願いします(^-^;

ちぃぃ

2018年01月26日 20:48

zero21keiさんこんばんわ。

ご指摘ありがとうございましたｗ
どうやってアナウンスするか、少しだけ悩みましたけどブログの記事にしておきました。

今回のはkさんにお知らせしたのと若干変わってます。
お知らせさせていただいたのはヘッダーのがスクロールしても固定されてますけど、今回のはスクロールすると一緒に上に消えていきますｗ
ぜひ適応させてやってください。

edi

2018年01月27日 19:10

Egnathさんこんばんわｗ

今回の仕様変更はちょっと見た目的にまずいし、kさんになんとかするように指示されたので...
嘘ですよ（笑）
それに簡単な変更だけですのでｗｗｗ

>私の環境では自然治癒しました。
そうなんですよ、kさんに指摘されて他に使ってられる方を一通り確認させてもらったら、大きくなってるのも有るしそのままのもあるしで^^;
多分、掲載する情報の量になるんでしょう。
イベント系のバナーが載ってたりしたら大きくなるんじゃないのかなと思っています。

edi

2018年01月27日 19:17

ちぃぃさんコメントありがとうございます。

幅が狭い場合の情報を整理させて頂きました。
というのがどういうことかわからないですが、今回のスタイルシートを使えば解決すると思います（笑）
その場合、お手数ですけど見出しの設定（h2なんちゃら）を再度設定し直してくださいね。

edi

2018年01月27日 19:19

こんばんは〜

早速対応させていただきました、ありがとうございます！
じつは今回の記事を拝見するまで気がついていませんでした(笑)
でも気づくとすっごい気になりますね^^;

あらためてですが、えじさんのテンプレートすごいですね〜、きれいで整理されていてカッコいいです！

ひじき
2018年01月27日 23:31

こんにちは。

困ったことですね　＾＾；；　早速直したいと思いますが、
かなり改造していて修正が大変そうです。

べえ

2018年01月28日 00:40

またまたこんにちは。

思った以上に簡単に直ったかも？
まだシミュレーションサイトから、確認しただけですが　＾＾；；

それにしても、突然の仕様変更は困りますよね。

べえ

2018年01月28日 01:05

スマホを持ってない私は
こんな仕様変更があったなんて知らなかった！！
そして速やかな対応に感謝です。

レフア

2018年01月28日 08:45

べえさんこんばんわ。

べえさんの場合かなり変更加えられてるんで大変そうですね^^;

なのでこの方法を試してください
スタイルシート最初の方の/*ヘッダー*/と書いてある下に
#blog_header {
position:absolute !important;
}
#blog_header a{
display:none;
}
と書いて
/*/////////////
パソコン
/////////////*/
@media all and (min-width: 801px){
と書いてある下に
#blog_header {
position:fixed !important;
}
#blog_header a{
display:inline;
}
と書いてもらえればオッケーです。
よろしくです＾＾

edi

2018年01月29日 18:37

ひじきさんこんばんわ

いや、ボクも指摘もらうまでぜんぜん気が付かなかったです^^;
せっかく変更してもらったんですけど、また小変更加えましたので再度変更していただければ幸いです（汗）

edi

2018年01月29日 18:45

レフアさんこんばんわ

ボクもスマホではほとんど見ないんで、ぜんぜん気が付かなかったですわ（汗）

それに対応といっても付け焼き刃というか、うまく解消できたわけでもないんで
このあたりが、素人のボクにはもう限界なのかなって思ってます^^;

edi

2018年01月29日 18:48

こんにちは。

変更場所を教えていただきありがとうございます。
もっと大幅にコピペしちゃったので、ちょっと表示が
変なところがありました　＾＾；；

べえ

2018年01月30日 19:11

べえさんこんばんわ。

なかなか難しいですよねぇ...
べえさんみたいに、CSSに詳しい方なら変更箇所だけ案内すれば良かったんですけど
中々そういうわけにも行かないので、ブログではこのような案内にしてしまいました。

上手く更新できることを祈っておりますｗ

edi

2018年01月31日 00:36

こんにちは。
バージョン１を適用して、スマフォで見ると「サブタイトル」が消えちゃうので、調べたら「display:none;」がありました。
これってデフォルトでしたっけ？
とりあえず、１行削ると表示されるので、こちらで使ってみます。

zero21kei

2018年02月01日 09:42

zero21keiさんこんばんわ。

サブタイトルはスマホでは非表示にしてるんです。
スマホの小さな画面ではどうしてもサブタイトルがヘッダーからはみ出ちゃう場合がありヘッダーの枠内に収めるのが困難なので、それならいっそ非表示にしておこうと思ってそういう仕様にしてました。

表示する方法はkさんのとられた方法で正解です。

edi

2018年02月02日 01:24

こんにちは。

テンプレートの更新を公開してくださってありがとうございました！
私はiphon5を使っていて液晶が小さく表示が2/3くらいになってしまっていたのでとても助かりました。
色替えのカスタマイズで楽しませていただいています^^

それと質問をさせていただきたいのですが、
ediさんのテンプレートを使用しているブログで、お気に入りの表示でNEW！とかブログのタイトルが表示されて新しい順に表示されたりしているのがあるんですが、このカスタマイズは難しいのでしょうか。
皆さんへの返信も読ませていただいたんですが見当たらなくて。。

色変え程度しかできない知識なので、難しくなさそうでしたら教えていただけたら嬉しいです。

Nママ

2018年02月02日 10:04

Nママさんこんにちわ

お問合わせの相互RSSについては、ブログパーツっていうのがありまして僕はライブドアの相互RSSを利用しているんですが...詳しくはこちらへ！
http://blogroll.livedoor.com/

ここで会員登録を行い手続きに沿ってすすめるとコードが出てくるので、それをカスタムプラグインに貼り付けて保存すればOKです。

edi

2018年02月02日 11:17

ediさん。

さっそくのお返事ありがとうございます(_ _)

相互RSS、ブログパーツ等初めて聞く言葉ですが挑戦してみたいと思います！
どうもありがとうございました。

Nママ

2018年02月02日 20:46

こんにちは。

相互RSSも載せることができまして、おかげさまでとても便利で可愛らしい素敵なブログになりました！
度々の返事をどうもありがとうございましたm(__)m

ediさんのブログをリンクさせていただきました。またちょくちょく覗かせていただきます(^.^)ノ

Nママ

2018年02月05日 12:51

Nママさんこんばんわ。

上手く更新できたようで何よりですｗ
こちらでもブログ登録させていただきます。
今後ともヨロシクです＾＾

edi

2018年02月05日 17:24

こんにちは。

ナチュラムのお知らせに、「PC版ヘッダー更新のお知らせ」と
がありました。各サイズで、2行になる事がなくなったので、

display:none;
}

を削除しても大丈夫になったようです。確認には
このページが便利です。

http://responsivedesignchecker.com/

べえ

2018年02月05日 20:44

べえさんこんばんわ。

ボクもお知らせみました！
あの苦労は何だったんだと（汗）
そして、またテンプレ更新して記事書き直さなければならないしorz...。
もう更新やめよっかな^^;

レスポンシブの確認にはChromeの検証を使うのもいいですよ。
これだと、どこにどんなスタイルが当たってるとかもわかるしオススメです。
他のブラウザにもありますが、Chromeが一番使いやすいとボクは思います。
右クリック→検証です。

edi

2018年02月06日 00:18

ediさん、初めましてこんにちは！

テンプレートを頂きに来たのですが、まだ変更していません（＞＜）
とりあえず、ボチボチやりたいなとは思っていますので、宜しくお願いします。
変更したらまたコメントします！

あと、度々コメントでプロフ画像を拝見していましたが、ずっとオラウータンの写真だと思ってました（汗)
大きくみたらトイプードルだったのですね。なんかすみません。