他ブログ最新記事

FC2ブログでOGP設定が可能に!FC2ブログ利用者は有効にしておけ!

2015年10月03日 21:38

customize.jpg
設定可能なってたの気づかなかったw
続きを読む
スポンサーサイト

スポンサーサイト

アイキャッチ画像を表示するようにしました

2014年05月17日 22:54

customize.jpg
いろいろデザイン変えました。
続きを読む

Googleスプレッドシート実験場

2013年10月23日 00:57

今までブログ内に表を挿入する場合はHTMLのTableタグを使用してましたが、
表を編集したりする際に結構めんどくさかったんですよね。

んで、Googleのスプレッドシートをブログ内に埋め込めると最近知ったので
ちょっとここの記事はそのスプレッドシートの実験場にします。

まだよく分かっていませんがスプレッドシートを使うと表を編集したい時に、
ブログの記事を編集する必要はなく埋め込み元のシートを編集すればおk。
そうするとブログ記事の方にも変更が反映されて編集が楽ちんになる!
という想定w

とりあえず↓にいろいろ埋め込んでみますが、
あくまで実験ですのでデザイン等もめちゃくちゃカッコ悪くなってます。
スプレッドシートを使う価値があるのか判断するための実験ですので、
読者の方はここの記事は一切気にしないで下さいねw

つかあれ?
WindowsのGoogle Chromeだと表示されてない?
おれだけ?

ん?Googleドライブにログインしたら出た?
まるで意味がわからんぞ!!


Zenback導入してみた⊂二二二( ^ω^)二⊃

2013年02月13日 22:56

Zenbackというものを導入してみた。

ナニソレ?って場合はggrks!!

個別記事表示時にいっちばん下に表示されるよう仮で設置してみたZE!

数日様子見で、

邪魔うざったい効果なし等々あったら

即外すッ!!

レイアウト少し変更&他ブログ様更新情報一覧追加

2011年11月16日 20:19

最新記事一覧を上に持って来ました。
表示数も10件に増やしたので少し前の記事へ移動しやすくなったハズです。

そして、相互リンクさせていただいている他ブログ様の更新情報を
RSSから取得して表示する一覧も追加しました。


RSS取得には「画RSS」というのを使用しました。
最初は「livedoor blogroll」を使用しようと思っていたのですが、
デザインのカスタマイズがあまり自由にできないので却下。

自分のブログの最新記事もRSSから取得して表示する「我RSS」を使用しようとしましたが、
RSSだと更新情報が反映されるまで時間がかかるのと、
変な広告が強制的に表示されてしまうので、FC2で提供されている変数を用いて表示しました。

引き続き相互リンク、そして相互RSSも募集中です。
「オーバーカタストロフな毎日」をよろしくお願い致します。

FC2ブログにPirobox(V.1.2.2)を導入してみた

2011年10月14日 20:10

当ブログで画像をクリックすると、画像が拡大されて表示されます。
それは以前紹介したFancyZoomというスクリプトのおかげです。
(詳細はFC2ブログでのFancyZoom導入法参照)

しかし最近FancyZoomでは物足りなくなってきまして・・・w
同じく画像を拡大するスクリプト、Piroboxを導入することにしました。

FancyZoomとPiroboxの違いを御覧頂きましょう。
下の画像をクリックすると拡大されます。

FancyZoom
2011053101 2011061401
2011092505 2011082204

Pirobox
2011053101 2011061401
2011092505 2011082204

FancyZoomからPiroboxにすると、
・拡大画像が表示されるまでのアニメーションがカッコイイ
・画像をグループ化することができ、<(prev)と>(Next)で画像の遷移が可能
・画像にtitleを設定した時タイトルが見やすい
・別タブに画像表示させるリンクがついている
・グループ間でスライドショーも可能(当ブログではOFFにしてますが・・・)
など利点があります。

v.1.2.2はちょっと自分に合わない仕様あったり、
FC2ブログで使いやすくするために、
当ブログのPiroboxはかなり自分でカスタマイズしています。

Piroboxは↓からダウンロードできます。
Pirobox V.1.2

需要があれば導入方法やカスタマイズを紹介したいと思います。

※注意※
FancyZoomとPiroboxを共存させるには
FancyZoomのスクリプトをカスタマイズする必要があります


メニューバー追加計画進行中

2011年04月14日 00:36

2011041401


HTMLをいじりたくなって、
メニューバーを追加してみることにしました。

ただ特にこうしたいという目標もなく、
NO PLAN見切り発車なHTML編集になるので
いつ終わるか分かりませんw

