Tuesday,November 01,2016

Seesaaブログの自由形式にタイトルを表示させる方法

Seesaa_freecon_eye

Seesaaブログにコンテンツを追加する時、一般的に自由形式を選んで内容を書き込みますが、自由形式のコンテンツでは、タイトルが表示されません。サイドバーなどに配置した自由形式コンテンツのタイトルを表示させる方法です。

自由形式コンテンツの編集

自由形式コンテンツのタイトル欄に入力した文字を、そのまま表示用に使う設定です。
HTMLを編集していきます。

編集する場所

Seesaaブログにログインして、ブログの編集画面から デザイン => PC => コンテンツ の画面を開きます。

タイトルを変更したい自由形式コンテンツパーツの編集画面を開きます。

Seesaa_freecon_002
開いた編集画面の右上にある「コンテンツHTML編集」をクリックし、HTML編集画面を開きます。

Seesaa_freecon_003
デフォルトでは、本文の表示のみしか対応していません。

タイトルを表示させる設定

Seesaaブログの因数を使って、タイトル欄に入力した文字をコンテンツタイトルとして表示させるHTMLを追加します。

S004
div 要素で囲んで、サイドバー用のタイトルCSSを適用した上で、タイトルを表示する設定です。

<div class="sidetitle"><%content.title%></div>
<div class="side">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

CSSは、使っているテンプレートに必ず指定されているはずです。

あとは、忘れずに保存して完了です。

まとめ

やってみるとHTMLの追加だけですので、意外と簡単でした。
Seesaaブログには、特有の因数がいくつかあるようですので、それが分かればカスタマイズの幅が広がりますね。

posted by taks at 09:07 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,September 27,2016

CSSで作るH3&H4タグの簡単な装飾方法

H3_H4tag_eye

SeesaaブログのH3タグは、デフォルト設定では、もともと記事タイトルに使われていました。

Seesaaブログのデフォルト設定

SeesaaブログのHタグは少し特殊で、h1はブログタイトル、h2は日付けになっていました。
H3タグは、記事タイトルだったため、記事中の段落タイトルとしては使えませんでした。

以前H2タグを記事タイトルに日付をdiv要素で指定するように、HtmlとCSSを編集していました。

Seesaaブログの見出しタグを適正タグへ変更した

記事中の見出し用に H4タグ を自作追加していましたが、今回 H3タグ を新たにCSSへ追加したので、簡単な H3、H4タグ の装飾法として紹介してみます。

記事中見出しの装飾

ブログのデザインによって様々な装飾方法がありますが、一般的によく見るシンプルなデザインを追加してみました。

H3タグのCSS

現在使用中の装飾はこんな感じ。

H3_H4tag2

左側に太めのラインが入ってるだけのシンプルなものです。

CSSソースコードはこちら。

h3 {
border-left: 10px solid #74A681;
margin: 50px 0 10px 0;
padding: 5px 10px;
font-size:16px;
font-weight:bold;
font-family:arial, Helvetica;
}

● border-left: 10px solid #74A681;

左側の太めなラインです。10px 使ってボックスっぽく見えるようにしています。
色はブログに合わせて選びました。

● margin: 50px 0 10px 0;

見出し周りの余白を指定しています。
上に 50px 下に 10px の余白を指定しています。

● padding: 5px 10px;

テキスト文字とラインの間隔を指定しています。
こちらも全体のバランスを見て、適宜変更します。

● font-size:16px;

フォントサイズは、見出しですので目立つように、少し大きめにしました。

● font-weight:bold;

同じく目立つように 太字 にしています。

● font-family:arial, Helvetica;

フォントの指定です。自分のブログデザインに合わせて好きなフォントを選びます。

H4タグのCSS

現在の装飾。

H3_H4tag1

上記のH3タグに下線が追加されたものです。
セットで使うと見た目のバランスもちょうどよいですね。

ソースコードはこちら。

h4 {
border-bottom:1px solid #74A681;
border-left: 5px solid #74A681;
margin: 30px 0 10px 0;
padding: 2px 10px;
font-size:14px;
font-weight:bold;
font-family:arial, Helvetica;
}

● border-bottom:1px solid #74A681;

1px の実線で下線部分を描いています。

● border-left: 5px solid #74A681;

左側の太めなラインです。こちらは 5px にして、下線部分とのバランスを揃えています。
当然、色は下線部分と合わせます。

● margin: 30px 0 10px 0;

周りとの余白の指定は、H3タグ と比べてやや狭くしています。
文中の小見出しとして使うことが多いので、行間が広すぎないようにしました。

● padding: 2px 10px;

テキスト文字と線との余白も、やや少なめです。

● font-size:14px;

フォントサイズは、ほぼ本文と同じです。

● font-weight:bold;

太字にしているので、本文中でも若干大きく見えるよう錯覚します。

● font-family:arial, Helvetica;

フォント指定です。別で指定していれば省略しても良いです。

まとめ

見出しとしてはシンプルで、CSSも基本的なものばかりです。

シンプルなおかげでアレンジもしやすいです。
線の種類を変えても良いし、上や右に追加してもよいです。背景に色を追加して、文字を白抜きにしても良いでしょう。
アレンジの仕方は無数にありそうですね。

posted by taks at 19:29 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,September 13,2016

テーブルタグの表をCSSで見やすく色をつける!

table_CSS_eye

HTML で表を作るには table タグを使いますが、見やすい表にするには、枠線や色を付けたりといろいろ加工が必要になってきます。
ブログ記事中に挿入する程度の簡単な表には、そこまで凝ったものは必要ありませんが、見やすい表にはしておきたいですね。

表を見やすく装飾する

マークダウン記法を使うと HTML で直接記述するより簡単に表が作れます。

tableタグはMarkdown記法を使うと簡単だった

マークダウン記法で書いたソースを HTML へ変換しただけだと、通常枠線や色付もない何の装飾もされていない状態の HTML が出力されます。

ブログ側に CSS の設定がされていれば、そのまま投稿できますので、CSS を設定して見やすい表が表示されるようにします。

CSSの設定

見やすい表というと、枠線と色付けでシンプルに表示させたものが良いと思います。
できれば1行おきに色が付いていると、より見やすいのではないでしょうか。

CSSの設定は、こちらのサイトを参考にさせていただきました。

CSS3セレクタで1行ごとにテーブルに背景色をつける|Webpark

とても分かりやすくて、勉強になります。

実際に自分のサイトに登録した CSS がこちらになります。

