Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第20回】ここまでのまとめ(第11回〜第19回)こんにちは、ほくほくです。このブログも、始めてから随分と記事が溜まってきました。そこで今回は、第11回から第19回までに掲載した記事の概要をご紹介したいと思います。それ以前の記事についてはこちらをご覧下さい。◆【第10回】ここまでのまとめ(第1回〜第9回)【第11回】「自由形式」にタイトルと枠線を表示するSeesaaブログのサイドバーにおいて、自由度の高いコンテンツを掲載可能な自由形式パーツの編集方法をご紹介しました。具体的には、他のサイドバーコンテンツと同様、タイトルを表示したり、枠線を設定する方法をご紹介しています。この回に初めて、コンテンツHTML編集画面の操作方法もご紹介しました。Seesaaブログを運用しコンテンツを充実させていく中で、最も使用頻度が高い手法だと思います。【第12回】ボックス広告の枠線を調整する第6回の記事でサイドコンテンツに枠線を付けた際、ボックス広告には中途半端な枠線が表示されてしまいました。その解決方法を掲載しています。解決方法としては、サイドコンテンツのタイトルを追加表示する方法と、枠線を表示させない方法の2つを解説しています。これで、サイドコンテンツに枠線を設定する作業が、一通り完了しました。【第13回】CSSのクラスの調べ方ブログのCSSをカスタマイズする際、最も重要なのは、どの部分にどのCSSが適用されているかを知ることです。そこでこの回では、実際に自分のブログのHTMLソースコードを見て、適用されているCSSを確認する方法をご紹介しました。一度じっくりやっておくと、その後のカスタマイズ作業が容易になります。【第14回】記事の枠線と文字のスペースをあけるブログの記事を見やすくする方法として、文章と枠線との間隔を調整する方法をご紹介しました。使用したのは、CSSのpaddingプロパティです。marginプロパティと同様、paddingプロパティもブログのテンプレートには頻繁に使用されているので、その効果について把握しておくと良いでしょう。【第15回】サイドコンテンツの枠線と文字のスペースをあける第14回と同様にpaddingプロパティを使用して、今度はサイドコンテンツの文章と枠線との間隔の調整方法をご紹介した回です。ブログのサイドコンテンツは、特に限られたスペースにコンテンツを盛り込む必要があるので、paddingは適切に設定してあげましょう。【第16回】画像サムネイルサイズを変更するこの回から、ブログ用の画像加工方法の紹介に入っていきました。ブログに掲載する画像の表現力を高めたり、ブログのテンプレートそのものを修正する場合には、画像加工のスキルも必要になってきます。この回にまずご紹介したのは、Seesaaブログに画像をサムネイルで貼りつけた際の、そのサムネイルサイズの調整方法です。【第17回】画像のサイズを調整するこの回では、画像のサイズを調整する方法を、フリーソフトのPictBearを使ってご紹介しました。この画像サイズの調整は、非常に使用頻度の高い手法です。【第18回】画面の一部をキャプチャする画像の加工ではなく、画像の取得方法をご紹介した回です。この回では、一般的な画面のキャプチャ方法と、WinShotというフリーソフトを使った、一部キャプチャ方法をご紹介しました。第17回と同様、こちらも非常に使用頻度が高い手法で、私はほぼ毎日使用しています。【第19回】画像の切り出しを行う取得した画像のトリミングを行う方法として、Excelを使った方法をご紹介しました。自由度の高い画像加工方法として知っておくと、何かの時に役立つ方法です。以上が、第11回から第19回までの記事掲載内容になります。ここまでの作業で、デフォルトのテンプレートとその内容を、だいぶ自由に編集できるようになったかと思います。画像加工の解説があと1回残っていますが、その後は、今度はテンプレートの大きさを変えていく方法の解説に入っていきたいと思います。【第19回】画像の切り出しを行う今回はExcelを使った画像の加工方法をご紹介しましょう。こちらの画像をご覧下さい。これはSeesaaブログのCSSを編集する画面のキャプチャに枠線やコメントを記入したものです。この画像では、以下の作業を行っています。画面キャプチャの不要な部分を削除している。1画面に収まらない画面を、複数取得して結合している。画面画像に枠線やコメントを記入している。画像に対してこれらの作業を実施する場合は、Excelがとても便利なのです。今回はその方法をご紹介します。今回の作業では、第17回でご紹介したPictBearというツールも使用します。必要に応じて第18回でご紹介したWinShotを併用しても良いと思います。それでは、上記画像を取得する方法を順に説明していきます。取得した画面キャプチャを、Excelに貼りつけ、画像を加工する準備をします。<手順1>Excelを開く。(注)ここでは、画像が分かりやすいように、Excelのシート全体を青色に塗りつぶしています。<手順2>取得したい画面キャプチャを、Ctrl+PrtScキーを押下して取得し、Ctrl+vキーなどでExcelに貼りつける。(注)ここでは、画像全体がわかるように、Excelの表示倍率を少し縮小しています。このExcelに貼りつけた画像を、これから加工していきます。Excelに貼りつけた画面画像の、ヘッダーやサイドバーなど、周囲の不要箇所を取り除いてみましょう。いう時、Excelのトリミング機能が非常に便利です。★Excelでの画像加工方法�A:画像の不要箇所を取り除く★Excelのトリミング機能を利用して、画像の不要箇所を削除する。<手順1>Excelのツールバーで、書式⇒トリミングを押下する。(Excel2003の場合)(注)Excel2000の場合は、ツールバーの図ツールバーなどにトリミングボタンがあります。(注)Officeは2003以降、メニュー配置を大幅に変更しているので、詳細は各バージョンのヘルプをご覧下さい。<手順2>そうすると、画像の四隅と各辺の中央に太枠が表示されるので、その部分をマウスでドラッグして画像の不要箇所を消す。ここでは、画像の上辺の中央の太枠を下にドラッグして、画像のヘッダー部分を消してみます。▼▼▼<手順3>同様に、画像の右辺、左辺、下辺の不要箇所もトリミングする。以上で、取得した画面キャプチャの不要箇所が削除できました。このように、Excelのトリミング機能は、画像の一部を切り出す時に重宝します。それでは、以上で加工した画像を一旦jpg形式で保存してみましょう。★Excelでの画像加工方法�B:加工した画像をjpg形式で保存する★PictBearを使用して、加工した画像をjpg形式で保存する。<手順1>Excel上で画像を選択し、右クリックしてコピー、またはCtrl+cキーを押下して、画像をクリップボードにコピーする。<手順2>PictBearを起動し、貼りつけ、またはCtrl+vキーを押下して、クリップボードの画像を貼りつけ、ファイル⇒名前を付けて保存でjpg形式で保存する。<手順3>保存したjpg画像をブログに貼りつける。ご覧のように、Excelで不要な部分を削除した画像を、ブログに貼りつけることができました。Excelのトリミング機能の便利さがお分かり頂けたでしょうか。記事が長くなってきているので、今回はここで切りましょう。画面キャプチャの不要な部分を削除している。1画面に収まらない画面を、複数取得して結合している。画面画像に枠線やコメントを記入している。【第18回】画面の一部をキャプチャする今回は、画面の一部をキャプチャする方法をご紹介します。画面のキャプチャは、Windowsのキー操作でも取得することができます。その方法を2つご紹介します。★画面全部をキャプチャする方法★<手順1>PrtScキーを押下すると、パソコンの画面全部のキャプチャがクリップボードに格納される。<手順2>前回紹介したPictBearのような画像加工ソフトを起動し、クリップボードのキャプチャ画像を貼りつける。<手順3>画像加工ソフトにて、キャプチャ画像をjpg形式で保存する。<取得例>もうひとつ、Windowsのキー操作で画面のキャプチャを取得する方法があります。★アクティブウィンドウをキャプチャする方法★<手順1>Altキーを押しながらPrtScキーを押下すると、パソコンの画面のうち現在アクティブなウィンドウの画像のみがクリップボードに保存される。<手順2>先ほどと同じく、PictBearのような画像加工ツールにクリップボードの画像を貼りつけ、jpg形式で保存する。<取得例>以上は、Windowsパソコンのキー操作で可能な画面キャプチャの取得方法です。このブログでは、場合に応じてWinShotというキャプチャ取得ツールを使用しています。過去にこのブログで掲載したこのような画像の場合です。この画像は、アクティブな画面の一部をキャプチャしたものです。上記の操作でアクティブウィンドウのキャプチャを取得し、その後画像加工ツールで一部のみを切りだすような加工をしても良いのですが、あらかじめ画面の必要な部分のみを取得し画像ファイルで保存できた方が作業が楽ですよね。WinShotは、そういう画面の一部保存ができるような、便利なフリーソフトなのです。WinShotは、例えばこちらのサイトから取得できます。非常に便利ですので、是非一度使用してみて下さい。WinShotさて、このWinShotは様々な使い方がありますが、私が主に使用しているのは、画面の一部を範囲指定で取得し、jpg形式でファイルに保存する機能です。その設定方法と使用方法を、以下で解説します。★WinShotで画面の一部を範囲指定するための設定方法★<手順1>上記サイトからWinShotを取得し、起動する。<手順2>画面右下のタスクトレイにWinShotのアイコンが表示されるので、右クリックし、環境設定をクリックする。<手順3>表示されるWinShotの環境設定画面にてその他の設定タブを押下し、トレイアイコンのダブルクリック操作でJPEGで保存(矩形範囲指定)を選択し、OKボタンを押下する。それでは、実際にWinShotを使ってみましょう。★WinShotで画面の一部をキャプチャする方法★<手順1>WinShotを起動する。<手順2>画面右下のタスクトレイにあるWinShotのアイコンをダブルクリックする。<手順3>マウスで、画面の取得したい箇所を指定する。1度目のクリックで範囲指定が開始され、2度目のクリックで範囲指定が完了する。指定した範囲は赤い枠線が表示される。<取得例>以上が、簡単ですが、WinShotの操作手順です。このWinShotというソフト、私はもう10年近く使っていますが、本当に便利です。【第17回】画像のサイズを調整する前回は、Seesaaブログに掲載するサムネイル画像のサイズを調整する方法をご紹介しました。今回は、サムネイルではなく、画像そのものを調整する方法をご紹介します。前回と今回の違いを簡単にお見せすると、こんな感じになります。見た目は全く変わりませんが、前回の場合は画像をオリジナルサイズでブログにアップし、その縮小サムネイル画像を記事に掲載しています。今回の場合は、画像そのもののサイズを縮小した上で、ブログにアップし掲載しています。前回の記事でお伝えした通り、このブログでは、横幅が500pxより大きい画像については全て500pxに調整した上で画像を掲載しています。画像の表示サイズを調整する方法は2つ。1つは、前回ご紹介した、サムネイル画像の調整。1つが、今回ご紹介する、画像そのもののサイズ調整です。両者の違いは、ブログにアップする画像のファイルサイズです。小さくしておいた画像の方が、ファイルサイズも小さくなります。ポートフォリオの方はもう3年半続いており、ディスク容量も半分以上使っている状態になっています。いう状態になると、画像サイズは、大きい必要がない場合は可能な限り小さい方が良いです。ディスク容量の問題だけでなく、ブログに掲載する画像というのは何かと大きさが気になったりします。今回は、その画像サイズの調整方法をご紹介したいと思います。画像サイズの調整ですが、基本的にはソフトを使って行います。画像を加工するソフトは本当にたくさんあって、別に何でも良いと思います。Windowsパソコンの「ツール」の中に入っているペイントでも良いと思いますし。私の場合は、昔からPictBearというフリーソフトを使っています。今回は、このPictBearを使った画像サイズの調整方法をご紹介したいと思います。PictBearはこちらから無料でダウンロードできます。PictBear★画像サイズの調整方法★<手順1>加工したい画像を用意する。パソコン画面に表示されている画像を加工したい場合は、Alt+PrtScキーを押下して画面のキャプチャを取得する。<手順2>PictBearを起動する。<手順3>加工したい画像を開く。キャプチャした画像を貼りつける。<手順4>イメージ⇒イメージサイズの変更をクリックする。<手順5>表示される子画面で、縦横比を固定にチェックが入っているのを確認した上で、幅の欄に自分が設定したい画像サイズの横幅を記入する。※これによって、画像の縦サイズは、横サイズに合わせて調整されます。<手順6>画像サイズの調整が終わったら、ファイル⇒名前を付けて保存をクリックし、適当な名前をつけてjpg形式で保存する。上記は、あくまでも画像サイズ調整の一例になります。他にも画像加工ソフトはたくさんありますし、ファイル形式もjpgにこだわる必要はありません。画像サイズの調整が自由にできる方は、どうぞご自分のやりやすい方法で実施して下さい。画像サイズの調整方法をご存知ない方には、私がやっている方法ということでお伝えしておきます。PictBearについてはこちらの本が大変参考になります。詳しい使い方を知りたい方は、こちらをご覧下さい。【第16回】画像サムネイルサイズを変更する今回から数回にわたって、ブログに掲載する画像の調整方法をご紹介していきます。このブログでは、毎回様々な画像を掲載しています。CSSを編集する場合は、編集前の画像と編集後の画像を記事に掲載しています。この場合、画面表示の一部を切りだしたり、取得した画像の余計な部分を削除したりしています。画像を掲載する場合は、画像の横幅が500pxを超える場合は、500pxに縮小して掲載しています。いった、ブログに掲載する画像の調整方法について解説していきます。今回は、画像のサムネイルのサイズを変更する方法をご紹介します。ブログに画像を掲載しても、ブログの枠をはみ出てしまったら見苦しいですよね。このブログ全体を画像として記事に掲載する場合。このブログ全体のサイズは記事よりも大きいので、その画像を記事に掲載しようとするとはみ出てしまうことになります。そんな時、Seesaaブログには、縮小された画像をサムネイルとして掲載する機能があります。こんな感じになります。画像をクリックすると、別画面に元のサイズの画像を表示してくれます。方法は非常に簡単で、ブログの記事を書く画面で、記事の文章入力画面のすぐ下にある「ファイル」の中にある�@「サムネイルで表示」のチェックを入れた状態で、�A画像をクリックするだけです。ところでこのサムネイル画像、Seesaaブログのデフォルト設定では、横幅が320pxになるようになっています。画像の高さは、横幅の比率に合わせて自動で調整されます。今回は、このデフォルト320pxになっているサムネイルサイズを変更してみましょう。私の場合は、横幅が500pxになるように修正しています。★画像のサムネイルサイズを変更する方法★<手順1>Seesaaブログの管理画面で、�@設定⇒�Aブログ設定をクリックする。<手順2>表示される画面の下の方にある�Bサムネイルサイズの欄に、自分が設定したいサムネイルサイズを記入する。※ここでは500pxに設定しています。<手順3>当該画面の一番下にある実行またはブログ設定の変更ボタンを押下する。すると、記事投稿画面で画像をサムネイルで貼りつけした時に、自動で設定されるサムネイルサイズが変更されます。画像のサムネイルサイズは、もちろん記事に貼りつけた後で手動で修正することもできます。して自動で設定されるサイズをあらかじめ変更しておくと、手間が省けます。【第15回】サイドコンテンツの枠線と文字のスペースをあける前回は、記事本文とその枠線との間のスペースを広げるCSS編集を行いました。今回は、サイドコンテンツの中身と枠線との間のスペースを広げてみましょう。本当にちょっとですけど。いうことで、今回はこのサイドコンテンツの上下の隙間を広げてみたいと思います。サイドコンテンツを定義しているクラスは、もうこのブログで何度も採り上げた.sideクラスです。枠線との隙間を調整するのは、前回も使用したpaddingプロパティ。これさえ分かっていれば、今回の修正は簡単です。★サイドコンテンツの枠線と文字のスペースを調整する方法★.sideクラスのpaddingプロパティを調整する。*/}(注)灰色字箇所は、過去にこのブログで変更を加えた箇所です。今回は、.sideクラスの上側に5px、下側に10pxのスペースを設定してみました。左右のスペースをそれぞれ8pxずつに修正しています。その結果がこちらです。上下のスペースが広がり、左右のスペースが変わりました。【第14回】記事の枠線と文字のスペースをあける今回は、微調整をしてみたいと思います。現在このブログは、Seesaaブログのこねこ(左サイドバー)というテンプレートに、今までの記事でご紹介したデザイン変更を加えてきています。その結果、私自身が気に入るようなデザインになってきているわけですが、まだまだ微妙に感じている箇所もあります。このテンプレートはそもそも枠線がなかったので違和感がなかったのですが、第5回で記事に枠線を付けた結果、その枠線と記事本文との間の隙間が狭く感じられるようになってしまいました。今回は、この隙間を広げてみます。隙間については、以前第7回で一度説明しました。.sidetitleクラスに設定したmarginプロパティがそれです。このmarginプロパティは、ボックスの外側に隙間を設定するプロパティでした。今回は、ボックスの枠線とその内側にある文章との隙間の調整です。この場合は、marginプロパティではなく、paddingというプロパティを使います。このpaddingプロパティを記事本文に適用するわけです。記事本文を表すクラスは、第3回で記事本文のスタイルを太字でなくすときに一度取り扱いました。.textクラスです。どのくらいのスペースを設定するかは本当に個人の好みになってしまうのですが、現状は5pxしかあいていないので、これを15pxにしてみることにします。★記事の枠線と文字のスペースをあける方法★.textクラスのpaddingプロパティの値をふやす。*/}(注)灰色字箇所は、過去の作業で修正した箇所です。このように変更すると、下図のように記事本文と枠線との隙間が広くなります。変更した箇所がお分かりになるでしょうか。した違いではありますが、こういうちょっとした調整がサイト全体の見映えを左右することもあるので、自分が納得するまでいろいろ試してみましょう。paddingプロパティには、いくつか書き方があります。D;と書くと、これは●上がA●右がB●下がC●左がDとなることが決まっています。F;のように書かれていると、これは●上下がE●左右がFであることを表します。marginのように、padding-top:G;という形で、上の隙間のみを定義することもできます。Seesaaで作成されているテンプレートを修正する場合には、これらの書式全てを覚える必要はありません。テンプレートにどの形で記載されているかは理解できるようにしましょう。今回は、少し話題を変えてみたいと思います。題して『CSSのクラスの調べ方』。Seesaaブログである場所のデザインを変更したいとき、CSSのどの部分を修正すれば良いのか。その調査の方法を説明したいと思います。カレンダーに枠線を追加したいとき、CSSのどの部分を修正すれば良いのでしょうか?その方法は第9回で解説した通りなのですが、自分で調べる時はどうすればよいのでしょう?その答えは、自分のブログのHTMLソースを見てみるです。HTMLのソースを見ることによって、ブログのどの部分にどのCSSが適用されているのかが分かります。従って、修正すべきCSSが分かるのです。★HTMLソースの表示方法★<手順1>HTMLを見たいサイトをブラウザで表示する。<手順2>ブラウザの表示⇒ソースを押下する。以上の操作を実施すると、このようなHTMLソース画面が表示されます。表示されましたか?あとは、この中を見ていけば、適用されてるCSSが分かります。HTMLソースの中でカレンダーがどの部分かは、例えば現在ですとブログのカレンダー部分に2010年12月と表示されていますので、HTMLソースの中でその文字列を探してみましょう。ありました、�@の箇所です。id="calendar">が該当しそうです。そこで、CSSの#calendarという部分を試しに修正して枠線を付けてみると、ちゃんと枠線が表示されることが分かります。通常のサイドコンテンツ、たとえばファンのコンテンツに枠線を付けたいときは、やっぱりHTMLソースでファンという文字列を探してみましょう。class="sidetitle">で囲われているので、サイドコンテンツのタイトルには.sidetitleクラスが適用されていることがわかります。class="side">と記載されているので、サイドコンテンツの本文部分には.sideクラスが適用されています。同様に、第8回で解説したタグクラウド。タイトルには、他のサイドコンテンツと同じく.sidetitleクラスが適用されているのが分かります。class="side-tag">と記載されているので、.side-tagクラスが適用されているのが分かるわけです。HTMLソースで、どの部分にどのクラスが適用されているのかが分かったら、あとはCSS変更画面でそのCSSを修正して、プレビューしてみましょう。大体、希望通りの場所に修正が適用されると思います。SeesaaブログのCSSにはたくさんの定義が記載されていて、それをそのまま見ていても、慣れない方には分からないことばかり。そんな時はHTMLソースの方を見てみて、修正するCSSにアタリをつけていきましょう。ちなみに、CSSは通常、以下の書式となっています。}そしてこのセレクタには、いくつか種類があります。HTMLソース上でclass=の形式で設定されているセレクタをクラスセレクタと言います。class="side">なんかがそうです。このクラスセレクタは、CSSでは“.”で始まる記述となっています。従って、sideはCSS上では.sideと記載されています。HTMLソース上でid=の形式で適用されているものをIDセレクタと言います。id="calendar">。このIDセレクタは、CSS上では#calendarのように“#”で始まる記述となっています。クラスセレクタとIDセレクタの違いについては、興味のある方はCSSの本などで調べてみてください。Seesaaブログで、用意されているテンプレートをカスタマイズする場合には、両者の違いはあまり意識する必要はないと思います。【第12回】ボックス広告の枠線を調整する第6回でサイドバーのコンテンツに枠線を付けた際の最後の課題。今回は、ボックス広告に枠線を付ける、または、ボックス広告の枠線を削除する方法を説明したいと思います。第6回で.sideクラスに枠線を設定した結果、ボックス広告の表示はご覧のようになっています。右下左の枠線は表示されていますが、上の枠線がない状態ですね。これをどうするかは、人によって好みが分かれると思います。上の枠線も表示されるようにするのか、それとも右下左の枠線が表示されないようにするのか、です。そこで今回は、それぞれの方法を説明していきます。前提事項ですが、今回のボックス広告の枠線の修正は、前回の自由形式の枠線と同様、CSSではなくHTMLの修正になります。従って、まずは第2回で説明したコンテンツ画面でボックス広告をクリックし、その設定画面を開いて下さい。上記画面が表示されたら、右上の�@コンテンツHTML編集をクリックしてください。この画面が表示されましたでしょうか。今回の修正は、この画面の�Aの枠内にあるHTMLを修正する作業になります。この枠内のHTML、いろいろ書かれていますが、あまり詳細を把握する必要はありません。前回と同じく、.sideクラスと.sidetitleクラスを呼び出すHTML文のみに注意すれば大丈夫です。サイドバーのコンテンツは、第6回で説明した修正によって、コンテンツ本文部分には右下左の枠線が、コンテンツタイトル部分には上右左の枠線が設定されています。現在のボックス広告の枠線は、コンテンツ本文部分の設定だけが適用されているために、このようなおかしな枠線になってしまているわけです。そこで、この解決方法は2つあります。(1)ボックス広告にタイトルを表示させる(2)ボックス広告に.sideクラスを適用させなくするそれぞれの方法とその結果画像を、以下に掲載します。★(1)ボックス広告にタイトルを表示させる方法★ボックス広告のHTMLに、サイドタイトルを表示させるHTML文を追記する。.sidetitleクラスの呼び出し文を追加する。-%></div>この結果、先ほどのボックス広告はご覧のようになります。▼▼▼これが解決方法の1つ。一つは、そもそもボックス広告に枠線を表示しないようにする方法です。★(2)ボックス広告に.sideクラスを適用させなくする方法★ボックス広告のHTMLから、サイドコンテンツ本文を表示させるHTML文を削除する。.sideクラスの呼び出しを削除する。/>こうすると、ボックス広告に枠線は表示されなくなります。▼▼▼ご覧のようになりました。(2)の方法でボックス広告から.sideクラスの適用を削除すると、その下のコンテンツとの隙間がほとんどなくなってしまいます。/>を追記する方法をとりました。以上の(1)または(2)の操作が完了したら、�B保存ボタンを押下して、修正を保存しましょう。これで今回の作業は終了です。【第11回】「自由形式」にタイトルと枠線を表示するSeesaaブログには様々なコンテンツが用意されていますが、その中でも非常に自由度が高いコンテンツとして自由形式というコンテンツがあります。第2回で説明したコンテンツ画面で選択・編集することができます。とクリックして、左側の「コンテンツ」の中の下の方にある「自由形式」がそれにあたります。これを右側のブログコンテンツの欄にドラッグ&ドロップして、編集して使います。このブログでは、左上にある「ブログノウハウ」というボタン、これに自由形式を使用しています。(あ、気が向いた方はクリックして応援、よろしくお願いします!)今回は、この自由形式のコンテンツに枠線を付けてみます。この自由形式コンテンツはタイトルも表示されていないので、それも表示させてみましょう。今回の修正ですが、今までとは異なり、HTMLの方を修正します。上記コンテンツ画面で自由形式のコンテンツを右側にドラッグ&ドロップし、さらにそれをクリックして設定画面を開いて下さい。下記のような画面が表示されたでしょうか。この画面で、表示したい�@タイトルと�A内容を記入して下さい。上図の例では、私はタイトルに「ブログ村ランキング」、内容にブログ村へのランキングボタンを記入しています。ここでは何でも良いので、とりあえず�@と�Aに何かを記入して下さい。ボタンを押下して、記入した内容を保存しておきます。ここまでは宜しいでしょうか。今回一番実施したいのは、�CコンテンツHTML編集のところです。この先の画面で、今回作成した自由形式コンテンツのHTMLを修正することになります。いうことで、�CコンテンツHTML編集を押してみてください。このような画面が表示されたでしょうか。この中の�Dの欄に、タイトルと枠線を表示するHTMLを書き込んでいきます。それでは、どのようなHTMLを書き込んでいくかです。タイトルを表示したい場合は、以下のHTMLを追加して下さい。</div>これで、タイトルが表示されるようになります。class="sidetitle">に注目して下さい。class="sidetitle"の箇所です。これは、「クラスはsidetitleを使用する」というHTMLの文章になります。sidetitleというと・・・そうです、今まで第6回などでスタイルを修正してきた、あの.sidetitleクラスです。あの.sidetitleクラスのCSSを適用して、自由形式のタイトルを表示するようにするというのが、この修正のキモになるわけです。●CSSは、書式を定義する●HTMLは、定義されたCSSの書式を適用するCSSとHTMLの役割は、ざっくりと以上のように覚えておいて頂ければ良いと思います。%>ですが、これはSeesaaのサイトのプログラムで定義されている変数ですので、我々には変更できません。%>はタイトルを表すと覚えておけば良いでしょう。次はコンテンツの枠線の表示です。上記サイドタイトルの設定を見ればお分かりの通り、コンテンツの枠線も、今まで定義した.sideクラスを適用すれば表示されるようになるわけです。以上によって、自由形式コンテンツにタイトルと枠線を表示するための修正は、以下のようになります。★自由形式コンテンツにタイトルと枠線を表示する方法★<手順1>コンテンツ画面で自由形式のコンテンツHTML編集画面を開く。<手順2>表示されるコンテンツHTMLに、サイドタイトルと.sidetitleクラスで表示するHTMLを追加すると共に、コンテンツに.sideクラスを適用する。-%></div><手順3>コンテンツHTML編集画面の�E保存ボタンを押下する。この変更によって、この自由形式コンテンツはご覧のように変更されます。今回の修正のポイントは、CSSで書式を変更するのではなく、すでに定義されているCSSをHTMLで適用することでした。今回の修正は、修正したコンテンツにのみ適用されます。これによって、自由形式というコンテンツ全てがこの書式に変更されるわけではありません。自由形式でコンテンツを作成する度に、上記のような変更が必要な場合は修正していきましょう。HTMLの修正が失敗してしまった場合は、初期値に戻すのチェックボックスをチェックして�E保存を押下すると、初期状態に戻すことができます。>>Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。