SLPRO Xで画像を挿入したら、左寄せになったのでCSSでセンタリングしたぞ!

SLPRO X野郎の部長ナビ(@nabi_1080)です

10月、ありがとうございました。疲労困憊で寝ます。来月もよろしくねー!
10月、ありがとうございました。疲労困憊で寝ます。来月もよろしくねー!
MacBook Pro 15インチ出すのも厳しいくらい疲れました。iPhone 6s Plusで、SLPRO Xで打っております 今日...

この記事、SLPRO XでiPhone 6s Plusで更新しました

で、アップ後にiPad Air 2から見てみたら、何と画像が左寄せに・・・

調べても見つからず途方に暮れていましたが、解決方法らしき物を見つけたので紹介します

imgのclassを調べる

まず、写真には、imgのclassという物が指定されているようで、それを元に、色々と場所とか特殊効果を付けていくんですが、SLPRO XバージョンのCSSカスタマイズを発見して、ウマく行きましたので報告です!

IMG_2676

これ見ると分かりますが、昨日、記事を更新した時は当然わかりませんでしたが、色々調べていくと、この「class」をもとに、CSSを追加して効果を加えるようです。

SLPRO Xで更新した時の、画像については、このように、classが「slproImg」という感じで設定されるようです。

コレさえわかればセンタリングできます

WordPressの管理画面から、CSSをいじる

次に、WordPressの管理画面に行って、CSSを追記します

参考にしたのはここ

画像をセンタリング(中央揃え)するCSS2つ | web sign*
コンテンツ内の画像を横幅に対してセンタリング(中央揃え)する場合、text-align: center;やmargin: 0 auto;が使われます。それぞれ指定する場所が違ったりして、少しややこしいところがあるので、備忘録として使い方をまとめておきます。 imgタグをブロック要素にしてセンタリングする imgタグ...

こちらのサイトにあるコードをちょっと変えまして、SLPRO Xバージョンにしてみました。WordPressの管理画面から「外観」「テーマの編集」と進んで、「style.css」の最後にコレを入れてください

 .slproImg { display: block; margin-left: auto; margin-right: auto; }

コレで行きます

これやると、SLPRO Xでアップした画像がちゃんとセンタリングされるようになります。やってみてください。

実は、今、ハロウィンイベントの主催企業、ECTechnologyから、40歳の誕生日のプレゼントをいただけることになりまして、今日届きます

それを使って、iPhone 6s Plus使って、SLPRO Xでガシガシブログ更新出来ないもんかと考えておりました。

まだどうなるかわかりませんが、タグとかかなり使えるようなので、良い感じでイケるかもしれません。

スポンサーリンク

モブログ(モバイルでブログ更新)に向く記事、向かない記事

モブログに向いている記事。向かない記事。 | 和洋風KAI
「みなさん、モブログしてますかー?」 どうも、iOSブログエディタ「SLPRO X」開発者のするぷ( @isloop )です。 最近思うのですが、ツールは使い分けが大事だと思っています。 例えば、歩いて3分のところに車を使う必要はありませんし、100km先のところにい...

するぷさんも「モブログに向いている記事、向かない記事」とハッキリ分けていますので、師匠のgori.meさんは、オールMacでの更新というポリシーをお持ちですが、するぷさんはSLPRO XでiPhone 6s Plusから更新、あかめ女子のWEBメモのあかめさんもモブログ推進派です

難しいところですけど、ちょっと色々試したいと思います。プロブロガーではなく私のような素人ブロガーの意見も、皆さんの参考にはなると思いますので、よろしければ後の検証記事もご覧下さい

SLPRO Xでモブログ!iPhoneからWordPressを更新する方法!
SLPRO Xでモブログ!iPhoneからWordPressを更新する方法!
SLPRO X野郎の部長ナビ(@nabi_1080)だぜ! iPhone 6s Plusからのブログ更新はハッキリ言って現実的では無いと思...

SLPRO Xの使い方をまとめたこちらもヨロシク!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索