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;}に変更しないと コピーしていく ここからはコピーしていく。基本的にそのままコピーだが、見た目をトレースするために最小限編集している。以下が編集したり、独自で追加した部分。最終…

続きを読む

もっと見る