カテゴリー「ウェブログ・ココログ関連」の55件の記事

2008/09/28

第38回:DecoWeb提供のココログ用無料テンプレートを使ってみよう

(株)アクトクリエイティブが運営している「DecoWeb」という無料テンプレート配布サイトにてココログのテンプレートが配布されているのを発見したので使ってみました。

decoweb

ココログ@Niftyテンプレート

上記のページで気に入ったテンプレートを選んでファイルをダウンロード。
保存したファイルを解凍するとCSSファイルが入っているので、それをデザイン画面の「CSSの編集」欄に貼り付けて保存するだけでデザインが変更できます。
※「ダウンロード方法」「解凍方法」「編集方法」は上記ページ内に詳しい解説ページへのリンクがあります。

私が選んだのは「自然 葉っぱ 3カラム」という爽やか系のデザイン。
ホントはこっちの「Simple Modern 3カラム」のほうが好きだったのですが、タイトル部分の余白とか文字色とか調整する部分が多かったので今回は諦めました。

デザインの点数はまだ少ないのですが、ココログのリッチテンプレートとはちょっと違った感じのデザインなのでお気に入りが見つかるかもしれません。
また、ココログのリッチテンプレはCSSのカスタマイズは(原則的に)出来ませんが、こちらは

当サイトのテンプレートは、上記禁止事項に当てはまらないサイトに限り無料で利用でき、加工も自由です。
サイズ、色などもご自由に変更してご利用下さい。利用報告の義務もありません。
「利用規約」内「テンプレート利用範囲と制限」より

とのことなので、改造して自作デザインのベースとして使うことも出来そうです。
(但し、テンプレートのフッターに表示される『decoウェブ』ロゴ又は『無料テンプレートのdecoweb - テンプレート』テキストは削除出来ません。)

それに、他社のブログと同じデザインもあるので、ココログと例えばFC2のブログを同じデザインで運営することも可能ですね。
※他のブログにあるけど、自分のブログにないデザインをリクエストすることも出来るようです。→リクデコ

★ご利用の際は、「利用規約」を充分ご確認下さい。

| | コメント (0) | トラックバック (0)

2007/03/11

ブログ便利ツール:ブログ投稿支援ソフト

ブログの記事を書いていて、「(管理画面の)本文欄がもっと広かったらなあ」と思ったことありませんか?
私はここでも、メインのブログでも大抵の場合長文をダラダラ書いてそれを何度も推敲して仕上げるタイプなので、 あの大きさの記入欄では狭すぎて非常に使いにくいのです。
テキストだけの記事だったらテキスト・エディター(「メモ帳」とか)を使う、という手もありますが、リンクを貼ったり、画像を挿入したりしたい場合は同時に作業が出来ないのでそれも面倒。
また、ようやく書き上げて「さあ、投稿しよう!」とボタンを押したはいいけれど何故かエラーが出てしまい、慌てて前の画面に戻ったけれど書き上げた記事は全て消えていた…という経験をしたことがある人もいるのでは。
時間を掛けて丁寧に書いた記事でこれが発生するとかなりやる気がなくなりますよね。

ブログ投稿時にありがちなそんな悩みを解消してくれるのが『ブログ投稿支援ソフト』です。
「ブログ投稿」に特化した様々な機能を持ち、その中で作成した記事を自分のブログに投稿するのが主な機能です。

このソフトを利用することで上記に挙げた

  • 広い画面で記事が書ける
  • ブログ側のサーバーエラーによって投稿できなかった場合の記事の消失を防げる

などの他に

  • 複数のブログIDの管理が一つのソフトで完結出来る
  • ローカルへのログの保存が記事投稿と同じタイミングで出来る
  • 実際に使っているブログサービス以上のテキストや画像の装飾が簡単に出来る(利用するソフトによって差があります)

などの利点があります。

現在はいろいろなソフトが出ていますので、「投稿画面が使いにくいな~」と思ったことのある方は一度使ってみては如何でしょうか。
以下、私が知っているものをいくつかご紹介します。
(全て無料で入手出来るものです)

ubicast blogger

今、この記事を書いているのがこのソフトです。
記述欄の画面イメージはこんな感じ↓。

ubicast_blogger


とにかく記事の記入欄が画面いっぱいに広く取れるのが気に入ってます。
画像は保存してあるフォルダーからドラッグ&ドロップで簡単に挿入出来ますし、よく使う言葉やタグを「定型句」として設定してメニューから簡単に呼び出す機能もあります。
また過去に投稿した記事もソフト導入前に遡って取得可能です。

CSSの反映などがプレビュー出来ないことと、記事内のHTMLタグの編集を外部ソフト (私の場合はメモ帳)で開かなければならないのがちょっと不満なのですが、概ね使い易いです。
特にMSWord(ワード)などを使い慣れている人だったら、簡単に操作出来るのではないでしょうか。

Windows Live Writer

