Seesaaブログで全文表示をやめて「続きを読む」を追加するカスタマイズ

Seesaaブログに追記を使わず「続きを読む」を設置 http://blog.kantan-life.com/article/read_more.html このページに倣って記事ページ以外での全文表示をやめて、「続きを読む」リンクを入れるようHTMLを変更しました。 前提としてSeesaaブログには記事投稿ページには本文と追記とに分けて書けるようになっています。書き出しを本文に書いて、追記にその後を書けば、トップページなどで記事全文が長々と表示されることはありません。ですが、私はSeesaaブログを使い始めたときからずっと、ひとつの記事を書くのに分けて書くのは気持ち悪いと思い、全て文章は本文側に書いています。そういう私みたいなわがままな人にとって便利なカスタマイズです。 記事ページ以外のトップページや過去ログページでも記事の全文が表示されるのは、別に望んだわけではなく結果的にそうなってしまっていただけで、変えたいとは思っていました。トップページなどでは記事タイトルと書き出しが少し見えるくらいのほうが一覧性が高くて、少ないスクロールで多くの記事が見れてサイトとして使いやすいですから。 実際に行う変更は簡単なもので数行の変更で済みます。このブログに適用する際に少しカスタマイズしました。 記事コンテンツのHTMLを編集する。elseの下のこの辺りの部分を変更します。 <div class="text">&l…

続きを読む

Seesaaブログ公式のfavicon設定機能を使う

先日Seesaaブログの機能としてfavicon設定ができるようになりました。 【Seesaaブログ】ファビコン設定機能をリリースしました - Seesaaからのお知らせ http://info.seesaa.net/article/444619943.html お知らせで設定の仕方も書いてあります。 以前はSeesaaブログでfaviconを設定するには、アイコンファイルを作って、htmlのheadに自分で記述しないと使えませんでした。このブログでもかなり前にやっています(faviconをつくってみた これが1回目、その後画像を変更している)が、それでfaviconが設定できるのはPC版のみでスマートフォン表示では設定されていない状態でした。今回公式の機能として追加されて、faviconを設定すればPC、スマートフォンともに表示されるようになりました。 ということで、公式の機能を使って設定します。 以前faviconを作ったときの元画像として200×200pxの画像ファイルを作っていたので、それをそのまま使うことにします。 favicon用の画像だったのですべての領域を選択して使います。切り抜いて使うようになっているので画像は正方形でなくてもいいみたいです。 完了です。 PCで見ても今までと変わらず表示されていますし、iPhoneで見ても追加されていました。iPhoneの場合faviconはPCほど見る機会はないですが、ブックマークに…

続きを読む

Seesaaブログの過去ログの選択方法を変更

ブログのデザインを変更する記事です。当ブログはseesaaブログにて書いております。 ブログを見てくれた人がこのブログの過去の記事を読んでみようと思ったときに使うメニューのお話です。 他にもいくつか小さな部分の変更をまとめて書いてしまいます。 過去ログのメニューを変更 初期状態であれば何年何月といった月別でアーカイブページへのリンクがただ羅列表示されていました。このブログではその後一時期羅列されたリストを、ある程度の高さを指定し残りはスクロールする形で見えるようにするoverscroll-yを利用して、過去ログのリストが長くなりすぎないよう表示していました。 現在のメニュー それも少ししてやめて、seesaaブログのカスタマイズで定番?(調べるといくつものブログで見ました)のプルダウンで選択するメニューをこのブログでも取り入れました。使わないときは小さくまとまって表示領域を多く使わないし、開きたいときは選択するだけでいい。何年かそれを使ってきましたが変えることにしました。 すごく不満があるわけではないですが、もう飽きてきたし何か変えようと思い立ち変更することにしました。小さな不満はあって、プルダウンメニューのUIはブラウザの標準スタイルによって表示され、使うブラウザによって変わってしまうのとデザインが事務的にも見えたりする。 ちなみにこれはFirefoxで見たとき。 開くと 選択するとそのページに移動します。 見た目以外にも不満…

続きを読む

最近のブログデザイン等の変更点(2016春)

