instagramに投稿した画像をサイドバーに表示してみた

久々にカスタマイズ（というほどでもないか (^.^;）ネタです。

iPhoneアプリの「instagram（インスタグラム）」を利用してTwitterには割と頻繁に画像を投稿していましたが、それをブログにはリンクしていませんでした。
今日になって、ふと「もしかしたら表示用のブログパーツがあるのかも？」と思って検索してみたところ、やっぱりあった！

■SnapWidget   |   Instagram Photo Gallery Widgets

設定は簡単、画面下部にある項目で自分が好きなように表示サイズやレイアウト、背景色を決めて「Get Code」ボタンを押すだけ。

するとブログ貼り付け用のコードが別画面で表示されるので、これをコピーしてマイリスト（メモリスト推奨）に貼り付け、サイドバーに設置すれば完了です。

私のはこんな感じにしてみました。

サムネイルをクリックすると、拡大ページに飛びます。
新しい画像を投稿すると、上から順に入れ替わります。

ただ、設定した数（ここでは10枚）以前の画像はこのブログパーツでは見られないので、それはまた他の「listagram（リスタグラム）」という表示用サイトにリンクを貼ってみました。
サムネイルの下の「もっと前の画像一覧はこちら」の部分をクリックすると、私が過去に投稿した画像一覧のページが出てきますのでもしよかったら見てやってください。

久しぶりにデザイン変更

ちょっと気が向いたのですご～く久しぶりにブログのテンプレートを作ってみました。
素材は「ミントblue」さんで新しく追加された800px幅のタイトルバナーを1枚、これに合わせた壁紙と葉っぱのアイコンを「web*citron」さんからそれぞれお借りしました。
いつもありがとうございます♪

ここのところずっとテンプレートを変えるときも以前作ったものの再利用で誤魔化していたので、CSSを触るのも久しぶり。
今回も最初から書いたのではなく、以前のデザインのものをベースに必要な部分を足したり引いたりしただけなのですが、今は使っていない指定が入っていたり、何度も使い回ししているので同じ部分の指定が何度も入っていたりして思い通りになるまでかなり時間が掛かりました^^;

シンプルですが、秋らしい温かみのあるデザインに仕上がったかな～と思います。（自画自賛（笑））

一応、IE8、Firefox3.5、Opera10.0で確認済みですが、「画像が重なってる」、「端が切れてる」、「記事が読めない」など不具合がありましたらご一報下さい。
出来る範囲で対応致します。

デザイン変更

左サイドバーをfloat:rightを使って一番右に持ってきてサイドバーを右2列に、更にその2列のmargin-topにマイナス値を設定して表示位置を上に上げる、というかなり強引なレイアウトにしてみました^^;
こういうのってCSS的にアリなんでしょうか？ちょっと不安…。
それ以外の色の設定などは前回のデザインと同じ。
背景も写真を右下に置いただけであとは白メインなのでパッと見はシンプルなデザインかも。

 

背景のフランス菊の写真は「ミントblue」さんからお借りしました。
いつもありがとうございます(^^)

記事下部に表示される「同一カテゴリー内タイトル」部分をカスタマイズ

4月10日からココログで、固定リンクページの記事下に同一カテゴリーの過去記事5件が表示されるようになった。

■記事下部に同じカテゴリの記事タイトルが表示可能に

早速設定してみたら、やけに昔の記事が載ってくる。
もう一度説明を読んでみたところ、過去記事は「作成日」ではなく、「更新日」が新しい順に掲載される、とのこと。
つまりずっと昔の記事でも何らかの理由があって更新（再保存）をすることで掲載されるわけだ。
補足したり、修正した記事を目立たせることが出来るし、読んで貰いたい記事は定期的に再保存すれば常に上位に表示できるので使い方を工夫すればアクセスアップを期待できるかも。

ただ、記事本文が短いものだとどちらが本編か判らなくなりそうだし（例えばこの前の記事とか）、たくさんカテゴリーを設定している場合表示がすごく長くなってしまってちょっと邪魔かも。
（私の場合、通常1～2個、最大でも3つくらい。この程度なら許容範囲かな？）

デフォルトのままだと表示があまり目立たないので、KOROPPYさんのカスタマイズを参考にさせて頂いて私もCSSで調整してみた。

設定したCSSは次の通り。

.entry-recent-posts{
height:190px;/*全体の高さ*/
background-color:#ffffff;/*背景色*/
border:1px solid #768f10;/*枠線*/
padding: 5px; /*枠線の内側余白*/
}

.date-header
{
font-weight:bold;/*タイトル文字の太さ*/
padding-left:30px;/*タイトル文字の位置*/
}

.entry-recent-posts li{
background-image:url(画像のアドレス）;/*リスト行頭の画像*/
background-position: left;/*画像の位置*/
background-repeat:no-repeat;/*画像の繰り返し*/
padding-left:15px;/*リスト開始位置*/
text-align:middle;/*画像に対する文字の位置*/
}

こうやって書くとパパパッと出来たみたいに見えるけど、実はちゃんと書いてるはずなのに思ったように反映してくれなくてかなり長い時間「う～ん…？」と悩みつつ設定→確認を繰り返していた。
（特にリストマークのところ）
セレクタの「.entry-recent-posts」の最後の『s』が抜けていたことに気が付いたのは1時間以上経ってからでした…（泣）
そりゃあ、反映しないわけだ^^;

KOROPPYさんの該当記事にトラックバックさせて頂きました。

デザイン変更：菜の花

気に入っていた桜のデザインですが、季節もそろそろ終わりなので「菜の花」に変更しました。
（この時期だと菜の花でもちょっと遅いかな？^^;）

背景の菜の花の写真は「||| 空色地図 |||」さんからお借りしました。
柔らかな光を浴びた緑と黄色のコントラストが春らしくて爽やかです。

この菜の花もそうですが、春の花は黄色が多いですよね。
これはみんなが感じることみたい。
多分、自然の中で植物が生きるための進化の結果なのでしょうけど、それが人間の脳にもインプットされて「緑＋黄色＝春」という図式が出来上がっているような気がします。
それから、やはりこの菜の花を始め、春の野菜はちょっと苦みがあるものが多くて、しかもそれこそが「美味しい」と感じる部分だというのも興味深いです。
「苦み」って普通は「身体に悪いもの」という判断基準だと思うけど、この春野菜の微かな「苦み」「えぐみ」は逆に「身体を浄化してくれる」というイメージがあるのも不思議です。

デザインで工夫したのは下記の2点。
1.左サイドバーと記事部分に画像が掛かったときに文字が読みにくくならないように、背景に疑似半透明用の画像を敷いた
※エントリー部分は、この後「半透明」から「背景色：白」に変更しました。
2.左サイドバーはトップの位置を少し下げた

CSSはこんな感じです↓。参考まで。

/*記事表示欄の設定*/
.entry-body{
background-image:url(画像のアドレス);/*背景画像の指定*/
background-repeat : repeat ;/*背景画像繰り返し*/
border:1px solid #768f10;/*枠線*/
padding: 5px;/*枠線から本文までの余白*/
}

/*左サイドバーの設定*/
#left{
background-image:url(画像のアドレス);/*背景画像の指定*/
background-repeat : repeat ;/*背景画像繰り返し*/
margin-top:60px;/*表示開始位置下げ*/
}

デザイン変更：桜

使える期間が限定されてしまうのでどうしようか迷ったのですが、今年も業務多忙でお花見が出来そうにないので、ブログだけでも…と思い桜のデザインにしてみました。

透き通った青空に映えるきれいな桜の写真はいつもお世話になっている「・・・NOION・・・」さんからお借りしました。
他の装飾は殆どありません。
写真の美しさを楽しんで下さい。

ココログ：記事タイトルに付加されたリンク下線の消し方

3月22日、ココログの有料版（ベーシック/プラス/プロ）のバージョンアップが実施された。
有料版ユーザーにとって、このバージョンアップによって一番大きく変わったのは、

メインページ、日付ベースのバックナンバー、カテゴリー別のバックナンバーに表示される記事のタイトルに固定リンクを追加しました。

「ココログベーシック/プラス/プロ　アクセス解析メンテナンスのお知らせ」より

という部分だったと思う。

つまり、今までは記事のタイトルを表示していただけの部分が、上記で指定されている表示場所に限っては個別ページへのリンク（「固定リンク」）としての働きも持つようになった、ということ。
この仕様について私は以前から「そうなってたほうがいいなあ」という希望があったので、個人的には導入を歓迎している。
ただ、テキストがリンクになると表示のされ方が変化する、ということをもっとココログは意識するべきだったと思う。
単純にテキストにリンクが付加されるだけならまだしも、今まで何も表示されていなかった部分に急に意図しない下線が表示されるようになるのって見てる方にとってはけっこう違和感大きい。
（私も含め）「自分のブログの見え方」に拘っている管理人さんはすごく多いはず。
それなのにこうした変更についてただ「リンクが追加されました」だけで、デザイン的な部分に言及がないのはかなり不親切だなあ、という印象。
この仕様を導入して更にデザイン画面も変更するのだったら、ついでに「タイトル部分のリンク設定」もカスタム・テーマから簡単に設定できるような項目を追加すればいいのに…。

ということで、夕べやはりこの件で困惑していらしゃった涼さんのブログにもコメントを残してきたのだけれど、タイトル部分のリンク下線の消し方について。
（以下はカスタム・テンプレートを利用している場合の方法です）

管理画面にある「デザインの編集」から「カスタムCSSを編集」を開き、中のテキストボックスに

.content h3 a{
text-decoration: none;
}

と入力して保存→反映でOK。
これで下線が消えます。
下線が付いて困っている方は試してみて下さい。

ちなみにここは他の部分に設定してあるリンクのCSSが反映しているので、文字の下に点線が表示されるようにしてあります。
同じようにしたい場合は、

.content h3 a{
text-decoration: none;
border-bottom: 1px dashed #cccccc;
padding-bottom: 2px;
}
といった感じでどうぞ。
「border-bottom: 1px dashed #cccccc;」は線の太さ・種類・色、「padding-bottom: 2px;」は文字と線の間隔の設定です。
お好きなように変えて設定して下さい。

【'07/03/26 追記】
本日付けの「お知らせココログ」にこの件について機能追加予定である旨の報告が掲載された。

この機能変更により、現在のところ、デザインのカスタムテーマで記事タイトル色の変更はできませんが、近日中に色の指定ができるようにすることを検討しています。また、オリジナルテーマにつきましても、以前と同様の見た目になるような対応を行います。

「記事タイトルへの固定リンク追加につきまして」より

ココログにしては対応が早かったのはまあ評価するけど、導入は「いつ」と具体的な期日が書いてないのがちょっと気になる。
お知らせだけ出しておいて、延々待たせるということのないようにしてもらいたい。
ところでコレ、単純に「機能追加のお知らせ」であって「お詫び」ではないのね。
「別に悪いことしたわけじゃないし」ってスタンスなわけね、ふ～ん…。
（と、つい斜めから見てしまう^^;）

「最近の記事」を日付別にツリー化してみた

『風柳亭－別館：書庫のある庵』さんで、サイドバーの「最近の記事」を日付別にツリー化するスクリプトが公開されていたので、早速試してみました。

■【ココログ】『最近の記事』を日付別ツリー表示するスクリプト

設定方法は、風柳さんのブログにあるスクリプトをコピーしてサイドバーに貼り付けるだけ。簡単です(^^)
（但し、これは事前に「コメントのツリー化」をしてあることが前提。コメントがツリーになっていない場合は、あといくつか手順が追加されます。この手順も風柳さんの記事でちゃんとフォローされてます）

風柳さん、便利なスクリプト提供ありがとうございました♪

ついでに新着記事に「new」のマークが付くようにしてみました。
3日（72時間）以内に投稿した記事のトップに表示されます。
（このカスタマイズについても風柳さんのページに書いてあります）
ここの画像は「IMAGE」さんからお借りしました。
ありがとうございました(^^)

【追記】
下記の件について、風柳さんがスクリプトを修正して下さいました。
現在公開されているスクリプトでは、表示順（日付の降順/昇順、同じ日付に複数記事がある場合の降順/昇順）が任意で選択できます。
また、サイドバーのどの位置に置いても希望通りの表示になります。

※以下、もしかしたら私のブログだけの症状かもしれませんが、念のため。
最初、「最近の記事」より後ろにスクリプトを置いたら日付の表示が「古いものが上」になってしまったので、設置場所を「最近の記事」よりも前に変更してみたところ無事に「新しいものが上」（今の形）になりました。
表示順が思ったようにならなかったら、設置場所を少し変更してみるといいかもしれません。

別館ブログ（FC2）のデザインを変更

本の感想の過去ログだけを置いている別館「*untitled message* annexe」のテンプレートを変更してみた。

前回「テンプレートを変更したよ」と書いたのは'05年の10月16日のこと。
シンプルなデザインだった前のテンプレートはかなり気に入っていて特に変える必要がなかったのでそのまま使っていたけどさすがにちょっと飽きてきていた。
更には、せっかくあれだけの数の共有テンプレートがあって、私も管理画面には気に入ったのをたくさんストックしてあるので「そろそろ変えてみるか」ということに。

新しいテンプレートはlovehelmさん作の「13th_lovely」。
もう随分前にダウンロードしたテンプレートなので、またしてもプラグイン非対応^^;
でもこのブログにはそんなにいろんな機能を付ける予定もないし、何よりこのテンプレの雰囲気がとてもステキなのでこれに決定。

今回変えるに当たって、カスタマイズも少々。

■タイトル下に作家別インデックスヘのリンクを設定
前のテンプレートでは、記事の一番上に設置されたフリースペースに置いていたんだけど今回はそういうスペースがなかったのでタイトル部分にメニュー的にリンクを設置。
（フリースペースは自分で作れば出来そうだったけど、そこまで調べる気力はなかった^^;）

■アーカイブ（月別、カテゴリー）をプルダウン化
月別のアーカイブは前のテンプレでもプルダウンにしていたので、今回はカテゴリーも同様にしてみた。
設置方法は「はじめてのFC2ブログカスタマイズ」からスクリプトコードを拝借。

■「最近のトラックバック」表示方法の変更
サイドバーへの表示方法が、トラックバック送信元のブログ名だけだったので相手の記事タイトルも表示出来るように変更。
これは前のテンプレートがそういう表示方法だったので、その部分のHTMLをそのままコピーして置き換え。

■前/次エントリーへのナビリンクの設置
これが一番面倒臭かったかな。
FC2ではテンプレートの中で「ブロック変数」というのを使うことで、いろんな項目を設定できるんだけどココログにはないものなのでどうにも使い方がよく判らなくて出来上がるまでにかなり悩んだ。
でも「FC2ブログユーザーフォーラム」のトピックなどを検索して何とか無事設置。
出来てみれば「ああ、なるほど。こういうことなのね～」と理解できるから、やはり「自力でやる」というのはけっこう重要である。

■ブログ内検索の追加
これも前のテンプレートのソースをコピペで設置。

以上がHTML部分。
CSSは「リンクの装飾」「引用」「行間の設定」「フォントの種類」など細かいところをいくつか。

前回のときはまだココログのカスタマイズでCSSがすこ～しだけ判ってきた程度の頃だったのであまりにも自由すぎるFC2のカスタマイズは敷居が高すぎて付いていけなかったけど、今回はそのときよりはちょっと理解度が深まって「こうしたい」という希望と自分の出来ることがリンクしてきた感じ。
ここ1年ほどカスタマイズのブログ開設などを通してCSSの記述を試したり、確認したりしているうちに少しは知識が付いてきたと見える（笑）
（最近「FC2ブログフォーラム」もほぼ毎日覗いて自習してるし）
判ってくれば、HTMLを書き換えることでデザインや表示内容、方法を大きく変更できるFC2はやはり魅力的。
特にナビゲーション（「前」または「次」のページやエントリーへの誘導とか、エントリーの表示方法とか）部分が自分が好きなように変更できるのはすごく便利。
さすがに1から自分でデザインしようとは思わないけど、カスタマイズ用のテンプレートを拾ってきてそれを基に自分の思い通りに作ってみるのもいいかな～なんて大きな夢を見たりして（笑）

これからはもうちょっとこっちのブログのデザインも触ってみるようにしよう。
次はプラグイン対応のテンプレートにしてみようっと。

デザイン変更＜クリスマス＞

…と言っても見てお判りの通り、去年作ったデザインの使い回しです^^;

この間、PC内の画像の整理をしていたらこのタイトル画像を久々に見つけて、「けっこうよく出来てる（自画自賛^^;）から今年もこれでいっか～」ということに。
壁紙やラインも新しく選ぶのは大変なので、もう全面使い回しで行こう、と決めました。

但し、引用と個々のエントリーにちょっとだけ追加。
一番下の部分に別の背景画像を「横リピート」で敷いてます。
白い切り絵のような森のシルエット画像なので、その下（body）の壁紙と合わせると森に雪が降ってるみたいになりました。

タイトル画像は「A.SLASH」さん、その他の素材（壁紙、ライン）は「季節素材 雲水亭」さんの作品です。
（追加した壁紙も「雲水亭」さんからです）
ありがとうございました。

そういえば、「ココログデザイン」にもクリスマス仕様のテンプレートがいくつかありますね。
ココログのリッチテンプレートってあまりピンと来るものがないのですが、最近追加された『クリスマスリース』のテンプレートは、ココログにしては珍しく^^;シンプルで、文字が読みやすくて、しかも季節感がちゃんと取り入れられたいいテンプレートだな～と思います。
季節限定ものなのでお手軽に雰囲気を変えるにはちょうどいいのではないかと思います。
『雪の楽団』はたんじあきこさんのイラストはすごく可愛いけどクリスマスとは微妙に違う感じ…。
その分、もうちょっと長く「冬用」として使えるかも。