FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告

見やすいブログのためにできる簡単なこと

[ちょっと追記しました]
[11/4タイトル変更 旧:模様替えするチョコパイ]

部屋じゃなくてブログですが。
今回は雑記みたいなもんです。

ブログのレイアウトを少し変更しました。

・カテゴリ少し細分化
・RSSリンクの表示
・一部プラグインを右側へ
・画像の大きさを横幅をはみ出さないように自動調整


カテゴリ細分化、といっても強化と装備&ステータスを追加してメイプルの子カテゴリにしただけですが
今まで細分化してなかったせいで一つの記事の中で
強化だのボスだの日常だのが混在していて、ちょっとわかりづらいなと思ったので。

過去記事は明確に分類できなければメイプル(旧チョコパイ日記)のままにしてあります。


本当はプラグイン右側にうつせるのは知ってたんですけどね。3カラムだし。
ですが大きい画像がある記事だとはみ出してしまい見栄えが非常に悪かったので、
全て左側においていました。

で、日曜大工とは違いますが時間があったので、調べてみたところ
スタイルシートの任意の位置に

img {
max-width: 100%;
height: auto;
}


これを入れるだけでよかったみたいです。
噛み砕いていうと画像の大きさの最大値を記事の横幅の100%にする。という命令文です。
heightは縦幅指定で、autoにしておけば勝手に大きさを調整してくれるので
画像が変に引き伸ばされたりすることがなくなります。


あとはトップ画像を少し弄ってみようと思ってます。

タイトルと被るので見づらいことになりそうで断念してたんですが。
なんとか工夫してみよう。


[10/26 19時頃追記]

ブログタイトルを画像に変更しランダム表示機能を仕込んでみました。
画像加工はこちらのサイトを使わせてもらいました。
手元のSSをさらっと見直して5枚チョイス。
選んでから気付きましたがバルサン多いですね。

難点はjavaを使ってランダム表示してるのでちょっとだけ読み込みがかかるようになったことですかね。
まぁ、ここらへんは仕方ないでしょう。


画像ランダム表示の方法ですが、

<h1>
<script language="JavaScript">
var images = new Array();

images[0] = "画像URL";
images[1] = "";
images[2] = "";
images[3] = "";
images[4] = "";

var rnd = Math.floor((Math.random() * 100)) % images.length;
document.write('<a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src=',images[rnd],' border="0"></a>');
</script>
</h1>

テンプレートのHTML編集を開いてタイトルのところを丸々これに置き換えて、
画像URLのところに任意の画像URLを仕込むだけです。
<h1></h1>のタグが使われている場所は大抵のテンプレートでここしかないのでCtrl+Fですぐ見つかります。
imagesの欄を増やしていくことで100種類まで設定できるそうです。
例えば画像3種類を準備して、5枚、4枚、1枚と言う感じで配分して10種類作れば
特定の画像が出てくる確率を疑似的に操作することもできる…かもしれない。レア画像作ってみるのも面白いかもしれないですね。
画像のアップロードは通常のブログに載せるときの手順で大丈夫です。

ブログタイトルを画像に置き換えているだけなので、ブログ紹介文が画像に追いやられて下がってしまいますから
環境設定からブログ紹介文を白紙にするのを忘れないようにしましょう

たったこれだけのことを調べるのに

3時間以上かけました。


以上です。
関連記事
スポンサーサイト
category
お知らせ

Comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。