メニューバーのご利用は工事終了までお待ちください。
工事完了しました。
全記事一覧が長すぎるので、
スクリプトで折りたためるようにする・・・かも。

FC2ブログで関連記事を表示させよう!

2010年08月19日 22:25

ふとFC2ブログの管理ページを一通り眺めていたら
『環境設定の変更』にこんな設定がありました。

2010081901

せっかくの機能なので表示してみよう!
と思ったんですが、なんかダサい・・・。

なんとかデザインを変更できないモノかといろいろ調査していたらこんな記事に出会いました。
記事下に同じカテゴリの記事を表示する関連記事リスト機能を実装

ふむふむ、スタイルシートに追記すればデザインを変更できるのか。
つーことでスタイルシートにいろいろ追記。
スタイルシートへの追記は管理ページのテンプレートの設定でできます。

/* FC2relate
----------------------------------------------- */
.relate_dl {
margin: 2.0em 0 0.5em !important;
padding: 0 !important;
border: 0 none !important;
background: none !important;
}
.relate_dl .relate_dt {
margin: 0 !important;
padding: 0.5em 0.2em !important;
border: 0 none !important;
border-bottom: 1px #666666 dashed !important; /* 線の色 */
line-height: 1.1 !important;
background: none !important;
}
.relate_dl .relate_dd {
margin: 0 !important;
padding: 0 !important;
border: 0 none !important;
background: none !important;
}
.relate_dl .relate_ul {
margin: 1em 0 1em 2em !important;
padding: 0 !important;
}
.relate_dl .relate_ul li {
margin: 0 0 0.5em !important;
padding: 0 !important;
border: 0 none !important;
}


サンプルデザインを1箇所変更しただけです。

ちなみに関連記事は記事の個別ページでないと表示されません。
個別ページとは記事のタイトルを押下した後に表示されるページのことです。
最初関連記事を設定したあとブログを見てみても設定が反映されてないって自分思ったんで。

ブログのタイトル画像をランダムに表示させる

2010年04月21日 01:23

いっつも同じタイトル画像ってのも飽きてきたのでランダム表示されるように改造しました。

最初は自分でランダム表示の方法を考えてうまく導入できたんですが、
ブログのテンプレートを提供してくださっているサイト様のほうで導入方法が分かりやすく説明されてありました。
なんだったんだオイラの1時間は・・・orz
ただ若干「ん?」ってトコロもあったんで、自分流にアレンジして導入。
見事タイトル画像がランダム表示されるようになりました!

このタイトル画像をランダム表示にする方法、ブログのテンプレート毎に様々な方法があります。
今回は自分の使用しているテンプレートを例に導入方法の一つを説明したいと思います。

自分のテンプレートではタイトル画像のURLがCSSに記載されていました。

.header-container {
/* ■ 使用する画像のurl */
background-image : url("画像URL");

/* ■ 背景位置の設定(左からの位置 上からの位置)*/
background-position : 50% 50%;

/* ■ 上から黒背景部分までの余白の大きさ */
padding-top : 210px; /*(画像サイズに合わせて適当に)*/
}


CSSにはタイトル画像のURLを複数記載することは出来ません。
ランダムで表示されるようにするにはJavascriptをHTMLに埋め込む必要があります。
なので<head>タグ内に以下のJavascriptを追記します。

<script type="text/javascript">
<!--
// 画像URLを格納する配列の生成
var imglist = new Array();
// 画像URLを格納
imglist[0] = "画像URL1";
imglist[1] = "画像URL2";
imglist[2] = "画像URL3";
// 配列の要素数を元に配列のインデックスをランダムに選択
var selectnum = Math.floor(Math.random() * imglist.length);
// <style>タグの生成、出力
var output = '<style>.header-container { background-image : url("' + imglist[selectnum] + '");}<¥/style>';
document.write(output);
// -->
</script>


本来ならばCSSに記載されているタイトル画像が表示されますが、
このJavascriptでタイトル画像のURLをランダムに選んでスタイルシートに上書きしています。

もう一度言いますが、この方法はあくまで一例です。
テンプレート毎に導入方法は変わってきます。
ただ、Javascriptでランダムに表示させる処理をHTMLに追記するのは共通の方法だと思います。
HTMLやJavascriptの知識がある方は一度チャレンジしてみてはいかがでしょうか?

分かりにくかったらスイマセンm( _ _ )m

カテゴリツリー化計画進行中

2010年01月05日 00:19


2010010501


続きを読む