/* テーブル */
.text table {
    width: auto;
    border: 1px solid #555555;
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    color: #333;
    padding: 5px;
    border-bottom: 1px solid #555555;
    border-left: 1px solid #555555;
    background: #597869;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
td {
    padding: 5px;
    border-bottom: 1px solid #555555;
    border-left: 1px solid #555555;
}
tr:nth-child(2n+1) {
    background: #C2EAE0;
}

.text table { }

表全体にかかる設定です。ここでは枠の大きさや枠線についての基本設定をしています。

最初の .text は、当ブログの記事部分のクラスタです。記事本文中の table タグにのみ適用するよう指定しています。

  • width: auto; ・・・ 横幅を自動的にあわせる
  • border: 1px solid #555555; ・・・ 枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-collapse: cpllapse; ・・・ 隣のセルの枠線を重ねて表示する
  • border-spacing: 0; ・・・ 隣のセルとの枠線の間隔

th { }

表最上段の標題部分の設定です。

  • color: #333; ・・・ 文字の色
  • padding: 5px; ・・・ 枠線から文字までの間隔
  • border-bottom: 1px solid #555555; ・・・ セルの底部分枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-left: 1px solid #555555; ・・・ セルの左側枠線の指定。太さ1px 線の種類solid 線色#555555
  • background: #597869; ・・・ セル背景色の指定
  • font-weight: bold; ・・・ 文字を太字に
  • line-height: 120%; ・・・ セル内文字の行間。セル内に2行入力した時の行間
  • text-aline: center; ・・・ 文字の中央揃え

td { }

表2段目からの本体部分の設定です。

  • padding: 5px; ・・・ 枠線から文字までの間隔
  • border-bottom: 1px solid #555555; ・・・ セルの底部分枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-left: 1px solid #555555; ・・・ セルの左側枠線の指定。太さ1px 線の種類solid 線色#555555

tr:nth-child(2n+1) { }

選択した行にのみ適用する設定です。

  • background: #C2EAE0; ・・・ セル(行)の背景色を指定

行の指定はいくつか方法があります。

CSSの記述 指定箇所
tr:nth-child(n) n番目のtrに適用
tr:nth-child(odd) 奇数番目のtrに適用
tr:nth-child(2n+1) 奇数番目のtrに適用
tr:nth-child(even) 偶数番目のtrに適用
tr:nth-child(2n) 偶数番目のtrに適用
tr:nth-child(3n) 3,6,9,12…番目のtrに適用
tr:nth-child(3n+1) 1,4,7,10…番目のtrに適用

シンプルですが、かなり見やすくなりました。

まとめ

表組みというのは、それほど頻繁には使わないと思っていましたが、実は記述が面倒だから無意識に避けていたような気がしてきました。
マークダウン記法と今回の CSS 設定を使えば、驚くほど簡単に表が完成してしまいます。

一度設定してしまえば、Sublime Text のようなマークダウン記法対応のエディタとの併用で、快適に記事や文章を書き進められます。

細かなことの積み重ねで、執筆環境を改善していくと、書くのが楽しくなってきますね。
改善内容も記事ネタになって一石二鳥ですね。

posted by taks at 19:06 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,August 16,2016

サムネイル画像入りの新着記事を!忍者画像RSS!

Ninja_GazouRSS_eye

Seesaaブログの新着記事一覧は、最近のバージョンではサムネイル画像の表示に対応していますが、Seesaaブログのサーバにアップロードされた画像からしか表示されません。
ましてや当ブログで使っている旧バージョンのテンプレートでは、サムネイルに対応すらしていません。
以前から何とかできないかと試行錯誤を繰り返していましたが、便利なサービスを見つけました。

忍者画像RSS

忍者ツールズというホームページやブログなどのアクセス解析、カウンターほか、様々なサービスを提供しているサイトです。
結構古くからあるサイトで、私もアカウントだけはかなり昔に取得してアクセス解析など使っていたことがありましたが、当時はイマイチ使い勝手が悪く、いつの間にか使わなくなって放置していました。

忍者ツールズ|ホームページ ブログ アクセス解析 カウンター メールフォーム

サイドバーにサムネイル付きの記事一覧を設置する方法を探していて、過去にSeesaaブログでJQueryを使えるように設定したことがありますが、あれもサムネイル取得できないかと思って試行錯誤していた一環です。

いろいろと調べていくうちに、たどり着いたのがこの忍者ツールズ提供の”忍者画像RSS"でした。

画像付きRSSブログパーツ | 忍者画像RSS (旧:忍者レコメンド)

設定と設置

忍者画像ツールズは、表示方法の設定が細かくできるようになっています。
表示方法から色の指定、サムネイルの大きさや記事領域の指定まで細かく指定できます。

サイトの登録

アカウントを持っていない場合は、忍者ツールズの”新規ユーザー登録”からアカウントを作成します。
N000
アカウントでログインできたら、忍者画像RSSのページヘ進みます。

忍者画像RSSのページトップから
N001
「忍者画像RSSを始める」ボタンを押します。

N002
表示させたいブログのURL、またはRSSフィードURLを入力します。

N003
入力されたサイトの検索が終了すると、サイトタイトルが表示されます。
問題なければ「このURLでつくる」ボタンを押します。

設定方法

サイトの登録が完了して、設定画面に入ります。

N004
実際にサイトに登録するコードとプレヴュー画面が現れます。

N005
設定用のメニューは、帯状の追従表示になっています。
サイドバー用に縦長の設定にして、プレヴューでスクロールを繰り返しても、常にメニューが表示されています。

N007_1
プレヴュー画面の左上のプルダウンメニューで、プレヴュー形式を幾つか選ぶことができます。 設置したい場所に合わせて、プレヴューを確認することができます。

N006
「レイアウト」タブでは、表示形式のテーマがいくつか用意されています。
画像のみであったり、テキストのみと言った表示もできます。

N007
「表示設定」タブでは、表示させる件数、列、サムネイル画像や記事領域のサイズを指定できます。 レスポンシブル表示対応で、縦横比率と最小サイズを指定することができます。

N008
ピクセル単位で固定サイズを指定することもできます。

N009
「色指定」タブでは、文字の色から背景色、枠の色まで細かく指定することができます。
パレットから選択することも、色コードを入力して指定することもできます。

N010
「オプション」タブでは、サムネイル画像の周りに表示させる項目を指定することができます。
フォントの大きさを指定したり、アイコンや日時、共有ボタンや記事本文の表示非表示を指定できます。
表示させる記事もランダム表示か日付順か、いいねの付いた数などで選ぶこともできます。

N011
「詳細表示」タブでは、記事タイトルの表示設定と余白の設定などができます。

設定項目は多岐にわたり、設置したい場所に合わせて、柔軟にデザインを調整することができます。

設置

Seesaaブログへの設置は、「コンテンツ」で行います。

S001
「デザイン」 -> 「PC」 -> 「コンテンツ」へ進み

S002
「自由形式」を設置したい場所へドラッグします。

S003
「自由形式」の変数画面を開き、出来上がったコードを貼り付けます。

コードを貼り付けたあとからでも、忍者画像RSSの管理画面から設定を変更すると、自動的に反映されます。

まとめ

ランダム表示や人気記事の表示をさせるためのものだと思っていたのですが、日付順という表示方法もあり、サムネイル付きの新着記事としても使えるため、探していた表示方法にピシャリとハマりました。

Seesaaブログは、無料ブログとしては自由度が高いことで有名ですが、やはり有料ブログと比べるべきではありませんね。
しかしやりたいことを何とかして実現しようと調べたりすることは、勉強になります。

posted by taks at 20:25 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,February 23,2016

Zenbackのデザイン変更とカスタマイズ

Zenback_eye

Zenbackというブログパーツをご存知でしょうか。
関連した内容の自分の記事やほかのZenbackユーザーの記事、SNS関連のリンクなど、投稿した記事に関連するリンクを自動で生成してくれる無料のブログパーツです。
以前から設置だけはしていましたが、デフォルト設定のままでしたので、デザインなどを当サイトに合わせるカスタマイズをしてみました。


Zenbackのデザイン変更

今までは、デフォルトのまま使っていたため、タイトルやライン、リンクのカラーも全然あっていませんでした。

Zenback_design (1)
なにより関連記事のサムネイルパネルの大きさがあっていないのか、中途半端に並んでいます。

全体のデザインを自サイトの雰囲気にあったものに変更する場合、あると便利なものがテーマです。
Zenbackの管理画面でもテーマが幾つか用意されており、選べるようになっています。

Zenback_conf (1)
Zenbackのサイトにログインすると、ブログ管理画面になります。
変更したいブログを選びます。

Zenback_conf (2)
「カスタマイズ」の画面で色々な設定変更が出来ます。
ここでテーマを変更しました。

Zenback_design (2)
タイトル部分の装飾やカラーが変わりました。
テーマとして変更されるのは、この部分だけのようですね。


デザインのカスタマイズ

Zenbackでは、自分でもカスタマイズできるようにコードが公開されています。

Zenback デザインハックブログ

サイズや色の変更、隙間間隔の調整など、カスタマイズの実例も紹介されています。


こちらを参考に、SeesaaブログのCSSに、以下の部分を追加しました。

/* Zenback */
/* 関連記事のPadding調整 */
#zenback #zenback-widget #zenback-related-article .zenback-module-item.hasthumb { 
float: left;
height: 185px;
margin: 0 0 1.62em;
padding: 0 7px 9px;
font-size: 12px;
}