こちらも現在利用中。
ココログプラスの記事を投稿するときに使っています。
本当は機能的にこちらの方が気に入っているのでフリーもこちらを使いたいのですが、フリー版のID登録は出来るのに何故かカテゴリーが取得出来ないのです(T_T)
※一旦アカウントを削除して再登録したら無事に取得出来ました。フリーでも問題なしです。
(それ以外の投稿などは問題なく出来ます)

このソフトの特徴は、利用しているブログのCSS情報を取得して(させて)そのイメージ通りの画面で記事の作成が出来る点です。
例えば昨日投稿した記事の作成画面はこんな感じ↓。

windows_live_writer


背景色、記事欄の枠、引用部分などのCSSがちゃんと表示されています。
それから、画像の挿入が「ubicast blogger」以上に簡単で、例えば上記のようなPrintScreenだったら 「ubicast blogger」は一旦何らかの画像ソフトに落としてgifなりjpegなりで保存する必要がありますが、このソフトはprint screenボタンを押した後、そのまま「貼り付け」で挿入出来てしまうのです。
これは便利!
更にその画像の装飾も「影付き」や「枠+影付き」をボタン一つで設定できます。
また画面表示を「Normal」「Web Layout」「Web Preview」「HTML code」の4つのパターンから選択出来てHTMLの編集からプレビューまで同じソフトの中で完結出来るのも便利です。
(上記画面は「Web Layout」)

まだ英語バージョンしか公開されていない(でも操作は特に難しくはないです)、利用開始前の過去ログの取得が出来ない(多分)などいくつかマイナスポイントもありますが、私はかなり便利に使っています。

プラス版のブログでもうちょっと詳しい紹介記事(画像入り)を書いていますので、 興味があったら読んでみて下さい。
「Windows Live Writer(β版)」を使ってみる

【'07/06/02追記】
5/31に日本語バージョンがリリースされました!
マイクロソフト社のニュースリリース
英語版より機能が追加され、インターフェイスも洗練されて更に使い易くなりました。
オススメです!
ダウンロードページ

xfy Blog Editor(エクスファイ・ブログ・エディタ)

「ATOK」や「一太郎」を出している「ジャストシステム (JUSTSYSTEM)」製のソフトです。
先日ダウンロードしてみましたが、使い勝手が今ひとつだったのでその後全く使っていません^^;
機能はかなり多いようなので使いこなせれば便利になるのでは…。

プラス版ので使用した感想を書いてますので参考にして下さい。
ジャストシステムのブログ編集・ 管理ソフト「xfy Blog Editor」をダウンロードしてみた

feedpath

この「feedpath」はブラウザ上で利用できるサービスです。
上記で紹介したダウンロードソフトと同様複数のブログ投稿管理が出来ます。

このサービスで特徴的なのは、記事の投稿画面(テンプレート)に色々なパターンがあること。
例えば、「本」用の投稿画面はこんな感じ↓。

feedpath

本の感想を書く上で必要な項目が予め設定されているのです。
この項目は自分で入力することも可能ですが画面上部の「アフィリエイト:商品選択」ボタンを押して登録してあるサイトから該当の商品を選べばそこに記載されている項目が(画像も含め)自動的に入力されるようになっています。
自分でテンプレートを作ることも出来るようなので、ある程度決まったフォームで投稿することが多い場合に便利だと思います。

ここまでは自分で実際に利用したものでしたが、以下は利用経験がありませんのでご紹介のみです。

BlogWrite
ecto
blogeet
簡単ウェブログ投稿アシスト
Qumana

『ブラウザの中でデザインなどの各種設定から、記事の作成・投稿まで完結出来る』というのがブログの一番の特徴なのに、投稿するためにダウンロードソフトを使うのは流れに逆行している気もしますが、「自分が便利で使い易い」のも長く続けるコツだと思います。
自分に合ったツールがあったら試してみてはいかがでしょうか。


 

*この記事にコメントを書く*


| | コメント (7) | トラックバック (2)

2007/03/04

ココログを便利にする「ユーザーさん作成スクリプト」特集

ココログには表示方法や各種設定などをココログの標準仕様よりも使い易くしてくれる便利な自作スクリプトを公開されているユーザーさんがたくさんいらっしゃいます。
そんな便利なスクリプトを用途別にまとめてみました。(過去に記事にしたものも含めてあります)
カスタマイズの際の参考にして下さい。

【お願い】
下記のスクリプトの設置ついて、(過去に記事にしたものを除き)ここでは説明はいたしません。
動作の詳細や設置方法については該当のユーザーさんのブログ記事にてご確認下さい。
(過去に記事にしたものについては、その記事へのリンクを貼っておきます)
設置方法が判らない、上手く動かないなどの質問についてもこちらではお答え出来ませんので、作者様に直接お問い合わせ頂けますようにお願いいたします。
※設置方法が「マイリストのメモ欄に貼り付け」→「サイドバーに設置」の場合は「基本2: マイリストの作成→サイドバーへの設置」が参考になると思います。