最近行ったブログデザインの変更をいくつかまとめて書いておく。前に書いた記事は2014年。この時の記事では随時追記していくつもりだったけど、すぐに更新しなくなっちゃった。HTMLやCSSの中身まで書き出すのがハードル高かったのかなとか、ブログデザインの変更は変更自体でエネルギー使って別で書き起こすエネルギーは出ないよねとか、デザイン変更は実は細かくちょくちょくやってて全部出したらかなりの量になってしまうんだよなとか、反省点は多い。 気分が乗ったときにやる。これで。こう言っておけば後に反省することもないでしょう。 今回は2016年頭からこの4月くらいまでに行った当ブログの変更を書き出します。Seesaaの機能追加に伴う変更も多い。 Seesaaの関連記事表示機能を有効に 【Seesaaブログ】関連記事表示機能をリリースしました - Seesaaからのお知らせ http://info.seesaa.net/article/434573821.html カテゴリの最新記事のリストを記事の末尾に表示する機能がパワーアップした形。最新記事の表示機能は何年か前にオフにしていたけど、関連記事表示機能になったのを機に使うことにした。この機能が出る少し前、関連記事表示用に入れていたzenbackというプラグインを使うのをやめていて、何か入れたいなと思っていたところだったので利用をすぐに決めた。 とりあえずこんな感じで入れたけど、デザインはまだまだなんできれいにしていきたい…

続きを読む

Lightboxのコードをバージョン2.7.1に更新

当ブログでは画像をページ内で拡大できるようLightboxを導入しています。 ページ遷移や別タブを開かずに大きい画像が見れたら便利でしょうということで導入しました。利用できるのはSeesaaブログのPC版表示のみでさらにすべての画像ではないので、どれほどの人が使っているのかはわかりませんが、価値はあるものと思っています。 Lightboxのバージョンが上がっていましたので、更新してみました。特には機能的な変更はないしそのままでも問題はないですが。 2.7.1に更新する方法 以前導入した手順と同じことをやっていきます。公式ページの説明通りです。 公式ページとGitHubのプロジェクトページ Lightbox http://lokeshdhakar.com/projects/lightbox2/ Releases · lokesh/lightbox2 · GitHub https://github.com/lokesh/lightbox2/releases ダウンロードします。 Lightboxを導入: DNAが支配する世界 : http://eltransportador.seesaa.net/article/270075781.html これはこのブログにLightbox(2.5.1)を導入した時の記事で、手順をしっかり書いてます。 この記事の時と今回では違う部分があるので、その部分を書きます。 2.5.1と2.7.1との編集箇所…

続きを読む

はてブのウィジェットをデザインは維持しつつ自前のCSSで表示させる方法

はてブのウィジェットのデザインをCSSで編集していくことを目的として。とりあえず自前のCSS経由でもほぼ同じに。 ここで言うはてブのウィジェットは”ブログの人気記事を貼りつけられる「はてなブックマークウィジェット」”ってやつです。 理由 テーマ「なし」に変える理由 IEでみた時にフォントが気持ち悪いから。ほかにもデザインの自由度が上がるし、important!を使わなくて済む。 デザインを変えない理由 あとで変える。初期状態を保存しておくと後々いいかなとも思って。 はじめよう はてブのウィジェットをテーマ「デフォルト」から「なし」に。(ブログパーツの設定から) 要素の名前が変わるのでCSSをコピーするだけではダメ。 テーマ「デフォルト」のCSS → http://b.hatena.ne.jp/css/widget.css 変更点 .hatena-bookmark-widgetが.hatena-bookmark-widget-nothemeに .hatena-bookmark-widget {margin: 0 auto;padding-top: 6px;}も .hatena-bookmark {margin: 0 auto;padding-top: 6px;}に変更しないと コピーしていく ここからはコピーしていく。基本的にそのままコピーだが、見た目をトレースするために最小限編集している。以下が編集したり、独自で追加した部分。最終…

続きを読む

ブログデザインの変更点(2014)

このページはこのブログのデザイン変更の履歴を記録しておくページになります。随時編集中。 一応2014年の分ということで残していくつもり。 ちょこちょこイジってるんですよ。seesaa独自のものに関して特に情報は過去にやってこられた先輩方のブログから、学んで直したり変えたりっていうことがあるので、できたら私もそういった方から得た分くらいはせめて返せたらなと思って残しておこうと。ブログが日本で広まり始める頃の情報なんかも見ると、感慨深いものがあったり。そういった頃のseesaaブログ同士で情報を共有しあってる様子はなんかいいなあと思う一方で、情報元としてリンクされてるブログが既になくなっていることも稀ではなくあって、ちゃんと残さないと消えてしまうんだよなあと儚さを知ることもありました。ですから自分用に残すという意味も込めて、とりあえず私のブログでも公開して残していきます。 HTMLとCSSの両方についてです。デザイン変更はCSSだけでできることからHTMLよりもCSSの話が多めになると思う。HTMLを変える場合はSeesaaブログにのみ適用できる話になると思う。おそらく。 seesaaにのみ適用できる話は半分も行かないくらいだと思うので、seesaaブログ用のものに関しては「seesaaブログ用」と書くようにする。 趣味のブログなのでブラウザの互換性に関しては大して気を遣っていないので注意されたし。 スマートフォン版の表示は個別記事で書くかな。ほかにも個別記事で…