/* タイトルラベルの下に線 */
#zenback #zenback-widget .zenback-module-label  {
  border-bottom:1px solid #888888;
}

/* リンクカラー*/
#zenback #zenback-widget .zenback-module-content { 
  color: #333;
}
#zenback #zenback-widget .zenback-module-content a{
color:#006A6A;
text-decoration: none;
}
#zenback #zenback-widget .zenback-module-content a:hover{
color:#006666;
text-decoration:underline;
}

関連記事のサムネイル画像の間隔を調整して、一行に4個表示されるようにしました。
あとは、タイトルの下に線を引き、リンクカラーを変更しました。

Zenback_design (3)
最終的には、こんな感じです。

「お知らせ」のリンクカラーの変更方法が、どうしても分かりませんでした。
変更できないなら表示させないように出来ないか調べてみましたが、無料利用だと出来ないようです。有料会員登録をすると、表示の有無を設定できるようになるようです。


まとめ

関連記事の自動生成をしてくれる便利なブログパーツで、色々なサイトで見かけますので使ってる方も結構多いとに思います。

自サイトに合わせて自由にデザインをカスタマイズできると、とても利用しやすいですね。
いちから自分で作れるほど腕があればよいのですが、初心者レベルでは難しすぎます。
こういうカスタマイズ可能なブログパーツは、初心者レベルの私にはとても重宝します。

もっと勉強しないといけませんね。

posted by taks at 13:14 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,January 19,2016

Youtube動画をレスポンシブで埋め込むcss設定方法

YouTube_umekomi_eye

Youtubeの動画をブログに埋め込むとき、今まではサイズを固定する方法でした。
画面の大きさに合わせて、動画のサイズも自動で変更するようにCSSを追加しました。


Youtube動画の埋め込み

Youtubeの動画を埋め込む時は、通常埋め込みたい動画の画面から共有用のコードを取得します。

YouTube_umekomicode
このまま貼り付けても動画再生可能ですが、貼り付けサイズが固定されていますので、スマホやブラウザのサイズによっては、レイアウトがはみ出てしまいます。

スマホなどさまざまな画面サイズに合わせて、自動でリサイズしてくれるCSSを設定しました。


CSSコードを追加する

Seesaaブログの管理画面から、[デザイン]→[デザイン設定]→[自分の使っているCSS名]をクリックして編集画面を開きます。

次のコードを追加します。クラス名は、自分で分かりやすいものに変更して使ってください。

/* 動画埋め込み */
.movie-wrap {
  width: 500px;
  max-width: 100%;
}

.movie-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[.movie-wrap]で全体の最大幅を指定しています。最大幅を指定せず、完全可変させたい場合は、削除してください。


記事中の埋め込みコード記述法

記事中に埋め込むコードは、divタグにクラス指定をして使います。

<div class="movie-wrap">
  <div class="movie-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/FlKVzLe-vys" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

このコードで埋め込んだ動画がこちら ↓

PCブラウザでもスマホで見てもリサイズされて綺麗に見れます。

まとめ

え〜設定しては見ましたが、よく考えたら自分のサイトを、まだレスポンシブ化してないので、あまり意味はなかったような気がします^^;

HTMLやCSSの勉強をして、少しずつデザイン変更やテクニック的なことも覚えているので、レスポンシブ化も将来的には実践していきたいですね。

posted by taks at 12:38 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,January 12,2016

ソースコードを分かりやすく表示するSyntaxHighlighter

SyntaxHighlighter_eye

ときどき見かける、ソースコードを見た目もカッコよく、色分けされていて読みやすい表示。
なんとかSeesaaブログにも導入できないか試してみました。

SyntaxHighlighter

Preタグのクラス要素を使って、HTMLやCSS、Javascriptその他の言語を見やすく表示したり、コピーなど再利用をしやすくしてくれるJavascriptライブラリです。

SyntaxHighlighter

自分で編集もできますが、スクリプトファイルとCSSファイルをアップロードして、HTMLに読み込ませるだけで使えるようになります。

SyntaxHighlighterをダウンロード

2011年から更新は止まっていますが、今でも十分使えます。

SyntaxHighlighter - Download

「Click here to download」のリンクをクリックして、zipファイルをダウンロードします。

Seesaaへアップロード

ダウンロードしたSyntaxHighlighterのzipファイルを展開して、必要なファイルをSeesaaブログのファイルマネージャを使ってアップロードします。

zipファイルを展開すると、このような構成になっています。

SyntaxHighlighter_folder
実際に使うのは、[script]フォルダと[styles]フォルダの2つだけです。
[script]フォルダにjavascriptファイル、[styles]フォルダにcssファイルが入っています。

Scriptsフォルダには各言語に対応したJavascriptファイルが収められています。
この中から自分が使用したい言語を選択して、Seesaaブログのサーバへアップロードします。

Syntax_script3
CSS、Javascript、HTMLの3ファイルを選んでアップロードしました。
コアファイルはどの言語使う時でも必要となるファイルです。必ずアップロードします。

stylesフォルダには、実際に表示されるスタイルテーマがCSSで収められています。
テーマの適用方法は、2つの方法あります。

Syntax_styles(1)
1つ目は、コアファイルと呼ばれる表示デザインを指定しているファイルと、カラーなどの装飾部分を担当しているテーマファイルの2つをセットで使う方法です。
色指定などを自分で変更したい場合は、こちらのほうが分かりやすいかもしれません。

Syntax_styles(2)
2つ目は、コアとテーマが一緒になっているファイルです。
1つのファイルだけで使用可能ですので、読み込みが1つで済みます。
[shCoreDefault.css]を選びました。

