愛と冒険の日々❤
> HOME > ブログカスタマイズ

  

Posted by at

運命の出会い…w

森で、サメと運命的な出会いをしてしまう…という設定w

てらっちの足部分が、なんかやらしい!と評判ですw

ヘッダー画像を、2年ぶりに変えてみますた❤
てらっちの髪型も、ずっとフサフサのままだったしねw

どんなのにしようかと考えて、
家族全員で側転してる画像にしようじゃないか!と、てらっちと一緒に大撮影会w
完成してみたら…
画像めっちゃちっこい!!( ̄□||||!!

撮り直しか?!とも思ったんだけど、すごい時間と手間がかかったから、
暫くこのままで行こうと思います!w
……しばらくと言いながら、また2年くらい放置な気がする…icon15
そんな感じっ!!ヾ(´ー`)ノ

  


しゅるるんっ!と戻ってみましょう

昨日、鴨(?)が入ってるカゴのバックパックが気になりすぎたので、
まろんちゃんと一緒にもらいに行ってきますた❤

こんなカゴに水入れたら、絶対こぼれるよねえ?!の図←気にしたら負け

それにしても我ながら、もうちょっとアングル考えて撮れよ…って感じですけれども!!(・ε・)キニシナイ!!

この他にも、インディアン~(?)テイストのギフトとかラキボとか、色々ありましたicon14
May's Soul!
http://maps.secondlife.com/secondlife/Cies%20Island/202/201/21



【本日のブログのユーザビリティ向上委員会】

久しぶりのブログカスタマイズカテゴリーですっ!
今回は、ちょっとだけブログが見やすくなるブログパーツのご紹介ヽ( ´∀`)ノ←あくまでもチョットダケ

ソラマメブログのテンプレートって、大抵フッター部分に「先頭に戻る」ボタンがついてますよね?
なので、トップページに記事を沢山表示させるようにしてる場合、
スクロールしてる途中で先頭に戻ろうと思うと、なんかちょっとメンドクサイ…

そこで!このブログパーツの出番ですw
うちのブログにもつけてるのですが、ページをスクロールさせると、右下部分に縞々のボタンが出現します。
そのボタンをクリックすると、しゅるるんっ!とページの先頭に戻ってくれますicon22
このページが先頭に戻る時のしゅるるんっ!が何か楽しくて、設置した当初は、
無駄にしゅるるんしてました(´∀`*)ウフフ

icon01設置方法
 まず、下記URLにアクセスします。
http://blogparts-design.com/wp/articles/original_useful/%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E5%85%88%E9%A0%AD%E3%81%B8%E6%88%BB%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3.html
このページにある、「ブログパーツ設置HTMLコード」をコピーします。
 ソラマメブログの「ブログの設定」の「ブログ環境設定」を開きます。
 コピーしてきたHTMLコードを、カスタムプラグインの部分にペースト(貼り付け)します。
 貼りつけできたら、「確認」ボタンを押して完了ですicon12~!
簡単ですので、お試しあれ~
※ペースト場所を修正しました。テンプレートの中でも、カスタムプラグインでもどちらでも動作しますが
カスタムプラグインに貼りつけた方が、手間が少ないですー。


  


今更感は、ありますが…

この間、SLやってるRL友とランチに行った時に、
最近、ソラマメ全体の記事数減ったよね~、bloggerに引っ越ししはる人も多いよね~て話をしてたん。
そのRL友は、bloggerや他のブログサービスで書いてはる お気に入りブログを
全部ブックマークしてチェックしてるって言うので、
「googleリーダー使ったらいいのに~」って言うて説明したら、「いい事聞いた!」って喜んでくれたんで
もうすでにgoogleリーダー使ってはる人も多いやろうけど、今回記事にしてみますた❤
知ってるわー!って方は、この記事スルーでお願いしますw


icon01 googleリーダーって?
googleリーダーとは、ブログなどの更新情報を自動的に取得して、まとめて表示してくれるものです。
googleリーダーにお気に入りのブログを登録しておくだけで、一々更新されているかチェックしなくてもOKicon22
googleリーダーが、登録してあるお気に入りブログの最新記事を、勝手に集めておいてくれます(*´ェ`*)


icon02 Googleリーダーにログインする。
Googleリーダーのページを開きます。⇒www.google.co.jp/reader/
Googleアカウントを持ってる人はログイン、持ってない人は、「アカウントを作成」ボタンをクリックして
Googleアカウントを作成し、ログインします。



ログインしたら、googleリーダーのページをブックマークツールバーにお気に入り登録しておきましょう。
これでいつでも簡単に、googleリーダーを開くことができます。



icon03 Googleリーダーにお気に入りのブログなどを登録する
ここまで出来たら次に、お気に入りのブログなどをジャンジャン登録していきます。
左上に「登録」ボタンがあるので、クリックするとお気に入りブログのURLを登録することができます。
でも、私はURLを登録するのが面倒くさいのでw ブログやFlickrを見ながら登録する方法でやってます。

まず、画面右上の歯車みたいなボタン(オプションボタン)をクリックし、
メニューから「リーダーの設定」を選択します。





設定画面の「追加機能」タブをクリックします。
そこに、「サイトをブラウズしながら登録する」という箇所があるので、
そこにある「登録」ボタンをブックマークツールバーにドラッグします。
(登録ボタンをクリックしたまま、ぎゅーーっとブックマークツールバーのところまで持って行くw)

ブックマークツールバーに「登録」ボタンがつけられたら、普段通りブログチェックicon14
お気に入りのブログを見つけたら、「登録」ボタンをぽちっ!とクリック。
これだけで、googleリーダーにお気に入りブログを追加登録することができます❤




icon04 気になる記事には★マークをつける
googleリーダーにお気に入りのブログやFlickrを登録できたら、googleリーダーを開いてみましょう。
登録したブログなどの記事が、まとめて表示されていると思います。
記事を読んでいて、「このアイテム、インしたらチェックしに行こう」なんて思った時は、
目印に★マークをつけておきます。
こうしておくと、たくさん記事があっても、自分がチェックしたいと思った記事だけ、いつでもまとめて
「スター付きアイテム」のところで確認することができますicon12

こんな感じで、私はブログチェックしてまーす。
気になるブログやFlickr見つけたら、とりあえず登録★
あとで、「もう読まなくてもいいや~」って思ったら、削除もできるので、まずは、一度やってみて~。
めっちゃ便利だと思いますっicon14
今日のところは、こんな感じっ
  


livedoor BlogRollをカスタマイズしてみた❤

なんかソラマメ、めちゃめちゃ重い?!

ソラマメブログにも、お友達とかお気に入りのブログを
サイドバーにリンクする事はできるけど、更新情報が反映されないので
私は、ドリコムRSSっていうのを使ってたん。(右サイドバーの「おきにーり❤」ってとこ)
これだと、更新されたブログ順に表示されて、NEW!て表示も出るから、結構重宝してますた。

が!しかしっ!
使ってる人は知ってると思うけど、ドリコムRSSのサービスが9/30を持って終了Σ( ̄ロ ̄lll)
代わりに、livedoor BlogRollってのを使ってくださいって表示されてたので
重い腰を上げて、乗り換えることにしてみますたicon11


がちゃ祭りのアイテムを装着しまくりのみかんの図(←記事と全く関係ない)


icon01livedoorのIDを作成しましょう。
たぶん、ここでめんどい…と思った人もいるはずw
めんどくない人だけ次に進んでください
http://blogroll.livedoor.com/

icon02BlogRollにアクセスし、チャンネルを作りましょう。
livedoor BlogRollのページにアクセスし、先程作成したlivedoorのIDでログインします。
http://blogroll.livedoor.com/
「新規チャンネル作成」のテキストボックスに、リンクリストにつけたい名前を入力し、
「追加する」ボタンをクリック。
ここでつけたチャンネル名は、リンクリストを表示させた時には全く反映されないので
てけとーに自分でわかる名前をつけたらいいと思いますw

icon03リンクリストを作成しましょう。
① ドリコムRSSから乗り換える人
ドリコムRSSからの乗り換えはめっちゃ簡単です。
いくつか方法はあるけど、私はブログのURLを入力する方法にしますた。
icon02↑で作成したチャンネルをクリックし、チャンネルメニューを表示します。
チャンネルメニューの「他サービスからの引っ越し(2)」をクリック。
「ブログのURLを入力してください。」ってあるので、
そこに自分のブログURLを入力。送信ボタンを押したら完了~。
カテゴリー分けしてた人は、カテゴリーごと引き継げますicon14

新たにlivedoor BlogRollを自分のブログにつけてみようって思った人
icon02↑で作成したチャンネルをクリックし、チャンネルメニューを表示します。
チャンネルメニューの「フィードの追加」をクリック。
「登録したいサイトのURL、もしくはフィードのURLを入力してください。」
ってあるので、登録したいサイトのURLを入力して、追加ボタンをクリック。
この作業を繰り返して、
お気に入りのサイトをどんどんリストに追加していきます。


icon04貼り付けコードをサイドバーに貼りつけましょう。
お気に入りブログの登録が完了したら、自分のブログのサイドバーに貼り付けます。
チャンネルメニューの「デザイン設定」をクリックして、
ブログリストに表示させたいブログの数や、NEW!マークの表示などの設定を行い、
保存ボタンをクリックします。
次にチャンネルメニューの「貼り付けコード」をクリックし、ソースコードを表示し
そして、ソースコードの以下の部分だけを除いてコピーします。
<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default.css" />

コピーしたソースコードを、ソラマメブログのブログ環境設定の
カスタムプラグインのところに貼りつけて保存します。

次に自分の思うように表示させるための、スタイルシートを追加していきます。

icon05デフォルトのcssをソラマメブログのテンプレートのcssに追加しましょう
以下のURLをクリックして、表示されたcssコードをコピーし、ソラマメブログの
テンプレートの「スタイルシート」の一番下に貼り付けて追加します。
http://blogroll.livedoor.net/css/default.css

必要に応じて、以下の設定を行います。

▼サイドバーに表示するサイズを設定する
スタイルシートに追加したBlogRoll cssの以下の部分を探します。
.blogroll-channel * {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
text-align: left;
}

私が表示させてるのと同じく、
横幅200px,高さ300pxそれ以上になったらスクロールで
表示させたい場合は、以下のように修正します。
.blogroll-channel * {
width: 200; /* 表示させたい幅 */
height: 300; /* 表示させたい高さ */
overflow-y: auto; /* 表示させたい高さを超えたらスクロール */
overflow-x: hidden; /* 横方向にはスクロールさせない */
margin: 0;
padding: 0;
border: none;
text-align: left;
}

▼表示するフォントのサイズを変更する
スタイルシートに追加したBlogRoll cssの以下の部分を探します。
.blogroll-channel .blogroll-list {
list-style-type: none;
margin-bottom: 3px;
font-size: 12px;
line-height: 1.3;
}

私が表示させてるのと同じく、
フォントサイズ10pxで表示させたい場合は、以下のように修正します。
.blogroll-channel .blogroll-list {
list-style-type: none;
margin-bottom: 3px;
font-size: 10px; /* 表示させたいフォントサイズ */
line-height: 1.3;
}
 
▼カテゴリタイトルを装飾する
デフォルトのcssには、カテゴリタイトルに関するものがないので、
ブログリストをカテゴリ別けしてる方は以下のcssを追加してみてください
.blogroll-channel .blogroll-category-name {
list-style-type: none;
margin-top: 15px; /* カテゴリタイトル上部余白 */
margin-bottom: 5px; /* カテゴリタイトル下部余白 */
font-size: 10px; /* 表示させたいフォントサイズ */
color: #8f3b73; /* フォントカラー */
border-bottom: 1px dotted #666666; /* カテゴリタイトルの下に点線 */
line-height: 1.7;
}

表示させるカテゴリの順番は、
ドリコムRSS使ってる時には設定できたんやけど、
livedoor BlogRollの場合は、更新された順によって
表示されるカテゴリの順番も入れ替わるらしい…
でも、順番になってないような気もするんよね…icon11
もう少し調査が必要かも。

今回は取り急ぎ、
最低限必要な、表示のカスタマイズ方法のみ書いてみましたicon10
ご清聴ありがとうございました。(最後まで読んでくれた人いらっさるのかしら…w



  


Facebook使ってる?

Facebookに登録してみたはいいけど、全く使い方がわからず…
思いっきり放置してたんやけど、映画「ソーシャルネットワーク」を観に行って
再びFacebookを触りだして数週間…
未だに、活用方法がわからへんけどw
TwitterとかFlickrとかブログとかとの連携の仕方がわかったので
ちょこっとご紹介したいと思いますicon12









ま~、りんちゃんから「他とどーつなげるん?」って質問があったので
そのお返事やね❤(←わたし親切やろ?w



私のFacebookのページです。
プロフィールタグのウォールってとこをクリックすると
自分のブログ記事、Twitterでつぶやいたこと、FlickrにアップしたSSなどが
時系列に表示されるようになってます~。

ホームタグのニュースフィードってとこをクリックすると
友達になってる人や、自分のお気に入りのページにアップされた内容が、
ズラズラ~っと時系列で表示されます~。
ブログの記事やTwitterのつぶやきにコメントしたり、
「いいね!」を送ることができます。


icon01FacebookとTwitterを連携させる

① まずは、こちらのページを開きます。
http://www.facebook.com/apps/application.php?id=2231777543

② アプリへ移動ボタンをクリックします。


③ あなたの Twitterアカウントと Facebookアカウントを連携させますか?って聞かれるので
自分のTwitterのユーザーネームとパスワードを入れて、「許可する」をクリックします。

これで、自分がTwitterにつぶやいた内容が、Facebookに反映されます。
Facebookに直接書き込んだ内容は、Twitterの方には反映されません。



icon01FacebookとFlickrを連携させる

① まずは、こちらのページを開きます。
http://www.flickr.com/account?tab=extend

② Facebookの項目にある、「CONNECT」をクリックします。

③ そこから、Flickrのアカウント作った時のヤフーIDに「Sign in!!」

④ そしたら次にFacebookの方に移動するので、そこで「許可する」をクリックします。

⑤ そしたらまたまたヤフーに戻るので、
1つ目と3つ目のチェックボックスにチェックを入れて「continue」をクリックします。



FacebookとYahoo!の両方がONになっていれば完了です~。
FlickrにSSをアップすると、少し遅れてFacebookの方にも反映されるようになります。




icon01Facebookとソラマメブログを連携させる

① まずは、こちらのページを開きます。
http://www.facebook.com/?ref=home#!/RSS.Graffiti

② アプリへ移動ボタンをクリックします。



③ 「+Add feed」ボタンをクリックします。


④ すると、「Add a new feed here 」という項目が出てくるので、
「Feed URL」というところに、自分のブログのFeed URLを入れます。
*Feed URLがわからない場合は、「ブログのURL+index.rdf」でいいと思います~。
ちなみに私の場合は、http://hepatica.slmame.com/index.rdf と入れてます。

⑤ Feed URLを入力したら、テキストボックスの下に「click here to fetch and preview」
と書かれているところがあるので、クリックします。
自分のブログの記事が表示されたらOKです。

⑥ Source Nameには、ブログ名、Source URLには、ブログのURLを記入します。

⑦ 最後に「SAVE」ボタンを押したら完了です。
複数ブログがある場合には、同じ作業を繰り返します。

どう?りんちゃんわかった??←名指し

今、TwitterとかFlickrとか色々なツールを使ってる人が多いと思うんやけど、
バラバラの情報を、一ヶ所に全部集められるから、便利かも~。
よろしかったら、お試しください❤

Facebook
http://www.facebook.com/

  


ソラマメブログカスタマイズ

新しいブログ背景を配布してはるサイトを見つけたので
早速自分のブログ背景を変えてみますたw ちょっと汚れてるところがお気に入り❤



▼以前に紹介した、簡単にブログの背景を変更する方法
http://hepatica.slmame.com/e830230.html

今回も前回のように紹介しようと思って記事を書き始めたんやけど、
画像作ってるうちに、後悔しはじめたというwwwwww
結構てけとー&他力本願的な説明になるかと思いますが、
それでもいいから!って人だけ読んでみてくださいwwww(←ごめんっicon10

まず、有名すぎるこちらのページを開いてくださいww←いきなり他力本願face10
http://templ.slmame.com/e607399.html
こちらのサイトで公開されてる、「WhiteStripe」をベースにしていきますw

① ソラマメの管理画面を開いてテンプレート編集ページへ
② テンプレートが3つ登録できるので、念の為新しいテンプレートを編集用にダウンロードしてきて
ぐちゃぐちゃになってもいいようにしておきますw(←ええええっw
③ 新しくダウンロードしてきたテンプレートの【カスタマイズ】を開きます。
④ すると、スタイルシート:トップページ: 個別記事:アーカイブ:のソースがでてきます。
⑤ 先に開いていた、こちらのページの手順にしたがって、ソースコードをコピー&ペーストしてきますw
⑥ プレビューで確認すると、こんな感じになってると思います。



⑦ ちゃんと表示されたら、ここでいったん保存しておきます。
ここまでで、めっちゃ綺麗なテンプレートに変身しているはずです。
もっとデコりたい!って人だけ、次に進んでくださいww

⑧ 次に、背景画像配布ページを開きます。
http://hotbliggityblog.com/threecolumnbackgrounds.php
※↑↑↑なくなってましたので、こちらを。
http://shabbyblogs.com/?page_id=108
たくさん背景画像があるので、お好みで選んでいきます。
真ん中が白になってるものを選ぶと、つなぎ目が自然な感じになりますーicon12
⑨ 好きな背景画像を選んだら、画像の下にある「Generate Code」をクリックします。


⑩ クリックした後に表示されたソースコードを、すべてコピーしておきます。
⑪ ふたたび、ソラマメの管理画面にもどってきて、先ほど保存しておいたテンプレートの
「カスタマイズ」を開きます。
ここで編集するのは、トップページと、個別記事ページと、アーカイブページです。
⑫ まず、トップページのソースコードの中から、</head>タグを探します。
たぶん<boby>タグの前あたりにあるはずです。
⑬ </head>が見つかったら、その直前に、先ほどコピーしておいたソースコードをペーストします。
ペーストできたら、プレビューで壁紙が反映されているか確認しましょう。
⑭ うまく表示ができたら、続いて個別記事ページ、アーカイブページの同じ場所にも
ソースコードをペーストします。
それぞれプレビューで、ちゃんと表示できてることを確認できたら、最後に登録ボタンを押します。

⑮ これで完成なんやけど、以下の部分が気になる人は、さらに作業を加えます。


⑯-① まず、外枠を消す方法です。
管理画面>>テンプレート>>カスタマイズ>>スタイルシートを見ます。
スタイルシートを、じーーーーーーと見ていると、

/*----------------------------------------------------
レイアウト
----------------------------------------------------*/
#wrap {
margin: 0 auto;
width: 860px;
text-align: left;
background: #fff;
border: 1px solid #ccc;
}


って部分があると思います。
そこのborder: 1px solid #ccc;の前に、//を入れます。

// border: 1px solid #ccc;

こうすることで、外枠が消えますですicon12

⑯-② ナビゲーションを消す方法については、本家サイトに書かれていますので
こちらページの「グローバルナビゲーションについて」を参照してくださいicon22
http://templ.slmame.com/e607399.html

⑯-③ 細かいですが、ソラマメヘッダの白い背景を消す方法です。
⑯-①と同様に、スタイルシートをじーーーーーーーーーと見ます。
すると、

/*----------------------------------------------------
ソラマメヘッダー
----------------------------------------------------*/
.header_scroll {
margin: 0 0 20px 0;
padding:0 0 0 5px;
height: 30px;
font-size: 85%;
background: #fff;
border-bottom: 1px solid #ccc;
}

って部分があると思います。
そこのbackground: #fff;、border-bottom: 1px solid #ccc;の前に、//を入れます。
// background: #fff;
// border-bottom: 1px solid #ccc;

こうすることで、ソラマメヘッダーの白い背景は消えますが、
画像と重なる部分がちょっとモアレが出るかもですー。
ソラマメさん。もうちょっと綺麗に切りぬいた画像使ってよね❤

プレビューで確認すると、こんな感じになってるはずです。

あとは、ヘッダの画像作ったり、文字のサイズ調整してみてください~。
詳しくは、こちら!!
http://templ.slmame.com/c47937.html

解説長くなりましたが、大したことはしてませんwww
もうほとんど、「Templates for SLMaMe」さんに丸投げ状態ですwwww

ご清聴ありがとうございますた❤  


バレンタインも近いので…(ブログカスタマイズ)




ブログの背景画像をウザい感じにしてみますたicon06 はい。ラブラブを暑苦しく強調ですww

この間、ちぇりーさんの「ちぇりブロ2」を拝見したら、(勝手にリンクしてごめんなさいw)
すごく素敵な壁紙でデコってはったのを見つけ、私もまねっこicon12

Free Blog Backgrounds
http://www.thecutestblogontheblock.com/
英語のページだけど、とっても簡単です。

① まず、サイドバーから【It's All FREE!】のブロックの【Free Backgrounds】をクリックicon09
② Free Backgroundsの中から、【BlogSpot Backgrounds】を選択
③ すると何種類もの壁紙がでてくるので、好きなのを選びます。(ちなみに私は3カラム用を使ってます)
④ 好きな壁紙を選んでクリックしたら表示されるページの、
【Copy & Paste This Code】に表示されているコードをコピーしておきます。
⑤ 次に、ソラマメの管理画面を開いてテンプレート編集ページへ
⑥ 現在使っているテンプレートの【カスタマイズ】を開きます。
⑦ すると、スタイルシート:トップページ: 個別記事:アーカイブ:のソースがでてきます。
ここ編集するのは、トップページと、個別記事ページと、アーカイブページです。
⑧ まず、トップページのソースコードの中から、</head>タグを探します。
たぶん<boby>タグの前あたりにあるはずです。
⑨ </head>が見つかったら、その直前に先ほどコピーしておいたソースコードをペーストします。
ペーストできたら、プレビューで壁紙が反映されているか確認しましょう。
⑩ うまく表示ができたら、続いて個別記事ページ、アーカイブページの同じ場所にもソースコードをペーストします。
それぞれプレビューで、ちゃんと表示できてることを確認できたら、最後に登録ボタンを押して完了ですicon22

ソラマメの公式テンプレートだと、枠がどうしても邪魔になるので、
↓有名すぎるこちらのブログを参考に、ちょこっとカスタマイズしてみてください~~icon12 ←最終的には丸投げw
Templates for SLMaMe
http://templ.slmame.com/