<’10/07/18 追記>
ココログの仕様変更や利用しているテンプレートの種類によりスクリプトが動作しなくなる場合があります。
特に「オリジナル・テーマ」のテンプレートは既存のリッチテンプレートやカスタム・テーマとは構造が大きく違うため動作にエラーが出る可能性が高いようです。
<参考:【お知らせ】このブログ提供のスクリプトの大半はココログオリジナルテーマに未対応です(風流亭様)>
このエラーに関しても当ブログでは対応出来ませんので悪しからずご了承下さい。


 

サイドバーの表示 / 記事欄の表示 / コメント、トラックバック欄の表示  / ページフッターの表示

サイドバーの表示

■サイドバーの折り畳み

■「最近のコメント」のツリー化

■ブログ内検索

■カレンダー

■サイドバーのリストにスクロールバーを付ける

■「最近の記事」のツリー化

■バックナンバーをプルダウン化

■「カテゴリー」に最近の記事をツリー化

■サイドバー標準項目に任意の文字列追加

■「最近のトラックバック」を別窓で開く

■サイドバーのリスト項目数を減らす

■リストタイトルをコメントアウト(ココログ・フリー)

記事欄の表示

■記事欄「続きを読む」の表示変更

■アーカイブページに目次を付加

■トップページに過去記事へのリンクを設置

■ページ内記事の目次作成

■折り畳みで「続きを読む」

■記事欄で絵文字を使う

コメント、トラックバック欄の表示

■トラックバックURLをコピーする

■コメント、トラックバックの注意書き

■コメント欄で絵文字を使う

ページフッターの表示

■全ページ共通フッターの設置

お世話になりました

■素材サイト 「PRISM」様<記事内のボタン素材>
facet-divers
暴想
風柳亭-別館:書庫のある庵
LONGER THAN FOREVER
あずスタ
KOROPPYの本棚


*この記事にコメントを書く*


| | コメント (7) | トラックバック (1)

2007/01/28

カスタマイズ・サンプル<No.6:手帳>

デザインを変更しました。

カスタマイズ・サンプル<No6:手帳>

と言っても、新作ではなく去年の春に別ブログで使ったデザインの使い回しなのですが… ^^;
実は、別のデザインを考えて素材の調整などをしていたのですが、プレビューなどしているうちになんとなくこのブログとは雰囲気が合わないような気がしてきてしまったので、去年使って気に入っていたこちらのデザインに差し替えました。
元々作っていたものも出来が悪いというわけではないので、もう少し調整したあとに別ブログの方で使おうと思っています。

ということで、以下今回のデザインのポイントです。

■背景

body部分に「web*citron」さんの壁紙、 container部分に「ミントblue」 さんの写真を使わせて頂いています。
(バナー部分、記事欄、左右サイドバーは透明化しています)
CSSは下記の通り。

/*背景(チェック柄)*/
body
{
background-image:url(画像のurl);
}

/*背景(写真)*/
#container
{
background-image:url(画像のアドレス);
background-repeat:no-repeat;
background-position:top right;
}
/*バナー、記事欄、サイドバーの透明化*/
#banner,.content,#right,#left
{
background-color:transparent;
}

■サイドバーのリスト及び記事のタイトル

サイドバーのリストと記事のタイトル部分はボーダー(border)を使って付箋紙風に見せています。

/*サイドバータイトルの背景*/
.sidebar h2
{
{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #e7ccaf;
width: 140px;position: relative;
font-family: "MS UI Gothic",serif;}
}

/* 記事タイトルの背景 */
.content h3
{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #e7ccaf;
width: 350px;position: relative;
left: -20px;font-family: "MS UI Gothic",serif;}

■コメント欄 及び 引用部分

コメント欄と引用部分にはトップに置いたのと同じ画像のモノクロ版を背景にしてあります。

.comment-body
{
  background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:top right;
border:#58393f 1px solid;
padding:5px;
  }

/*引用*/
blockquote
{
border:1px dashed #cc9966;
margin:10px 15px;
padding: 10px;
background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:top right;  }

こんな感じかな。

もし使える部分がありましたらご自由に使ってください。
カラーコードや線の太さ、種類、余白の数値などの変更はご自分で調整してくださいね。

上記以外で「この部分はどうなってるの?」というご質問がありましたら、コメント欄にでも書き込んでください。

こちら(↓)に表示サンプル用ページを用意しました。
上記のキャプチャ画像では見えない部分も表示してあります。
サンプル:手帳


*この記事にコメントを書く*


| | コメント (13) | トラックバック (0)

2006/11/04

第37回:記事欄を角丸の画像で囲んでみよう

ずっとやりたかったけど設定が面倒臭そうで先送りにしていた「記事欄角丸」をようやく実現しました!
やってみたら、思った通り面倒臭かったです…^^;