Seesaaブログのファイルマネージャからアップロードします。

Syntax_upload
わかりやすくするために、アップロードオプションから新たに「syntax」というディレクトリを追加してアップロードしました。

SyntaxHighlighterの読み込み

アップロードしたファイルをSeesaaブログのHTMLを編集して読み込みます。

Seesaaブログの[デザイン]→[HTML]から使用しているHTMLを開き、<head>タグ内に下記のように読み込みタグを記載します。

<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>

アップロードした各ファイルのURLは、ファイルマネージャーから取得できます。
自サイトのものに置き換えてください。

Syntax_seesaa_url1
ファイルマネージャーの各ファイル名をクリックすると、ファイル編集画面が開きます。
ファイルのURLが記載されていますので、コピー貼付けして使うと確実です。

SyntaxHighlighterの使用法

SyntaxHighlighterは、<pre>タグのクラス要素で、各ソースを指定します。
今回アップロードしたHTML、CSS、Javascriptは、下記のように記述します。

<pre class="brush:html"> ホニャララ </pre>  HTMLソースを表示する
<pre class="brush:css"> ホニャララ </pre>   CSSソースを表示する
<pre class="brush:js"> ホニャララ </pre>    JavaScriptソースを表示する

そしてとても重要な事があります。

Syntax_kaigyou
Seesaaブログの記事投稿時は、「改行HTMLタグ変換」の項目を改行を<br/>タグに変換しないにチェックを入れてください。

大事なのでもう一度言います。改行を<br/>タグに変換しないでください。

改行されなくなります。

オプションの指定

便利なオプションも用意されています。

・指定した行をハイライト表示する

<pre class="brush:html highlight:[2,4]"> ホニャララ </pre>
ソースの変更や挿入などの説明をする時に役立ちます。
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>


・開始行番号の指定

<pre class="brush:html first-line:125"> ホニャララ </pre>
行数がわかっているような場合、行番号を合わせて表示することが出来ます。
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>


・オートリンク解除

<pre class="brush:html auto-links:false"> ホニャララ </pre>
ソース中にURLがある場合、自動的にリンクが貼られます。リンクを解除するオプションです。
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>


・タイトルを表示する

<pre class="brush:html" title="タイトル"> ホニャララ </pre>
表示するソースにタイトルを表示します。
 ホニャララ 

まとめ

デフォルトテーマのCSSを入れただけですが、見た目が一気に変わりました。
数種類のテーマファイルが入っていますので、自分の環境に合わせて選ぶことが出来ます。

デザインを自分でいじることも出来ますので、自作のデザインにすることも可能です。

Javascriptライブラリは、便利ですね。上手く使えば一気に自分のサイトが便利になりますね。

posted by taks at 12:23 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,December 22,2015

コメント記入欄のデザインを変更してみた

Weblog_coment_eye

少しずつではありますが、ブログのデザインを勉強しながら変更しています。
HTMLやCSSを色々といじってみたり、jsなども今までまったく触れたこともありませんが、調べたりしています。
コメント記入欄のデザインを、HTMLとCSSで変更してみました。



シンプルデザインへ


デフォルト状態だとボーダーラインが入っていたり、行間が詰まっていたりと、あまり見栄えが良くありません。


Weblog_coment_org
このデフォルト状態から、今回次の3項目を変更していきます。

  1. タイトルとボックス下のボーダーラインを消す
  2. 各入力ボックス間の間隔を広げる
  3. 「確認する」「書き込む」ボタンのデザインを変更する



    1.タイトルとボックス下のボーダーラインを消す


    Seesaaブログのデザイン設定画面から、CSS編集画面を開きます。


    Weblog_coment_css_border
    クラス「.coments-head」(タイトル部分)と「.coments-body」(入力ボックス部分)の記述の中から、それぞれ[border]に関するコマンドを削除します。


    これでボーダーラインが消えました。



    2.各入力ボックスの間隔を広げる


    HTMLとCSSの両方を編集します。
    Seesaaブログのデザイン設定画面から、「コンテンツ」→「記事」の編集画面を選択し、「コンテンツHTML編集」を開きます。


    coment_kijihtml_kai
    「お名前」「メールアドレス」「ホームページアドレス」の[input]タグ内に、クラス「coms」を追加します。
    [class="coms" ]クラス名はなんでも構いません。CSS内に新規で作成しますので、お好きな名前で登録してください。
    サイズはCSSで指定しますので、[size="50"]を削除します。


    coment_kijihtml_kiri
    コメントの記入欄については、[textarea]タグが使われています。
    このタグは他で使われていないようですので、タグに直接CSSで指定をかけます。



    CSSの編集画面で、新たにセレクタを追加します。coment_css_space
    クラスセレクタの[.coms]とタグセレクタの[textarea]を追加します。


    名前やアドレス入力欄は幅を50%に、コメント入力欄は記事欄の幅いっぱいになるように指定してみました。
    ボックスの間隔は、[margin-bottom]で広げています。



    3.ボタンのデザインを変更する


    デフォルトのボタンは[input]タグの[type="submit"]で生成されたものでしたが、クラスも指定がされていました。


    coment_kijihtml_button
    クラス指定がされてはいますが、肝心のCSSには[input-submit]というセレクタは存在していませんでした。
    おそらくほかのテンプレートでの使用を前提に記載されているのでしょう。


    coment_css_button
    せっかくセレクタが存在しているのですから、使わない手はありません。
    CSS編集画面から、新たにクラスセレクタ[.input-submit]を追加しました。


    ボタンの大きさを指定したくらいで、装飾というほどではないですが、デフォルトのボタンよりはシンプルなデザインで良くなったように思います。



    完成


    内容的には簡単な変更でしたが、見た目は以前に比べてシンプルで遥かに良くなったと思います。


    Weblog_coments
    装飾やアニメーションなど調べていると、高度な技もあって奥が深すぎます。



    まとめ


    たくさんのCSSやjsパーツなどが存在する意味がわかりました。
    作って公開している方々に感謝です。大変勉強になりました。


    ブログデザインの変更を考えていましたが、テンプレートを変えるだけではつまらないし、気に入ったテンプレートも見つからないので、なんとか自分で出来ないか勉強中です。
    ただ調べれば調べるほど、あれもやりたいこれもやりたいが増えていき、調べ物が増えるばかりでなかなか進みません。


    一気に変えるのは素人には時間がかかりすぎるので、少しずつ実践しながら変更していこうと思います。



    Seesaaブログ
    価格: 無料(記事公開時)
    サイズ: 10.3 MB
    カテゴリ: ソーシャルネットワーキング, ライフスタイル



    するぷろ - 迅速かつ簡単にブログを投稿できるエディタ
    価格: ¥600(記事公開時)
    サイズ: 7.1 MB
    カテゴリ: ソーシャルネットワーキング, 仕事効率化



    するぷろーら - ブログ投稿をアシストするためのブラウザアプリ
    価格: ¥600(記事公開時)
    サイズ: 6.4 MB
    カテゴリ: 仕事効率化, ユーティリティ



    SLPRO X (WordPress & Movable Type対応)
    価格: ¥1,600(記事公開時)
    サイズ: 17.8 MB
    カテゴリ: ソーシャルネットワーキング, 仕事効率化



    初めてのHTML5&CSS3 魅せる!Webデザイン
    価格: 無料(記事公開時)
    サイズ: 5.8 MB
    カテゴリ: 教育





