jinkoさんＳＬ日記

１年近く前に、「ブログに目次コーナを表示してみました＾＾」という記事を書いてたんですが、
先日、れもんさんのブログでも紹介してもらいました。
→ここ

この目次のリストでも使ってる「アルバム表示」ってご存知ですか？

そういえば、アルバムの写真って、なんかちゃんと表示されないんですよねー
１年ぶりに眺めてて、ふとそんな不満を思い出しました。


デフォルトだと、こんな感じに見えます。
画像が切れちゃってますよね？



なんで左半分しか表示されないのでしょうか？

改善要望にあげようと思ったのですが、テンプレートをいじったら
ちゃんと表示できるようになりましたー

* * *

結論からいうと、こんな感じにできます。
画像が切れてないでしょう？



修正するためには、ソラマメのテンプレートを変更します。

ご注意
※ＣＳＳがよくわからないという場合は、やめといたほうが無難かもです。
※今回の記事は、現状のソラマメの機能に基づくものですので、将来システムが変更された場合はレイアウトがおかしくなる可能性がありますのでご注意ください。
※いつでも元にもどせるようかならずバックアップをとって作業してください。
※直接編集より、エディターにコピーしてから修正→登録の方が安全かと思います。


では、修正方法です。



■ソラマメのテンプレート修正画面を開く
管理画面の左。「ブログの設定」の中に「テンプレート」という項目がありますので、これをクリックしてください。
（ログイン状態ならここから直接ジャンプできます）


次に表の中の「カスタマイズ」のリンクをクリックします。（下図）




以上の操作で出てくるのが、テンプレートの修正画面です。





■スタイルシートを修正する

テンプレート画面の中の「スタイルシート」のところは、ブログの中のデザインをコントロールする重要な役目なんですが、今回はここを修正しますので、できるだけバックアップをとって作業してください。

修正そのものは、実は簡単で・・・以下のおまじないを最後に追加するだけです。

/* ALBUM Hack 1 */
.album_frame {width:206px !important;}
.album_image {width:200px !important;}
.album_title {width:200px !important;}

追加したら、ページの末尾にある「登録」ボタンを押してください。
なお、このコードでは、極端な横長の画像の場合、下半分がきれることがあります。

（詳細説明）
アルバムページが使用しているイメージファイルは、横の長さを200pxに固定して縮小した画像です。
横幅固定なので、縦の長さは任意サイズになります。
一方、アルバムページのイメージ表示領域の方は、横が100pxの幅で、はみ出す部分を非表示にしているため、結果として右側がきれてるようです。
何故こんな仕様なのか不思議です。

というわけで、この表示部分をオーバライドすればいいのですが、ここも単純にいきません。

ソラマメのシステムが吐き出してるＨＴＭＬは、結構おもろいことになっていて、アルバムを作るためのＣＳＳは、表の直前に定義されています。このため、テンプレートファイルの中のスタイルシートで単純にオーバライドさせることができないため、!importantを使用しました。

■別のバリエーション

上記の修正だと、横200pxの画像になります。
バリエーションで、こんなのも作ってみました。


オリジナル同様横が100pxの画像です。
前の例とは、別のアプローチですが、このように修正するためのコードは以下のとおりです。

/* ALBUM Hack 2 */
.album_image {height:65px !important; width:100px !important;}
.album_image img {height:auto !important;width:100px !important;}

さきほどとと同様、スタイルシートの最後に追加してください。
なお、このコードでは、縦長の画像の場合、下半分がきれることがあります。

（詳細説明）
２種類のコードを紹介しましたが、どちらもイメージの外側の領域（クラス名album_image）が固定サイズになります。
中身のイメージの縮小方法で縦がきれるか、横がきれるかが変わります。
ワタシのブログの場合は、写真サイズがほとんど固定サイズなので、このアプローチで問題ないのですが、すべて表示させるためには、もう少し工夫が必要です。

・・・て感じでカスタマイズできました。
ＣＳＳわかる方は、是非おためしください＾＾
実験は、自分のテンプレートでしかやってないので、
もし別のテンプレートでうまく行かない場合は、ご相談くださいね＾＾



■おまけ

あいかわらず、フラダンスして遊んでます。



空中にスタジオつくらなくても、りっちゃんのとこ行ったら、いい撮影ポイントありましたー
すっかり忘れてました＾＾
（天国の南の島なんですが、ＴＭが取れないので探してみてください。
一応ここです→Tasmania dAlliez/130/60/22）


れもんさんのオメガ・ポイントでは、さすがに水着が似合わないので・・・
スカートを縄にしてみたんですが・・・



ちょっとだけサイバーな感じになってない？
なってるよねっ！（←ひさびさ強制です＾＾）

サイバーな感じがステキなＳＩＭ。オメガ・ポイントは、こちらです。
Omega Point→Hikoboshi/71/153/33
詳細は、れもんさんの新しいブログをチェック！です→ここ