ついでにデザイン変更もしてみました。
タイトル画像は「ミントblue」様、背景のドット柄素材は「素材の庭園」 様からお借りしました。
ありがとうございます♪

記事欄角丸画像サンプル


JavaScriptとCSSを使って角丸を実現するといった方法もあるようですが、私が取った方法は「角丸の画像を準備して、それをCSSで背景に設定する」という方法です。

手順

事前準備:角丸画像を準備する

entry_base


  1. 画像ソフトを使って上記のような角丸画像を作成する。
    ※大きさは記事欄の幅に合わせますが、設定サイズちょうどではなく左右に少し余裕があったほうがいいと思います。
    ※私の場合は、幅390px / 高さ81pxで作成しました。
    (上記の画像は縮小してあります)
  2. 上記の画像を「entry-top」用、「entry」用、「entry-bottom」用に3分割し、 それぞれ別の名前を付けて保存する。

    A.「entry-top」用
    角丸画像「entry-top」用

    B.「entry」用

    角丸画像「entry」用

    C.「entry-bottom」用

    角丸画像「entry-bottom」用


ファイルをココログにアップロードする

画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。

CSSを編集する

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は
    『第3回:カスタムテンプレートを作ってみよう』
    を参照して下さい。
  2. 「編集」画面のCSS記述欄に

    .entry-top{
    background-image:url(A.「entry-top」 用画像のURL);/*画像の指定*/
    background-repeat:no-repeat;/*画像の繰り返し:なし*/
    padding:40px 30px 0px 20px;/*画像内側の余白:上右下左*/
    margin:-5px -10px ;/*画像外側の余白:「上下」「左右」*/
    background-position:top center;/*画像の位置*/
    }

    .entry{
    background-image:url(B.「entry」 用画像のURL);/*画像の指定*/
    background-repeat:repeat-y;/*画像の繰り返し:縦方向へ繰り返し*/
    padding:5px 30px 5px 20px;/*画像内側の余白:上右下左*/
    margin:-12px -10px ;/*画像外側の余白:「上下」「左右」*/
    background-position:top center;/*画像の位置*/
    }

    .entry-bottom{
    background-image:url(C. 「entry-bottom」 用画像のURL);/*画像の指定*/
    background-repeat:no-repeat;/*画像の繰り返し:なし*/
    padding:40px 30px 0px 20px;/*画像内側の余白:上右下左*/
    margin:-12px -10px;/*画像外側の余白:「上下」「左右」*/
    background-position:top center;/*画像の位置*/
    }

    上の3つの指定でメインページはきちんと表示できたのですが、 個別ページではコメント欄などがはみ出すなど不具合が出たので下記の設定を追加しました。

    .entry-body,.entry-trackback,.entry-comment,comment-content,.comment-form
    {
    padding:10px 0px 0px 5px;
    margin:-5px -10px;
    }

    #comment-text textarea, #comment-text-field textarea {
    width: 330px;
    }
  3. 設定が完了したら「変更を保存」ボタンを押す。
    ※保存する前に見え方をチェックしたい場合は「確認」ボタンを押してプレビューしてみて下さい。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか?

ここがポイント

  • 今回の角丸画像はフリーソフト「J-Trim」を使いました。
    画像を切り取るための「角丸切り取り」という機能があるのですが、 何もない新規のキャンバスでそのまま使ったところ今回のような角丸画像が簡単に作成できました。
    「WoodyBells」 様内「J-Trim」
    ※「J-Trim」は高機能なのに使い易い便利なソフトでオススメですが、インストールについては自己責任でお願いいたします。
  • 「まろぶろぐ」の森イチローさんが〈角丸作成専用プログラム〉を作っていらっしゃいます。
    Lib/エントリ画像作製
    角丸画像を自分の好みの大きさ・色・形で作成出来るようです。
    利用してみてはいかがでしょうか。【'07/06/16追記】
  • 今回のカスタマイズのポイントは「余白」です。
    上記のCSS内の数値はあくまで作った画像を利用した場合の設定であり、画像の大きさ、 切り取り方の違いなどで微妙に違ってくると思います。
    最初は上の設定をコピーして適用してみて、ずれるようであれば設定を細かく変更しながらプレビューを繰り返してみて下さい。
    (私もプレビューを50回以上繰り返しました^^;)
    余白の設定については下記のページなどで確認して下さい。
    「TAG index」 様内 「ボックスのマージン (外側の余白)を指定する」/ 「ボックスのパディング(内側の余白)を指定する」
  • 画像の幅が大きなものとかはみ出しちゃってますね…お見苦しくてスミマセン(T_T)
    後日修正しておきます。

    画像を多用されている方はこのあたり、注意が必要かと。
    【'06/11/05追記】
    一応目に付いたところは修正しました。
    いずれにしても幅が狭くなるので、このブログのように長文が多い場合はちょっと読みにくいかも知れません。
    レイアウトを3カラムじゃなく、2カラムにして記事欄の幅を広げた方がいいかも。

 