posted by taks at 12:53 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,December 08,2015

SeesaaブログにjQueryを導入する方法

jQuery_eye

カスタマイズ性に優れていると言われているSeesaaブログですが、htmlとcssだけでは実現できないものもあります。
そこでプログラミングなんて経験がなくまったく出来ませんが、プラグインなど比較的導入が簡単そうなjQueryを使えるようにSeesaaブログ内に設置してみました。



CDN(Content Delivery Network)を使った設置方法


エンドユーザー向けにWEBコンテンツを配信しているネットワーク・サーバのことで、誰でも無料で利用できます。


jQueryの場合は、Google、Microsoft、jQueryが、それぞれCDN配信しています。



URLの中にjQueryのバージョンが入っているので、リンク先は定期的にチェックしておくと、常に最新の状態で使えます。
当然ですが、やはり本家のjQuery CDNが最新バージョンですね。


このリンクをブログを開いた時に読み込まれるように、<head>タグの中に記述します。



<head>タグ内であればどこでも良いようですが、<meta>タグの後あたりが無難なようです。


デメリットとしては、誰でも使えるCDNですので、多数のアクセスが集中した場合、動作が遅くなる可能性があります。そうならないためのネットワーク分散サーバなのでしょうが、使っているインターネットの経路上で影響が出ないとは限りません。


また、jQuery CDNのバージョンが上がったりするので、設置後長期間放置していると旧バージョンのリンク先が使えなくなっていたりするかもしれません。



Seesaaブログのサーバ内に設置する方法


Seesaaブログのファイルアップロードサービスは、画像ファイルだけでなく実行ファイルもアップロードできます。


1.jQuery本体を入手
jQueryのホームページから「jQuery」本体をダウンロードします。


jQuery


jQuery 1.x 系とjQuery 2.x 系の2種類あります。
jQuery 1.x 系は旧バージョンながらブラウザの新旧を問わず、動作させることが出来ます。
jQuery 2.x 系は最新バージョンの機能が盛り込まれていますが、IE8以前の旧ブラウザでは動作できないようです。


ブログのターゲット層に合わせて、選択しましょう。


1.x 系も2.x 系にも、それぞれいくつかファイルが有り、どれをダウンロードするか迷いますが、設置して使うだけなら「production jQuery」で良いようです。
「development jQuery」は、上級開発者向けのようです。



2.jQueryをSeesaaブログへアップロード
ダウンロードした「jquery-x.x.x.min.js」ファイルを、Seesaaブログのファイルマネージャを使ってアップロードします。


jQuery_upload1
Seesaaブログの管理画面から「ファイルマネージャ」を選択します。
[アップロードオプションの表示]を押して、オプション画面を表示させます。


jQuery_upload2

  • タイトル
    「jQuery」と入力しました。実際のファイル名にかかわらず、ここに入力した名称で表示されます。
  • オプション
    画像に関する項目ですが、一応チェックを外しました。
  • ディレクトリ
    「jquery」を新しく追加してアップロードしました。



3.jQueryへのリンクをHTMLに設置
CDN(Content Delivery Network)を使った場合と同じく、<script>タグを使ってHTMLに記述します。


jQuery_link1
ファイルマネージャのファイル一覧から、「jQuery」をクリックすると「ファイル編集」が開きます。
アップロードした「jquery.js」ファイルへのURLが確認できます。


こちらを元に<script>タグを作成します。



ファイルをアップロードするときに、元々のファイル名を「jquery-x.x.x.min.js」から「jquery.js」へ変更しています。


バージョンナンバーが入ったままのファイル名でアップロードしていると、バージョンアップの度にHTMLファイルも修正しないといけなくなるので、「jquery.js」に統一してアップロードするようにします。


注意点として、先にアップロードされている「jquery.js」を削除してから、新しい「jquery.js」をアップロードしないと末尾に勝手に文字列が追加されて別ファイルとして登録されます。


jQuery_html1
管理画面の「デザイン」から「HTML」を選択します。


jQuery_html2
<head>タグ内の<meta>タグのすぐ下に設置してみました。


「保存」して設置完了です。



動作を確認


設置したjQueryの動作確認をします。


こちらのコードを普通に新規記事として投稿してみます。


<script type="text/javascript">

$(function() {

 $("p").click(function(){

  alert("Hello!");

 });

});

</script>

<p>クリックするとダイアログが出るよ!</p>

ブログ画面で文字をクリックすると「Hello!」と書かれたダイアログが表示されれば成功です。


結果は、成功です!


無事ダイアログが表示されました。



まとめ


ダイアログが表示され一応は成功しましたが、若干わけの分からない挙動をしてしまいます。
ダイアログを消そうと「OK」ボタンを押すと、次々と5回ほど連続してダイアログが現れます。


jQueryもjavascriptもほぼ分かっていないので理解に苦しみますが、どこにも5回繰り返すような記述はないはずなんですが・・・


とりあえず設置自体はできて、動作もしています。
jQueryプラグインなど多数存在していて、面白いことが出来るようなので、いろいろと試していこうと思います。










posted by taks at 20:22 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,October 20,2015

SeesaaブログのタイトルタグをSEO対策仕様に変更してみた

Seesaa_html_eye

今まで対して気にしていなかったので、2005年のブログ開設時からSEO対策をほとんどしていないのですが、デザインを変えてみたいなと思うようになり、HTMLやCSSを少しづつ勉強中です。
その一環としてSEO対策にブログのタイトルタグを変更してみました。



HTMLタイトルタグの編集


ブラウザで表示した時、タブの部分に表示されるブログタイトルの表示を変更する方法です。


こちらのサイトを参考にさせていただきました。


Seesaaブログのタイトルを各ページで変更するカスタマイズ | WEB備忘録(仮)


そのまま使わせていただいた感じです。



今回調べていくうちに、SeesaaブログのデフォルトHTML自体も、若干違ってきているようだということに気が付きました。
よく考えてみると、2005年のものとは違っていて当たり前ですよね。


タイトルタグの変更とともに、デフォルトで変わっていると思われる部分も、一部変えてみました。



・HTML編集画面を開く
Seesaa_html
[デザイン]→[PC]→[HTML]と選択します。
「HTMLの追加」ボタンで編集用のHTMLを作っておくと、失敗した時にもすぐにデフォルトに戻せます。



HTMLの編集
Seesaa_html_title (1)
2005年から使い続けていた、GoogleAnalyticsを追加しただけのHTML。


Seesaa_html_title (2)
この部分を追加しました。


タイトルタグの部分は、参考にさせていただいたサイトの記事通り、TOPページ、記事ページ、カテゴリページでそれぞれ表示の方法が変わります。


16、17、19行目は、現在のデフォルトHTMLに入っている記述らしいので、現在の仕様に準じるように追加してみました。
SEO的に必要かどうかは、よく分かっていません。



