ブログを更新すると、ホームページにブログタイトルを表示する方法

ブログを更新すると、ホームページにブログタイトルを表示させたい時ありますよね。

今回は、index.htmlのままでのやり方を書きたいと思います。

意外と難しくない。というけど、自分はjavascriptはわからないです。

色々調べたら、こんな感じできました。

RSSが2つあるとき（ブログが2つある場合、応用で複数いけます。）のやり方を書いてあります。

</head>の上に下記のjavascriptは入れてね。

javascript

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

// JavaScript Document

//Google Feed Api

google.load("feeds", "1");

function initialize() {

//1個目のRSS

var feed = new google.feeds.Feed("ここにRSSのアドレス");

//2個目のRSS

var feed2 = new google.feeds.Feed("ここにRSSのアドレス");

var maxTitleLength = 35; ←記事タイトルの長さ

//1個目の設定

feed.setNumEntries(5);　←記事タイトルの表示数

feed.load(function(result) {

if (!result.error) {

var container = document.getElementById("feed1");　←これをHTMLのクラス名に

for (var i = 0; i < result.feed.entries.length; i++) {

var entry = result.feed.entries[i];

var title = entry.title;

if (title.length > maxTitleLength) {

title = title.substr(0, maxTitleLength);

}

var dd = new Date(entry.publishedDate); // now

var yearNum = dd.getYear();

if (yearNum < 2000) yearNum += 1900;

var m = dd.getMonth() + 1;

if (m < 10) {m = "0" + m;}

var d = dd.getDate();

if (d < 10) {d = "0" + d;}

var date = yearNum + "." + m + "." + d + " ";

container.innerHTML += "<dt>" + date +"</dt><dd><a href='" + entry.link + "' target='_blank'>" + title + "</a></dd>";

}

}

});

//2個目の設定

feed2.setNumEntries(5);　←記事タイトルの表示数

feed2.load(function(result) {

if (!result.error) {

var container = document.getElementById("feed2");　←これをHTMLのクラス名に

for (var i = 0; i < result.feed.entries.length; i++) {

var entry = result.feed.entries[i];

var title = entry.title;

if (title.length > maxTitleLength) {

title = title.substr(0, maxTitleLength);

}

var dd = new Date(entry.publishedDate); // now

var yearNum = dd.getYear();

if (yearNum < 2000) yearNum += 1900;

var m = dd.getMonth() + 1;

if (m < 10) {m = "0" + m;}

var d = dd.getDate();

if (d < 10) {d = "0" + d;}

var date = yearNum + "." + m + "." + d + " ";

container.innerHTML += "<dt>" + date +"</dt><dd><a href='" + entry.link + "' target='_blank'>" + title + "</a></dd>";

}

}

});

}

google.setOnLoadCallback(initialize); 

</script>

HTML

<div>

<dl id="feed1">

</dl>

</div>

<div>

<dl id="feed2">

</dl>

</div>

これでOK！終わりです。コピペでできちゃいますよ。

なんでこうなるの？と思った方は、ググって下さい。自分わかりません（笑）

PHPのやり方もありますが、それはまた今度～

ファーストサーバーにwordpressをインストール

だいぶ前にの事ですが、

ｃにwordpressをインストールしました。


なんだかおかしい。

インストールができない・・・試行錯誤結構時間かかりました。

同じくはまった方のブログありました。



kotori-blogさんの記事で『ファーストサーバーでWordPressを使用する際の注意点[WordPress]』
がありました。

http://kotori-blog.com/wordpress/firstserver/


kotori-blogさんありがたや～ありがたや～(^^)


もう、ファーストサーバーには関わりたくないですね・・・

ブログなどでhtmlタグをそのまま表示

ブログなどhtmlをそのまま表示したい！って時のやり方。

htmlそのまま書いたら適用されて表示されちゃいますよね。


http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process

①Enter Markup　でhtmlタグを入れる。

②Process　を押す。

③Cut n' Paste　の所にコードが書き出される


Cut n' Pasteの所で書き出されたコードをブログ等に貼り付けるだで、htmlがそのまま表示されます！

CSS3で奇数、偶数、●番目、●の倍数などに使う書き方

これまた、よく使う、CSS。


html


<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>




css


1の背景が赤くなります。

li:first-child{
background:#ff0000;
}


6の背景が赤くなります。

li:last-child{
background:#ff0000;
}



偶数の背景が赤くなります　2と4と6ですね。

li:nth-child(even){
background:#ff0000;
}


奇数の背景が赤くなります　1と3と5ですね。

li:nth-child(odd){
background:#ff0000;
}


3の倍数の背景が赤くなります　3と6ですね。

li:nth-child(3n){
background:#ff0000;
}




これを覚えているだけで、無駄なclassがいらなくなります。

レスポンシブで作成してるときもかなり使えます。

CSSで簡単ロールオーバー！透過で。

CSSで簡単ロールオーバーの方法です。

透過するって感じなんですけけどね。

自分はよく使います。


CSS

.div a img{
filter:alpha(opacity=100); /* IE*/
-moz-opacity: 1; /* Firefox*/
opacity: 1; /* SafariやOpera*/
}

.div a:hover img{
filter:alpha(opacity=70); /* IE*/
-moz-opacity: 0.7; /* Firefox*/
opacity: 0.7; /* SafariやOpera*/
}


ホバーのした時70％透過したってことになります。

クロームはフォントサイズ10px以下表示は出来ない？

クロームにはまった・・・というか知らなかった。

クロームはフォントサイズ10px以下は表示出来ないみたいです。

10px以下の表示はなかなかしませんが、まれーに使うときあります。


【解決策】

CSSで強制的に小さくする

div{
font-size:10px;
-webkit-transform:scale(0.8);
}

縮小してるから文字は汚いですorz

一応なんんとか、対応はできるかな・・・

横並びさせたボックスの最後のマージンが・・・邪魔、いらないって時のCSS

なんとなく、ブログはじめてみました。

自分のメモもかねて。

よく使う、CSS書いて置きます。

横並びさせたボックスの最後のマージンが・・・邪魔、いらないって時のです。

こんな時↓

あるあるですよね。

CSS

.top_banner{

    width:960px;

    height:auto;

}

.top_banner ul{

    width:975px;

    height:auto;

    margin: 0 -15px 0px 0;

    overflow: hidden;

    zoom: 1;

}

.top_banner ul li{

    width:310px;

    height:190px;

    margin: 0 15px 0px 0;

    float: left;

    display: inline;

}

html

<div class="top_banner clearfix">

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</div>


これで解決です(・∀・)