お世話になりました

■素材サイト「ミントBlue」
■素材サイト「素材の庭園」
「TAG index」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (8) | トラックバック (1)

2006/09/24

第36回:記事内に挿入した写真にキャプション(説明文)をつけてみよう

先日『みんなで解決!広場』で「写真にキャプションが付けたい」という質問を見て検索した結果、「All About」の下記の記事を見つけました。

キャプション付き画像を左右の端に寄せたい

アドレスをつけて回答したのですが「よく判らなかった」という返事が返ってきてしまったので、僭越ながら内容をココログ用にアレンジしてみました。
※以下の内容は、AllAbout掲載の該当記事を全面的に参考にさせて頂きました。ありがとうございました。


写真にキャプション:サンプル
*江戸東京博物館内「モダン亭」にて*

実際にCSSを適用すると、こんな感じで画像の下にキャプションが表示されます。
CSSで文章の回り込みを右(または左)に設定するので、画像の後ろにキャプション以外の文章を記述すると画像の横に表示されます。


手順

CSSを編集する

  1. 「管理ページトップ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄に

    div.imagebox {
       float: right;/*画像の配置場所*/
       font-size: 80%;/*キャプションの文字サイズ*/
       color: gray;/*キャプションの文字色*/
    }

    を全て半角英数で記述する。
    ※上記のCSSは全て「All About」 に記載してあるタグのコピーです。
  3. 「変更を保存」ボタンを押す。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります。

記事に画像を挿入する

記事欄への画像の挿入方法は
基本3: 記事欄への画像の挿入
を参照して下さい。
※この際に、<2.画像オプション>→<カスタム設定>にて「テキストの回り込み」を『指定なし』(チェックを外す)にして下さい。
※上記で設定したCSSで既に回り込みが設定されているためです。

画像タグにCSSを呼び出す記述を追加する

  1. (「リッチテキストモード」の場合)「HTMLの編集」画面に切り替える。
    ※「プレーンテキストモード」の場合はそのままでOKです。
  2. 画面に

    <img alt="画像の名前" title="画像の名前" src="画像のアドレス" border="0"  />

    ※「カスタム設定」でサムネイルやポップアップを設定した場合はもっと複雑なタグが記入されます。
    というようなタグが表示されるので、上記のタグを

    <div class="imagebox">~</div>

    で囲む。
  3. 更に、最後の</div>の前にキャプションとなる文章を前後に<br />を付けて記述する。
    ※つまり、上の画像タグの場合だったら、

    <div class="imagebox">
    <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0"  />
    <br />キャプション<br />
    </div>

    になります。
  4. 記事が書き終わったら「保存」ボタンを押す。
  5. ブログを表示してイメージ通りに出来ているかどうか確認する。

    以上です。
    上手くできましたか?

