根室灯台の野鳥観察小屋(記事はこちら)
法金剛院の蓮(記事はこちら)
雪の高山本線猪谷駅(記事はこちら)
法隆寺の桜(記事はこちら)
山陰本線 出雲市付近(記事はこちら)
野付半島(北海道)(記事はこちら)
上品蓮台寺(京都)の枝垂桜 (記事はこちら)
雪の只見線(会津)(記事はこちら)
五能線(青森)(記事はこちら)
厳島神社(広島)(記事はこちら)
釧網本線 茅沼駅(北海道)(記事はこちら)(ミラーサイト)
朝焼けの立山連峰(富山)(記事はこちら)
2017/06«│ 2017/07| 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 »2017/08
21:42:25
さて 4月になって、何か変化を。。。
ということで、しばらく前からいろいろ試していたテンプレの編集。。。
今回、なんとか見られる形にできたのではないか。。ということで
きりよく新年度から ニューテンプレートです。

自分のための覚書も兼ねて、この形に至った経緯などを書いておこうかと~~

まずは、トップの画像をスライドショーにしてみたい。。と、ずっと前から思っていたのですが
HTMLの知識もほとんど無いので、さっぱり分からず、そのうちやってみればいいさ。。と放置していたんだけど
今年に入って、なんとなく今ならできるかも。。。といろいろ探していたら
JQueryというライブラリで軽くて簡単にブログにスライドショーが設置できるという情報をゲット!

その中でもスライドがおしゃれな感じだった Cameraという プラグインを発見、こちらを組み込んでみようということに。。。

このCameraを組み込んでサンプルを作っている人のブログをお手本にしつつやってみたけど
知識0からなので うまくいかない。。。何のことやらわからないw
オフラインでメモ帳にサンプルをコピーしてやってみる。。。
そうか画像が必要か。。ということで てきとーに画像を足して同じフォルダに置いてみる
すると。。。動いた!ということで やる気が出てきた~~

その後実物のFC2のテンプレで試そうと、編集を。。。
なるほど。。。サンプルとテンプレでダブってる所は書かなくていいのか。。
必要な所だけ足せばいいらしい
ということで、ここにテンプレに書き加えた部分を表示したいんだけど
その方法がいまいち分からないwできるようになったら追記しておきます~
まあ、Cameraのサンプルからいくつかの部分をテンプレにコピペすると
それなりに動くらしい。。。ということで 書き入れてみたのですが。。。
うまく動かない。。。

どうやら、このCameraのCSSファイルをアップロードしないとダメらしい。。。
とやっと気がつき、FC2の写真アップロードを使用してアップロードしたがうまくいかない。。。
そもそもファイル名を変更しないとアップできない!
なにやらCSSファイルの中にもいろいろ指定する部分があるようだ。。。

ということで 辞書を首っ引きで調べる感じで、分からない所を検索しまくると
段々見えてきた!
スライドショーの左右の矢印や一時停止ボタン、読み込み中のGIFアニメなども
全てFC2の写真アップロードでアップして、それを指定している所に、アップしたファイルのURLを入れないといけない。。

うむうむ かなり分かってきた!ということで
FC2上でスライドショーをやっと動かせるように!!
しかし、場所の指定がどうやったらいいのか。。。

と。。。ここでようやく ブログのテンプレート作りの基本を学ぶことにw
既存のテンプレートを編集して作成していたのだけど
通常はトップ画像があるところにスライドショーを埋め込むと、形が崩れてしまったりするので
とりあえず トップ部分を全部取っ払って スライドショーを独立してやってみる。。
その辺で やっとHTMLとCSSの関係が分かり始めた!(遅いw

その後はスライドの後ろに画像を置くことにも成功
ついでに フォトショップでスライドショーが ちょうど額縁にはまっているような絵も!!

ロゴもなんとかはめ込めるようになったけど 色合いが。。。。
なかなか オシャレ感のある感じにはできない。。
ついつい キラキラした感じにしたくて なんでもネオン管みたいな処理をすると
けばけばしくて汚らしくなる。。。
ということで 結果的に うす~い色でなんとか収めて見ました

春なので スライドショーの後ろは桜
本体部分も ややピンクに。。。
この辺りは 季節によって変える事も余裕だな!!


今後は トップに戻るボタンを、借り物でなくて自作してみると言う所
ロゴをもう少しいいものに!!w
3カラムの分割部分を もう少しすっきりしたい 出来れば透過を使ってみたいなぁ
Webフォントと言うものがあるらしいので、それでフォントを変更してみたい
カレンダーを横型でないものに変更したい

究極は全部自作でやってみたいんだけど、プラグインの部分の必要な要素を
すべて忘れずにちゃんとやれるかどうか。。。そもそもどんな要素があるかちゃんと確認してないので
その辺から少しずつ積み上げて行こうと思います~~


ということで、新しいテンプレのおかしい所 改善したほうがよい所などがありましたら
ご意見よろしく~~

スポンサーサイト

Category:いつでも放浪記コメント:6│ トラックバック :--

コメント
まっするさん>
ありがとです~~!
なんとか収まったという感じ~~
でも まだ借り物を編集してやっとここまでこぎつけた所なので
最終的にはやはりちゃんと0から作りたいなぁ~
スライド増加と背景の変更は季節ごとにやるぐらいでないと
せっかくここで覚え始めた事を忘れそうなので、定期的にやっていく予定!!

ばるさろ│URL│2015/04/06(Mon)18:36:47│ 編集
おかぴーさん>
ありがとうです~~!
もうちょっと爽やか感とか透明感とかを出してみたかったんだけど。。。
まだまだ理想には程遠いです(;´д` ) トホホ

スライドショーがなんとか動かせたら、今度は昔の写真を見始めて止まらなくなったりw
10年ブログをやってきたので、1年1枚で10枚。。。と考えてたけど
気がついたら12枚。。。
まだ載せたかった写真があったんだけど どれだっけ。。。って感じですw

ばるさろ│URL│2015/04/06(Mon)18:34:06│ 編集
うおおお!気付くのが遅れてすみません!
完成おめでとうございます!
かっこいいですね!

今後のスライドの変化も楽しみにしています!

まっそ~│URL│2015/04/05(Sun)21:03:56│ 編集
デザイン変更お疲れ様です!
ブログのデザインが変わっていて
ビックリしました!

優しい雰囲気で
すごく気に入りました。

ページトップのスライドショーを見てると、
思わず記事に飛びたくなります。
とてもいいデザインですね(^^)

今後もブログ執筆を
応援しています!

おかぴー│URL│2015/04/05(Sun)18:48:38│ 編集
大阪さん>
コメントのほうが ほとんど元のままでもう少し変えてみたいんです~
スライドの写真は少しずつ増えていくと思いますが。。。
ブログ引越しで、記事や写真がちゃんとしてないものも結構あったなぁ
でも 元の写真も残ってるので、そこから編集したりして、結構楽しんでやれました~

ばるさろ│URL│2015/04/03(Fri)20:28:08│ 編集
No title
凄いなあ~!自分なりに 使いやすくアレンジできると いいですね。
法隆寺の桜が丁度 見れたのですが・・
素晴らしかった!思い出の1枚が 蘇るのは良いものですね。

osakaken│URL│2015/04/03(Fri)09:12:03│ 編集
コメントの投稿










カテゴリ
RSSリンクの表示
リンク
このブログをリンクに追加する
ブロとも申請フォーム

この人とブロともになる

月別アーカイブ
QRコード
QRコード
タグ
タグです

京都 神奈川 東京 大阪 岡山 鳥取 鉄道 兵庫 奈良 和歌山