ナチュログ新テンプレート改造
先月ナチュログのテンプレートが新しく4つ追加になった。最近のブログ風のレイアウトになった事と文字の大きさも読み易く、ウインドウサイズに合わせて写真が拡大縮小されるなど機能も向上しているので変更する事にした。
新規に追加になったテンプレートは下記4種。
いずれも基本的には同じデザインで、背景は白、文字はグレーでバリエーションが無くデザインが選べないので、若干の改造を行った。私はこれまで黒と青を基調としたテンプレート「アドベンチャー」を使っていたのだが、この色相を新しいテンプレート「THE NORTH FACE3」に移植してみた。
また、色相の変更以外にも若干、下記の修正を行った。
・TOPページのサムネイル写真、縦構図だと切れてしまうのを修正
・サイドメニューのラインを削除、行間を縮小。
・メインコンテンツの行間を拡大
本当はスタイルシートのどこを書き換えたら、どこが変わる的な解説記事を作ろうと思ったのだが、全部で45ヶ所あり、とても説明しきれないのでソースを公開する。このテンプレ使いたい方がいましたらご自由にどうぞ。ダウンロードはこちら
<適用方法>
①ナチュログのテンプレート「THE NORTH FACE3」に変更する
②テンプレートのカスタマイズをクリック
③スタイルシート:の欄に記載されている文を削除して、ダウンロードしたテキスト全文をコピー&ペースト
④このブログと同じ配色になります。
※注:くれぐれも他のテンプレートに適用しないようにして下さい。
ご使用の際は自己責任でお願いします。
また私はHTMLやCSSに精通しているWeb関係者ではありません。全くの素人ですので、小難しい専門用語を使った質問は避けて下さい(笑)
HOMEに戻る
新規に追加になったテンプレートは下記4種。
いずれも基本的には同じデザインで、背景は白、文字はグレーでバリエーションが無くデザインが選べないので、若干の改造を行った。私はこれまで黒と青を基調としたテンプレート「アドベンチャー」を使っていたのだが、この色相を新しいテンプレート「THE NORTH FACE3」に移植してみた。
↓
また、色相の変更以外にも若干、下記の修正を行った。
・TOPページのサムネイル写真、縦構図だと切れてしまうのを修正
・サイドメニューのラインを削除、行間を縮小。
・メインコンテンツの行間を拡大
本当はスタイルシートのどこを書き換えたら、どこが変わる的な解説記事を作ろうと思ったのだが、全部で45ヶ所あり、とても説明しきれないのでソースを公開する。このテンプレ使いたい方がいましたらご自由にどうぞ。ダウンロードはこちら
<適用方法>
①ナチュログのテンプレート「THE NORTH FACE3」に変更する
②テンプレートのカスタマイズをクリック
③スタイルシート:の欄に記載されている文を削除して、ダウンロードしたテキスト全文をコピー&ペースト
④このブログと同じ配色になります。
※注:くれぐれも他のテンプレートに適用しないようにして下さい。
ご使用の際は自己責任でお願いします。
また私はHTMLやCSSに精通しているWeb関係者ではありません。全くの素人ですので、小難しい専門用語を使った質問は避けて下さい(笑)
にほんブログ村 |
ソロキャンプランキング |
HOMEに戻る
この記事へのコメント
おはようございます!
カスタマイズした黒のデザインかっこいいですね!
ナチュログのブロガーさんは黒系使う人多いですよねー
カスタマイズした黒のデザインかっこいいですね!
ナチュログのブロガーさんは黒系使う人多いですよねー
リヒトさん
どうもありがとうございます!
黒系は下手な写真も締まる気がして好きなんですよね。。。リヒトさんのようにレスポンシブに改変しちゃうようなスキルはありませんが。。。
週末が雨天続きで余りにも暇で、Css辞典片手に色変えましたw
どうもありがとうございます!
黒系は下手な写真も締まる気がして好きなんですよね。。。リヒトさんのようにレスポンシブに改変しちゃうようなスキルはありませんが。。。
週末が雨天続きで余りにも暇で、Css辞典片手に色変えましたw
うちも先日NORTH FACE1に変更しました!
CSS書き換えるこだわりに感服します。
ヘリさんは何者ですか?w
仕事ではWEBデザインもかじってますが、カスタマイズしてるとあっという間に時間が経ちますよね。。
soyo旦那
CSS書き換えるこだわりに感服します。
ヘリさんは何者ですか?w
仕事ではWEBデザインもかじってますが、カスタマイズしてるとあっという間に時間が経ちますよね。。
soyo旦那
こんばんは〜
センスいいですね!
デザインすごいカッコいいです!
背景黒は記事も読みやすいし、渋くていいですねww
自分も最近テンプレ変更しました。
使用したのは新規追加のなかの「ケシュア」です。
自分のはなんかよくわかんない感じになっちゃいました(笑)
センスいいですね!
デザインすごいカッコいいです!
背景黒は記事も読みやすいし、渋くていいですねww
自分も最近テンプレ変更しました。
使用したのは新規追加のなかの「ケシュア」です。
自分のはなんかよくわかんない感じになっちゃいました(笑)
こんばんは(*^^*)
初めまして☆
カッコいいブログですね!
いただかせてもらいましたm(_ _)m
ソロキャンやカメラの話など、いつも楽しみにしております(o^^o)
今後ともよろしくお願いします!
初めまして☆
カッコいいブログですね!
いただかせてもらいましたm(_ _)m
ソロキャンやカメラの話など、いつも楽しみにしております(o^^o)
今後ともよろしくお願いします!
こんばんは~。
先日、自分もテンプレートを変えたので何かいじろうと思ったらこんなにナイスな記事が・・
誠に有難うございます!感謝!
しかもダウンロードまでさせて頂きました。
しかし、このテンプレート書き込む時の文字が小さいですね~。
先日、自分もテンプレートを変えたので何かいじろうと思ったらこんなにナイスな記事が・・
誠に有難うございます!感謝!
しかもダウンロードまでさせて頂きました。
しかし、このテンプレート書き込む時の文字が小さいですね~。
こんばんは(*´ω`*)
Web関連…さっぱりです(笑)
こういうのササッと変えられるの尊敬します( ´罒`*)✧"
背景黒だと写真が際立つ気がします。
相方の腕がもう少し(いや…かなりw)上がったら黒にしようかな(笑)
Web関連…さっぱりです(笑)
こういうのササッと変えられるの尊敬します( ´罒`*)✧"
背景黒だと写真が際立つ気がします。
相方の腕がもう少し(いや…かなりw)上がったら黒にしようかな(笑)
こんばんわ。
黒系は文字も引き立つし、全体が締まっていいですよね。
僕も素敵な写真が撮れたらヘッダーの画像や背景なんかに使ってみたいんですけど、なかなか。。。
このスタイルのナチュブロガーさんが増殖しそうな予感がしますw
黒系は文字も引き立つし、全体が締まっていいですよね。
僕も素敵な写真が撮れたらヘッダーの画像や背景なんかに使ってみたいんですけど、なかなか。。。
このスタイルのナチュブロガーさんが増殖しそうな予感がしますw
soyo旦那さん
私は自動車関係の開発設計してるエンジニアです。もっとも最近は若い奴等に任せて隠居生活ですがw
Webは全くの素人。本当に色変えるだけで丸一日かかりました。でも良い暇つぶしになりましたw
私は自動車関係の開発設計してるエンジニアです。もっとも最近は若い奴等に任せて隠居生活ですがw
Webは全くの素人。本当に色変えるだけで丸一日かかりました。でも良い暇つぶしになりましたw
ひじきさん
デザインは真似しただけなので自分の頭は使っていませんw
ひじきさんち拝見させて頂きました。なんかホンワカした感じでいいですね。TOPの写真も奥様とお子様の位置が素敵です。
デザインは真似しただけなので自分の頭は使っていませんw
ひじきさんち拝見させて頂きました。なんかホンワカした感じでいいですね。TOPの写真も奥様とお子様の位置が素敵です。
x-markxさん
初めまして、コメントありがとうございます。
いやーまさか使ってくれる人が現れるとは、ちょっと驚き、そして嬉しかったです!!
x-markさんのブログも拝見させて頂きますね。
初めまして、コメントありがとうございます。
いやーまさか使ってくれる人が現れるとは、ちょっと驚き、そして嬉しかったです!!
x-markさんのブログも拝見させて頂きますね。
オフラインさん
どうもです。書き込む時の文字は仕様変えてません。最初からです。ちなみに私はWindows10+IE11 or Firefoxでそんなに小さくないです。Chromeだと小さいかも知れません。
どうもです。書き込む時の文字は仕様変えてません。最初からです。ちなみに私はWindows10+IE11 or Firefoxでそんなに小さくないです。Chromeだと小さいかも知れません。
noelhinaさん
いやいや、ササっとは無理です。丸一日だらだら掛かりましたよw
ひなさんちはピンクの印象が定着しているので、黒に変わったら軽くショック受けるかもしれませんw
いやいや、ササっとは無理です。丸一日だらだら掛かりましたよw
ひなさんちはピンクの印象が定着しているので、黒に変わったら軽くショック受けるかもしれませんw
ediさん
ヘッダーの画像は細長くしたいと常々思ってるんですが、細長い構図の写真、ついつい撮り忘れてしまうんですよね。小さなディスプレイで見てる方に申し訳ないと思いつつ、撮り忘れて早1年が経過しましたw
ヘッダーの画像は細長くしたいと常々思ってるんですが、細長い構図の写真、ついつい撮り忘れてしまうんですよね。小さなディスプレイで見てる方に申し訳ないと思いつつ、撮り忘れて早1年が経過しましたw
変更お疲れ様です!
PCでは正常なんですが、Android(純正ブラウザとsleipnirでテスト)ではサイドバーだけがまず表示されて、その下にメイン記事がくっついてる格好になってるんですわ…
ちなみに画像はセンターになってます。
メインコンテナの幅の問題っぽいですが、みなさんどんなでしょうか気になりまして…
私だけかな(^^;
PCでは正常なんですが、Android(純正ブラウザとsleipnirでテスト)ではサイドバーだけがまず表示されて、その下にメイン記事がくっついてる格好になってるんですわ…
ちなみに画像はセンターになってます。
メインコンテナの幅の問題っぽいですが、みなさんどんなでしょうか気になりまして…
私だけかな(^^;
Scene-1さん
毎度です。そういう報告本当に助かります。ありがとうございます。
メインがメニューの下に落っこちる不具合は画面サイズの小さなPCも同じで、それはナチュログに修正を打ち上げています。(しかし今のところ無視されてます。)
development.naturum.ne.jp/e2645661.html#comments
しかしAndroidでもそうなってるとは思いませんでした。私のスマホのAndroid+Chromeは問題無し、iPhone5とiPod toutch(iPhone4相当)もOKだったのでスマホは問題無いなぁと思ってました。iPhone6は持ってません。
ナチュのスマホのテンプレ、写真の色の諧調が無くなってしまうので使いたくなかったんですが、もうギブアップです。。。。
ナチュが修正してくれたらまたテンプレ変えますので、確認作業付き合ってください!
毎度です。そういう報告本当に助かります。ありがとうございます。
メインがメニューの下に落っこちる不具合は画面サイズの小さなPCも同じで、それはナチュログに修正を打ち上げています。(しかし今のところ無視されてます。)
development.naturum.ne.jp/e2645661.html#comments
しかしAndroidでもそうなってるとは思いませんでした。私のスマホのAndroid+Chromeは問題無し、iPhone5とiPod toutch(iPhone4相当)もOKだったのでスマホは問題無いなぁと思ってました。iPhone6は持ってません。
ナチュのスマホのテンプレ、写真の色の諧調が無くなってしまうので使いたくなかったんですが、もうギブアップです。。。。
ナチュが修正してくれたらまたテンプレ変えますので、確認作業付き合ってください!
僕も今のが飽きたので変えてみようかなぁ…
そうしたら、もう少しブログを書く気になりますかねぇ(苦笑)
そうしたら、もう少しブログを書く気になりますかねぇ(苦笑)
ぴーさん
最近週末の度に雨なので、暇で暇で。。。
テンプレート変えてもブログ書く気は変わりませんねw
まぁまったり行きましょう。
最近週末の度に雨なので、暇で暇で。。。
テンプレート変えてもブログ書く気は変わりませんねw
まぁまったり行きましょう。
こんばんわ。
表示崩れについてですが
ブラウザの幅を縮めた時に右カラムが落ちる時がありましたが、その時に#contnt2のwidthが100%に変化したので、ブラウザのバグか癖のようなものかと。。。
#contnt2のwidthを calc(100% - 320px)ではなく数値で指定されてみてはいかがですか?
勘だけで言っているんで、間違ってるかもしれませんが(汗)
表示崩れについてですが
ブラウザの幅を縮めた時に右カラムが落ちる時がありましたが、その時に#contnt2のwidthが100%に変化したので、ブラウザのバグか癖のようなものかと。。。
#contnt2のwidthを calc(100% - 320px)ではなく数値で指定されてみてはいかがですか?
勘だけで言っているんで、間違ってるかもしれませんが(汗)
ediさん
凄いヒントありがとうございます。でもブラウザはIE、FireFox、Chromeとも共通の挙動なんです。
そして、CSSでもレイアウト関係イジルのは超ハードル高いです。。。でもいろいろやってみたいと思います。ありがとうございました。
凄いヒントありがとうございます。でもブラウザはIE、FireFox、Chromeとも共通の挙動なんです。
そして、CSSでもレイアウト関係イジルのは超ハードル高いです。。。でもいろいろやってみたいと思います。ありがとうございました。
連コメすいません。
上のコメントは間違っていました。
同じテンプレートとスタイルシートで試してみたところ、こちらでは同じ症状が出なかったので別の問題のようでした。
深夜に紛らわしいコメントを送ってしまい大変申し訳ございませんでした。
上のコメントは間違っていました。
同じテンプレートとスタイルシートで試してみたところ、こちらでは同じ症状が出なかったので別の問題のようでした。
深夜に紛らわしいコメントを送ってしまい大変申し訳ございませんでした。
ediさん
なんか返って気を使わせてしまってすみません。でもレイアウト関係も学習してみたいので、ちょろちょろやってみます。次の雨の日にでもw。
なんか返って気を使わせてしまってすみません。でもレイアウト関係も学習してみたいので、ちょろちょろやってみます。次の雨の日にでもw。
初めまして。
テンプレートのカスタマイズで検索していてたどり着きました。
とてもかっこよくカスタマイズされていて羨ましい限りです。
初めましてで、いきなり質問なんですが・・・
どうしてもTOP画像の変更が出来ません(T_T)
どの部分を変更すれば画像変更出来るのでしょうか??
よろしくお願い致しますm(__)m
テンプレートのカスタマイズで検索していてたどり着きました。
とてもかっこよくカスタマイズされていて羨ましい限りです。
初めましてで、いきなり質問なんですが・・・
どうしてもTOP画像の変更が出来ません(T_T)
どの部分を変更すれば画像変更出来るのでしょうか??
よろしくお願い致しますm(__)m
ken-zさん初めまして、コメントありがとうございます。
ブログ拝見させていただきましたが、もう出来ているようなので、念の為記載させて頂きます。下記の#headre_topの記述を探して下さい。その中に含まれる、http://~で始まるURLを画像を保存したURLに変更すればOKです。
CTR+Fで「http」を探すのが速いと思います。
#header_top {
height: 250px;
max-width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-repeat: no-repeat;
position: relative;
background-image: url("http://admin.naturum.ne.jp/_img/lab_original/title_images/bg_N3.jpg");
background-repeat: no-repeat;
background-position: center top;
border-radius: 10px;
ブログ拝見させていただきましたが、もう出来ているようなので、念の為記載させて頂きます。下記の#headre_topの記述を探して下さい。その中に含まれる、http://~で始まるURLを画像を保存したURLに変更すればOKです。
CTR+Fで「http」を探すのが速いと思います。
#header_top {
height: 250px;
max-width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-repeat: no-repeat;
position: relative;
background-image: url("http://admin.naturum.ne.jp/_img/lab_original/title_images/bg_N3.jpg");
background-repeat: no-repeat;
background-position: center top;
border-radius: 10px;
こんばんは。
テンプレートを変更しようとおもいたどりつきました。
今回はじめての変更で クールなテンプレートを拝見し
早速ダウンロードさしてもらいました!
自分の特性でもある どうぶつがなつかない
とても共感します。
これからも他力本願ですがぼちぼちやっていこーとおもいます。
テンプレートを変更しようとおもいたどりつきました。
今回はじめての変更で クールなテンプレートを拝見し
早速ダウンロードさしてもらいました!
自分の特性でもある どうぶつがなつかない
とても共感します。
これからも他力本願ですがぼちぼちやっていこーとおもいます。
きゅんさん
初めましてコメントありがとうございます。またテンプレートご利用ありがとうございます。
拙作で申し訳ありませんがご利用下さい。
私は自分で作っておいてなんですが、もうこのテンプレートは使っておらずediさんのテンプレを使っています。こちらも参考にどうぞ。
http://edi.naturum.ne.jp/e2800582.html
初めましてコメントありがとうございます。またテンプレートご利用ありがとうございます。
拙作で申し訳ありませんがご利用下さい。
私は自分で作っておいてなんですが、もうこのテンプレートは使っておらずediさんのテンプレを使っています。こちらも参考にどうぞ。
http://edi.naturum.ne.jp/e2800582.html