南大阪・松原市で働く行政書士のブログ -83ページ目

アメブロのブログ説明文を改行

アメブロでヘッダー画像の中に表示されるブログタイトルの下にある説明文は

通常
「ブログを書く」→「アメブロの設定」→「アメブロの基本設定」→「ブログの表示設定」→「説明」
にて記入します。


しかしこの編集欄にて改行した場合、表示される時に反映されません。
その為説明文が長くなった時などは、ヘッダー画像中のかぶって欲しくない画像に文字が乗っかってしまい、見栄えが悪くなることがあります。


そこでCSSに少し追記して説明文の改行が出来るようにしてみました。
ネット上を検索して試したところなんとなく出来たので、以下覚え書きです。


■CSSに追記した内容
/* ■説明文を改行■ */
#header h2{
white-space:pre;
}



■追記する場所
ようするにヘッダー内の説明文を制御している箇所を探せばいい訳ですからエディタあたりにCSSをコピペして「#header h2」という記述を検索。


見つかった要素の下に上記の内容をコピペ。
多分、使っているスキンによって「#header h2」辺りの記述は違っていると思います。

うちのブログではこんな感じに
#header h2{
color:#FFFFFF;
width: 500px;
font-size:0.90em;
text-align:left;
margin-top:-20px;
margin-left:20px;
padding-left:20px;
}

/* ■説明文を改行■ */
#header h2{
white-space:pre;
}

これで「保存」を押せば完了。
あとは説明文を編集する「ブログの表示設定」に戻り、文章中で改行すればそれが反映されます。おそらく3行ぐらいはいけるはず。


もっと自由にするのであれば、説明文やタイトルをCSSにより画面外に吹っ飛ばし、直接文字をヘッダー画像に埋め込む方法もあります。
(芸能人ブログとかそんな感じですね)

しかし、今のブログタイトルも説明文もヘッダー画像も自分の方向性と共に変更していきたいので、そのたびに画像に文字を埋め込んでいたり付け替えたりしていたらかなり面倒です。

ということで、当面はこのお手軽な状態のままお茶を濁していきたいと思います。

アメブロカスタマイズ目次

ブログパーツの整理で表示スピードアップ

ただでさえ表示に時間のかかるアメブロが、時々尋常じゃないぐらいに重くなる事があります。自分が人のブログを読んでいるときでも、表示されるのに時間がかかり過ぎて読む気がなくなってしまうこともしばしば。


このブログも若干重いので(ブラウザにもよりますが)少し改善してみることにしました。

表示に時間のかかる原因を探ってみると、どうもフリープラグインにいれているブログパーツに大半の原因があようです。

本当は右上に出てくる広告が一番の原因のような気もしますが(かなり読み込みに時間がかかっているので)、無料でブログサービスを使用している以上、あれをどうこうする訳にはいきません。

CSSで下の方に表示させている方もおられるようですが、微妙にグレーっぽくて危険なのでその選択肢も無し。
必要であれば月約1000円ほどを払って除去するしかないでしょう。


ということで残った方法としてブログパーツの整理。
まずはグーグルアナリティクス以外のいらないアクセス解析を削除。


それから表示に時間がかかるどころか、場合によっては表示すらきちんとされない「人気記事ランキング」のブログパーツも削除。
  ↓↓これですね

人気記事ランキング


ちなみになんでこのブログパーツはこんなに表示されにくいのかと思ってIDEA-UNLIMITEDさんのサイトに行ってみるとこんな案内がありました。


※クリックで拡大します
お知らせ


仕方がないようですが、将来的に改善されればまた使用する日がくるかもしれません。しかし現状は使用し難いですね。


変わって新しく加えたブログパーツがACR-WEBのページランキング

どうやらこちらの方が動きが軽いとの評判だったので入れ替えてみました。


あとはツイッター関係のブログパーツも一旦削除。

ただこちらは出来ればなんらかの形で残しておきたいですね。外部ファイル化して読み込ませるようにすれば、ブログ自体の表示スピードは少しましになるのでしょうか?

近いうちに試してみようと思います。


これで少しは表示スピードがあがったように思いますがどうでしょうか。
Chrome系ブラウザだとかなりスピードアップしていますが、メインのSleipnirでは相変わらず表示はもっさり。FirefoxはそもそもJavaを切っているので参考にならず。


