アメブロ「最近の画像つき記事を表示」について
ふと記事の下部分を見てみると何やらこんな物が表示されていました。
以前まで「同じテーマの最新記事」が表示されていた場所です。
前々からしれっとCSSにこういったものが仕込まれているとは噂になっていましたが、おそらく直近のメンテナンスでアメブロの仕様が変更されたようです。
特にどうでもいい箇所ではありますが、以前の形に戻したいと思います。
【管理画面】
↓
【ブログを書く】
↓
【アメブロの基本設定】
↓
【記事内の表示設定】
面倒な時は、【管理画面】→【クイックリンク】→【アメブロの基本設定】
ここで
・最近の画像つき記事を表示する
・同じテーマの最新記事を表示する
・表示しない
この３つから選べるようです。
とりあえずこのブログに関しては「同じテーマの最新記事を表示する」を選択。
最後に【保存】ボタンを忘れずに。
うちは使っていないのでわかりませんが、LinkWithinなどで関連記事を画像表示させているブログはどんな感じになっているのでしょうか？
仕様変更の告知ぐらいは欲しい気もしますね。
アメブロカスタマイズ目次
ブログを始めてしばらくすると、テンプレートのままのデザインでは退屈してしまい、段々オリジナルな形にカスタムしたくなってきます。
自分が気に入ったデザインの方がブログを続けるモチベーションも続くのではないでしょうか。ましてや、少しぐらいはビジネスに活かそうというような下心があれば尚更。
そこで独学ながら様々な方のブログやサイトを見つつ、自分なりに弄くってみました。
アメブロスキンのカスタムについて
アメブロは少し特殊な仕様の為、
カスタマイズするにはCSSを編集する必要があります。
昔は全ての種類のスキンでCSSの編集が可能だったようですが、2011年現在では【カスタム可能】と表記されているスキンでなければ編集することが出来なくなっています。
CSSを編集する方法
「ブログを書く」→「デザインの変更」→「CSSの編集」へと進むと、その先にCSSの編集画面があります。
基本的には編集ページにある「現在使用中のブログデザインCSS」欄の一番下へどんどん「追記」→「保存」していくだけ。
ただし、CSSの編集は少し間違えるとブログのデザインが大きく壊れてしまう事もある為、必ず編集前のバックアップを取ってから行うようにしましょう。
以下に当ブログで行ったカスタマイズ（失敗込み）を覚え書きとして記録しておきます。
暫定的な目次となりますので、更に変更や修正をした場合には随時書き加えていきたいと思います。
※旧カスタム可能デザインに対応したカスタマイズになっています。新しいCSS編集用デザインで使えるものもありますが、確認はしていません。
アメブロカスタマイズ暫定目次
・アメブロプロフィール画像を中央配置
・「このブログの読者になる（チェック）」を少し変更
・ブログパーツの整理で表示スピードアップ
・アメブロのブログ説明文を改行
・アメブロにzenbackを導入して記事下に表示させる方法
・アメブロ記事内のリンクを下線・青色・強調①
・アメブロ記事内のリンクが下線・青色・強調②
・アメブロ記事内の外部リンクに画像を自動表示
・アメブロ記事内の外部リンクに画像を自動表示の修正
・アメブロ記事内の画像に自動的に枠を付ける方法
・アメブロ右カラム落ちの対処法
・HeartRails Badgeでアメブロにプロフィールバッジ設置
・アメブロ記事内に枠線・囲み枠を表示する方法
・アメブロでページの上へ戻るボタンを固定表示
・記事タイトルのフォントサイズを変更
・アメブロの記事下【フッター】に記事編集ボタン設置
・個別記事にのみZenbackを表示する方法
・preタグとcssで本文中にソースコードをきれいに表示
・ブログ内検索を見た目はそのままでグーグル検索へ変更
・ブログ内の引用文をCSSで装飾
・cssで記事内にシンプルな囲み枠を設置
自分が気に入ったデザインの方がブログを続けるモチベーションも続くのではないでしょうか。ましてや、少しぐらいはビジネスに活かそうというような下心があれば尚更。
そこで独学ながら様々な方のブログやサイトを見つつ、自分なりに弄くってみました。
アメブロスキンのカスタムについて
アメブロは少し特殊な仕様の為、
カスタマイズするにはCSSを編集する必要があります。
昔は全ての種類のスキンでCSSの編集が可能だったようですが、2011年現在では【カスタム可能】と表記されているスキンでなければ編集することが出来なくなっています。
CSSを編集する方法
「ブログを書く」→「デザインの変更」→「CSSの編集」へと進むと、その先にCSSの編集画面があります。
基本的には編集ページにある「現在使用中のブログデザインCSS」欄の一番下へどんどん「追記」→「保存」していくだけ。
ただし、CSSの編集は少し間違えるとブログのデザインが大きく壊れてしまう事もある為、必ず編集前のバックアップを取ってから行うようにしましょう。
以下に当ブログで行ったカスタマイズ（失敗込み）を覚え書きとして記録しておきます。
暫定的な目次となりますので、更に変更や修正をした場合には随時書き加えていきたいと思います。
※旧カスタム可能デザインに対応したカスタマイズになっています。新しいCSS編集用デザインで使えるものもありますが、確認はしていません。
アメブロカスタマイズ暫定目次
・アメブロプロフィール画像を中央配置
・「このブログの読者になる（チェック）」を少し変更
・ブログパーツの整理で表示スピードアップ
・アメブロのブログ説明文を改行
・アメブロにzenbackを導入して記事下に表示させる方法
・アメブロ記事内のリンクを下線・青色・強調①
・アメブロ記事内のリンクが下線・青色・強調②
・アメブロ記事内の外部リンクに画像を自動表示
・アメブロ記事内の外部リンクに画像を自動表示の修正
・アメブロ記事内の画像に自動的に枠を付ける方法
・アメブロ右カラム落ちの対処法
・HeartRails Badgeでアメブロにプロフィールバッジ設置
・アメブロ記事内に枠線・囲み枠を表示する方法
・アメブロでページの上へ戻るボタンを固定表示
・記事タイトルのフォントサイズを変更
・アメブロの記事下【フッター】に記事編集ボタン設置
・個別記事にのみZenbackを表示する方法
・preタグとcssで本文中にソースコードをきれいに表示
・ブログ内検索を見た目はそのままでグーグル検索へ変更
・ブログ内の引用文をCSSで装飾
・cssで記事内にシンプルな囲み枠を設置
ブログのプラグイン整理で表示スピードアップ
ブログの表示速度を上げる意味でブログパーツその他を変更。
主にフリープラグインのダイエット。
サイトの表示速度を速めるには、httpリクエストを減らす方がいいと聞いたので、外部から読み込んでいるプラグインの見直しをしました。
以前に設置したHeartrails Badgeのプロフィールバッチを外し、記事下に配置していたSNS共有ボタンも一旦削除。
このブログは何故かはてブされている記事もあるので、SNSボタンについてはどうしたものかと迷いましたが、別になくてもブックマークされるときはされるだろうということでアメブロ純正のボタン以外は削除です。
本来ブログ表示のスピードアップを求めるのなら、サイドバーの広告をなくすのが一番です。ビジネスブログとして考えれば広告を外すのは是非ともするべきだと思います。
しかしこのブログの場合は日記メモ的な内容が大半であり、そこまでビジネス目的なブログとは考えていないので広告についてはそのまま。
あとはアメブロでlightboxが使用出来るブログパーツが消えていたので、代替えのjQoeryをあちこち調べて調達。
ちなみにblogparts.bizはもう復活しないのでしょうか？
と思ってみたら復活していた様子。
でもせっかくなので自分のサーバーを使用したプラグインでしばらく行ってみようかなと思います。
色々調整を終えてみると、明らかに表示スピードが速くなりました。
いい感じです。
無料相談会、市役所にて
さて昨日の事ですが、恒例の松原市役所での行政書士無料相談会へ参加してきました。
この相談会もすっかり根付いてきたようで、ここのところは毎回募集人数の上限まで相談者の応募があります。
相談者がちらほらとしか来られなかった昔を思い出すと、やはり継続するというのはすごい事だなと考えさせられました。
相談内容としては相続がほとんどですが、土地がらみ・資産がらみの話も結構あります。
大阪といえどもこちら南大阪はそこまで大都会ではなく（平たく言えば結構田舎）、農地に絡むような相談もいくつか。
今回はほぼ全ての相談が相続関係でしたが、地域によってはこういった無料相談でも色々と特色があるものですね。
ここのところ大阪は急激に暑くなり、ちょっと外に出るのも気合いが必要です。
そんな中、お集まりいただいた各先生方・また相談に来ていただいた方々もお疲れさまでした。
次の予定は７月です。
ブログ内の引用文をCSSで装飾
前回の記事の続きという訳ではありませんが、ブログを書いていると他のサイトや書籍などからの引用を載せる事も多くなります。
そこで、引用部分をCSSでわかりやすく装飾してみました。
CSSに追記したのは以下の記述
使用した画像はネット上で配布されていたこちら
これでHTMLを以下のように記述すると
↓↓このように表示されます。
二人の囚人が鉄格子の窓から外を眺めた。
一人は泥を見た。
一人は星を見た。
通常、引用を明確にするのであれば<blockquote>タグ（もしくは<q>タグ）を使わないといけないようです。
しかしこのブログでは、過去に少し意味を間違えて<blockquote>タグを使用していた時期があり、いまさら装飾を変更してしまうと色々面倒な事になります。
そこでこのように、「引用」を意味するタグではありませんが、なんとなくそれっぽく見えるような装飾を施して凌いでみることにしました。
そこで、引用部分をCSSでわかりやすく装飾してみました。
CSSに追記したのは以下の記述
.waku2{
margin:12px;
padding:12px;
background: url(画像のURL) no-repeat scroll top left;
border:outset 2px #d8d1f0;
}使用した画像はネット上で配布されていたこちら
これでHTMLを以下のように記述すると
<div class="waku2">
二人の囚人が鉄格子の窓から外を眺めた。<br />一人は泥を見た。<br />一人は星を見た。<div align="right">～フレデリック・ラングブリッジ～</div>
</div>↓↓このように表示されます。
二人の囚人が鉄格子の窓から外を眺めた。
一人は泥を見た。
一人は星を見た。
～フレデリック・ラングブリッジ～
通常、引用を明確にするのであれば<blockquote>タグ（もしくは<q>タグ）を使わないといけないようです。
しかしこのブログでは、過去に少し意味を間違えて<blockquote>タグを使用していた時期があり、いまさら装飾を変更してしまうと色々面倒な事になります。
そこでこのように、「引用」を意味するタグではありませんが、なんとなくそれっぽく見えるような装飾を施して凌いでみることにしました。
・アメブロカスタマイズ目次