ナチュログ管理画面 キャンプ キャンプ 関東 ナチュログカスタマイズ法アウトドア&フィッシングナチュラムアウトドア用品お買い得情報

ファミリーキャンプのちソロキャンプ

ソロって楽しいの?ってよく聞かれます。言葉では答えられません。でも写真で伝える努力してます。

ナチュログ新テンプレート改造

   

 先月ナチュログのテンプレートが新しく4つ追加になった。最近のブログ風のレイアウトになった事と文字の大きさも読み易く、ウインドウサイズに合わせて写真が拡大縮小されるなど機能も向上しているので変更する事にした。

新規に追加になったテンプレートは下記4種。
ナチュログ新テンプレート改造



いずれも基本的には同じデザインで、背景は白、文字はグレーでバリエーションが無くデザインが選べないので、若干の改造を行った。私はこれまで黒と青を基調としたテンプレート「アドベンチャー」を使っていたのだが、この色相を新しいテンプレート「THE NORTH FACE3」に移植してみた。
ナチュログ新テンプレート改造



ナチュログ新テンプレート改造



また、色相の変更以外にも若干、下記の修正を行った。

・TOPページのサムネイル写真、縦構図だと切れてしまうのを修正
・サイドメニューのラインを削除、行間を縮小。
・メインコンテンツの行間を拡大

本当はスタイルシートのどこを書き換えたら、どこが変わる的な解説記事を作ろうと思ったのだが、全部で45ヶ所あり、とても説明しきれないのでソースを公開する。このテンプレ使いたい方がいましたらご自由にどうぞ。ダウンロードはこちら


<適用方法>
①ナチュログのテンプレート「THE NORTH FACE3」に変更する
②テンプレートのカスタマイズをクリック
③スタイルシート:の欄に記載されている文を削除して、ダウンロードしたテキスト全文をコピー&ペースト
④このブログと同じ配色になります。
※注:くれぐれも他のテンプレートに適用しないようにして下さい。

ご使用の際は自己責任でお願いします。

また私はHTMLやCSSに精通しているWeb関係者ではありません。全くの素人ですので、小難しい専門用語を使った質問は避けて下さい(笑)




にほんブログ村 アウトドアブログ ソロキャンプへ
にほんブログ村

ソロキャンプランキング



HOMEに戻る




このブログの人気記事
レビュー:MSRフロントレンジ
レビュー:MSRフロントレンジ

息子のカメラ
息子のカメラ

STAR MEADOS富士ケ嶺高原 富士山星景キャンプ
STAR MEADOS富士ケ嶺高原 富士山星景キャンプ

師走のふもとっぱらソロキャンプ
師走のふもとっぱらソロキャンプ

Prologue:STAR MEADOS富士ケ嶺高原
Prologue:STAR MEADOS富士ケ嶺高原

同じカテゴリー(ブログテンプレート変更)の記事
 続:ブログテンプレート変更 (2016-04-17 23:34)



この記事へのコメント
おはようございます!
カスタマイズした黒のデザインかっこいいですね!
ナチュログのブロガーさんは黒系使う人多いですよねー

リヒトリヒト
2016年02月17日 09:36
リヒトさん

どうもありがとうございます!
黒系は下手な写真も締まる気がして好きなんですよね。。。リヒトさんのようにレスポンシブに改変しちゃうようなスキルはありませんが。。。

週末が雨天続きで余りにも暇で、Css辞典片手に色変えましたw

へりへり
2016年02月17日 21:12
うちも先日NORTH FACE1に変更しました!

CSS書き換えるこだわりに感服します。
ヘリさんは何者ですか?w

仕事ではWEBデザインもかじってますが、カスタマイズしてるとあっという間に時間が経ちますよね。。

soyo旦那

soyokazefufu
2016年02月17日 22:27
こんばんは〜

センスいいですね!
デザインすごいカッコいいです!
背景黒は記事も読みやすいし、渋くていいですねww

自分も最近テンプレ変更しました。
使用したのは新規追加のなかの「ケシュア」です。
自分のはなんかよくわかんない感じになっちゃいました(笑)

ひじき
2016年02月17日 22:33
こんばんは(*^^*)
初めまして☆

カッコいいブログですね!
いただかせてもらいましたm(_ _)m

ソロキャンやカメラの話など、いつも楽しみにしております(o^^o)
今後ともよろしくお願いします!

x-markx-mark
2016年02月17日 22:39
こんばんは~。

先日、自分もテンプレートを変えたので何かいじろうと思ったらこんなにナイスな記事が・・

誠に有難うございます!感謝!

しかもダウンロードまでさせて頂きました。

しかし、このテンプレート書き込む時の文字が小さいですね~。

オフラインオフライン
2016年02月17日 22:41
こんばんは(*´ω`*)

Web関連…さっぱりです(笑)
こういうのササッと変えられるの尊敬します( ´罒`*)✧"

背景黒だと写真が際立つ気がします。
相方の腕がもう少し(いや…かなりw)上がったら黒にしようかな(笑)

noelhinanoelhina
2016年02月18日 00:14
こんばんわ。

黒系は文字も引き立つし、全体が締まっていいですよね。
僕も素敵な写真が撮れたらヘッダーの画像や背景なんかに使ってみたいんですけど、なかなか。。。

このスタイルのナチュブロガーさんが増殖しそうな予感がしますw

ediedi
2016年02月18日 00:31
soyo旦那さん

私は自動車関係の開発設計してるエンジニアです。もっとも最近は若い奴等に任せて隠居生活ですがw

Webは全くの素人。本当に色変えるだけで丸一日かかりました。でも良い暇つぶしになりましたw