ここがポイント

  • 「カスタムCSS」内に記述するCSSのそれぞれのプロパティの値(上記では「right」「80%」「gray」) は自分の好きなようにアレンジして下さい。
    ここではそれぞれ「left」「small」「orange」にしてあります。
    ※色はいつものようにカラーコード(#●●●●●●)で指定してもOKです。
  • キャプションの文章が長くなる場合は、画像の幅に合わせて適当なところで改行(<br />)を入れて下さい。
  • 画像横の文章の回り込みを解除する場合は、解除したい場所(文章やタグの最後)に

    <br style="clear:both;" />

    を記述して下さい。

お世話になりました

「All About」
■素材サイト 「PRISM」様<記 事内のボタン素材>


*この記事にコメントを書く*


| | コメント (2) | トラックバック (1)

2006/09/02

第35回:サブタイトル部分に簡易メニューを付けてみよう

KOROPPYさんのブログを参考に、任意の記事にジャンプする(させる)ための簡易メニューをサブタイトル部分に付けてみました。

サブタイトルに簡易メニュー:サンプル

 


参考にさせていただ いたのは以下のエントリーです。
■KOROPPYの本棚様: 「メニューをつけてみました」 / 「サブタイトルの表示をアレンジ」
ありがとうございました♪

KOROPPYさんは画像(バナー)にご自分で文字入れをしたものを使っていらっしゃいますが、私はサブタイトル部分にはリンク用のタグだけを入れてそのリンクをCSSで装飾する方法をとりました。
処理方法は以下の通りです。

手順

リンク用のHTMLタグ、及びCSSタグを準備する

サブタイトル部分の変更は、反映前に「確認」することが出来ません。
保存するとそのまま(少なくともトップページには)反映してしまうので変更する場合は、事前準備をしっかりしておく必要があります。

〈HTMLタグ〉
リンク先を指定するタグです。

  1. リンク用のHTMLを「メモ帳」などに記述する。

    <a href="●●●">■■■</a>
    ※●●●=リンク先のアドレス、■■■=サブタイトル欄に表示する文字列を代入

    ※いくつ書いても大丈夫ですがタイトル表示部分の幅を考えて並べて下さい。
    ※折り返す場合は<br />タグを間に入れましょう。
  2. 記述したHTMLを

    <div class="menu">

    </div>

    で挟む。
    ※下記のCSSを適用するためのクラスをここで指定します。
    ※上記の例でいくと

    <div class="menu">
    <a href="●●●">■■■</a>
    </div>

    となります。
    ※CSSを適用しない場合は、この<div>タグは不要です。

〈CSSタグ〉
上記のHTMLを装飾するためのタグです。

  1. リンク装飾用のCSSタグを「メモ帳」などに記述する。
    ※セレクタはそれぞれ下記のような形で指定します。

    /*未訪問*/
    #banner h2 div.menu a:link{~}

    /*訪問済み*/
    #banner h2 div.menu a:visited{~}

    /*マウスでポイントしたとき*/
    #banner h2 div.menu a:hover{~}

    ※{~}内の要素はそれぞれ好きなように記述して下さい。
    ※私は以前
    第28回: リンクの装飾を設定してみよう
    でサンプルに使った「枠線を付けてボタン風に表示」のスタイルを使ってみました。

サブタイトル欄にHTMLタグを入力する

  1. [管理ページトップ]→[ブログ]タブ→[設定]→[基本設定]画面を開く。
  2. 上記で書き出した〈HTMLタグ〉を全文コピーして、「ブログのサブタイトル(キャッチフレーズ)」欄に入力する。
  3. 画面一番下の「変更を保存」ボタンを押す。
    ※保存が終了すると、
    『設定変更の内容を保存しました。変更をサイトに反映させるには、サイトへの反映が必要です。』
    の文章と「サイトに反映」ボタンが表示されますが、ここでは反映せずに次の作業に移ります
    ※CSSの適用が不要な場合は、ここで「反映」してしまって構いません。

カスタムCSSにCSSタグを入力する

  1. [管理トップページ]→[ブログ]タブ→(便利メニューから)[デザインの編集]→[カスタムCSSを編集]
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    ※CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 上記で記述したCSSを「編集」画面のCSS記述欄に全文コピー&ペーストする。
  3. 「変更を保存」ボタンを押す。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまくできましたか?

ここがポイント

  • KOROPPYさんのように画像(バナー)を使ってリンクを張る場合はCSSは不要です。
    サブタイトル欄にHTMLタグのみを入力して、「保存」→「反映」させて下さい。
  • この方法ならどのページから入ってもリンクが見えますので「目次」や「ブログポリシー」「注目記事」 など読んで欲しい記事へのリンクの他、別ブログ、掲示板への誘導など工夫次第でいろいろと便利に使えると思います。
    試してみて下さい。

お世話になりました

「KOROPPYの本棚」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメ ントを書く*


| | コメント (9) | トラックバック (4)

2006/08/12

第34回:ココログを携帯で閲覧してみよう

【'07/04/05追記】
本日より、ココログが携帯で利用出来るようになりました。
URLの変換をしなくても自分のブログアドレスにアクセスすれば閲覧出来(自動的に携帯用アドレスに接続される)、コメントも投稿可能。
また閲覧だけでなく管理画面へログインし、記事の作成、コメント・トラックバックの管理も出来るなどとても便利になりました。
詳しい使い方はココログ公式サイト内の下記ページを参照して下さい。
ココログの携帯閲覧サービス(β版)スタート!
ココログ通信「ブログパーツ・携帯対応特集」

以下の記事は、『過去の遺物』ということで…(笑)


ココログは携帯での閲覧について公式ではサポートされていません。('06.08現在)
最近は携帯の性能がよくなってきているのでそのままのURLでも閲覧可能になる場合もあるようですが、機種や環境に影響されてしまうのが現状です。

でもやっぱり外出先でもお気に入りココログのチェックがしたいなあ…という場合のために、ココログのURLを携帯閲覧用に変換してくれるサービス 「ココモブ」があります。
「ココモブ」は、ココログ開始当初からココログ利用者だった「健康な生活を送ろう!」 のCurryさんが個人で作られた検索サイト「ココログル」 (現在は検索機能を停止しています)の中のサービスとして提供されているものです。

今回はこの「ココモブ」を使ってお気に入りのココログを携帯で読む方法について説明します。

手順

ココログのURLを携帯閲覧用URLに変換する

この方法にはPCサイト上で変換したものを携帯へメールで送る方法と、携帯用のサイトに直接アクセスして変換する2つの方法があります。
■PCサイトを利用する場合についてはこちら
■携帯用サイトを利用する場合はこちら
からどうぞ。

PCサイトを利用する

「ココモブ(PC用)」にアクセスする。

閲覧したいココログが一つの場合は「特定のココログ(1つ)を携帯から見る」、複数のココログの新着記事を一気に表示させたい場合は「ココモブリーダー」、どちらかを選択する。

《「特定のココログ(1つ)を携帯から見る」を選択した場合》

  1. 画面内1.の空いている欄に閲覧したいココログのURLを入力する。

    ※例えばこのブログの場合は、

    Moblog1
    となります。
    フリー以外のプランを利用している方は、真ん中の 「cocolog-nifty」 の部分をご自分のURLに合わせて変更して下さい。
  2. 正しく入力出来たら「表示」ボタンを押す。
  3. 下の空欄に携帯用に置き換えられたURLが表示されるので、これを全文コピーしてメールで携帯に転送する。
  4. 携帯に着信したメールからURLにアクセスする。

    ※この機能を利用した場合、下記のリンク先のような表示になります。
    携帯用 「初めてのココログ・カスタマイズ」

《「ココモブリーダー」を選択した場合》

  1. 画面内1.の空いている欄にココログのURLの一部を入力する。(1回につき最大5件)

    ※入力する部分は画面の説明にもありますが
    http://aaa.○○-nifty.com/bbb/のaaaの部分
    となります。
    例えば、このブログの場合、URLが
    http://tea-for-me.cocolog-nifty.com/blog/
    ですので、入力するのは
    tea-for-me」 の部分になります。
  2. 「リストにサイト名を表示しない」のチェックを必要に応じて「ON」「OFF」する。
  3. 「表示」ボタンを押す。
  4. 下の空欄に携帯用に置き換えられたURLが表示されるので、これを全文コピーしてメールで携帯に転送する。
  5. 携帯に着信したメールからURLにアクセスする。

    ※この機能を利用した場合、下記のリンク先のような表示になります。
    ココモブリーダー

携帯用サイトを利用する

  1. 携帯のブラウザで「携帯用ココモブ(http://web.or.tv/m/)」へ直接アクセスする。
  2. 「ココログを見る」をクリックする。
  3. 上記の《「特定のココログ(1つ)を携帯から見る」を選択した場合》の1.で書いたのと同じ画面が出てくるので、 同じように読みたいココログのアドレス(PC用)を入力する。
  4. 「表示」ボタンを押す。
  5. そのブログの記事一覧(トップページ)が表示される。

    ※この他にも「新着記事一覧」「記事検索」「話題のキーワード」の3つのサービスが利用できます。
    ※それぞれのサービスでは、記事のタイトルが表示されるのでそのタイトルをクリックして閲覧して下さい。
    ※表示された各記事の一番下に「記事一覧」というリンクがありますので、ここをクリックするとそのココログの(携帯用) トップページに飛べます。

ココログの携帯用URLのQRコードをブログに貼り付ける

上記のサービスを利用して携帯用に変換したアドレスを、QRコードにしてブログに貼り付けてみます。

●携帯閲覧用のQRコードを作成する

  1. 上記の《「特定のココログ(1つ)を携帯から見る」を選択した場合》を利用して、自分のココログのURLを携帯用に変換する。
  2. 「QRCode.jp」にアクセスする。
  3. 画面にある空欄に1.で作成した携帯用のURLを入力する。
  4. 「サイズ」と「色」を指定して「QRCode生成!」ボタンを押す。
    ※サイドバーに表示する場合「サイズ」は「2」または「3」くらいがいいと思います。
  5. 入力欄の下に「QRCODEが生成されました。」の赤文字とともに、その下に自分用のQRコードが表示されたのを確認する。
    ※「サイズ」「色」が気に入らない場合は何度でも作り直し出来ます。
  6. 生成されたQRコードの上にある「直リンク」の文字をクリックしページを表示する。

●サイドバーにQRコードを表示する

  1. 表示用のマイリストを作成する。
  2. 作成したマイリストに

    <img src="■■■">
    ■■■には、上記6.で表示されたページのアドレスを代入する。

    のタグを入力する。
  3. マイリストをサイドバーに表示させる。
  4. マイリストの作成、表示については
    「基本2:マイリストの作成→サイドバーへの設置」
    を参照して下さい。

【'06/09/03:追記】
上記でご紹介した「QRCode.jp」さんに昨日あたりからアクセス出来なくなっているようです。
同様のサービス「QRコードのQRy(キューリー)」さんの 「QRコードジェネレータ」を見つけましたのでご紹介しておきます。
QRコードジェネレータ
このサービスは生成画像への直リンクは出来ませんので、画像を一度自分のPCに保存→ココログにアップロードしてから利用して下さい。
アップロードの方法については下記を参照して下さい。
基本1: ファイルのアップロード
マイリストへの追加については上記に書いたのと同じです。

以上です。
うまくできましたか?

ここがポイント

  • 「ココモブ」用のURLでは記事とコメントは閲覧出来ますが、画像の表示、 コメントの投稿は出来ません
  • 記事中のリンクについては、リンク先が他のココログであれば同じように閲覧出来ますが、他のウェブサイトは閲覧出来ません。
  • 「ココモブリーダー」の設定はPC用サイトでしか出来ません。

お世話になりました

「ココモブ」
「QRCode.jp」
「QRコードのQRy(キューリー)」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメ ントを書く*


| | コメント (4) | トラックバック (0)

2006/08/06

カスタマイズ・サンプル<No4:金魚>

ご無沙汰しています。久々の更新です^^;

前回デザインを変更してから2ヶ月も放っておいたので、取りあえずデザインのみ変えてみました。
「カスタマイズ方法」でなくてゴメンナサイ。

今回は「金魚」です。
ちょっと涼しげに…と思ったのですが、大きなアイコンを使いすぎて却って暑苦しくなってしまったかな?^^;
素材は前回のデザイン同様『季節素材 雲水亭』 様からお借りしました。

kingyo


相変わらずそんなに凝った技は使っていません。
強いていえば下記2点のみ。

タイトル画像

タイトル部分の画像は画像加工ソフトを使って作成した画像(大きさ: 800×150。金魚の絵以外の部分は透過してます)を、カスタム・テーマのタイトル画像指定を使わずに直接CSSで指定しています。
CSSはこんな感じです。

#banner{
padding-top:10px; /*タイトル文字の縦位置調整*/
padding-left:80px; /*タイトル文字の横位置調整*/
background-image:url(画像のurl); /*タイトル画像の設定*/
background-repeat:no-repeat; /*タイトル画像の繰り返し(なし)*/
background-position:right top; /*タイトル画像の位置(右上)*/
height:170px; /*タイトル部分の高さ*/
}

「テーマの編集」でも設定できるしその方が簡単なのですがこれを使うと何故か「確認」しても画像が反映してくれないことが多く調整が面倒なので、今回は直接CSSで指定してしまいました。
「テーマの編集」を利用する場合は下記のエントリーを参考にして下さい。
第4回: タイトルにオリジナルの画像を設定してみよう

日付の右端のアイコン

タイトル部分にアイコンを付けてしまうと表示できる文字数が少なくなってしまいます。
特に今回のアイコンは大きめなのでタイトル名が長いこのブログで使うと何度も折り返しが出てあまり格好良くないので、タイトルの上の「日付」 部分にアイコンを付けてみました。

.content h2{
background-image:url(画像のurl); /*画像の設定*/
background-repeat:no-repeat; /*画像の繰り返し(なし)*/
background-position:center right; /*画像の位置(右端の中央)*/
height:36px; /*高さの設定*/
}

以上です。

お世話になりました

「季節素材雲水亭」
■素材サイト 「PRISM」様<記事内のボタン素材>

 


*この記事にコメ ントを書く*


| | コメント (2) | トラックバック (0)

2006/06/20

第33回:カレンダーの背景に画像を表示してみよう

カレンダーの背景に画像を表示してみました。
こんな感じになりました。↓

calendar_bg


う~ん、見やすいかどうかは微妙ですね^^;

手順

事前準備:背景用画像を準備する

表示する画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

私は「NOION」 様でお借りした素材(200px×150px)を使いました。

ファイルをココログにアップロードする

画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックして画像が保存されているページを開く。
    ※「リンク」ボタンではなく、画像(ファイル)の名前のリンクをクリックして下さい。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は
    『第3回:カスタムテンプレートを作ってみよう』
    を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    /*カレンダーの背景画像*/
    #calendar table{
    background-image:url(●●●); /*画像のURL*/
    background-position:center; /*画像の位置*/
    background-repeat:no-repeat; /*画像の繰り返し:なし*/
    }

    を記述する。
    ※/*~*/で囲まれた部分以外は全て半角英数で記述して下さい。
    ※●●●には上記で保存した画像のURLを入力して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』 
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • ここではカレンダーのタイトル以外の曜日、日付部分に背景が来るようにしたのでセレクターに「#calendar table」 を使いましたが、カレンダーには他にもいくつかセレクターがありますので部分的に画像を変更することも可能です。
    #calendar → カレンダー全体(○年○月部分も含む)
    #calendar table → カレンダーの曜日+日付部分
    #calender caption → カレンダーのタイトル(○年○月部分)のみ
    #calendar th → カレンダーの曜日部分のみ
    #calendar td → カレンダーの日付部分のみ
  • それぞれのセレクターに対して「background-image」ではなく 「background-color:#○○○○○○」と指定すれば画像でなく、背景色の変更が出来ます。
  • 背景画像を敷き詰めタイプにする場合は「画像の位置」と「繰り返し」の指定は不要です。
    画像のURLのみ指定して下さい。
  • 参考画像で日付の色が変わっている部分は記事を投稿した日付です。
    このカスタマイズについては、
    『第14回:カレンダーの投稿した日付に色を付けてみよう』
    を参照して下さい。

お世話になりました

「NOION」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (11) | トラックバック (3)

より以前の記事一覧