バイオリン応援団*いちろーたのブログ

弦楽器奏者に役立つカラダのやさしい使い方をレッスンしています【自然な動きで弦楽器演奏を極める】がモットー。音楽活動のこぼれ話、Mac・iPhone、食べ物のこと書いてます。

*

【JUGEMブログ】で「続きを読む」を角丸ボタンに変える~CSSで角丸入門はこれでOK

   

 JUGEMブログで「続きを読む」のリンクを、好きな文言に取り替えて、しかも、CSSで作ったボタンにしてしまう手順をまとめました。

割と簡単です。

やることは大きく2つに分けることが出来ます。
・「独自タグ」をカスタマイズしやすいものに差し替える=HTMLを書き換える。
・《続きを読む》のリンクがボタンっぽくなるように飾る=CSSを書き換える。

「独自タグ」を、カスタマイズ用のものに差し替える

・HTML/CSSの編集に慣れていればこれを読めばOK。もしわからなかったり、上手く動かない場合は、次に紹介する独自タグ一覧を読みなおしてみるといい。
独自タグを2点追加 | JUGEMお知らせブログ
以下の2つの独自タグを追加しましたのでお知らせいたします。 この独自タグを使うことで、ブログの記事中に表示される「続きを読む」の文字を好きなものに変更することができます。 …
《続きを読む》を好きな文字列に置き換えるための独自タグの使い方説明…JUGEM公式リリースです
・JUGEM独自タグを簡単におさらいすること。なぜなら独自タグが正しく動作するための独特の作法があるからだ。
管理者ページ・マニュアル「独自タグ一覧」 | 無料ブログ(blog)作成【JUGEM(ジュゲム)】
JUGEMのテンプレートで使用されている独自タグの一覧です。 テンプレートをカスタマイズする際にご活用ください。 …
JUGEM独自タグ一覧…たまに追加されるのでJUGEマーさんは要チェック

《続きを読む》がボタンになるようにCSSで飾る

・まず基本をざっと読む→ CSSのみで角丸のボタンを作成する方法
・あとはいくらでも、好きなように装飾をしたらいい。
CSS3で角丸を実現するborder-radiusのコピペ用まとめ|VIVID COLORS DESIGN -ビビッドカラーズデザイン-
/*全体角丸*/ border-radius: 6px; /* CSS3草案 */ -webkit-border-radius: 6px; /* Safari,Google Chrome用 */ …
角丸に関するブラウザ毎おまじない
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ | コリス
デザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 …
CSS3でボックスシャドウと角丸を描く基本
5つの効果で作る、よく使うCSS3ボタンデザインサンプル集|最適化ノウハウコラム記事 ~スマートフォン最適化・スマートフォン対応サイト制作はTOUCH&SLIDEへ~
5つの効果で作る、よく使うCSS3ボタンデザインサンプル集 CSS3によって、グラデーションや角丸などの様々なデザイン表現を、画像で書き出すことなく表現出来るようになりました。 ここではボタンデザ …
CSSでの効果の組合わせ方を学ぶ。
以上です。
◆関係ないけど、書き終えてぶらぶらしてて見つけました
HTML5+CSS3 入門 | yoppa org
昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体 …
2010年10月多摩美の。

コツコツ努力が報われるメール講座《奏法リノベーション365》

 自分でできる演奏フォーム矯正のヒントをメール講座形式で毎日365日お届けします! 「読んでるだけなのに、なぜか演奏が楽になっちゃった」 「練習が楽しみになった」 というお声が届いてます。やったー!   読んでみませんか? 演奏が見ちがえるメール講座《1日5分の新習慣♪奏法リノベーション》

☆☆

バイオリン奏者のためのお役立ちヒント「弦楽サプリ」YouTube

読んでわからないことも、話を聞いたり、動きを見るだけでわかっちゃうこともありますよね〜 チャンネル登録すると、更新情報をキャッチできます。 いますぐ登録どうぞ♪
↓ ↓

 - ブログ書きの道具箱/Blog便利帳

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  関連記事

【TextExpander】便利だと噂のFill-In機能と、省略入力の展開がうまくいってなくて調べてたら哲人セネカに「人生の短かさについて」お説教をいただいてしまった件

テキスト入力支援ツール【TextExpander】を使い始めてはや3日が経ちまし …

slooProImg_20140612105845.jpg
最強タッグはコレだ!頭がよくなるA4方眼ノートと【ハイテックCコレト】で気分は上々!

 頭が良くなる方眼ノートとそれをフル活用するための最強3色ペン。 前回の記事(【 …

ブロガー心得として2013年新春に僕が選んだ座右の3冊はこれだ!あっ、4冊だーっ!

ブログを再開する気にさせてくれた本……伝えたい気持ちを後押ししてくれる本……まだ …

【Chrome Keyconfig】定番エクステンションを入れてみた!

どもー、眠くてテンション低めないちろーたです! Chome Keyconfigは …

no image
【TextExpander】入れてみた~プロ・ブロガーの道具箱を真似してゆくぞ!

ずーっと気になっていたTextExpanderをインストールしました! Text …

no image
【マインドマップ超入門】テンプレートを埋めるだけ☆マインドマップ日記をはじめてみよう

 マインドマップを続けるために、どうしたら良いかな?とおもって思い浮かんだのが「 …

slooProImg_20140610210405.jpg
【450円で始める・ラバーグリップつき3色ペンが気持ちいいっ♪】外資コンサル・東大合格者が書き味で選ぶ《ハイテックCコレト》

 質問があります。 あなたはノートを取るとき、色をいくつ使っていますか? 3色で …

【XHTML&CSS超高速コーディング術】をマスターしよう! ~手戻りゼロ・コーディングでブログ王に俺はなる!…なれるよねっ?!

どーも、あれこれ再入門中のいちろーたです。家を掃除していたら積読本BOXの中から …

【TextExpander】使い始めに、まずやることとは

前の記事に書いたようにTextExpanderをインストールしたわけです。 【T …

せっかく書くなら読んでもらうために書こう【ブロガーのための赤本】『プロ・ブロガーの 必ず結果が出るアクセスアップ テクニック100 ファンにも検索エンジンにも好かれるブログ運営の極意』を買ったよ!

 「ブロガー赤本」こと『プロ・ブロガーの 必ず結果が出るアクセスアップ テクニッ …