続きを読む

feedlyのフォローボタンを設置

feedlyを利用開始したということで、フォローボタンをこのブログに設置してみた。 手順は簡単で、指示に従いすぐに作れる。メールアドレスなどの登録は一切不要。rssフィードのアドレスさえわかればいい。 ここから http://www.feedly.com/factory.html 好みのデザインを選び アドレスを記入 done. おしまい。 これを自分のサイトに貼り付ければボタン設置完了! もしよければ、こちらからどうぞ →

続きを読む

Lightboxを導入

画像をオーバーレイで拡大表示させるjavascript『Lightbox』 ページ移動せずに画像を拡大して見れるようになったら便利だなあ、このブログでもそういうのできるのかなーと思い、やってみました。Lightbox系プラグインとしてさまざまな種類のスクリプトがあるようなのですが、ここはとりあえず本家の最新版を使ってみることにしました。 詳細で述べるように幾つか記述を変更する手間がかかりますが、これは類似のスクリプトでも必要な手順です。ここで紹介している方法は各画像のリンクタグに「rel="lightbox"」を挿入する必要があります。以下では自分のサイトのアドレスを例に説明していますので、適宜各々のサイトアドレスに置き換えて読んでください。 概要 zipをdownload アップロードする場所を決める seesaaで使うために必要な改変 HTMLの<head>にコードを挿入 実際に使用 公式サイトからdownload。 現在の最新版であるv2.51を利用します。ダウンロードしたzipは解凍して中身をアップロードします。zipの中にはlightbox2のデモページも含まれているので必要なファイルだけアップロードします。(デモページはhttp://lokeshdhakar.com/projects/lightbox2/と同じです。) アップロードするファイルは、 cssフォルダ内の「lightbox.css」と、 jsフォルダ内の「jquer…

続きを読む

Seesaaブログに+1ボタンを表示させる

Seesaaブログのリニューアル後に利用可能になったGoogleの+1ボタンが設定で有効にしてもなんだか表示されないなーと思っていたので、一度しっかり調べてみた。 設定>ソーシャルボタンにgoogle+ボタンを追加しました。お使い下さい。表示がされない場合は、設定>ブログ設定より「最新の情報に更新」をするかキャッシュをクリアしてください。— Seesaa (@Seesaablog) April 5, 2012 公式Twitterでのアナウンスがあったんで設定で有効にしたんですが、なかなか表示されず数日放っておいてました。が、結局待っても表示されませんでした。検索してみて表示されないって人もいましたが、表示されてるって人もいたり、Twitterのボタンを非表示にしたらすぐ反映されたし、公式twitterに+1ボタンのこと聞く人もいなかったのでseesaa全体の問題ではないっぽいなーと。(それまでに最新の情報に更新やらスーパーリロードもしてます) ブログヘルプの「設定> 詳細設定> ソーシャルボタン: ブログ・ヘルプ」に書かれていた ※ボタンが表示されないなと思ったら.... 1・記事のコンテンツHTMLなどを編集している場合には表示できない場合があります。デフォルトのHTMLにてお使いください。 これみたい。ほんの少しだけいじってたんで一度初期値に戻してから変更も再度入れて保存したら見事ボタンが表示されるようになった。(編集する場所はデザイン>PC>コ…

続きを読む

faviconをつくってみた

まずはアイコンを作る。 favicon.ico Generator(http://www.favicon.cc/favicon)というwebサイトを使い作成した。 16×16のマスに色を埋めていくだけでアイコンを作れるサイト。無料で気軽に利用できる。イメージも表示されているので確認しながら作っていける。 できたらダウンロードし、ダウンロードされるfavicon.icoというファイルをブログにアップする。 私の場合はseesaaブログなのでファイルマネージャにアップロード。 次はブログにコードを追加する。 <link rel="shortcut icon" href="アイコンのURL" /> というコードをヘッダに挿入する。 アイコンのURLはファイルマネージャでファイルのタイトルをクリックし、開いたページの「元ファイル」にアドレスが表示されるのでそれをコピー。 デザイン-HTMLと進みHTML編集する画面で<head>~</head>の間に上のコードを挿入する。 これで保存すればfaviconが表示されているはずだ。 自分専用のアイコンで自分のページだというのがより味わえるようになる。

続きを読む