最近無料ブログから、こちらの自作ブログに引っ越したわけですが、
覚え書き代わりに、どのように作成したのか、簡単に記録しましょう(^。^)
【その１】 サーバーにワードプレスをインストールする。
現在、コアサーバーというレンタルサーバーを使用していますので、サーバーのコントロールパネルからワードプレスを簡単にインストールできます。
ステップ１ データベースを作成します。
コアサーバーのコントロールパネルの「データベース」から設定します。
ステップ２ 任意のフォルダにワードプレスをインストールします。
コントロールパネルのCGIインストールから設定します。
ステップ３ ワードプレスをインストールしフォルダにブラウザでアクセスし、表示される画面にそって設定します。
【その２】 記事をアップする。
デザインをカスタマイズしていく際にイメージしやすいように、記事を入れておくとよいです。他のブログから引っ越してくる場合の方法は、下記の記事を参照。
https://blog.p56.biz/2017/09/25/post-581/
【その３】 ワードプレステーマをインストールする。
ワードプレスの初期のままのデザインですと、いまいちですので、デザインを変更します。一からプログラムして作ることも可能ですが、時間とデザイン力がかかりますので、ここはテンプレートを使用します。今回も非常に優れた無料テンプレートの「Luxeritas」（ルクセリタス）を使用します。
ステップ１ ルクセルタスの配布サイトにアクセスし、ダウンロードします。
ステップ２
ワードプレスの「外観」→「テーマ」の部分から、「新規追加」を押し、「テーマのアップロード」を押して、ダウンロードしたテーマファイルをZIPファイルのままダウンロードします。するとワードプレスのほうで解凍してくれて、インストールできます。
このテーマの注意点としては、親テーマと子テーマと二つ入れて、子テーマの方を有効化する、ということです。親テーマは「luxeritas-232.zip」のように末尾にsがついていてサイズが大きいです。子テーマは「luxech-200.zip」のように末尾にchがついています。
【その４】 テンプレートをブログ用に設定・カスタマイズする。
今回はブログを作るので、メニューやその他いろいろな部分を見えなくしたり、幅を調整したりします。
この点ルクセルタスはとても優れていて、多くの変更をプログラムを書かずに簡単にできるのです。
だいたい、以下のような感じに変更しました。
サイトの題名と説明とサイトアイコンの設定。
サイドバーの幅は200pxにしました。サイドバー表示のカレンダーのマス目が横長よりも真四角に近いほうが、見た目がいいと思うからです。
コメントなどは面倒くさいので受け付けない設定にします。
フォントはメイリオが好きなのでメイリオの含まれているフォントファミリーにします。
文字サイズはこんなものでしょうか。高齢化が進んでますから少し大きめに。
ヘッダーの背景を設定し中央にします。
ちなみに、ヘッダー背景はイラストレーターで適当に作りました。
サイトのアイコン画像もイラストレーターで作成しました。
ブログですからパンくずリストは消してしまいます。
同様にヘッダーのメニューや帯状部分もいらないので消します。
サイト名をマウスで触れるとふわっとするアニメ効果は面白いので有効にします。
ルクセルタスの設定項目にない変更については、子テーマのスタイルCSSにプログラムをちょちょっと記述します。
/* 以下、好みに応じて子テーマ用のスタイルをお書きください。
* ( Below here, please write down your own styles for the child theme. )
*/
/*画像に影を付けます。*/
img[class*="wp-image-"],
img[class*="attachment-"] {
box-shadow:2px 2px 10px 0px #505c74;
}
img{
box-shadow:2px 2px 10px 0px #505c74;
margin-bottom: 1.5em;
}
iframe{
box-shadow:2px 2px 10px 0px #505c74;
}
/*記事の枠に影を付けます。*/
contents{
box-shadow:2px 2px 10px 0px #505c74;
}
.copy {
font-size: 16px; font-size: 1.6rem;
line-height: 1.0;
margin: 20px 0 0 0;
text-align: center;
}
#footer .copy {
font-size: 14px; font-size: 1.4rem;
line-height: 1.0;
margin: 20px 0 0 0;
text-align: center;
}
#primary {
border: 1px solid transparent;
}
/*記事の背景をノート風にします。*/
#section, .grid {
box-shadow:10px 10px 10px -9px #505c74;
position: relative;
background-color: #f7f7f7;
background-image:
linear-gradient(rgba(200,200,200,0.5) .1em, transparent .1em);
background-size: 100% 2em;
padding-left: 3em;
line-height:1.7em;}
}
.grid {
padding: 25px 48px;
background: #fff;
border: 1px solid #ddd;
}
/*サイドバーにも影をつけます。*/
div[id*="side-"], #col3 {
padding: 20px 0;
border: 1px solid #ddd;
background: ##f7f7f7;
box-shadow:10px 10px 10px -9px #505c74;
}
/*記事の題名の背景を黒くし文字を白くします*/
.entry-title, #front-page-title {
background: #111111;
color: #ffffff;
border: none;
margin: 0 0 0 0;
border-radius: 6px;
padding: 5px;
}
/*記事の作成日など部分の背景を黒くし文字を白くし、上に移動させて題名と一体化させます。*/
.meta, .post .meta {
margin: 0;
font-size: 14px; font-size: 1.4rem;
background: #111111;
color: #fff;
border-top: 0px dotted #111;
margin-bottom: 2em;
line-height: 1.6;
vertical-align: middle;
padding: 5px;
margin-top: -1em;
border-radius: 6px;
}
.meta a {
color: #fff;
}
/*スマホで見たとき用に記事の左のスペースを狭くします。*/
@media (min-width: 750px){
#section, .grid {
padding-left: 8em;
}}これでだいたい出来上がりました!(^^)!
テンプレートを使うと、誰でも、とても簡単に、自作ブログやサイトを作成できてしまいます。