ものすごく気になりながら見てみぬ振りをしてきた「Wordpress」をひょんなことから勉強し始め今は寝る間を惜しんでぞっこん状態です。
草野球チームのブログをさくらで掲載していたのですがシーサーがグーグルさんからキックを喰らってしまい検索にヒットしないという事態を受けてからこれではいかんと悩んだところ、Wordpressが一番SEO的にもよろしいという判断となり、取り組んでいます。
始めは少し戸惑いましたがやはり人気ソフトという事でググれば大概の事がヒットしますし、結構動画説明も多くて、頭痛はしますが勉強できる環境は揃っています。
一番肝となるのは、初めのテーマ選びです。
カスタムするにも、これが基礎となるので結構悩みましたが、「Travelify」という僕の望むものが全て詰め込まれているテーマを発見し適応。
その後はさくらの記事をエキスポートしプラグインでWordpressにインストール。
さくらの時と同じで、画像はリンクされているだけなのでココは手間ですが、画像を全てWordpressにアップロードしなおして貼り付けていきます。
ココで問題だったのは、記事によってはさくらのブログのhtmlがインポートデータにごみみたいに残っていてそれが適用されて、行間とかが結構無茶苦茶になる記事がところどころにあり、これは困りました。
250個の記事を修正しなおして、ふーーッと一息ついてからはむくむくっといつもの悪い癖が出て自分好みのカスタマイズが始まります。
いやーーーーー、
大変でした・・・・・・・。
記事背景や、背景の上にある背景の変更などもう２日間ＣＳＳとにらめっこです。
結局はあっていたのに画像の配置の記述が独特でこれに気づくまでに偉い時間かかりました・・・。
おかげで、ある程度自分好みのサイトになってので一安心ですが、疲れました・・・・・。
しかし、大変でしたが、ろくにHTMLも分かっていない人間がそこそこいじれて、そこそこ自分のイメージを表現できるというこのツールは完成度が高いですね。
プラグインも豊富ですしテーマも豊富で、切り替えが簡単なので今回作ったのは、横に置いておいて新しいのを作製し、春はこれ、夏はこれ、何て感じにテーマを変えれば、見る側も楽しいかなって感じですね。
で、最後に覚書。ーーーーーーーーーーーーー
記事の文章部分の背景は
.entry-content {
padding: 1.5% 2.5%;
display: block;
overflow: hidden;
background-image: url(‘画像のＵＲＬ’) !important;
}
それ以外の背景の手前の背景は
.wrapper {
max-width: 1018px;
margin: 0 auto;
background-image: url(‘画像のＵＲＬ’) !important;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
画像配置がhtmlとは違い
!important;
をつけなくてはいけない。
記事関係の背景を変えたいときは
/* =Content
———————————————–*/
これよりしたのブロックに上記画像配置の記述を入れて探る。
ただ、入れすぎるともとのと干渉し
よく見ないと、背景の手前の背景の画像が変わってしまっているときがある。
記事下のカテゴリーなどが載っている場所の背景変更
.entry-meta-bar {
border-top: 1px solid #eaeaea;
border-top: rgba(0,0,0,.035) 1px solid;
border-bottom: 1px solid #eaeaea;
border-bottom: rgba(0,0,0,.035) 1px solid;
padding: 7px 5px;
clear: both;
background-image: url(‘http://carps.biz/blog/wp-content/uploads/2015/12/back_b2.jpg’) !important;
}
記事タイトルの背景変更
.entry-title,.entry-title a {
color: #1b1e1f;
letter-spacing: -1px;
font-size: 32px;
text-shadow: 0 1px 0 #fff;
padding-top: 10px;
display: block;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}