難しいところです。


アメブロカスタマイズ目次


「このブログの読者になる(チェック)」を少し変更

特に意味はありませんが、ブログ記事の上部にある「このブログの読者になる(チェック)」の表示を少し変更してみました。


カスタマイズされているブログを見て回ってると、この部分を画像に置き換えさらにマウスオーバーで見た目が変更されるようにしている方もいます。


そこまでしてみようかとも思ったのですが、さすがに画像を用意するのが手間だったので、今回は背景色をいじっただけです。

参考にさせていただいたのはこちらの記事

当ブログの場合CSSに以下のように追記しています。
/* ■このブログの読者になる(チェック)■ */
.readerMainLink{
background-color:#DDDDDD;/* 背景色 */
}

.readerMainLink a{
color:blue;
font-weight:bold;
font-size:100%;
text-decoration:underline;
}


先々バナーやその他諸々入れ替えていくことになるので、全体の色合いのバランスを考え、変更はしていく事になると思います。


まあ、しばらくの間はこれでいってみましょう。

アメブロカスタマイズ目次


アメブロプロフィール画像を中央配置

アメブロを色々といじっていてどうもプロフィール画像が左へ寄ってしまうのが満足出来ず修正に挑戦。


ネット上を検索してなんとなくやり方がわかったので、
以下の記述をCSSの最後に追加。
/* ■プロフィール画像を中央寄せ■ */
#profile li.image{
text-align:center;
}


修正されたような・・微妙にまだ左寄りのような・・。
画像そのものの形も少し変更した方がいいかもしれません。


アメブロカスタマイズ目次


サーバードメインキングへWordPressをインストール2


前回の記事ドメインキングへWordPressをインストールする為の下準備が終了しましたので、続いてファイルのアップロードです。


①WordPress最新版の入手

WordPress


こちらより最新版をダウンロード

ダウンロード

どこでもいいので適当に解凍しておきます。



②FTPの設定

使用するFTPソフトはALFTP
  ※ALFTPについての記事はこちら


FTP設定画面

FTP画面



サイト名 → 適当に(半角英数字で)
FTPアドレス→「ftp.ドメイン名(××××.comなど)」
ユーザーID →物理ホスティングの設定の際に設定した「FTPログイン」
パスワード →上記と同じ時に設定した「パスワード」


ちなみにFFFTPを使う場合
サイト名 = ホストの設定名
FTPアドレス=ホスト名
ユーザーID=ユーザ名
パスワード=パスワード/パスフレーズ
上記のように読みかえればOK。


アップロードする先は「httpdocs」フォルダです。

なお、このhttpdocsフォルダの中にはいくつかファイルが入っています。

FTPフォルダ



詳しくはヘルプかガイドを見ていただければと思いますが
これらのフォルダやファイルは、ドメインキングで用意しているデフォルトの画像を表示させる為のものなので、特に必要無ければ削除しても構わないそうです。


ということでhttpdocs内のファイルとフォルダを全削除。
中を空っぽにしておきます。



③wp-config.phpファイルの作成


WordPressのファイル郡の中から

「wp-config-sample.php」ファイルを探し、内容を修正。


変更するのは次の色を変更した3ヶ所


・define('DB_NAME', 'database_name_here');
・define('DB_USER', 'username_here');
・define('DB_PASSWORD', 'password_here');


それぞれ上から順にデータベースを作成した際の
・データベース名
・データベースユーザ名
・データベースパスワード

に変更していきます。


修正が終われば、ファイル名を「wp-config.php」へ変更して保存。



④ファイルのアップロード


続いてWordPressの設定ファイルのアップロードです。
オンラインマニュアルでは

WordPressフォルダ毎アップロードするやり方が説明されていますが、今回はフォルダの中身をhttpdocsの中へアップします。



⑤パーミッションの設定


アップロードが全て終われば、wp-contentフォルダとそれ以下のフォルダのパーミッションを「707」に変更します。

wp-contentフォルダ


              ↓↓


権限設定


              ↓↓


権限変更


⑥インストールの実行

全部終われば以下のURLにアクセス

http://(ドメイン名)/wp-admin/install.php



するといつものおなじみの画面が出てきますので、あとは必要事項を入力してインストール完了です。


※クリックで拡大します

インストール画面