まとめ


2005年からですので、もう10年経過していますが、その間デザイン的な変更はほとんどしていません。
開設した当初は、ネットブックなど解像度もまだまだ低い、小型の端末も主流でした。


その間デザインの流行もいろいろ変わっていき、現在ではスマホやタブレットも主眼においたデザインが主流となっています。



そろそろデザインの大幅変更を、検討しないといけませんね。











Seesaaブログ
価格: 無料(記事公開時)
サイズ: 10.3 MB
カテゴリ: ソーシャルネットワーキング, ライフスタイル



するぷろ for iOS (WordPress & Movable Type & ライブドアブログ & FC2ブログ対応)
価格: ¥600(記事公開時)
サイズ: 6.8 MB
カテゴリ: ソーシャルネットワーキング, 仕事効率化



posted by taks at 14:50 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,August 04,2015

Seesaaブログの見出しタグを適正タグへ変更した

Seesaa_eye

Seesaaブログ利用者には、今更なくらい有名な話ですが、そう言えば手付かずだったため変更しました。



記事タイトルと日付のタグ


Seesaaブログは、デフォルト状態だと何故か、記事タイトルがh3タグ、日付がh2タグになっています。
これではSEO的に不利になるということで、日付をdivタグに、記事タイトルをh2タグに変更することは、お約束になっているようです。


実際に変更するには、HTML、CSSの変更が必要です。


Seesaa_CSS (2)
Seesaaブログのマイページから、[デザイン]>[PC] 各項目を変更していきます。


数カ所変更が必要ですが、特に難しいことはないと思います。



CSSの変更


Seesaa_CSS (1)
[デザイン設定]を開きます。
自分が選択しているデザインタイトルをクリックして編集画面を開きます。


Seesaa_CSS (3)
h2、h3を変更します。


Seesaa_CSS (4)

  • h2 → .date(コンマを忘れずに)
  • h3 → h2
  • H3 a → H2 a

それぞれ変更します。



記事コンテンツのHTMLを変更


Seesaa_contents (1)
[コンテンツ]を開きます。


Seesaa_contents (2)
[記事]コンテンツのをクリック。


Seesaa_contents (3)
[コンテンツHTML編集]をクリックして編集画面を開きます。


Seesaa_contents (4)
h2、h3の部分を変更します。


Seesaa_contents (5)

  • h2 → div
  • h3 → h2
へ変更します。


Seesaa_contents (6)
最後に[保存]を押します。



HTMLの変更


Seesaa_HTML (1)
[HTML]を開きます。


Seesaa_HTML (2)
こちらもh2、h3の部分を変更します。


Seesaa_HTML (3)

  • h2 → div
  • h3 → h2
へ変更します。



まとめ


特に難しいということはないですが、あちらこちら変更しないといけないので、ちょっと手間ですね。


変更後も見た目的には何も変わらないので、いまいち設定変更したという実感も湧きませんが、検索される時に表示されやすくなるようです。


せっかく書いた記事ですから、見てもらって何かの参考にしていただけると嬉しいものですよね。







Seesaaブログ
価格: 無料(記事公開時)
サイズ: 10.1 MB
カテゴリ: ソーシャルネットワーキング, ライフスタイル



するぷろ for iOS (WordPress & Movable Type & ライブドアブログ & FC2ブログエディタ)
価格: ¥600(記事公開時)
サイズ: 3.6 MB
カテゴリ: ソーシャルネットワーキング, 仕事効率化




posted by taks at 13:23 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,June 16,2015

ロゴジェネレーターでサイトロゴを作ってみた

Design Rails_eye

シンプルなデザインが好きなので、サイト名もそのまま手打ちのフォント表示していました。
ロゴジェネレーターを使ってみたくて、作ってみました。



Design Rails


ロゴジェネレーターを探してみると、いくつも見つかります。
今回はこちらのサイトで紹介されていた”Design Rails”を使ってみました。


無料でロゴ作成をするなら 好みのイメージをクリックで作れてしまう「Design Rails」がお手軽


どのサイトもキーワードを入力して、ロゴを作成して行きます。
サイトによって、クリックだけで作成できたり、細かく位置調整がをしたり、シンボルマークを選べたりと特徴が違います。


Google検索 - ロゴジェネレーター


今回初めてロゴジェネレーターを使うので、シンプルにクリックのみで作成できるサイトを選んでみました。



作ってみた


Logo Design - Design Rails


Design Rails
トップ画面 - 「CREATE MY LOGO」を押してスタートです。


Design Rails1_This or That1
シンプルなデザイン好きなので「SIMPLE」を選択。


Design Rails2_This or That2
モダンなデザインで


Design Rails3_This or That3
静かに


Design Rails4_This or That4
繊細な感じで


Design Rails5_The Company
タイトルとサブタイトル?的なキーワードを入力。


Design Rails6_Select Industry6
ジャンルを選択。複数選択可能ですので、自分のサイトに関連しそうなものを選択します。
選択内容によってデザインが変わるので、結果によって選択内容を変えていきます。


Design Rails7_Word Cloud7
イメージというか雰囲気を選びます。こちらも複数選択可能。


Design Rails8_Free Tagging8
選択項目のないこだわりポイントを入力します。
使いたい色だったり、シンボルのイメージだったり、レイアウトの形など。

「SEE LOGO CONCEPTS」を押すと作成が始まります。


Design Rails9_Logo Options1
ロゴサンプルが5個提案されます。
ロゴを使った名刺や書類、Tシャツなどの活用イメージも表示されます。


Design Rails10_Logo Options2
提案デザインの編集ができます。
フォント、色、シンボルマークなど内容によって変更できるポイントが違ってきます。


Design Rails11_Logo Options
フォントの変更。6種類表示されます。


Design Rails12_Logo Options
色の変更です。こちらは「Have a different color in mind?」を押すと、更に細かく変更ができます。


Design Rails13_Logo Options
ロゴデザインが決定したら、「DOWNLOAD ROGO」ボタンを押します。
eメールアドレスを入力すると、メールでダウンロードページへのリンクが送られてきます。


Design Rails15_Download Logo1
メールのリンクをクリックすると、ダウンロードページが開きますので、「DOWNLOAD MY LOGO」ボタンでダウンロードします。


Design Rails16_Download Logo2
ダウンロードファイルはZIP形式で圧縮されています。
中身は4つのファイルが入っています。



2種類作ってみました。


small


small


面白いことに、途中の設定は何も変えず、サブタイトル部分だけを変えただけで、提案されるデザインがまったく変わってきます。
文字列の長さが変わると、デザイン的にも変わってしまうということなんでしょうか。



まとめ


デザイン的なセンスが全く無いので、こういうジェネレーターを使っても良し悪しがよく分かりません。
結局は好みの問題だと思うのですが、なかなか気に入ったデザインにならず、何度も設定を変えて作りなおしてしまいます。


結果、シンプルが一番とか言いながら、代わり映えのしないものばかりを量産してしまいます。
・・・ということは、この代わり映えしないデザインが、一番のお気に入りということなのでしょうか?



Logo Design - Design Rails



