「銀輪記」 自転車旅の記憶!!
~ただただ遠くへ行きたい雨男とクマの旅路~

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ヘッダーの画像がランダムに表示されるようになりました

ブログのヘッダー(ページの一番上の画像)を毎回ランダムに違う写真を表示させるようにしてみました。

下は一例です。これら以外にも出てきます(^^ゞ

DSCF6725.jpg

DSCF6745.jpg

DSCF6768.jpg

DSCF3584.jpg

cccd.jpg

一応IEとChrome、Firefoxでは表示をチェックしてありますが、いかがでしょう。
FC2ブログのテンプレート工房さんのページを参考にさせてもらいました。
スポンサーサイト

メインコンテンツ?の日本縦断(鹿児島‐青森編)をリニューアル


当ブログのメインコンテンツ(?)の日本縦断(鹿児島‐青森編)をリニューアルしました。


NCM_0219_20121023171552.jpg


目次はこちら↓
http://chema2sa.blog.fc2.com/blog-entry-101.html


✔道中書き切れなかったエピソードを加筆。
✔画像サイズがビッグに。
✔画像の画質向上。

ひまつぶしにどうぞ。

ファビコンなどのイラスト ブログ改造

「ファビコン」って言うんですね。

インターネットのページ開くとタブの左側に小さいイラスト出るじゃないですか?
Googleだと「g」のイラストで、Yahoo!だと「Y!」のイラスト。
あのちっちゃいちっちゃいやつです。

図2

あれ、自分のブログのファビコン、替えられるんですね。
知らなかったです!

替え方はこちらのサイトにて詳しく説明してくださっています。
初心者でもできる簡単FC2ブログの作り方「ファビコンをつけよう!」


ぼくの場合、くまモンとバリィさんにしたかったので、

図1

フリーソフトのGIMPで各イラストを描いていきました。

ファビコンは16×16ピクセルというかなり小さいサイズになるのでなかなか難しかったです。

torikuma.png

↑こんなちっちゃい!!

ファビコンが付くと、ブックマークの中からも探しやすくなりますし、
ブログに少し個性が出るような気がしました。

IEでは表示されなかったりする不具合もあるみたいですが、
今んとこ、ChromeやFireFoxでは、ぼくのページを開くと
このファビコンが表示されているはずです。


なんかブログがくまモンだらけになってしまったな。

ページナビゲーション改造編 「銀輪記」リニューアル[3]

前の記事はこちら。
「銀輪記」リニューアル[1]
「銀輪記」リニューアル[2]


~ページナビゲーション?をなんとかするぞ~

Googleの検索ページの下に表示されるこれ。

google.jpg

これあるとページ送るのが楽なんですよね~。
でもこれなんて言うのか。名前は??

  「ページナビゲーション」

こんな呼び名で呼ばれてるそうです。いや~何にでも名前は付いてるもんですね。


ぼくのブログにもこれに似たものは付いていまして↓

pagenavi.jpg

これです。シンプルで良いですよね~(^'^)でもこれをもっと便利にしたいわけです。
そこで3つの直したい個所がありました。



   ①.Googleみたいなページ番号を付けたい!
    ⇒次ページ、前ページ以外にこれがあると便利ですよね。

   ②. 記事一覧に飛べるリンクを付けたい
    ⇒目的の記事に飛びたいときにこれがあると一発で行けます。

   ③. ページの上にもナビゲーションを付けたい
    ⇒ぼくのブログには、ページ最下部にしかこのナビがなかったのです。
     なのでページを送るには一番下まで降りないといけなかった。
     これだと過去記事を飛ばして読みたい時や記事を探すときなど不便ですよね。





①.Googleみたいなページ番号を付けたい!


これについてはぼくと同じテンプレートを使っている日本一周中ブロガー、Amaichiさんのブログで紹介されていました。
  
  (´・ω・`)ショボーンと行く自転車日本一周~一人と一匹ぶらり旅~ (Amaichiさんのブログ)
  「【ブログ改造 その2】ページナビ、全記事一覧の設置」
  http://amaichi2012.blog.fc2.com/blog-entry-8.html


そしてこの素晴らしい共有プラグインを作成し、詳しく紹介されているページがこちら。
  空があんなに高い
  「ページ移動スクリプト」
  http://dongpan.blog95.fc2.com/blog-entry-255.html

ここに書かれている通りの場所に、タグを張り付ければ出来るのですが、肝心の「どこがページナビゲーションを示した場所なのか」を見つけるのに苦戦しました・・・。

なんとか、出来ましたな。

pagenavi2 - コピー


②. 記事一覧に飛べるリンクを付けたい


これについても、Amaichiさんのブログで紹介されていました。

詳しく書いてあるサイトはこちら。
   初心者でもできる簡単FC2ブログの作り方
   「記事一覧ページをつくる!」
   http://rgrg.blog61.fc2.com/blog-entry-630.html

これは比較的簡単でしたが、全記事一覧のページのデザイン考えるのが大変でした。
自分でいい感じに並び替え、サイズ変えをくりかえして・・・

こんな感じになりました↓

[全記事一覧]

んでもって、これがくっついて。

pagenavi2.jpg

完成!!


③. ページの上にもナビゲーションを付けたい


これになかなか苦戦しました。
テンプレートのHTMLがトップページやそれ以外、ページや個々の記事など別々に作られているんですよね。
なのでいろいろ場合分けされているみたいで・・・。
なかなか該当箇所を見つけるのが難しかったです。

①と②でいじってた部分をどこかに丸々コピーすればいいんだろうけど。
いろいろやってみましたがうまくいきません。

しかし、Amaichiさんのブログではこれが出来てます。

自分で自分のブログ読んでて上側にページナビが無いのはなんとも不便を感じていたので、なんとか直したい。


ふとツイッターを眺めていると・・・。

(´・ω・`)

ん?Amaichiさん!?なんとAmaichiさんフォローしてたしフォロワ―さんでした(@_@;)なんと(←こら、フォロワ―さんくらい把握しておきなさい)
直接聞けばいいんだぁ~(゜_゜)

それぞれのブログで貼りつける場所が違うようですが、同じテンプレートを使用していたので、すんなり成功(*^。^*)

少しは読みやすくなりましたかね??


終わり

ブログのヘッダー背景を画像に変更する編 「銀輪記」リニューアル[2]

~ヘッダーの画像を変更~


simpleblue.jpg
ビフォー

あまりにテンプレートをそのまま使っていたので、少し個性が欲しいなぁ~なんて。
一番上のテーマの部分を画像にしてみることにしました。


参考にしたサイトはこちら
   FC2ブログのテンプレート工房
   「ヘッダー背景を画像にする」
   http://10plate.blog44.fc2.com/blog-entry-28.html


今回はこの北海道のサロベツ原野の写真を使ってみることにしました。
青っぽい方が全体のイメージ崩さないで良いかなぁ~なんて。

DSCF6690_20120913125127.jpg

これだけじゃ味気ないので、アクセントにぼくのランドナーのイラストを合成しましょう。

aa.png

↑Twitterの背景でも浸かっているこのイラスト。
Adobe社のイラストレーターを使えば簡単に描画や合成が出来ますが、このソフトいかんせん高い・・・(>_<)個人で簡単に手が出せるシロモノではありませぬ。



ということで僕が使わせてもらっているのがこの無料ソフト。

「Inkscape」
   http://www.forest.impress.co.jp/lib/pic/piccam/paint/inkscape.html
   イラストレーターには劣りますが、ベクトルで絵画できるドローソフトとして大抵のことは出来ます。


また、Adobe社で欲しいけど高いのがPhotoshop
これもフリーソフトで十分代用可能です。
「GIMP」
   http://www.gimp.org/

あとはPIXIAさんなんかも組み合わせるとフォトショップ並みの威力を発揮します(笑)


ブログ
アフター

だいぶ雰囲気が変わりました。
背景に合わせて、文字色も微調整していきました。

≫まだ続く

HTMLというのを使って文字のサイズ・色をいじる編 「銀輪記」リニューアル[1]

~ブログ改造計画~



ぼくの「銀輪記」。日本縦断の報告のために立ちあげたポンコツブログですが、もうすぐ訪問者も一万人近い。
ちょっと改造してみようかななんて。

これまでtodoさん作成の「simple_blue」という共有テンプレートを使用させていただいています。

simpleblue.jpg

デザインがシンプルで文字が大きめで見やすい印象があり、一目ぼれしこのテンプレートを使わせていただいている次第です(゜_゜>)

~リンクや最新記事のプラグインを見やすく&文字のサイズ・色~


まず、ホームページはHTMLっていう言語(?)で成り立っています。前に情報処理の授業でちょっと触ったかなって程度です。かなり難しい・・・。

html.jpg

↑こんな感じのをいじっていきます・・・\(◎o◎)/!ばふーーん

html2.jpg

・・・。

とりあえず、todoさんのブログ「ブログビギナーズ」さんを参考にしながら、文字の大きさ、色を変更していきました。

✔ブログビギナーズ
http://fc2blogbeginners.blog45.fc2.com/
✔文字サイズを参考にしたサイト:イーウェブ
http://css.eweb-design.com/0405_fsz.html
✔文字や背景色で参考にしたサイト:原色大辞典
http://www.colordic.org/

背景は真っ白だったのを少し灰色に。ノートもそうですが、ぼくは真っ白白の紙より、少し灰色がかった紙の方が文字が読みやすいと思うんですよね。個人差あるでしょうけど。

リンクがとても多くなってきたことと、目次も多くなってきたことから、両サイドのプラグインをサッパリさせるために文字を小さめにしました。また、既読・未読のリンクの文字色も同じ青色にしました。記事の題も少し大きめにしてみました。


≫続く
訪問者数
ようこそ、銀輪記へ


しまなみ海道:今治
のんびりポタリスト
むらまさ

Mura-Masa

のんびり走るのが専門です.生まれつき方向音痴で雨男.愛車はMTBのTarow号とランドナーのJirow号.よく「モン太郎」を連れて旅しています.
2015年からしまなみに移住。

お友達のHP&ブログ
コメント

※現在の総コメント数 539 件
カテゴリアーカイブ
月別アーカイブ
RSS
ブログ内検索
お知らせ
✔お気軽にコメントください
✔著作権等の詳細(リンクや転載)についてはこちらをご覧ください。
クリエイティブ・コモンズ・ライセンス
旅の目次
カレンダー
08 ≪│2017/03│≫ 08
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
メールフォーム

名前:
メール:
件名:
本文:


※ご意見、ご質問がございましたら個別記事のコメントまたはこのメールフォームまでご連絡ください。免責事項に関してはこちらをご覧ください。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。