カテゴリー「カスタマイズ」の54件の記事

2009/09/06

第39回:携帯サイトのアイコンを変えてみよう

ココログを携帯で閲覧すると、記事タイトルやコメント、投稿時間などいくつかの項目の前にアイコンが表示されています。
携帯用のテンプレート(CSS)を全て自作にすることは(今のところ)プロプランとフリーでオプションパックアドバンスを契約しているユーザー以外は出来ませんが、その他のプランでもこのアイコンだけは変更できるようなので試してみました。

<変更前>
mobile-image1

<変更後>
mobile-image2

22_howto

事前準備1:アイコン用の画像を準備する

表示する画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
私は「Web*citron」様で提供されているテントウムシのアイコン(17px×20px)をお借りしました。
携帯用なのでどの程度の大きさを選択すればいいのか迷いましたが、普通にPCサイトに使う大きさのアイコンで問題なさそうです。
但し、必ずgif形式の画像を選択して下さい。

事前準備2:アイコンの名前を変更する

携帯用アイコンは表示させる場所によって名前が決まっています。
上記で準備したアイコンの名前を、下記のルールに従って変更します。

  • バナー用画像 : banner-logo.gif
  • カテゴリー用アイコン : category.gif(カテゴリー用のアイコン)
  • 投稿日用アイコン : clock.gif
  • コメント用アイコン : comment.gif
  • 投稿者名用アイコン : editor.gif
  • エントリー用アイコン : entry.gif
  • コメントエラー時用アイコン : notice.gif
  • プロフィールページへのリンク用アイコン : profile.gif

ファイルをアップロードするフォルダを作成する

PC用の素材をアップロードする場合はどのフォルダを使っても問題ありませんが、携帯用で表示されるアイコンは画像を保存する場所が決まっていますので専用のフォルダを作成します。

  1. 「管理ページトップ」→「コントロールパネル」→「ファイル」
    と進み「ファイルマネージャー」画面を開く
  2. 「現在のフォルダ」が[ホーム]になっているのを確認してその下の[ファイル名]からブログのサブドメイン名が付いているフォルダーを探してそのフォルダーを開く。
    <サブドメインとは>
    例えば、このブログの場合、アドレスが
    http://tea-for-me.cocolog-nifty.com/blog/
    ですので、サブドメインは「blog」になります。
  3. そのページの「新しいフォルダを作成」欄に
    「mobile-images」
    と入力し、「フォルダの作成」ボタンをクリックする。
    ※フォルダは必ずこの名前で作成して下さい。
  4. ページ内の[ファイル名]一覧に「mobile-images」フォルダが作成されているはずなので、更にこのフォルダを開く。

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

画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。
(注)フォルダは前項で開いた「mobile-images」フォルダを利用して下さい。

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

22_point

携帯用で表示されるアイコンは「アップロードするファイル名」と「素材を保存するフォルダ名」で指定されています。
この2つのどこかが間違っているときちんと表示されませんので注意しましょう。

尚、プロプラン、オプションパックアドバンスでの携帯画面CSS設定方法については、下記の公式FAQを参照して下さい。
『携帯版のブログのデザインをカスタマイズすることはできますか?』

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

2008/09/28

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

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

decoweb

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

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

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

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

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

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

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

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

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

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/16

カスタマイズ・サンプル<No.5:sewing>

秋っぽくなってきたので、暖色系のデザインに変えてみました。
「金魚」はやはり短命(?)に終わってしまいました…変えるタイミングが悪かったですね^^;

デザインサンプル<No5:sewing>

今回のデザインも(ご覧頂ければ判るとおり)CSSは特に新しいことはしていません。
今まで記事に書いたことを組み合わせているだけです。
変わったように見えているとしたら、それは全て素材の力です。

私の場合、ブログをカスタマイズするときに一番時間を掛けるのは「素材を探す」ことです。
ココログはプロプラン以外ではHTMLが変更できないので、ブログの構成を劇的に変えることは出来ません。
そのため何度かデザインを変更していくうちに素材を使う場所や使い方がある程度決まってきてしまいます。
(実際、CSSについては前回使ったものをコピーして素材と色の部分を書き換えたら殆ど終わりです(笑))
そうなったときに(他のブログと、または以前の自分のデザインと)差を出すために一番手っ取り早いのは、素材にこだわることじゃないかな、と思います。

私は出来るだけデザインを統一したイメージにしたいので、素材のなかでもセット素材を重点的に見ていきます。
欲しいのは壁紙とタイトル用のアイコン(大小)、それに区切り線用のライン。
その他、タイトル部分に入れるイラストやパーツが何かあれば言うことなし!です。

もちろん別々の素材サイトさんから単品でお借りして組み合わせることもありますが、素材は「作品」なのでやはりその作者さんの個性がすごく強く出ているんですよね。
同じようなイメージの素材なのに組み合わせてみたらちょっとぶつかってしまう…なんていうこともけっこうあります。
なのでもしセットではなく単品を使う場合も、出来る限り同じ素材サイトさんのものを使うようにしています。

で、今回の素材は、まず「WEB MAGIC」 様のセット素材のなかに秋のイメージにあった色合いの素材を見つけたので壁紙、アイコン、ラインをお借りして、まずこれでデザイン。
確認してみたところそれだけだとタイトル部分がちょっと白すぎて寂しかったので、壁紙と同系色のリボンが入った写真を「ミントBlue」様よりお借りしました。
この写真があるのとないのでは、随分印象が変わります。
(今回はたまたまイメージにピッタリの素材が見つかってラッキーでした♪この写真がなければ、このデザインはお蔵入りになっていたかもしれません…^^;)

あとは、スクロールバーやリンクなど色指定の部分を素材の色と同系色に変更して完了です。
これからの季節に合った落ち着いたデザインになったと思いますがいかがでしょうか。

各パーツのカスタマイズの詳細については 「記事一覧」のページからそれぞれ過去記事に飛んでみて下さい。

お世話になりました

「WEB MAGIC」
「ミントBlue」
「IMAGE」
■素材サイト 「PRISM」様<記 事内のボタン素材>


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


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

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)

より以前の記事一覧