InstaLogo ロゴクリエーター - ロゴ、チラシ、パンフレット、ポスター、招待状デザインのグラフィックスメーカー
価格: ¥600(記事公開時)
サイズ: 33.7 MB
カテゴリ: ビジネス, 仕事効率化



Logo Design Studio Lite
価格: ¥360(記事公開時)
サイズ: 38.5 MB
カテゴリ: グラフィック&デザイン, 仕事効率化







posted by taks at 13:13 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,April 15,2014

blockquoteの装飾をCSSでデザインしてみた


photo credit: World of Good via photopin cc

前回、HTMLやCSSコードを記述する時に使う装飾を、divタグの.codeクラスに指定してデザインしてみました。


そこで今回は、意外と利用頻度が高いblockquoteタグの装飾を変更したいと思います。


どんなデザインにするか


blockquoteタグは、Seesaaブログのテンプレート”シンプルホワイト”のCSS内に設定がありました。


blockquote_before

デフォルト設定のままだと、この様な表示です。


blockquote {
margin:10px;
border-left:solid 1px #333;
padding:5px;
color:#333;
width:auto;
}

CSSの記述では、この様になっています。


このままでは、イマイチなのでかっこ良いデザインに装飾してみます。


こちらのサイトを参考にさせていただきました。


blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえすとさいと
line-height:0em; ...


引用タグ(blockquote)をCSSのみで装飾する | 賢威カスタマイズ研究所


デザインも紹介されていた引用符付きのものにしました。


ときどき見かけるデザインで、シンプルでありながら引用部分が分かりやすく、以前から気になっていました。


CSSコードの作成


完成したものが、こちらです。


Hello World!
とか何とか言ってみたり・・・

コードは以下の通り。


/* エントリー本文 */
.text{
font-size: 90%;
color: #333S;
padding-left:10px;
padding-top:5px;
padding-right:15px;
margin-top:5px;
line-height:160%;
}

.text a{
color:#006A6A;
}

blockquote{
background-color: #CBE1D0;
padding: 1.5em 1em 1.5em;
position: relative;
border: 3px solid #DAE1CB;
}                  ・・・ここを変更


blockquote:before{
content: "“";
font-size: 300%;
line-height: 1em;
font-family: "MS Pゴシック",sans-serif;
color: #74A681;
position: absolute;
left: 0;
top: 0;
}

blockquote:after{
content: "”";
font-size: 300%;
line-height: 0em;
font-family: "MS Pゴシック",sans-serif;
color: #74A681;
position: absolute;
right: 0;
bottom: 0;              ・・・ここを追加
}

色とサイズの調整をしただけで、基本的にはそのまま使わせて頂いています。



”em”という単位が初めてで、最初は意味が分からなかったのですが、”font-size”で指定した大きさを”1em”として計算するモノのようです。


em単位 - 値の単位と記述方法 - スタイルシート入門


こちらのサイトで詳しく解説されていました。



まとめ


勉強不足でイマイチ狙い通りにはなっていません。
margin指定してないのに何故か左右が開いていたり、サイズの調整も何故かpx指定では上手くいかなかったりします。


原因がわからないから、解決法にたどり着けないでいます。


既存のテンプレートを変更しているから、原因究明にはテンプレートに記述してある内容が全て理解できるようにならないといけないんでしょうね・・・


思い通りのデザインにしたいなら、もっと勉強して自作ののCSSで運用できるくらいにならないと。


posted by taks at 18:33 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,April 08,2014

コード用div装飾をcssに追加してみた


photo credit: Aleksandar Urošević via photopin cc

記事の中にHTMLやCSSなど、コードを記述することがたまにあります。
blockquoteタグなどを使うことが多かったのですが、コード用の装飾をCSSに作ってみました。



どんな装飾にするか


以前、AppHTMLのテンプレートを紹介する記事でコードを紹介する時に、div styleタグを使って装飾していました。


WEBLOG: AppHtmlブックマークレットメーカーのテンプレートを公開します


今回はこちらで使った装飾を、CSSに落とし込んでみようと思います。



CSSコードの作成


前回の記事で使用したHTMLコードは、以下の通りです。


<div style="border-style: solid ; border-width: 1px; padding: 20px; position: relative; top:0px; left:20px; border-color: #97A395; background-color: #EAEDE6; width: 460px; border-radius: 10px;"><code>&lt;span class=&quot;appIcon&quot;&gt;&lt;a href=&quot;${url}&quot; target=&quot;itunes_store&quot;&gt;&lt;img class=&quot;appIconImg&quot; height=&quot;100&quot; src=&quot;${icon100url}&quot; style=&quot;border-radius:22px;-moz-border-radius:22px;-webkit-border-radius:22px;margin: 0px 15px 1px 5px;border:none;padding:0px;float:left;&quot;&gt;&lt;/a&gt;&lt;/span&gt;&lt;span class=&quot;appName&quot;&gt;&lt;strong&gt;&lt;a href=&quot;${url}&quot; target=&quot;itunes_store&quot;&gt;${name}&lt;/a&gt;&lt;/strong&gt;&lt;/span&gt;&lt;span class=&quot;badgeS&quot; style=&quot;display:inline-block; margin:4px&quot;&gt;${badgeS}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;appPrice&quot;&gt;価格: ${price}(記事公開時)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;appSize&quot;&gt;サイズ: ${appsize}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;appCategory&quot;&gt;カテゴリ: ${category}&lt;/span&gt;&lt;br&gt;&lt;br style=&quot;clear:both;&quot;&gt;</code></div>

赤字で表示した箇所が装飾付きのdivタグです。
この内容をCSSに落とし込みdivタグのclass指定で、いつでも表示されるようにします。



CSSDesk - Online CSS Sandbox
CSSのシミュレーター?


CSS記述のチェックには、CSSDeckというWebサービスを使いました。

左カラム上段にHTML、下段にCSSを記述するとリアルタイムで右カラムに結果が表示されます。
CSS記述のテストするとき便利です。



完成したのが、以下の通り。


blockquote {
margin:10px;
border-left:solid 1px #333;
padding:5px;
color:#333;
width:auto;
}

.code {
border-style: solid ;
border-width: 1px;
padding: 20px;
position: relative;
border-color: #97A395;
background-color: #EAEDE6;
width: 440px;
border-radius: 10px      ・・・ここを追加
}


/* 投稿者 */
.posted{
font-size: 80%;
color: #333;
text-align: right;
margin-top:10px;
margin-bottom:5px;
padding:3px 3px 3px 5px;
}


見ての通り、dev styleタグ内の記述を、.codeクラスで指定しただけです。


改めて見てみると横幅に問題があったので、positionとwidthの指定で調整しています。



まとめ


今回の変更でHTMLやCSSのことを色々調べてみて、デザイン変更の奥深さを知りました。
自分好みに作り上げていくか、既存のテンプレートで済ますか、考え方は人それぞれだとは思いますが、あーでもないこーでもないと言いながら悩んで最後に納得の行くものができれば、やはりうれしいものです。


気になった問題点をその都度改善していけば、自分のスキルとして身につくし、ブログ自体も良くなるし愛着が湧いてきますね。


posted by taks at 15:45 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Monday,February 17,2014

久しぶりにブログデザインをちょっとだけ調整した