へりへり
2016年02月18日 05:32
ひじきさん

デザインは真似しただけなので自分の頭は使っていませんw

ひじきさんち拝見させて頂きました。なんかホンワカした感じでいいですね。TOPの写真も奥様とお子様の位置が素敵です。

へりへり
2016年02月18日 05:38
x-markxさん

初めまして、コメントありがとうございます。
いやーまさか使ってくれる人が現れるとは、ちょっと驚き、そして嬉しかったです!!

x-markさんのブログも拝見させて頂きますね。

へりへり
2016年02月18日 05:42
オフラインさん

どうもです。書き込む時の文字は仕様変えてません。最初からです。ちなみに私はWindows10+IE11 or Firefoxでそんなに小さくないです。Chromeだと小さいかも知れません。

へりへり
2016年02月18日 05:47
noelhinaさん

いやいや、ササっとは無理です。丸一日だらだら掛かりましたよw
ひなさんちはピンクの印象が定着しているので、黒に変わったら軽くショック受けるかもしれませんw

へりへり
2016年02月18日 05:52
ediさん

ヘッダーの画像は細長くしたいと常々思ってるんですが、細長い構図の写真、ついつい撮り忘れてしまうんですよね。小さなディスプレイで見てる方に申し訳ないと思いつつ、撮り忘れて早1年が経過しましたw

へりへり
2016年02月18日 05:58
変更お疲れ様です!

PCでは正常なんですが、Android(純正ブラウザとsleipnirでテスト)ではサイドバーだけがまず表示されて、その下にメイン記事がくっついてる格好になってるんですわ…
ちなみに画像はセンターになってます。

メインコンテナの幅の問題っぽいですが、みなさんどんなでしょうか気になりまして…

私だけかな(^^;

Scene-1Scene-1
2016年02月18日 18:38
Scene-1さん

毎度です。そういう報告本当に助かります。ありがとうございます。

メインがメニューの下に落っこちる不具合は画面サイズの小さなPCも同じで、それはナチュログに修正を打ち上げています。(しかし今のところ無視されてます。)
development.naturum.ne.jp/e2645661.html#comments

しかしAndroidでもそうなってるとは思いませんでした。私のスマホのAndroid+Chromeは問題無し、iPhone5とiPod toutch(iPhone4相当)もOKだったのでスマホは問題無いなぁと思ってました。iPhone6は持ってません。

ナチュのスマホのテンプレ、写真の色の諧調が無くなってしまうので使いたくなかったんですが、もうギブアップです。。。。

ナチュが修正してくれたらまたテンプレ変えますので、確認作業付き合ってください!

へりへり
2016年02月18日 21:53
僕も今のが飽きたので変えてみようかなぁ…
そうしたら、もう少しブログを書く気になりますかねぇ(苦笑)

ぴーぴー
2016年02月19日 00:13
ぴーさん

最近週末の度に雨なので、暇で暇で。。。
テンプレート変えてもブログ書く気は変わりませんねw

まぁまったり行きましょう。

へりへり
2016年02月20日 04:47
こんばんわ。

表示崩れについてですが
ブラウザの幅を縮めた時に右カラムが落ちる時がありましたが、その時に#contnt2のwidthが100%に変化したので、ブラウザのバグか癖のようなものかと。。。
#contnt2のwidthを calc(100% - 320px)ではなく数値で指定されてみてはいかがですか?

勘だけで言っているんで、間違ってるかもしれませんが(汗)

ediedi
2016年02月22日 00:49
ediさん

凄いヒントありがとうございます。でもブラウザはIE、FireFox、Chromeとも共通の挙動なんです。

そして、CSSでもレイアウト関係イジルのは超ハードル高いです。。。でもいろいろやってみたいと思います。ありがとうございました。

へりへり
2016年02月22日 01:07
連コメすいません。

上のコメントは間違っていました。

同じテンプレートとスタイルシートで試してみたところ、こちらでは同じ症状が出なかったので別の問題のようでした。
深夜に紛らわしいコメントを送ってしまい大変申し訳ございませんでした。

ediedi
2016年02月22日 01:19
ediさん

なんか返って気を使わせてしまってすみません。でもレイアウト関係も学習してみたいので、ちょろちょろやってみます。次の雨の日にでもw。

へりへり
2016年02月22日 22:07
初めまして。
テンプレートのカスタマイズで検索していてたどり着きました。
とてもかっこよくカスタマイズされていて羨ましい限りです。


初めましてで、いきなり質問なんですが・・・


どうしてもTOP画像の変更が出来ません(T_T)


どの部分を変更すれば画像変更出来るのでしょうか??


よろしくお願い致しますm(__)m

ken-zken-z
2016年07月09日 09:04
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;

へりへり
2016年07月09日 23:10
こんばんは。
テンプレートを変更しようとおもいたどりつきました。
今回はじめての変更で クールなテンプレートを拝見し
早速ダウンロードさしてもらいました!
自分の特性でもある どうぶつがなつかない
とても共感します。
これからも他力本願ですがぼちぼちやっていこーとおもいます。

きゅん
2016年10月07日 22:54
きゅんさん

初めましてコメントありがとうございます。またテンプレートご利用ありがとうございます。
拙作で申し訳ありませんがご利用下さい。

私は自分で作っておいてなんですが、もうこのテンプレートは使っておらずediさんのテンプレを使っています。こちらも参考にどうぞ。
http://edi.naturum.ne.jp/e2800582.html

へりへり
2016年10月08日 11:09
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。


削除
ナチュログ新テンプレート改造
    コメント(26)