IMG_0902

普段GoogleChromeを使っていて、自分のブログを他のブラウザで見たことがなかった。IEで見てみたら崩れまくってたため、調整してみた。



CSSで調整


[デザイン]→[デザイン設定]→[使っているCSS名](私の場合はシンプルホワイト両サイドバー)をクリック。内容を編集していきます。

※内容を全て選択、テキストエディタ等にコピペしてバックアップをおすすめします。もしおかしくなっても元に戻せます。


右カラムが落ちていたため、全体の幅を広げます。


・containerの幅を変更

body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
color: #333;
background:#FFF;
margin:0px;
padding:0px;
}
#container{
width:920px; ・・・・940に変更
text-align:left;
margin:0px auto 0px auto; /* Mozilla系ブラウザでセンタリング */
}

h1 {
margin:0px;
padding-top:0px;
font-weight:bolder;
font-size:30px;
padding: 5px;
}



記事部分の横幅と余白を調整します。


・contentのmargin調整

/* アーカイブページの前後リンク */
.navi {
color:#006A6A;
font-size:90%;
text-align:center;
margin-bottom:10px;
width:100%;
}

/* 記事全体 */
#content {
margin-bottom:30px;
margin-top:25px;
margin-left:10px;
margin-right:10px; ・・・・ここを追加
float:left;
width:500px;・・・・500pxに変更
}

/* エントリー全体 */
.blog {
width:100%;
}



右カラムと中央カラムの間を調整します。


・links(右カラム)のmargin-leftを調整

/* 左カラム */
#links-left {
font-weight:normal;
width:20%;
float:left;
margin-left: 5px;
margin-right: 10px;
margin-top:25px;
}

/* 右カラム */
#links {
font-weight:normal;
width:20%;
float:left;
margin-left: 10px; ・・・・20pxに変更
margin-right: 5px;
margin-top:25px;
}

/* カレンダー */
#calendar {
width:100%;
}


まとめ


とりあえずのヤッツケ感がひどいですが、なんとかカラム落ちはしなくなりました。


もっとHTMLとCSSの勉強をして思い通りのデザインで作れるようになりたいとは思いますが、根本的にデザインのセンスが無い・・・


センスを磨くほうが難しいような気が・・・



posted by taks at 16:09 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Sunday,January 16,2011

タイトル下の点線を消してみた

WS000026.JPG
以前からとても気になっていたタイトル下の点線を使った区切り線。消したいと思い色々と探していましたがなかなか分からなかったのですが、やっと消し方がわかったので消してみた。

「デザイン」→「デザイン一覧」→「テンプレート名」と進んで以下の箇所を変更
H3 a{
color:#333;
text-decoration: none;
}

#banner{
font-family:arial, Helvetica;
color:#69C;
margin:0px;
width:100%;
padding:10px;
'border-bottom:2px dotted #666; ・・・・ここをコメントアウト
}

.description {
color:#333;
margin-left: 20px;
font-size:16px;
font-family:sans-serif;
font-weight:bold;
line-height:140%;
}


「'」を付けただけ・・・。こんなことで消せたなんて・・・^^;

いかがでしょう。こっちのほうが少しはすっきりして見えると思うのですが。
posted by taks at 13:21 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,November 16,2010

ブログパーツ「人気記事ランキング」

おもしろそうなブログパーツを見つけたので、さっそく設置してみました。

「人気記事ランキング」というブログパーツで、自分のブログURLを登録して発行されたHTMLを貼るだけで簡単に設置できます。しかも無料^^(←ここ重要)
所謂アクセス解析をして、人気記事のタイトルを自動でランキング表示してくれるというものらしい。

人気記事ランキング @ Blog Parts@IDEA-UNLIMITED

主要なブログサイトでの設置の仕方も、こちらのページで開設されています。

人気ページが一目でわかると結構便利かも!?
posted by taks at 19:28 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Sunday,April 11,2010

文字の色変更

見やすくするために全体の文字色を少し変えてみたくなりました。

いつものようにスタイルシートをいじります。

まずはbodyタグにcolorを指定。

body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
color: #333;   ・・・・ここを追加
background:#FFF;
margin:0px;
padding:0px;
}

これで記事本文が変わりました。


次に記事タイトル
h3 {
padding: 0px;
font-size:14px;
font-weight:bold;
font-family:arial, Helvetica;
}

H3 a{
color:#000; ・・・・ここを#333;に変更
text-decoration: none;
}



記事の日付
.date{
clear:left;
color:#000; ・・・・ここを#333;に変更
margin-top:0px;
margin-bottom:0px;
padding:5px;
}



記事中のリンク
.text a{
color:#00F; ・・・・ここを#006A6A;に変更
}
blockquote {
margin:10px;
border-left:solid 1px #000; ・・・・ここを#333;に変更
padding:5px;
color:#000; ・・・・ここを#333;に変更
width:auto;
}



「posted by」の後のリンク
.posted{
font-size: 80%;
color: #333;
text-align: right;
margin-top:10px;
margin-bottom:5px;
padding:3px 3px 3px 5px;
}
.posted a{
color:#00F; ・・・・ここを#006A6A;に変更
text-decoration: underline;
}



その他、「color:#000;」を全て「#333;」に、「#00F;」を「#006A6A;」に変更してみました。
少しは変わったと思いますが、一部元のままで変わっていません。どこで変えればいいのか??もう少し調べてみます。
posted by taks at 12:07 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Thursday,April 01,2010

サイドバーのバランス調整

ブログに写真を貼ったりしているうちに、少しサイト全体のバランスが気になってしまったので、スタイルシート上でサイドバーの調整してみました。

「デザイン」→「デザイン一覧」→「シンプルホワイト」(各自のテンプレート名で)と進んで以下の箇所を変更


#links-left {
font-weight:normal;
width:19%; ・・・・ここを20%に変更
float:left;
margin-left: 5px;
margin-right: 15px; ・・・・ここを10pxに変更
margin-top:25px;
}
#links {
font-weight:normal;
width:19%; ・・・・ここを20%に変更
float:left;
margin-left: 15px; ・・・・ここを10pxに変更
margin-right: 5px;
margin-top:25px;
}


正直、殆ど変わったようには見えないな・・・。ま、ただの自己満足。
posted by taks at 23:59 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Monday,March 22,2010

文字が消える

以前から気づいていたのですが、投稿記事中の一部単語が表示されないという現象が起きていました。

何故かわからず、長らく悩んでいましたが、ようやく理由が判明しました。それは・・・

私がFirefoxを使っていたからです。

投稿記事の文中にキーワードマッチ広告が入ると、そのリンク部分が見えなくなっていたのでした。IEでは正常にリンク状態で表示されていました。

環境や設定によっては違うかと思いますが、自分の環境で自分のブログが正常に見えないのはやはり気持ち悪いので、一応対策してみました。

対策は、「キーワードマッチ広告を無効にする」です。

マイ・ブログのページで

  「設定」 → 「広告設定」 → 「広告の種類」 

の部分を「記事下広告のみ」に変更。

WS000004.JPG

ホントは広告を非表示にしたいけど、やり方がよく解らないのです^^;

posted by taks at 11:59 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